❄️ [GAME] Snow Quotes! ❄️
RolandJLevy (1051)

Fill the night sky with gently falling ❄️ SNOWFLAKES ❄️ each of which reveals an inspirational QUOTE when you hover over it. Happy holidays everyone! 🎁

https://github.com/rolandjlevy/snow-quotes/blob/master/public/images/snow-flakes-demo.gif?raw=true

Links 🔗

Features 💡

  • 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
  • The front end uses vanilla JavaScript - no frameworks or libraries like React or Vue
  • 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
You are viewing a single comment. View All
Baconman321 (1056)

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.

RolandJLevy (1051)

Hey @Baconman321! thanks for the positive feedback and suggestion. Yes, that's a good idea. I see what you mean. I will take a look at it later on :)

Baconman321 (1056)

@RolandJLevy It's really easy, just put in the header:

<style>
  body{
    overflow:hidden;
  }
</style>

That's all there is too it!
If you already have an overflow attribute, you'll have to override it with !important.

Either way, it's a really great project!

RolandJLevy (1051)

Hi @Baconman321, thanks for the CSS :) I don't want to apply the overflow:hidden on the first page so I'll need to create a new class so I can apply it on the second page. I'm a bit busy right now so will be sorting it out later tonight :)

RolandJLevy (1051)

Hi @Baconman321, I have applied the overflow:hidden on the snowflakes page, as you suggested and I think it's a good improvement. Thanks again for your suggestion :)