Doggos Quiz Game Setup

[00:00:00]
>> So we are knocking these projects back here. We have completed our Quiz.js project, where we had this interactive page that responds to users and lets them know whether they got that question true or false, correct or incorrect. What we're gonna do now is move on to our next project.

[00:00:22]
So our next project is to kind of make a new version of our quiz. So our original quiz was for a JavaScript question, and it had two options, true or false. And when we click one of the options, it shows whether you got the question right or not.

[00:00:42]
We're gonna keep some elements of that the same, but we're basically going to make over our project to do something even cuter, and that cuteness is doggos. So what we're gonna do, so we're gonna create a new quiz game similar in structure but with even more fancy stuff going on behind the scenes.

[00:01:08]
That is going to give us an image of a dog and a few choices of dog breeds. And we have to guess the breed of the dog. Does anybody have a guess of which breed this is, fox terrier, Caucasian Ovcharka, or Cairn Terrier?
>> Terrier.
>> It's some kind of terrier.

[00:01:30]
>> [INAUDIBLE] Terrier
>> I'm gonna go ahead and guess Cairn, I happen to like dogs. So if we get the breed right, we don't have any texts to display or anything, it's just gonna tell us, yep, that was the right answer by coloring it green. And the fun part is every time we reload this page, we're going to get a new picture, with a new doggo and some new choices.

[00:01:52]
And so here, I honestly have no idea, but let's just pick something else. And this time, it's gonna tell us not only that we got this answer wrong, but it's also going to use the green button to show us which one was correct, cuz we have three options now.

[00:02:07]
So what we're gonna do is we're going to use a similar style of manipulating the page, as what we've been doing before. But we're going to do it in a slightly different way, both in terms of how we're populating the data on the page, and in terms of how we're organizing our code.

[00:02:24]
So we have a new project starter here, it's pretty boring cuz nothing's happening yet, because it's the starter, cuz we have to write the code for it. You can find it on unjana.dev/javascript-first-steps. In Day 3, it's the Doggo Fetch Starter. So if you open that up, you'll get this pretty boring looking page.

[00:02:49]
But what you wanna do is right-click Save Page As, or File Save Page As, or Save File As, depending on how your browser names it. And similarly as before, save it as a local HTML file, and then we're gonna open it up in our code editor. So I'm gonna call this Doggo Fetch.html.

[00:03:13]
I think it'll automatically do that on my system. Go over to my code editor. I am going to, I can leave my quiz open. Now, I'm gonna open a file and find the Doggo Fetch.html file that I had just downloaded. Cool, and you can take a look at what's in here.

[00:03:32]
We've got, like before, we have some CSS, and we have a few elements in our HTML, even less going on than we did before. Because what we're gonna do is we're gonna dynamically add elements to the DOM this time. So like before, this time, we're not writing everything from scratch cuz that would take way too long.

[00:03:51]
But we have some starter, some comments, and some functions that we need to fill in the functionality of. And so we're gonna work through the to-do comments in this code as we go through the next concepts that we're gonna wrap our heads around, similarly to before. This time, we're gonna do something that's even fancier stuff going on behind the scenes.

[00:04:12]
So that is our new mission. So yeah, once again, we're going to the course site, anjana.dev/javascript-first-steps, going to the Day 3 starter version, and downloading that, opening in our text editor. And there is a finished version, so that we can compare to my solution, yours might be different.

[00:04:36]
So yay, project, as Cher says in Clueless. Okay, I hope y'all like dogs, cuz we're gonna be looking at a lot of them.