JavaScript Game: Interactive Questions With CSS Transitions & Animations

Let's use JavaScript to build a simple math game. Along the way we'll see how there is an awkward disconnect between our data (how many points we've scored) and our user interface that we want to show on the screen.

00:00 Intro
1:06 Getting Started
1:40 Choosing Random Numbers
11:43 User Interface
18:51 Calculating Correct Answer
30:26 Win & Lose Conditions
33:36 Progress Bar
44:18 Overlay
56:58 Animate Wrong Answer
1:02:43 Outro

Follow me for updates on new episodes:

[AlejandroCamachoOsmolik]

I finished your udemy course "Become a worpdpress developer" yesterday and that was awesome. Thank you Brad

[bowdymisener]

I have made this course my full time bootcamp. Im loving it so far. I cant believe its free.

[shahriarparvezshuvo]

I've completed your Git a web developer Job. I can't even express how much I learned from your courses. Thanks, Brad. ❤️

[suhailxeaser]

Thanks for creating this Bootcamp series. I was in 'desert of despair' and you saved me & opened the door I needed to walk through in...Thank you so much Brad.

[dave]

I just found you surfing youTube. I see you 've been missing in action for some time. I want to say thank you for coming back. Your style of teaching is very appealing to me and I will be watching your work moving forward. This is my lucky day!. Do you have a patreon account? Thanks again!!

[remax]

This is a good app for my first grader whose practicing her math skills. Good to see you back Brad. Always looking forward on your video.

[JtheRFs]

Wow, a dynamic array inside an object returned by a function. I love it 😃 . Is it anything regular or special? I couldn't have ever pictured this on my own. I mean the object property - operator: ['+', '-', 'x'][generateNumber(2)]. Never heard anyone even mentioning it. You really made my day. Thanks Brad!

[priyanka.sarkar]

Instead of multiplying to 11 and then taking the floor, we can also take the ceil of the number after multiplying with 10.
Math.ceil ( Math.random() * 10 ).
P.S : The series is going just amazing and thanks a ton for such great tutorials.

[zipponvr]

I would add this

if ( ourField.value == '' ) return

to handleSubmit function after e.preventDefault()
so you can't accidentally make mistake if press enter with empty input

[meherali]

I like your videos very much because you explain everything step by step.

[BattlingNebula]

Just finished your "Git a Web Developer Job: Mastering the Modern Workflow
" course on Udemy. I come across so many courses online but haven't seen such a quality course anywhere which teaches the proper workflow. So many people teach how to write HTML or CSS or Javascript but no one covers such an import topic of organizing our workflow. I feel like I am a much better programmer now with the knowledge of all the tools learnt in the course.
IMHO, I think it is a must take course for both existing and aspiring developers. Seriously, Thanks a ton for making that course! ❤

[soltiscd]

You got my attention as soon as the react logo appeared!

[mounir]

Excellent! You're a great professor out there. Keep going and thanks so much.

[wshraim]

for "if (parseInt(ourField.value, 10) === correctAnswer)" we are using 3 equal signs because 0-0 or 0+0 should equal 0 and not -0. anywhere else we use ===, we can simply use ==

[bubbanstix]

Hi. I bought your 2 courses and i can say you are amazing. Pls can you make more examples with js? Maybe a widget or something..

[suprabhatkumar]

Hey BRADD please consider replying this message...I have been following you closely from recent months and fairly you have stolen my heart the way you teach and your voice too❤😅 I am a big fan of JavaScript(you too😅) and am just a beginner. I just saw your 10 days of JavaScript videos and there i got to know about your fullstack JavaScript course. So i just wanted to know is it still accessible? Can i take it as a beginner?? I'll be waiting for your response Bradd😊... have a great day..

[jayjohnx]

Sir I didn't understand one thing, why have you used (max + 1),

isn't just (max) enough to work this out ?
along with generateNumber(11) for numberOne and numberTwo values, and generateNumber(3) for operator symbol respectively

[JimKernix]

I hope you explain how state works because I don't get that part

[streamx]

I am strugglon with the css for the progress bar. You set the width of the boxes div which contains all the box divs to 100%. % is a relative unit, but the progress div has no width. Where does the boxes div get its from.

[oriyon]

Where did come from
The currentProblem object or property