Fridge magnet poetry

Code Feedback
1

I was going through the new Full Stack HTML/CSS curriculum and I got inspired to finally make a project that I’ve wanted to do for a long time. It’s a kind of fridge magnet poetry app:

https://codepen.io/pkdvalis/pen/KwKReKv

It’s been a great learning experience as I ended up adding lots of features and refactoring many times. It was a lot of breaking up into more and more functions. I can still see more parts that could be broken out into functions. I need a clearScreen() function.

Any advice on refactoring / organization would be appreciated.

I also have many global toggle variables that are just 1 or 0 to keep track of the state of certain things. Is that fine or there’s a better way?

I would like to implement a “save state” feature that’s saved as a hash in the URL. At first I was thinking I could compress an array of co-ordinates into the URL but I think I might need a persistent table stored on the server.

I’d like to get this as bulletproof and presentable as possible and host it on it’s own domain as a portfolio project.

The UI is meant to be minimal and zen-like (best experienced with F11 fullscreen imo). The menu/instructions are introduced gradually but you can press “i” to bring up a menu. I’ve tried to make it work on mobile as well, but it’s not a great experience (but it does work!)

Any comments/advice appreciated, thanks for taking a look!

4 Likes
2

That is really amazing. The colors aren’t attacking my eyes and you really gave it that zen feel as you said.

I’d love to see the ‘s to toggle sound button’ turn into a volume slider, and the buttons to have a “pressed” state that darkens them. Maybe have arrows control the volume outside of the ’ i ’ menu?

This is really good on it’s presentation, just wow. Keep having fun.

1 Like
3

I like it a lot.

I would you to like create a word game that you connect words like your site does, it would be cool

also your color change is awsome :grin:

1 Like
4

Love those ideas, thanks! Adding them to the list.

For the colors I used https://coolors.co/, highly recommend.

1 Like
5

Hi @pkdvalis

Amazing magnet app.
I liked the feature for inserting my own words.

I noticed an undefined error after moving some of the magnets.

image
image423×101 4.32 KB

As the background transitions, some of the magnets can get lost in the background. Two options I can think of are:

  • use magnet colours that do not blend with or are dissimilar to the background
  • add a border to the magnets

Since you are using a lot of colours, consider using a contrast checker tool to make sure the app is accessible.

On smaller viewports the magnets cover the background messages. Maybe display the messages in an area separate to the magnet area.

Happy coding

1 Like
6

It’s wonderful. I like the menu and moving the words on the screen is so satisfying!

1 Like
7

Great, thank you! I’ll investigate that. I have noticed little glitches, sometimes all the magnets appear in a line or sometimes 1 magnet isn’t draggable. Maybe this is related.

I’ll look into the other UI and color points as well. I do leave a little space at the bottom for the instructions, and I don’t mind if it overlaps a little bit. Maybe a smaller text size, or desaturating the bg colors would help

Thank you! :folded_hands:

8

That’s great to hear! That’s exactly what I was going for, a tactile, addictive feeling when moving the blocks

1 Like
9

I think I may have solved the undefined error while doing some refactoring.

If you entered your own text, it would lose track of 1 magnet and never remove it. I fixed that and I’m not able to find this error now. I’m not 100% sure since I did the refactor before looking for this error.

I have a question though:

I’d like to focus the textarea immediately when it appears, but if I do the “e” that’s pressed to bring up the Enter Text screen appears in the textarea and I’m not able to clear it.

  input.focus();
  input.value = '';

This doesn’t seem to work and in fact this:

  input.focus();
  input.value = 'Hello';

Results in “Helloe” in the textbox so the e is being appended after I clear it (or set it to “Hello”).

I can workaround this by not focusing the textarea but I’d prefer if it’s focused. I looked for a way to clear the keyboard buffer but didn’t come up with anything.

Any idea here?

10

I think you need to unmount the event listener after toggling the textarea.

11

Event listeners that are in components get mounted every time the component is called.
like if you add for example:

a useEffect(() => { 
  document.addEventListener('example', effect)
  
}, [callFromUpdate]);

and you don’t:

return () => {
        document.removeEventListener('example', effect);
    }

At the end of that event handler; you get some funny problems.
I had a funny bug like that, so you could see if that is happening. like something along the lines @Teller said.

12

Thanks for the advice @Teller and @amcli8079 but I still was not able to do this.

function captureKeypress(e) {
  document.removeEventListener("keydown", captureKeypress);

Right after a key is press I remove the listener and keypresses are no longer captured but the “e” key pressed to summon the input still ends up in the textarea.

Screenshot 2025-04-03 132312
Screenshot 2025-04-03 132312408×204 3.92 KB

I’ve also tried this:

//trying to clear the textarea
  input.onfocus = function(){input.value="";}
  
  function ct() {
    input.value= "";
  }
  input.addEventListener("focus", ct());
  input.focus();
  input.value = '';
  //trying to clear the textarea

but that “e” still ends up there if I focus on the textarea after creating it.

Again, not critical, but it’s frustrating and seems like it should be fixable. It seems like there is a buffer storing the “e” and sending it to the textarea after it gets created. I’ve updated the codepen.

https://codepen.io/pkdvalis/pen/KwKReKv

I’ll circle back around on this problem later.

13

Hi @pkdvalis

Here is a hack you could try:

  //enter text
  if (e.code == "KeyE") {
  if (document.getElementById("textinput") == null) {
    
setTimeout(() => {
 document.getElementById("textinput").value = "";
}, 100)   
  }
2 Likes
14

Screenshot 2025-04-03 200310
Screenshot 2025-04-03 200310236×198 6 KB

Very clever, thank you!

2 Likes
15

I suspect the e toggle is still in the ether, so pressing e on the keyboard brings up the textarea and enters it there in the same moment.

Adding the delay removes the instantaneous behaviour.