adding conditionals examples

mdn · Aug 9, 2016 · 883a20d · 883a20d
1 parent dfb654b
commit 883a20d
Show file tree

Hide file tree

Showing 6 changed files with 290 additions and 0 deletions.
diff --git a/javascript/building-blocks/allowance-updater.html b/javascript/building-blocks/allowance-updater.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Allowance updater example</title>
+  </head>
+  <body>
+    <label for="shopping-check">Has the shopping been done? </label>
+    <input type="checkbox" id="shopping-check">
+
+    <p></p>
+
+    <script>
+      var checkBox = document.querySelector('input');
+      var para = document.querySelector('p');
+      var shoppingDone = false;
+
+      checkBox.addEventListener('change',function() {
+        checkBox.disabled = true;
+        shoppingDone = true;
+        updateAllowance();
+      });
+
+      function updateAllowance() {
+        if(shoppingDone === true) {
+          var childsAllowance = 10;
+        } else {
+          var childsAllowance = 5;
+        }
+
+        para.textContent = 'Child has earned $' + childsAllowance + ' this week.';
+      }
+
+      updateAllowance();
+    </script>
+  </body>
+</html>
diff --git a/javascript/building-blocks/calendar-finished.html b/javascript/building-blocks/calendar-finished.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Simple calendar example</title>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+
+      ul {
+        padding-left: 0;
+      }
+
+      li {
+        display: block;
+        float: left;
+        width: 25%;
+        border: 2px solid white;
+        padding: 5px;
+        height: 80px;
+        background-color: #4A2DB6;
+        color: white;
+      }
+    </style>
+  </head>
+  <body>
+    <label for="month">Select month: </label>
+    <select id="month">
+      <option value="January">January</option>
+      <option value="February">February</option>
+      <option value="March">March</option>
+      <option value="April">April</option>
+      <option value="May">May</option>
+      <option value="June">June</option>
+      <option value="July">July</option>
+      <option value="August">August</option>
+      <option value="September">September</option>
+      <option value="October">October</option>
+      <option value="November">November</option>
+      <option value="December">December</option>
+    </select>
+
+    <h1></h1>
+
+    <ul>
+
+    </ul>
+
+    <script>
+      var select = document.querySelector('select');
+      var list = document.querySelector('ul');
+      var h1 = document.querySelector('h1');
+
+      select.onchange = function() {
+        var choice = select.value;
+        var days = 31;
+
+        if(choice === 'February') {
+          days = 28;
+        } else if(choice === 'April' || choice === 'June' || choice === 'September'|| choice === 'November') {
+          days = 30;
+        }
+
+        createCalendar(days, choice);
+      }
+
+      function createCalendar(days, choice) {
+        list.innerHTML = '';
+        h1.textContent = choice;
+        for(var i = 1; i <= days; i++) {
+          var listItem = document.createElement('li');
+          listItem.textContent = i;
+          list.appendChild(listItem);
+        }
+      }
+
+      createCalendar(31,'January');
+    </script>
+  </body>
+</html>
diff --git a/javascript/building-blocks/more-color-choices-finished.html b/javascript/building-blocks/more-color-choices-finished.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>More color choices!</title>
+  </head>
+  <body>
+    <label for="theme">Select theme: </label>
+    <select id="theme">
+      <option value="white">White</option>
+      <option value="black">Black</option>
+      <option value="purple">Purple</option>
+      <option value="yellow">Yellow</option>
+      <option value="psych">Psychedelic</option>
+    </select>
+
+    <h1>This is my website</h1>
+
+    <script>
+      var select = document.querySelector('select');
+      var html = document.querySelector('html');
+
+      select.onchange = function() {
+        var choice = select.value;
+
+        switch(choice) {
+          case 'black':
+            update('black','white');
+            break;
+          case 'white':
+            update('white','black');
+            break;
+          case 'purple':
+            update('purple','white');
+            break;
+          case 'yellow':
+            update('yellow','darkgray');
+            break;
+          case 'psych':
+            update('lime','purple');
+            break;
+        }
+      }
+
+      function update(bgColor, textColor) {
+        html.style.backgroundColor = bgColor;
+        html.style.color = textColor;
+      }
+    </script>
+  </body>
+</html>
diff --git a/javascript/building-blocks/simple-else-if.html b/javascript/building-blocks/simple-else-if.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Simple else if example</title>
+  </head>
+  <body>
+    <label for="weather">Select the weather type today: </label>
+    <select id="weather">
+      <option value="">--Make a choice--</option>
+      <option value="sunny">Sunny</option>
+      <option value="rainy">Rainy</option>
+      <option value="snowing">Snowing</option>
+      <option value="overcast">Overcast</option>
+    </select>
+
+    <p></p>
+
+    <script>
+      var select = document.querySelector('select');
+      var para = document.querySelector('p');
+      var temperature = 29;
+
+      select.onchange = setWeather;
+
+      function setWeather() {
+        var choice = select.value;
+
+        if(choice === 'sunny') {
+          para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
+        } else if(choice === 'rainy') {
+          para.textContent = 'Rain is falling outside; take a rain coat and a brolly, and don\'t stay out for too long.';
+        } else if(choice === 'snowing') {
+          para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';
+        } else if(choice === 'overcast') {
+          para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';
+        } else {
+          para.textContent = '';
+        }
+      }
+    </script>
+  </body>
+</html>
diff --git a/javascript/building-blocks/simple-switch.html b/javascript/building-blocks/simple-switch.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Simple switch example</title>
+  </head>
+  <body>
+    <label for="weather">Select the weather type today: </label>
+    <select id="weather">
+      <option value="">--Make a choice--</option>
+      <option value="sunny">Sunny</option>
+      <option value="rainy">Rainy</option>
+      <option value="snowing">Snowing</option>
+      <option value="overcast">Overcast</option>
+    </select>
+
+    <p></p>
+
+    <script>
+      var select = document.querySelector('select');
+      var para = document.querySelector('p');
+      var temperature = 29;
+
+      select.onchange = setWeather;
+
+      function setWeather() {
+        var choice = select.value;
+
+        switch(choice) {
+          case 'sunny':
+            para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
+            break;
+          case 'rainy':
+            para.textContent = 'Rain is falling outside; take a rain coat and a brolly, and don\'t stay out for too long.';
+            break;
+          case 'snowing':
+            para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';
+            break;
+          case 'overcast':
+            para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';
+            break;
+          default:
+            para.textContent = '';
+        }
+      }
+    </script>
+  </body>
+</html>
diff --git a/javascript/building-blocks/simple-ternary.html b/javascript/building-blocks/simple-ternary.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Simple ternary operator example</title>
+  </head>
+  <body>
+    <label for="theme">Select theme: </label>
+    <select id="theme">
+      <option value="white">White</option>
+      <option value="black">Black</option>
+    </select>
+
+    <h1>This is my website</h1>
+
+    <script>
+      var select = document.querySelector('select');
+      var html = document.querySelector('html');
+
+      select.onchange = function() {
+        select.value === 'black' ? update('black','white') : update('white','black');
+      }
+
+      function update(bgColor, textColor) {
+        html.style.backgroundColor = bgColor;
+        html.style.color = textColor;
+      }
+    </script>
+  </body>
+</html>