The Conditional Challenge Solution

Hi, how'd you do in this challenge? 0:00 There are many different ways you could have built the quiz app. 0:02 Now let me show you how I did it, using only the concepts covered in this course. 0:05 First, I declared a variable to hold the number of correct answers. 0:10 I set this to 0, because at the start of the quiz, 0 questions have been answered. 0:15 As someone takes the quiz, I'll add 1 to this variable for 0:20 each question answered correctly. 0:23 That's why I use the let keyword instead of const. 0:25 At the end of the quiz, 0:29 the total number of correct answers get stored in this variable. 0:30 Next, I declared a variable named rank to store the final ranking of a player. 0:33 For example gold, silver, bronze, or no crown. 0:38 I didn't assign it a value yet. 0:41 Because later I'm going to put a string value in it based on how many 0:43 questions the player got correct. 0:46 In this case, since I know that the value will be a string, 0:48 I also could have assigned rank an empty string, like this. 0:51 To display the final message and player ranking inside the main element, 0:58 I used the document.querySelector method to access the main element and 1:03 stored it in the variable main. 1:08 The next part of the program asks 5 questions using the prompt method. 1:11 I declared 5 different variables to hold the answers and ask different questions. 1:16 Asking a question and testing the response is really the heart of the program, so 1:21 I needed a way to test if a response is correct. 1:26 I used the toUpperCase method to convert the user's input to all uppercase letters, 1:28 which lets the user get the answer correct. 1:34 Whether they typed the answer using all lowercase, all uppercase, 1:37 or any combination, the condition will evaluate to true. 1:41 If the user provides the correct answer, the += or 1:47 addition assignment operator adds 1 to the current value of the correct variable. 1:51 The next part of the quiz program determines the ranking. 1:58 I used a conditional statement and 2:02 comparison operators to assign a ranking based on how many questions the user got 2:05 correct, or the final value of the correct variable. 2:09 So first, if correct, strictly equals 5, 2:14 assign the string Gold to the rank variable. 2:18 Then I ran a second condition with an else if clause. 2:22 Remember, a player gets a silver crown for 3 or 4 correct answers. 2:26 So notice here that I'm checking to see if the value in the correct variable 2:30 is greater than or equal to 3. 2:35 Now you might be wondering if this first condition will also evaluate to true 2:38 if the number of correct answers is 5, since 5 is greater than 3. 2:43 Well, it won't, and here's why. 2:47 Remember that an if else statement only runs one code block. 2:49 Even though there may be multiple doors or 2:54 conditions, the program only ever goes through one. 2:56 In this case, the first if statement at the top strictly tests for 5. 2:59 So that means if the correct variable has the number 5, the program enters 3:05 this block, runs its code, which assigns a value to rank, and then exits. 3:09 In other words, if the player answers 5 questions correctly, 3:15 the program never gets to this else if condition. 3:18 Next, I tested for the Bronze crown using the condition correct is greater than or 3:23 equal to 2. 3:28 And with a final else clause, I assigned rank the string None. 3:29 Finally, the next part outputs the results to the page. 3:35 It lets the player know how many questions they got right and the ranking. 3:38 The results should display inside the main element. 3:43 The variable main stores a reference to the element, so I used the main variable 3:46 and the inner HTML property to set the HTML markup inside main. 3:51 Then I used a template literal with backticks to display the correct questions 3:56 message inside an h2 and the ranking message inside paragraph tags. 4:00 I'm using the dollar sign and curly braces syntax, or string interpolation, 4:06 to insert the final value of the correct and rank variables into the string. 4:11 This is all very similar to how we displayed the shout message on the page in 4:16 an earlier video, for example. 4:19 All right, let's try this in the browser. 4:21 I'll first try for 5 out of 5 correct. 4:24 The page displays You got 5 out of 5 questions correct, Crown earned: Gold. 4:35 Now let's see what happens if I get 0 correct. 4:41 Again, there are other ways you could have solved this problem, 4:51 this is just one solution. 4:54 If your approach was different from mine, that's okay. 4:56 And be sure to share your solution with other Treehouse students. 4:58 There's so much you can learn from each other. 5:01 Now, you may notice that some parts of this code do the same thing over and 5:03 over, like asking the questions and 5:08 assigning 1 to the current value of the correct variable, for example. 5:11 While everything in the program works as expected, there's lots of room for 5:15 improvement and ways to make the code more efficient and succinct. 5:19 In a later course, you'll learn how to use JavaScript functions which provide a more 5:23 effective way to write and execute code that you want to repeat again and again. 5:27 Congratulations on reaching a major milestone in your JavaScript 5:33 programming journey. 5:37 Now, there's more to learn about JavaScript, 5:38 and that's always going to be the case in programming. 5:40 But at this point, you've learned the most important parts of JavaScript, the basic 5:42 syntax and concepts you'll use just about everyday as a JavaScript programmer. 5:47 If you didn't understand everything or 5:52 feel like you can't remember everything I covered, that's okay, don't worry. 5:54 In fact, most programmers don't remember everything either. 5:58 It's common to head over to Google or a resource like Mozilla Developer Network 6:01 frequently to get a refresher on how these features work. 6:05 I've posted some of those resources for 6:08 you in the teacher's notes with this video. 6:10 Remember, we're always here to help. 6:12 So if you have questions about anything covered in this course, 6:14 feel free to reach out to other students in the community or the Treehouse staff. 6:17 Thanks everyone and happy coding. 6:21