Share your repls and programming experiences

← Back to all posts
Title: 💪 You Can Do This!! ~ Exam Motivation (And a bonus below! ⬇️)
Bookie0 (5957)

👋 Hi!!

Hope ya'll are doing great -- I just had part 1 of my mock exams in school. Speaking of school, isn't it hard to keep concentrated while studying or revising for tests and exams? Don't you need a tool to help you keep on track and stay motivated and positive while studying?

Well the 💪 You Can Do This site can, and will help you!

For @CodingCactus' Exams Jam where we had to make something helping the examination process (studying, doing the exam, marking the test, etc.), using p5.js, some CSS, and a bit of HTML, I've created the ultimate site where you can keep studying!

Features

  • An expandable textbox that you can resize to fit your needs where you can type useful notes, reminders, information, etc.

  • The current time in hour, minutes, and seconds, with the date as well in month, day, and year.

  • A randomly generated quote to help you.

  • A randomly generated verb to keep you going!

  • A timer that you can set yourself and also pause.

  • A draggable element which you can move around (for example to hide distracting things like the moving time, or to put on top of the textbox to quiz yourself)


How To Use

It's pretty easy to use, how to use it and what to type/click is pretty straightforward, but there'll still be some small reminders on what to do:

Colored scrollbar:


Code

The code is a rather not very elegant blend of p5.js, HTML, CSS, and a bit of JS.

In the preload() function (script.js), I load an image, set the time and date, and use some conditionals for the month. Next in the setup() function, the canvas, framerate, and background color are set. I also call the addSec function (more on that later) and add the input, button, and the element with the timer, and I add some styles to them. The newTimer() function is for setting a new timer.

After that, there are 2 very similar functions; randomResult() and choosing(). The first one is for outputting the final motivational word, the second for that little animation where it randomly chooses the verb. In the function phrase(), it chooses a random quote and outputs it.

In the always looping draw() function, it positions the current second of the timer with style, and checks if the timer is paused or not. Then, it checks if 1 second has passed, and if it's paused, it doesn't reduce the timer, but if it does, it decrements it. If the timer equals 0, it shows that the timer is finished.

Then, it shows the current time and date, and a little further on the "KEEP CALM AND KEEP" text if displayed. The variable counter is incremented (it's for the animation which selects the verb), and the phrase() function is called. Next up, some conditionals to determine if the program should continue to play and choose the animation, and if no, it stops it, and calls the randomResult() function to output the final result.

Following that, there's the addSec() function which increments the seconds, checks if a minute has passed (and if so increments the minutes), checks if an hour has passed (and if so increments the hours), and finally checks if a day has passed (and if so reloads/refreshes the window).

The keyPressed() function at the very bottom is for when the user press the right arrow for a new verb, left arrow for a new quote, and tab for pausing the timer.

That's about it for the p5.js part. In index.html, there's the <textarea> textbox for typing notes and stuff, as well as the draggable element. That code is from W3 schools. Finally, for the CSS, it uses the same sort of style as the p5.js part to keep it uniformed, using border-radius, colors, margins, etc.


Closing

Well, that's about all. Have fun, and good luck for any exams or tests you have!

If you have any other cool quotes/motivational verbs (not too long), feel free to comment them and I could add them.

👋 Bye, and have an amazing day!!!


Bonus: Pixel Pizza!

Remember the Christmas Tree Decorator of last year (rip 2020) here? Well using the same kind of concept, I had made a Pixel Pizza game where you can simulate making pizza, bake them, box them, and sell them. I actually had made it quite a while ago, and when I came upon it again recently to work on it again, I realized that the code was just wasn't that good and that to continue I had to like restart it..

So I'm just gonna share it here, but it's full of bugs, some of the graphics aren't very precise, but can still play and it's somewhat fun!

Making an onion pizza:

Baking the pizza:

Packing the pizza:

Getting customer feedback and money:

🍕 Play the game here! 🍕

Code is here (if you want to edit, fork, etc.)

There's a README file as well, so you can check that out too I spent time writing it.

Edit:

If this ^^^^ is happening for you as well, reload the tab (cmd-r or ctrl-r) :)

Comments
hotnewtop
IcynDevz (744)

poGerRs

Also do you want some of my pizza that took 10 hours to make

RayhanADev (1961)

hahah AWESOME job Bookie!
(that CSS is really good :D)

and also:

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 

muy beautiful xD

Bookie0 (5957)

@RayhanADev yay thank you, glad you like the CSS (first compliment on my CSS xD)

and uh yes I know not very good for the <br> lmfao

Bookie0 (5957)

@FlaminHotValdez thank you for the compliment! :)

FlaminHotValdez (434)

@Bookie0 uhhhhHHHHHHHHHHHHhhhhhh so you like your website being called ugly?

