Complete Intro to Web Development, v3

Project JavaScript: Winning Indicator

Complete Intro to Web Development, v3

Check out a free preview of the full Complete Intro to Web Development, v3 course

The "Project JavaScript: Winning Indicator" Lesson is part of the full, Complete Intro to Web Development, v3 course featured in this preview video. Here's what you'd learn in this lesson:

Brian walks through a possible solution for implementing the rainbow-colored winning indicator.

Preview
Close

Transcript from the "Project JavaScript: Winning Indicator" Lesson

[00:00:00]
>> Okay, I think we have one last thing to do, which is definitely the best part. When we win, there needs to be rainbow colors, right? I mean, I thought about doing something like the, do you remember solitaire, when you win and every other cards would bounce down?

[00:00:13]
I thought about doing that with all the tiles, which would have been sweet, but it would have taken a long time. I started coding, I was like, I can't make these poor students spend like an hour with me writing bouncing tiles. [LAUGH] It would have been fun, believe me, but we're not gonna do that today.

[00:00:32]
Last thing here. I just do it directly in the wind condition. So let's just do it there. Where is our wind condition? Hear, where we win, we definitely just need to say, document.query, actually, is it just the info bar? Which one is it? Yeah, query selector. And we're just gonna grab the brand, .brand, which is the word masters at the top, right?

[00:01:03]
And then we're just gonna say .classList.add, and what do I call it? Win, winner. I refresh the wordy masters now and I say, ivory. Now check that distance out. Now the person feels like a winner, right? That is it. That's the whole wordy masters. And again, if you get sick of guessing the word ivory, all you gotta do is come in here and say, Random equals one.

[00:01:54]
And now I legitimately do not know what the word's gonna come back here. No I'm not gonna try and guess, cuz this will take me too long and I'll be very embarrassed about it. But we can cheat and look at the network tab, which by the way, you can totally do with Wordle [LAUGH] No, I wasn't tracking it.

[00:02:18]
So I actually don't know what it's gonna be. But I could just say pools, anyway, whatever. Gone to the sands of time. So, that's word masters.
>> How long did it take you to do this? End-to-end, it probably took me, I'm gonna say, it takes me a bit longer cuz I'm trying to write it really simple link, like coding, so that you can do.

[00:02:50]
If I was just gonna do this straight up for just myself and not really care about teaching it, I could probably do in like 45 minutes. Give or take, 25 minutes and getting caught in some weird bug. If I was new and getting started coding, this would probably take me a couple of days.

[00:03:09]
Yeah, this is difficult, I'm throwing hard things at you. But also the thing that, like for me when I was starting out coding and coding some of these bigger projects, I spent weeks of my life, perhaps multiple months, working on chess, for one of my classes. A full chess game and coding all that stuff.

[00:03:30]
I'm still proud of that program, right? And so, that's why I kinda throw some of these hard curveballs at you, because you learn so much by struggling through them. So even if it gets frustrating, it's hard, pushing through it, you'll be both mad and learning at the same time.

[00:03:46]
And I'm okay with that. I'm okay upsetting you a little bit. But I don't wanna discourage you. That's the balance there, that we try and strike. So please don't get discouraged it's hard. Yeah, it's a good exercise. And again, you have the answers all there. If you wanna go see how I did it, it's all totally there in the course notes.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now