ButtonJS-CodeSprint2/index.html at main · AarushArya1/ButtonJS-CodeSprint2 · 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

<!DOCTYPE html>

<html>

    <head>
        <title>Static web page by Aarush A</title>
        <link rel="stylesheet" href="styles.css">
    </head>


    <body>
        <h1> BOBA CHALLENGE BUT WITH A COOL BUTTON</h1>

        <h2> 🧋🧋🧋 W Web Page by Aarush Arya 🧋🧋🧋 </h2>

        <h1>  The Button changes the background of the page. 🧋🧋🧋🧋🧋 </h1>

        <p> 🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋
            🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋
            🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋
            🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋
            🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋
            🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋
            🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋🧋</p>

        <button id="colorButton">Click this button. 🧋</button>


        <script> //Javascript usage

            function changeBackground() {


                let existingStyleSheet = document.querySelector('link[rel="stylesheet"]');


                if (existingStyleSheet.getAttribute('href') === 'styles.css') {
                        existingStyleSheet.setAttribute('href', 'styles2.css');
                } else if (existingStyleSheet.getAttribute('href') === 'styles2.css'){
                        existingStyleSheet.setAttribute('href', 'styles3.css');
                } else {
                    existingStyleSheet.setAttribute('href', 'styles.css');
                }


            }


            document.getElementById('colorButton').addEventListener('click', changeBackground);
            const btton = document.getElementById('colorButton');
            btton.style.width = "50px";
            btton.style.height = "30px";
            btton.style.position = "absolute";
            btton.style.top = "100px";
            btton.style.left = "200px";

        </script>

        <img src="https://www.eatingwell.com/thmb/Sud6f5AxXQDmX-_LSVZOafBF96w=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc()/boba-tea-explainer-131c892c9c8540bdac4f6a0b403263df.jpg" width="200" height="150"/>

        <img src="https://www.ohhowcivilized.com/wp-content/uploads/bubble-tea-boba-recipe.jpg" width="200" height="150"/>
        <img src="https://simplyhomecooked.com/wp-content/uploads/2023/04/Brown-sugar-boba-6.jpg" width="200" height="150"/>
        <img src="https://simplyhomecooked.com/wp-content/uploads/2023/04/Brown-sugar-boba-6.jpg" width="200" height="150"/>
        <img src="https://simplyhomecooked.com/wp-content/uploads/2023/04/Brown-sugar-boba-6.jpg" width="200" height="150"/>

        <br>
        <br>
        <br>
        <br>
        <br>
        <ul>
            <li> 🧋 1</li>
            <li> 🧋 2</li>
            <li> 🧋 3</li>
            <li> 🧋 4</li>

        </ul>

        <ul>
            <li> BobaDrops-Static-Site</li>
        </ul>


        <p> <b> Bold text 🧋🧋🧋 </b> <i> Italicized Text 🧋🧋🧋 </i> </p>
    </body>

</html>