codeup-web-exercises/dom-practice.html at main · marcusmz/codeup-web-exercises · 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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document Object Model</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
        }

        .question {
            padding: 10px;
        }

    </style>
</head>

<body>

<h1>Lets practice DOM!</h1>

<div class="question">
    <h1>Question 1</h1>
    <input type="color" id="color">
    <button type="button" id="changeColor">Button!</button>
</div>

<div class="question">
    <h1>Question 2</h1>
    <input type="text" id="todo">
    <button type="button" id="addTodo">Add Todo</button>
    <ul id="todosList">
    </ul>
</div>


<div class="question">
    <h1>Question 3</h1>
    <p>All these H1 Tags should be changing size!</p>
    <button id="toggleH1">Toggle!</button>
</div>

<div class="question">
    <br>
    <br>
    <h1>Question 4</h1>
    <br>
    <br>
</div>
<div class="question">
    <h1>Question 5</h1>
    <button id="google">Google</button>
</div>
<div class="question">
    <h1>Question 6</h1>
    <label for="userInput">Enter String here: </label>
    <input type="text" id="userInput" placeholder="Enter something to add!">
    <button id="submitString">Add</button>
    <p id="madLib">Hello</p>
</div>

<script>

    'use strict'
    //     DOM Practice Question #1
    //     Create an HTML file called dom-practice.html in codeup-web-exercises repos.
    // Put a text input on an html page with id of "color"
    // Put a button on the page with id of "changeColor"
    // Use an Event listener to trigger when the button is clicked.
    //         Use the value to change the background-color of the page to match the user's input value.
    //         example of input: "#00000", "black", "#FF00FF"

    var button = document.getElementById("changeColor");
    var color = document.querySelector("#color");
    var body = document.querySelector("body");

    color.addEventListener("change", (e) => console.log("e :", e.target.value));

    button.addEventListener("click", function (e) {
        console.log("e:", e)
        body.style.backgroundColor = color.value
    })


    // DOM Practice Question #2

    // 1. Create a button with the id of addTodo. Create an input of type text with the id of "todo"
    // 2. Create an unordered list with the id="todosList"
    // 4. When the add button is clicked:
    //       a. Make it such that the value from the input is added to a list items.
    //          example: <li>input</li> inside of <ul>
    //       b. Reset the value in the addTodos input.
    // 5. If the value for the input is empty. Prevent it from creating another <li> element

    var todoButton = document.getElementById("addTodo");
    var todoInput = document.getElementById("todo");
    var todoList = document.querySelector("#todosList");


    todoButton.addEventListener("click", function () {
        if (todoInput.value.trim() === "") return;
        todoList.innerHTML += "<li>" + todoInput.value + "</li>";
        todoInput.value = "";
    });


    // DOM Practice Question #3

    // Part 1:
    // Every 1 seconds take the H1 tags and change the font size to 10px.
    // If its already 10px set it to 20px;

    // Part 2:
    // Add a toggle button with id of "toggleH1"
    // use that button to stop and restart the h1 tags from changing size.


    function intervalFunction() {
        var h1 = document.getElementsByTagName("h1");

        for (var i = 0; i < h1.length; i++) {
            var currentSize = h1[i].style.fontSize;

            if(currentSize === "10px") {
                h1[i].style.fontSize = "20px";
            } else {
                h1[i].style.fontSize = "10px";
            }
        }
    }

    var interval;
    // var interval = setInterval(intervalFunction, 1000);
    var toggleH1s = document.querySelector("#toggleH1");
    var isOn = false;

    toggleH1s.addEventListener("click", function () {
        isOn = !isOn;
        // need to know current state if on or off?

        if(isOn)  {
            // need to reset the interval
            interval = setInterval(intervalFunction, 1000);
        } else {
            // need to clear the interval
            clearInterval(interval);
        }


    })


    // DOM Question #4

    // When the mouse enters the content area of the 4th div with the class of "question", an alert should pop up
    // that reads "CONGRATULATIONS ON YOUR NEW CRUISE!";

    // var questionFour = document.getElementsByClassName("question")[3];

    var questionFour = document.querySelector(".question:nth-of-type(4)")

    questionFour.addEventListener("mouseenter", function() {
        alert("CONGRATULATIONS ON YOUR NEW CRUISE!");
    })


    // DOM Question# #5

    // When a user clicks a button labeled "Google" the user should be redirected to the "https://google.com"

    var redirectButton  = document.getElementById("google");

    redirectButton.addEventListener("click", function () {
        window.location = "https://www.google.com"
        // location.assign("https://www.google.com");
    })

    // DOM Question #6

    // When the user types something into an input element, the value should be concatenated
    // onto the paragraph with the ID of "madLib" once the submit button has been clicked.

    var madLibButton = document.getElementById("submitString");
    var madLibInput = document.querySelector("#userInput");
    var madLibString = document.querySelector("#madLib");


    madLibButton.addEventListener("click", function () {
        madLibString.innerHTML += madLibInput.value;
    })


</script>
</body>

</html>