❄️ [GAME] Snow Quotes! ❄️
Fill the night sky with gently falling ❄️ SNOWFLAKES ❄️ each of which reveals an inspirational QUOTE when you hover over it. Happy holidays everyone! 🎁
- Customise your Snow Quotes with various letters and numbers, select the amount and colour of snowflakes
- Click on the 'SEE YOUR SNOW QUOTES' button to see the result on the next page
- Hover your mouse over each snowflake to reveal an inspirational quote
- Click on a snowflake to copy the quote text
- Share this app with your friends by clicking on the share buttons 👍
How it works ⚙️
- Built from scratch with Node, Express and pug template engine on the back end
- Completely responsive and mobile friendly
- Inspired by this Pug and CSS Workshop by one of my favourite developers 🌟 @Jhey🌟
- Using the node-url-shortener node package to shorten the URL for sharing
- The quotes are fetched from an API shown in this freecodecamp.org article
- The snowflake symbols are from the Mandala font using the @font-face rule
- Form validation restricts keys to 0-9, a-z and A-Z
Hey @fuzzyastrocat, thanks for your observation. I agree and I have written a transform function that replaces numbers or letters that render as unrealistic looking snowflake shapes with more realistic ones. For example, these characters now get replaced by different characters:
Thanks for sharing your Flurry project with me. It's really great - nice job! I really like the coding train guy and his fun approach. He's a good teacher. I hope you have a great holiday break :)
Wow, this deserves more recognition than just repl.it! Amazing! Also, might I recommend disabling the overflow by using
overflow:hidden; on the body? The ability to scroll makes it feel weird.
Hi @Kookiez, I see now. Everyone is talking about the env.txt file. That was pretty dumb of me. Basically the idea is that babel copies a replica of the .env into the dist folder. For some reason babel can't copy .env files so I made env.txt for copying in the build process and then renamed it inside the dist folder. I will review how I'm doing this and try to improve it. Thanks!
Hi @DynamicSquid, thanks for your feedback. Maybe my approach isn't a good one. What I'm trying to do is copy a replica of the .env into the dist folder. For some reason babel can't copy .env files so I made env.txt for copying in the build process and then renamed it inside the dist folder. Do you know of a better way of doing this? I will have another think about how I'm doing this and try to improve it. Thanks!