RayhanADev (1961)

@Bookie0 @FlamingHotValdez
Do either of you actually speak Spanish out of curiousity?

FlaminHotValdez (434)

@RayhanADev I take Spanish classes in school and I suck at it. but I always remember the words for "is", "fat", and "ugly".

FlaminHotValdez (434)

@Bookie0 ye I know...but I couldn't resist.

Bookie0 (5957)

@RayhanADev nah, I do speak french and I'm learning mandarin though

ch1ck3n (1591)

More like the

distractor 2000

FlaminHotValdez (434)

Look...This is a great attempt and all

But nothing, and I mean

NOTHING,

can stop my procrastination.

GhostKing007 (26)

@FlaminHotValdez - I saw that fortnite 3 post lmao I feel like all of them were mat404's alts.

FlaminHotValdez (434)

Nobody got rickrolled? :(

QuinnDuncan (2)

This is really sick. The only thing I would change is maybe adding a color slider so you can change the color of the background because after a while the red hurts your eyes. Also, if you close your computer the time pauses so when you open it back off the time is like 5 minutes off.

Bookie0 (5957)

@QuinnDuncan ah, thanks for the feedback! :D

I chose red because it was the original "keep calm and keep [...]" poster, and the whole thing is styled with the red lol but thanks anyways! :)

Whippingdot (552)

Bug

Maybe make it so the timer converts to minutes?

Also hours

Add a pomo timer, that would be really helpful.

lul I see what you did boi. Make it so you can't select the text on this

Nice quote, definately not too big

Now, the things I said earlier I think is easier for you, but this next one might be a little hard. Can you make it so the barrier box is re-sizeable? It is kinda too big in some situations.

Edit: 😲😲 What happened lul

Bookie0 (5957)

@Whippingdot yea lol that's pretty annoying, I didn't really manage to get a fix for those buttons going up, but thanks! :D

IntellectualGuy (671)

Do you think I could help with some CSS for the pizza game?

Bookie0 (5957)

@IntellectualGuy Oh lol thanks, but the pizza game is made using p5.js, so there's no CSS..

IntellectualGuy (671)

@Bookie0 I meant like the font-family and stuff like that

Bookie0 (5957)

@IntellectualGuy sure, what font-family do you have in mind for the pizza game?

IntellectualGuy (671)

@Bookie0 Montserrat

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">

For importing the font

Bookie0 (5957)

@IntellectualGuy alright, done thanks!

Is this happening for you as well? When I press cmd-shift-r (the equivalent of ctrl-shift-r for Windows) to "Hard Reload", that happens, but if I reload normally without the shift, it's fine..

Bookie0 (5957)

@IntellectualGuy huh, you should be able to fix it by reloading the page (normally) :)

FloCal35 (484)

Need more quotes?

Bookie0 (5957)

@FloCal35 sure, as long as they aren't too long! :D

FloCal35 (484)
  • Build your own dreams, or someone else will hire you to build theirs. -Farrah Gray

  • The hardest thing to do is to be true to yourself, especially when everyone is watching. -Dave Chappelle

  • Your present circumstances don't determine where you can go; they merely determine where you can start -Nido Qubein

  • If we did all the things we were capable of, we would literally astound ourselves -Thomas Edison

  • A problem is a chance to do your best -Duke Ellington

  • We must let go of the life we have planned, so as to accepts the one that is waiting for us. -Joseph Campbell

  • Action may not bring happiness; but there is no happiness without action. -Benjamin Disraeli

  • Falling down is not a failure. Failure comes when you stay where you have fallen. -Socrates

  • One find limits by pushing them. -Herbert Simon

  • The only way out is through. -Robort Frost

  • What is not started will never finish. -Johann Wolfgang von Goethe

  • Every man should lose a battle in his youth, so he does not lose a war when he is old. -George R. R. Martin

  • Success is not final; failure is not fatal; it's the courage to continue that counts. -Winston S. Churchill

  • Life is either a great adventure or nothing at all. -Helen Keller

There ya go @Bookie0

Bookie0 (5957)

@FloCal35 Thank you! I'll add a few in! :D

Bookie0 (5957)

Alright, I added some! :D @FloCal35

FloCal35 (484)
Awesome pizza game

POG

CyberHacker101 (113)

Bro everything you post or comment makes me updoot you wat happening Oꓤꓭ ꓭOᒋ ƎꟽOSƎϺ∀

Bookie0 (5957)

btw, for this bug:

Couldnt really get a way to fix it...

LiamBerube (2)

When notes box is resized this happens

Bookie0 (5957)

@LiamBerube yea, that's a bug I couldn't really get to fix lol

Whippingdot (552)

i have exams in 4 days 😭😭😭