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!

3 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.

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