LoganMacEachern29.github.io/input_elements_challenge.html at main · LoganMacEachern29/LoganMacEachern29.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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Input Element Challenge</title>
    <style>
      body {
        font-family: sans-serif;
        max-width: 600px;
        margin: 2rem auto;
      }

      section {
        margin-bottom: 1.5rem;
      }

      label {
        display: block;
        margin-top: 0.5rem;
      }

      button {
        margin-top: 1rem;
      }

      .output {
        margin-top: 1rem;
        font-weight: bold;
      }
    </style>
  </head>

  <body>
    <h1>Input Element Challenge</h1>

    <section id="part1">
      <h2>Part 1: Text and Number Inputs</h2>
      <label>
        Name:
        <input id="nameInput" type="text" placeholder="Enter your name" />
      </label>
      <label>
        Age:
        <input id="ageInput" type="number" min="0" max="120" />
      </label>
      <button id="btnGreet">Greet Me</button>
      <div class="output" id="greetingOutput"></div>
    </section>

    <section id="part2">
      <h2>Part 2: Color and Range Inputs</h2>
      <label>
        Favorite Color:
        <input id="colorInput" type="color" value="#00AAFF" />
      </label>
      <label>
        Volume:
        <input id="volumeInput" type="range" min="0" max="100" value="50" />
      </label>
      <div class="output" id="colorOutput"></div>
    </section>

    <section id="part3">
      <h2>Part 3: Checkbox and Radio Buttons</h2>
      <label
        ><input type="checkbox" id="subscribeBox" /> Subscribe to
        newsletter</label
      >
      <p>Pick a mode:</p>
      <label><input type="radio" name="mode" id= "light" value="Light" /> Light</label>
      <label><input type="radio" name="mode" id= "dark" value="Dark" /> Dark</label>
      <label
        ><input type="radio" name="mode" value="System" checked /> System</label
      >
      <button id="btnSubmit">Submit</button>
      <div class="output" id="modeOutput"></div>
    </section>

    <script>
      // --- PART 1 ---
      const nameInput = document.getElementById("nameInput");
      const ageInput = document.getElementById("ageInput");
      const btnGreet = document.getElementById("btnGreet");
      const greetingOutput = document.getElementById("greetingOutput");

      btnGreet.addEventListener("click", () => {
        let name = nameInput.value;
        let age = ageInput.value;
        greetingOutput.innerText =
          "Hello " + name + ", you are " + age + " years old! ";
        // TODO: Display a message like "Hello NAME, you are AGE years old!"
        // Challenge: If age < 13, show "You're just a kid!" instead.
        if (age < 13) {
          greetingOutput.textContent = "You're just a kid!";
        }
      });

      // --- PART 2 ---
      const colorInput = document.getElementById("colorInput");
      const volumeInput = document.getElementById("volumeInput");
      const colorOutput = document.getElementById("colorOutput");
      colorOutput.textContent = "Test content.";

      colorInput.addEventListener("input", () => {
        colorOutput.style.backgroundColor = colorInput.value
      });
      // TODO: Update the background color of colorOutput whenever the color input changes.
      // Challenge: Also display the hex code and volume value dynamically.

      // --- PART 3 ---
      const subscribeBox = document.getElementById("subscribeBox");
      const btnSubmit = document.getElementById("btnSubmit");
      const modeOutput = document.getElementById("modeOutput");
      let lightMode = document.getElementById("lightMode");
      let darkMode = document.getElementById("darkMode")
      let systemMode = document.getElementById("systemMode")
      btnSubmit.addEventListener("click", () => {
        if(lightMode.checked){
          displayLight
          if(darkMode.checked){
            displayDark
            if(systemMode.checked){
              displaySystem
            }
          }
        }
        lightMode.textContent = "Light Mode Activated!";
        darkMode.textContent = "Dark Mode Activated!";
        systemMode.textContent = "System Mode Activated!";
        // TODO: Find which radio button is checked and display it.
        // Challenge: Include whether the user subscribed or not.
      });
    </script>
  </body>
</html>