chanpham97.github.io/loops.html at master · chanpham97/chanpham97.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>phamily house</title>
  <link rel="stylesheet" href="stylesheets/loops.css">
</head>

<body>
  <h1>loopy pham-ily house</h1>
  <p>welcome! the lights in this house are controlled by a for loop-loving landlord.</p>
  <p>play around with the dropdown to understand the <b>counter initialization</b>, the <b>looping condition</b>, and
    the <b>incrementer</b> expressions.</p>
  <div id="wrapper">
    <div class="top-floor lights">
      <p class="lightbulb">💡</p>
      <p class="lightbulb">💡</p>
      <p class="lightbulb">💡</p>
      <p class="lightbulb">💡</p>
    </div>
    <div class="bottom-floor lights">
      <p class="lightbulb">💡</p>
      <p class="lightbulb">💡</p>
      <p class="lightbulb">💡</p>
      <p class="lightbulb">💡</p>
    </div>
  </div>
  <center>
    <span>for (let i = </span>
    <select name="init" id="init">
      <option value="0">0</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
    </select>
    <span>; i < </span>
        <select name="stop" id="stop">
          <option value="0">0</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
          <option value="7">7</option>
          <option value="8">8</option>
          <option value="8">lights.length</option>
        </select>
        <span>; </span>
        <select name="inc" id="inc">
          <option value="1">i++</option>
          <option value="2">i+=2</option>
          <option value="3">i+=3</option>
          <option value="4">i+=4</option>
        </select>
        <span>){ turnOnLight() }</span>
        <button id="run">run code</button>
        <button id="clear">clear</button>
  </center>

  <h2>tasks</h2>
  <div id="tasks">
  assuming the first element of the array is top left, figure out what settings to turn on the following lights:
  <ol>
    <li>every light</li>
    <li>every light on the top floor</li>
    <li>every light on the bottom floor</li>
    <li>every other light in the whole house (starting from the first one)</li>
    <li>every other light in the whole house (starting from the second one)</li>
    <li>every light other than the first and last one</li>
  </ol>
  </div>

  <h2>questions</h2>
  <div id="questions">
  reflect on the following questions
  <ol>
    <li>why are the counter initialization values from 0 to 7?</li>
    <li>if you don't know the length of your array, what should you use for your looping condition?</li>
    <li>what happens when the looping condition goes beyond the array length?</li>
    <li>what is another way to write i++ (look at the other dropdowns for the incrementer)?</li>
  </ol>
  </div>
  <a href="projects.html" class="projects-button">Back to Projects</a>

  <script src="scripts/loops.js"></script>
</body>

</html>