Share your repls and programming experiences

← Back to all posts
❄️ [GAME] Snow Quotes! ❄️
RolandJLevy (759)

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
Comments
hotnewtop
FloCal35 (366)

Good work @RolandJLevy, Merry Christmas

RolandJLevy (759)

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

[deleted]

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

fuzzyastrocat (1504)

This is really nice!

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

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

RolandJLevy (759)

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

fuzzyastrocat (1504)

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

FlaminHotValdez (364)

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

FlaminHotValdez (364)

Although fireflakes would be better than snowflakes lol

RolandJLevy (759)

Yeah @FlaminHotValdez, like this in light mode! 🔥

FlaminHotValdez (364)

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

[deleted]

@FlaminHotValdez - nah, water flakes are better :)

[deleted]

@RolandJLevy - 'Sup :)

Baconman321 (778)

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 (759)

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 (778)

@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 (759)

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 (759)

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

zplusfour (879)

wait I can see your .env

RolandJLevy (759)

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

Kookiez (327)

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

DynamicSquid (4567)

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

RolandJLevy (759)

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!

RolandJLevy (759)

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!

DynamicSquid (4567)

@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

RolandJLevy (759)

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

zplusfour (879)

it doesn't work
couldn't reach your repl

RolandJLevy (759)

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?

RolandJLevy (759)

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?

RolandJLevy (759)

@ZDev1 I think it's working OK now