JavaScript Game: Interactive Questions With CSS Transitions & Animations

Рет қаралды 24,079

Күн бұрын

Join my premium 2024 bootcamp here learnwebcode.teachable.com/p/...
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
CodePen Finished Product codepen.io/learnwebcode/pen/m...
The 10 Days of React Playlist • Learn React JS Tutoria...
Playlist for this full series: • Brad's Bootcamp - Free...
Follow me for updates on new episodes:
Instagram: / javaschiff
Twitter: / learnwebcode
Facebook: / brad-schiff-1542576316...
Twitch: / learnwebcode

Пікірлер: 51

@AlejandroCamachoOsmolik 3 жыл бұрын

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

@bowdymisener 3 жыл бұрын

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

@suhailxeaser 3 жыл бұрын

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.

@dave0 3 жыл бұрын

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

@shahriarparvezshuvo4760 3 жыл бұрын

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

@LearnWebCode 3 жыл бұрын

Thanks! Hearing that is the biggest motivation for me; glad the course / videos were helpful.

@mounir101 3 жыл бұрын

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

@remax110 3 жыл бұрын

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.

@LearnWebCode 3 жыл бұрын

Thanks for the support!

@meherali4073 3 жыл бұрын

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

@JtheRFs 3 жыл бұрын

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!

@soltiscd 3 жыл бұрын

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

@wellness-125 3 жыл бұрын

Underrated instructor

@zipponvr7043 3 жыл бұрын

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

@MrEdwardhartmann 2 жыл бұрын

Great teaching style

@michelparmentier3063 3 жыл бұрын

so timely, lol ! Ty !

@msvmanikantasrivishnu7788 3 жыл бұрын

You are the best

@bubbanstix841 3 жыл бұрын

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..

@vivekpandey3214 3 жыл бұрын

You are amazing.

@priyanka.sarkar 3 жыл бұрын

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.

@LearnWebCode 3 жыл бұрын

Thanks for the support, and good catch! That code is a bit cleaner, but it will only very rarely ever give us a value of 0; although that could be what we want.

@eguchiyuuki 2 жыл бұрын

great!!!

@suresmaharjan9809 2 жыл бұрын

Thanks Guru

@wshraim 3 жыл бұрын

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 ==

@BattlingNebula1 3 жыл бұрын

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

@streamx2 3 жыл бұрын

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.

@AgoraBilisim 3 жыл бұрын

Hey Brad, I love your courses. How do you exactly measure an area on the screen on Mac? When I try what you do (hold certain keys and drag the mouse), it takes screenshot of that area. Did you modify the default behaviour of Mac? Thanks

@LearnWebCode 3 жыл бұрын

Hi, I just make sure to press the "Escape" key before releasing the click/drag and it never actually takes the screenshot.

@AgoraBilisim 3 жыл бұрын

@@LearnWebCode I tried the escape key and it worked :) Thank you very much

@Degamer790 3 ай бұрын

lovely cat 😺

@JimKernix 2 жыл бұрын

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

@mojtabayam 3 жыл бұрын

hi brad . please make a video about ES7

@suprabhatkumar5478 3 жыл бұрын

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..

@ihabfadirik6621 3 жыл бұрын

I'm not Brad but if my memories are correct the course contains the 10 days of javascript and you can catch on the rest of the course without any problem as i did

@jayjohnx 2 жыл бұрын

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

@geelemo 3 жыл бұрын

Dear Brad, please make an animation course :)

@emmanouil1453 3 жыл бұрын

So Brad can we ommit the @-webkit-keyframes variation of @keyframes? I checked your code and works smoothly in Chrome, Firefox, Safari, Edge.

@LearnWebCode 3 жыл бұрын

Yep! Since version 43 Chrome doesn't need the -webkit prefix. Chrome versions 4 through 42 make up less than 0.3% of web traffic so it's a risk I'm willing to take. But for huge client projects I'd probably still play it safe and configure my webpack / autoprefixer workflow to include the prefixes for me.

@emmanouil1453 3 жыл бұрын

@@LearnWebCode Thanks Brad.

@aaravthakur3738 2 жыл бұрын

what extentions did you use?

@oriyon1 3 жыл бұрын

Where did come from The currentProblem object or property

@LearnWebCode 3 жыл бұрын

Good question. Once an object already exists (we had already created the "state" object) you can add a new property (or update an existing property's value) by just saying anExampleObject.newProperty = 'hello' That's what we're doing in the updateProblem function with the currentProblem property.

@safiq_ur_rahaman Жыл бұрын

if the input type is number there is no need to parse as integer

@samiullah9154 3 жыл бұрын

Is currentProblem a built-in method of JavaScript?

@DailyIntern 3 жыл бұрын

Am a student, can someone help me to balance between coding and my studies too? I have tried for more than three years but i lose motivation along the way, i will only code for 5 days then i lose motivation to keep on going. Any help pls.

@kings_cash 3 жыл бұрын

Yeah you can set a specific time so you can code and study too :)

@aaravthakur3738 2 жыл бұрын

My code isn't running properly, even though i have copied and pasted your lines from codepen. If you are free, could you please help me, thanks!!