codeup-web-exercises/extrapriceDOM.html at main · CoJUr/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
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
<!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="text" 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>
    var todoButton = document.getElementById('#addtodo')
    var todoText = document.getElementById('todo')
    var uList = document.querySelector("#todosList")

    todoButton.addEventListener("click", function () {

            if (todoText === "") return ;
            uList.innerHTML += "<li>" + todoText.value + "</li>";
            todoText = "";

    });


    // var listener = function buttonListener(e) {
    //     if (todoText.value !== "") {
    //         uList.innerHTML += "<li>" + todoText.value + "</li>"
            // } else if (todoText.value === ""){
            //
            // }

            // if (todoText.value !== "") {
            //   var newLi = document.createElement("li").textContent = todoText.value;
            //     uList.appendChild(newLi);
            // }

            // uList.innerHTML. += "<li>" + todoText.value + "</li>";

            // uList.value = ""
    //     }
    // }

    //       b. Reset the value in the addTodos input.
    // 5. If the value for the input is empty. Prevent it from creating another <li> element
    // 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;

    var allHeaders = document.getElementsByTagName("h1")

    function intervalFuntion() {
        var h1 = document.getElementsByTagName('h1')

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

            if (currentSize === "10px") {
                h1[i].style.fontSize = "20px";
            } else {
                h1[i].style.fontSize = "10px";
            }
        }
    }
    // var interval = setInterval(intervalFunction, 1000);
    var interval;
    var toggleH1s = document.querySelector('#toggleH1')
    var isOn = false;
    toggleH1s.addEventListener('click', function () {
        isOn = !isOn;
        //check current state

        if (isOn) {
            // reset it
            interval = setInterval(intervalFuntion, 1000);
        } else {
            //clear the interval
            clearInterval(interval);
        }
        //reset the interval
    })

    //  setInterval(function (){
    //     for (let i = 0; i < allHeaders.length; i++) {
    //         if (allHeaders[i].style.fontSize !== "10px") {
    //             allHeaders[i].style.fontSize = "10px";
    //         } else {
    //             allHeaders[i].style.fontSize = "20px";
    //         }
    //     }
    // }, 1000)

    // var allH1 = document.querySelectorAll('h1')
    // setInterval(function () {


      // allH1.style.fontSize *= '3px';
    // }, 1000)


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


    // 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>