codeup-web-exercises/dom-query-js.html at main · silvam03/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
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>DOM: Query and Modify</title>
</head>
<body>

<h1 id="main-header">Hello World!</h1>

    <!--DOM EVENT EXERCISE-->
    <button type="button" id="h1-change">Change Header</button>

<ul>
    <li data-dbid="1">Item 1</li>
    <li data-dbid="2">Item 2</li>
    <li data-dbid="3">Item 3</li>
    <li data-dbid="4">Item 4</li>
    <li data-dbid="5">Item 5</li>
</ul>

    <!--DOM EVENT EXERCISE-->
    <button type="button" id="li-btn">Change List Colors</button>
    <button type="button" id="item1Btn">Change Item 1 Color</button>

<h2 id="sub-header">Hello Again.</h2>

    <!--DOM EVENT EXERCISE-->
    <button type="button" id="h2-change">Change Subheader</button>

<p class="sub-paragraph">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
    ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
    aliquip ex ea commodo consequat. Duis aute irure dolor in
    reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
    culpa qui officia deserunt mollit anim id est laborum.
</p>

    <!--DOM EVENT EXERCISE-->
    <button type="button" id="paraBtn">Change paragraph</button>

<script>
    (function() {
        "use strict";
        // TODO: Uncomment next line and get the main header element by id
        var mainHeader = document.getElementById("main-header");
        // console.log(mainHeader);

        // TODO: Set inner html of mainHeader to "JavaScript is Cool"
        // mainHeader.innerHTML = "JavaScript is Cool";

            // DOM EVENT EXERCISE:
            let h1Btn = document.getElementById('h1-change');
            h1Btn.addEventListener('click', function() {
                mainHeader.innerHTML = "JavaScript is Cool!";
            });

        // TODO: Uncomment the next line and get the sub header element by id
        var subHeader = document.getElementById("sub-header");
        // console.log(subHeader);

        // TODO: Set the text color of subHeader to blue
        // subHeader.style.color = "blue";

            //DOM EVENT EXERCISE
            let h2Btn = document.getElementById('h2-change');
            h2Btn.addEventListener('click', function() {
                subHeader.style.color = "blue";
            })

        // TODO: Uncomment the next line and get all list items
        var listItems = document.getElementsByTagName("li");
        // console.log(listItems);

        // Query selector method:
        // let listItems = document.querySelectorAll("li");
        // console.log(listItems);

        // TODO: Set text color on every other list item to grey
        // for(let i = 0; i < listItems.length; i ++) {
        //     if(i % 2 === 0) {
        //         listItems[i].style.color = "grey";
        //     }
        // };

        // Other for loop solution:
        // for(let i = 0; i < listItems.length; >>> i += 2 <<<) {
        //     listItems[i].style.color = "grey";
        // };

            //DOM EVENTS EXERCISE
            let liBtn = document.getElementById('li-btn');
            liBtn.addEventListener('click', function() {
                for(let i = 0; i < listItems.length; i += 2) {
                    listItems[i].style.color = 'grey';
                }
            });

        // TODO: Set text color of li with dbid = 1 to blue
        // listItems[0].style.color = "blue";

        // For loop solution:
        // for(let i = 0; i < listItems.length; i += 2) {
        //     listItems[i].style.color = "grey"
        // } if(listItems[i].getAttribute("data-dbid") == 1) {
        //     listItems[i].style.color = "blue";
        // };

            // DOM EVENTS EXERCISE
            let btnItem1 = document.getElementById('item1Btn');
            btnItem1.addEventListener('click', function() {
                listItems[0].style.color = 'blue';
            });

        // TODO: Uncomment the next line and get all elements with class name sub-paragraph
        var subParagraphs = document.getElementsByClassName("sub-paragraph");
        // console.log(subParagraphs);

        // TODO: Change the text in the first sub paragraph to "Mission Accomplished!"
        // for(let i = 0; i < subParagraphs.length; i++) {
        //     subParagraphs[i].innerText = "Mission Accomplished!";
        // };

        // Other solution without for loop
        // subParagraphs[0].innerHTML = "Mission Accomplished!";

            //DOM EVENTS EXERCISE
            let paraBtn = document.getElementById('paraBtn');
            paraBtn.addEventListener('click', function() {
                for(let i = 0; i < subParagraphs.length; i++) {
                    subParagraphs[i].innerText = 'Mission Accomplished!';
                }
            });

    })();
</script>
</body>
</html>