![\"\"](\"https:\/\/apweb.quest\/wp-content\/uploads\/2019\/02\/img_5c54a4a4896cb.png\")
<!DOCTYPE html>
<html lang=\"en\">
<head>
<meta charset=\"UTF-8\">
<title>Conditionals Practice<\/title>
<\/head>
<body>
<h1>What is the sum of 14 + 10?<\/h1>
<input type=\"number\" id=\"userInput\">
<button onclick=\"compare()\">Try It<\/button>
<p><span id=\"response\">Your feedback will appear here.<\/span><\/p>
<script src=\"js\/conditional.js\"><\/script>
<\/body>
<\/html><\/code><\/pre><\/li>\n\n\n\n- Now, let’s get the basic function set up in conditional.js.
function compare() {\n let answer = 24;\n let response = document.querySelector(\"#response\");\n response.innerHTML = \"correct\";\n}<\/code><\/pre><\/li>\n\n\n\n- Test in your browser. You should see \u201ccorrect\u201d appear in the span when you click the button. Change answer to something other than 24 and test again. Nothing changes yet! That’s next. <\/li>\n<\/ol>\n\n\n\n
Create a conditional function.<\/h4>\n\n\n\n\n- Replace your current function with a conditional function.
function compare() {\n let answer = document.querySelector(\"#userInput\");\n answer = answer.value;\n answer = Number(answer); \/\/ Convert from string to number\n\n let response = document.querySelector(\"#response\");\n\n if (answer === 24) {\n response.innerHTML = \"Correct!\";\n } else {\n response.innerHTML = \"Wrong answer!\";\n }\n}<\/code><\/pre><\/li>\n\n\n\n- Now try it: Enter 24 \u2192 \u201cCorrect!\u201d, Enter any other number \u2192 \u201cWrong answer!\u201d<\/li>\n\n\n\n
- Let\u2019s offer smarter feedback based on how close the user is. Replace your existing conditional block with:
if (answer === 24) {
response.innerHTML = \"Correct!\";
} else if (answer < 10) {
response.innerHTML = answer + \" is way too low.\";
} else if (answer < 24) {
response.innerHTML = answer + \" is too low but close.\";
} else if (answer > 40) {
response.innerHTML = answer + \" is way too high.\";
} else {
response.innerHTML = answer + \" is too high but close.\";
}<\/code><\/pre><\/li>\n\n\n\n- Try it out with different numbers and watch the feedback change!<\/li>\n<\/ol>\n\n\n\n
Let’s switch it up.<\/h4>\n\n\n\n
You can replace all those if statements with a cleaner structure using a switch statement.<\/p>\n\n\n\n
Try this out in your function:<\/p>\n\n\n\n
function compare() {\n let answer = Number(document.querySelector(\"#userInput\").value);\n let response = document.querySelector(\"#response\");\n\n switch (true) {\n case (answer === 24):\n response.innerHTML = \"Correct!\";\n break;\n case (answer < 10):\n response.innerHTML = answer + \" is way too low.\";\n break;\n case (answer < 24):\n response.innerHTML = answer + \" is too low but close.\";\n break;\n case (answer > 40):\n response.innerHTML = answer + \" is way too high.\";\n break;\n default:\n response.innerHTML = answer + \" is too high but close.\";\n }}\n<\/code><\/pre>\n\n\n\nConvert the input field to a dropdown. <\/h4>\n\n\n\n\n- Comment out the current input field in your html.
<!-- <input type=\"number\" id=\"userInput\"> --><\/code><\/pre><\/li>\n\n\n\n- Replace it with:
<select id=\"userInput\"><\/select><\/code><\/pre><\/li>\n\n\n\n- In your JavaScript, generate dropdown options. At the top of your conditional.js file, add this loop:
let dropdown = document.querySelector(\"#userInput\");
for (let i = 0; i <= 100; i++) {
dropdown.innerHTML += `<option value=\"${i}\">${i}<\/option>`;
}<\/code><\/pre>This dynamically creates 100 options (0\u2013100) in your dropdown.<\/li>\n\n\n\n- Let’s automatically run the compare function when a selection is made. Update your html to make the button unnecessary:
<select id=\"userInput\" onchange=\"compare()\"><\/select><\/code><\/pre><\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"Conditional statements that act based on whether or not a value is true, are an important part of any programming language. So (IF you are interesting in learning more about conditionals) {let’s get started.} Create a conditional function. Let’s switch it up. You can replace all those if statements with a cleaner structure using a … Continue reading Exercise: Conditionals<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":3692,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3764","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages\/3764","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/comments?post=3764"}],"version-history":[{"count":15,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages\/3764\/revisions"}],"predecessor-version":[{"id":4485,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages\/3764\/revisions\/4485"}],"up":[{"embeddable":true,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages\/3692"}],"wp:attachment":[{"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/media?parent=3764"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}