Practicing with Switch statements


by Jeremy Caudle
code

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;
            }