Practical exercise involving logical operators
Logic Conditions can be used to create different responses depending on the current Boolean response from a condition. Depending on the number of conditions in the statement various JavaScript syntax can be used such as if Statement, Switch statement or the ternary operator. All can be used to return a response dependent on the condition that is being checked. JavaScript code can use Comparison Operators to check if a statement is true or false. To check multiple conditions, you can apply Logical Operators to check logic between conditions. The example below will show how to use the Logical operators and the results that can be expected with the various combinations of true or false. ## <br>Lesson JavaScript Coding Exercise: 1. Select the page elements you want to use assign variables to them 2. Create a global value for counter of 0 3. Once the button is cliked increment the counter by 1 4. Check to see if the counter value is less than 2, if that's true then update the style color to red 5. Add an else if to the condition, checking if the value of counter is less than 4, if it is then updating the style color to green for the output element. 6. Add an else if to the condition, checking if the value of counter is less than 6, if it is then updating the style color to purple for the output element. 7. Using else if none of the conditions are true update the style of the element to be blue 8. Create a switch to check for values of the counter. Create cases for the values you want to track, update the output area text with different string values depending on the case. Try the switch with and then without the break keyword. 9. Add in a default within the switch statement ```html <!doctype html> <html> <head> <title>JavaScript</title> </head> <body> <div>Hello world 1</div> <input type="text"> <button type="button">Click</button> <script src="dom3.js"></script> </body> </html> ``` ```js const output = document.querySelector('div'); const myInput = document.querySelector('input'); const btn = document.querySelector('button'); myInput.value = 'Laurence'; let counter = 0; btn.inclick = ()=> { counter++; let boo = (counter < 3); if(counter < 2) { output.style.color = 'red'; } else if(counter < 4) { output.style.color = 'green'; }else if(counter < 6) { output.style.color = 'purple'; }else { output.style.color = 'blue'; } output.textContent = `Counter:${counter} ${boo}`; console.log(counter); update(); } let val = ''; function update() { switch(counter){ case 0; val = `Case #1 ${counter}`; break; case 1: val = `Case #2 ${counter}`; break; case 3: val = `Case #3 ${counter}`; break; default: val = `DEFAULT ${counter}`; } output.innerText = val; } ``` Try it out and let us know in the comments how it turned out. Join the site, create your account now