JavaScript-ClickMe/index.html at main · AngelaRProjects/JavaScript-ClickMe · 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
<!DOCTYPE html>

<html>

<head>

 <title>Angela's Bio</title>

 <style>

   #bio-box { border: 1px solid #ccc; padding: 10px; width:1200px; }

   #hobbies { display: none; margin-top: 10px; text-align: center; font-size: 20px; color: blue;}

 </style>

</head>

<body>


 <h2 id="greeting">Hi, I'm a student!</h2>


 <div id="bio-box">

   <img src="img/Photo 1.jpg" alt="Maya, my dog, looking at the Niagara River" id="profile-pic" width="1200"><br><br>

   <button onclick="changeTextColor()" style="background-color: blue; color:white; width: 225px; padding: 10px; margin: 5px;">Change Text Color</button>

   <button onclick="updateName()"  style="background-color: blue; color:white; width: 225px; padding: 10px; margin: 5px;">Update Name</button>

   <button onclick="toggleHobbies()" style="background-color: blue; color:white; width: 225px; padding: 10px; margin: 5px;">Show/Hide Hobbies</button>

   <button onclick="resetBio()" style="background-color: blue; color:white; width: 225px; padding: 10px; margin: 5px;">Reset</button>

   <button onclick="changeImage()" style="background-color: blue; color:white; width: 225px; padding: 10px; margin: 5px;">Change Image</button>

   <div id="hobbies">

     <p>I love cooking, taking my dog on hikes, and fiber art!</p>


   </div>

 </div>


 <script>

   function changeTextColor() {

     document.getElementById("greeting").style.color = "blue";

   }


   function updateName() {

     document.getElementById("greeting").innerText = "Hi, I'm Angela!";
     document.getElementById("greeting").style.fontSize = "40px";

   }


   function toggleHobbies() {

     const hobbies = document.getElementById("hobbies");

     hobbies.style.display = hobbies.style.display === "none" ? "block" : "none";

   }


   function resetBio() {

     document.getElementById("greeting").innerText = "Hi, I'm a student!";

     document.getElementById("greeting").style.fontSize = "20px";

     document.getElementById("greeting").style.color = "black";

     document.getElementById("hobbies").style.display = "none";

     document.getElementById("profile-pic").src='img/Photo 1.jpg';

   }

    function changeImage() {

    document.getElementById("profile-pic").src='img/Photo 2.jpg';
    document.getElementById("profile-pic").style.width="1200";
   }
 </script>


</body>

</html>