Skip to content
Sign upLog in
← Back to Community

❄️ [GAME] Snow Quotes! ❄️

Profile icon
RolandJLevy

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

Cannot infer image mime type

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
Voters
Profile icon
LukeIruma
Profile icon
python88
Profile icon
SwaroopBappanad
Profile icon
mkhoi
Profile icon
IntellectualGuy
Profile icon
fuzzyastrocat
Profile icon
badst
Profile icon
FlaminHotValdez
Profile icon
programmeruser
Profile icon
DynamicSquid
Comments
hotnewtop
Profile icon
InvisibleOne

Wow, this is awesome

Profile icon
RolandJLevy

Hi

@InvisibleOne
, thanks!

Profile icon
FloCal35

Good work

@RolandJLevy
, Merry Christmas

Profile icon
RolandJLevy

Hey

@FloCal35
, thank you! Merry Christmas to you too 🎄

Profile icon
Whippingdot

Niice!!

Profile icon
RolandJLevy

Hey

@Whippingdot
thanks! :)

Profile icon
[deleted]

POGCHAMP! This is gr8! (yeah, I don't know how to spell great so I write gr8 lol)

Profile icon
RolandJLevy

Hey

@Persassy2109
, tvm!! :)

Profile icon
[deleted]
Profile icon
fuzzyastrocat

This is really nice!

However, one suggestion: often I get snowflakes that look, well, not really like snowflakes. Like this:

Screen Shot 2020-12-24 at 11.19.56 AM

I'd suggest trying something like I've done here for more consistent snowflakes.

Profile icon
RolandJLevy

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: 1234790ESHN.

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 :)

Profile icon
fuzzyastrocat

@RolandJLevy
Ah ok, so that's what the letters are for.

Thank you! I do too — while I find him over-enthusiastic sometimes, he does some really great stuff. (And same to you regarding the holidays!)

Profile icon
RolandJLevy

Hey

@fuzzyastrocat
, happy New Year! :)

Profile icon
fuzzyastrocat

@RolandJLevy
Thank you! Same to you!

Profile icon
FlaminHotValdez

It's... it's... it's beautiful

Profile icon
FlaminHotValdez

Although fireflakes would be better than snowflakes lol

Profile icon
RolandJLevy

Hey

@FlaminHotValdez
thanks!!! :)

Profile icon
RolandJLevy

Yeah

@FlaminHotValdez
, like this in light mode! 🔥

Screen Shot 2020-12-24 at 22.21.40

Profile icon
FlaminHotValdez

@RolandJLevy
red... like... fire... it's awesome...

Profile icon
[deleted]

@FlaminHotValdez
- nah, water flakes are better :)

Profile icon
RolandJLevy

Hey

@Persassy2109
☺️

Profile icon
[deleted]

@RolandJLevy
- 'Sup :)

Profile icon
DynamicSquid

Cool!

Profile icon
RolandJLevy

Hey

@DynamicSquid
thanks! :)

Profile icon
Kookiez

cool!

Profile icon
RolandJLevy

@Kookiez
thanks! :)

Profile icon
Baconman321

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.

Profile icon
RolandJLevy

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 :)

Profile icon
Baconman321

@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!

Profile icon
RolandJLevy

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 :)

Profile icon
Baconman321

@RolandJLevy
Np. Merry Christmas! :D

Profile icon
RolandJLevy

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 :)

Profile icon
RolandJLevy
Profile icon
Baconman321
Profile icon
zplusfour

wait I can see your .env

Profile icon
RolandJLevy

@ZDev1
I thought .env files were hidden from other users. That's weird

Profile icon
Kookiez

@RolandJLevy
if it's in a file, then everybody can see it

Profile icon
DynamicSquid

@RolandJLevy
Your file is named env.txt, but I think it should just be .env

Profile icon
RolandJLevy

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!

Profile icon
RolandJLevy

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!

Profile icon
DynamicSquid

@RolandJLevy
I'm not experienced with JS, but from the repl.it docs, I think the only way is to name the file .env, and it can't be in a folder. But that's all I know

Profile icon
RolandJLevy

Hi

@DynamicSquid
, OK thanks. I'll take a look at the docs. Happy holidays! 😁

Profile icon
DynamicSquid

@RolandJLevy
Thanks! You too!

Profile icon
zplusfour

it doesn't work
couldn't reach your repl

Profile icon
RolandJLevy

Hi

@ZDev1
, thanks. I'm not sure why this happens sometimes. Is there something I'm doing wrong? I'm running a script from package.json which is just "node dist/index.js"

Do you see an error message?

Profile icon
RolandJLevy

Hi

@ZDev1
, I just pressed stop then hit the run button so it ran "npm run start" from the .replit file and it seems to work OK now. I don't really understand why the program stops like that. Do you know why?

Profile icon
RolandJLevy

@ZDev1
I think it's working OK now