Practicing with Switch statements
I did a course on JavaScript Conditionals on Treehouse today and learned about switch () statements. I’ve never used them before and I’m not sure how much I will in the future, but I give them a go to solidify what I learned.
-
Switch Statement practice
This text will change...
switch (Number(inputNumberValue)) { case 0: inputNumberText.innerText = "Sorry, that's not a number between 1 and 10."; break; case 1: inputNumberText.innerText = "Good job, that number is between 1 and 10."; break; case 2: inputNumberText.innerText = "Good job, that number is between 1 and 10."; break; case 3: inputNumberText.innerText = "Good job, that number is between 1 and 10."; break; case 4: inputNumberText.innerText = "Good job, that number is between 1 and 10."; break; case 5: inputNumberText.innerText = "Good job, that number is between 1 and 10."; break; case 6: inputNumberText.innerText = "Good job, that number is between 1 and 10."; break; case 7: inputNumberText.innerText = "Good job, that number is between 1 and 10."; break; case 8: inputNumberText.innerText = "Good job, that number is between 1 and 10."; break; case 9: inputNumberText.innerText = "Good job, that number is between 1 and 10."; break; case 10: inputNumberText.innerText = "Good job, that number is between 1 and 10."; break; default: inputNumberText.innerText = "Sorry, that's not a number between 1 and 10."; break; }
View the code:
HTML and JS
<div class="code-block">
<ul>
<li>
<h4>Switch Statement practice</h4>
<label for="input-number">Enter a number between 1 and 10</label>
<input type="text" id="input-number" />
<button id="button-check-number">Check number</button>
<p id="number-check-text">This text will change...</p>
<pre>
<code>
switch (Number(inputNumberValue)) {
case 0:
inputNumberText.innerText = "Sorry, that's not a number between 1 and 10.";
break;
case 1:
inputNumberText.innerText = "Good job, that number is between 1 and 10.";
break;
case 2:
inputNumberText.innerText = "Good job, that number is between 1 and 10.";
break;
case 3:
inputNumberText.innerText = "Good job, that number is between 1 and 10.";
break;
case 4:
inputNumberText.innerText = "Good job, that number is between 1 and 10.";
break;
case 5:
inputNumberText.innerText = "Good job, that number is between 1 and 10.";
break;
case 6:
inputNumberText.innerText = "Good job, that number is between 1 and 10.";
break;
case 7:
inputNumberText.innerText = "Good job, that number is between 1 and 10.";
break;
case 8:
inputNumberText.innerText = "Good job, that number is between 1 and 10.";
break;
case 9:
inputNumberText.innerText = "Good job, that number is between 1 and 10.";
break;
case 10:
inputNumberText.innerText = "Good job, that number is between 1 and 10.";
break;
default:
inputNumberText.innerText = "Sorry, that's not a number between 1 and 10.";
break;
}
</code>
</pre>
</li>
</ul>
</div>
<script>
// ---------
// Variables
// ---------
const inputNumberRange = document.getElementById('input-number');
let inputNumberText = document.getElementById('number-check-text');
let inputNumberValue = '';
const buttonNumberRange = document.getElementById('button-check-number');
let abc = 0;
// ---------
// Functions
// ---------
function getAndCheckNumber() {
console.log('Start of function.')
inputNumberValue = inputNumberRange.value;
console.log(inputNumberValue);
switch (Number(inputNumberValue)) {
case 0:
inputNumberText.innerText = "Sorry, that's not a number between 1 and 10.";
break;
case 1:
inputNumberText.innerText = "Good job, that number is between 1 and 10.";
break;
case 2:
inputNumberText.innerText = "Good job, that number is between 1 and 10.";
break;
case 3:
inputNumberText.innerText = "Good job, that number is between 1 and 10.";
break;
case 4:
inputNumberText.innerText = "Good job, that number is between 1 and 10.";
break;
case 5:
inputNumberText.innerText = "Good job, that number is between 1 and 10.";
break;
case 6:
inputNumberText.innerText = "Good job, that number is between 1 and 10.";
break;
case 7:
inputNumberText.innerText = "Good job, that number is between 1 and 10.";
break;
case 8:
inputNumberText.innerText = "Good job, that number is between 1 and 10.";
break;
case 9:
inputNumberText.innerText = "Good job, that number is between 1 and 10.";
break;
case 10:
inputNumberText.innerText = "Good job, that number is between 1 and 10.";
break;
default:
inputNumberText.innerText = "Sorry, that's not a number between 1 and 10.";
break;
}
console.log('End of function.')
};
// ---------
// Events
// ---------
buttonNumberRange.addEventListener('click', getAndCheckNumber);
</script>CSS
.code-block {
width: clamp(16em, 90vw, 60em);
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
background-color: azure;
color: firebrick;
padding: 1rem;
margin: 3rem auto;
border-radius: 1rem;
text-align: center;
}
.code-block pre {
text-align: left;
color: #dedede;
background-color: #444;
border-radius: .66rem;
margin: 2rem auto;
overflow: auto;
word-wrap: break-word;
word-break: break-all;
}
.code-block ul {
list-style: none;
}
.code-block ul li {
padding-left: 0;
}
.code-block p {
padding: 1rem;
background-color: rgb(255, 120, 115);
color: white;
border-radius: .66rem;
text-align: center;
max-width: 50ch;
margin: 1rem auto;
}