1+ <!DOCTYPE html>
2+
3+ < html >
4+
5+ < head >
6+
7+ < title > Angela Ruslander's Bio</ title >
8+
9+ < style >
10+
11+ # bio-box { border : 1px solid # cccpadding : 10px ; width : 800px ; }
12+
13+ # hobbies { display : none; margin-top : 10px ; text-align : center; font-size : 20px ; color : blue;}
14+
15+ </ style >
16+
17+ </ head >
18+
19+ < body >
20+
21+
22+
23+ < h2 id ="greeting "> Hi, I'm a student!</ h2 >
24+
25+
26+
27+ < div id ="bio-box ">
28+
29+ < img src ="Angela_Photo.jpg " alt ="Angela's Photo " id ="profile-pic " width ="800 "> < br > < br >
30+
31+ < button onclick ="changeTextColor() " style ="background-color: blue; color:white; width: 200px; padding: 10px; margin: 4px; "> Change Text Color</ button >
32+
33+ < button onclick ="updateName() " style ="background-color: blue; color:white; width: 200px; padding: 10px; margin: 4px; "> Update Name</ button >
34+
35+ < button onclick ="toggleHobbies() " style ="background-color: blue; color:white; width: 200px; padding: 10px; margin: 4px; "> Show/Hide Hobbies</ button >
36+
37+ < button onclick ="resetBio() " style ="background-color: blue; color:white; width: 200px; padding: 10px; margin: 4px; "> Reset</ button >
38+
39+ < button onclick ="changeImage() " style ="background-color: blue; color:white; width: 200px; padding: 10px; margin: 4px; "> Change Image</ button >
40+
41+ < div id ="hobbies ">
42+
43+ < p > I love cooking, taking my dog on hikes, and fiber art!</ p >
44+
45+
46+ </ div >
47+
48+ </ div >
49+
50+
51+
52+ < script >
53+
54+ function changeTextColor ( ) {
55+
56+ document . getElementById ( "greeting" ) . style . color = "blue" ;
57+
58+ }
59+
60+
61+
62+ function updateName ( ) {
63+
64+ document . getElementById ( "greeting" ) . innerText = "Hi, I'm Angela!" ;
65+ document . getElementById ( "greeting" ) . style . fontSize = "40px" ;
66+
67+ }
68+
69+
70+
71+ function toggleHobbies ( ) {
72+
73+ const hobbies = document . getElementById ( "hobbies" ) ;
74+
75+ hobbies . style . display = hobbies . style . display === "none" ? "block" : "none" ;
76+
77+ }
78+
79+
80+
81+ function resetBio ( ) {
82+
83+ document . getElementById ( "greeting" ) . innerText = "Hi, I'm a student!" ;
84+
85+ document . getElementById ( "greeting" ) . style . fontSize = "20px" ;
86+
87+ document . getElementById ( "greeting" ) . style . color = "black" ;
88+
89+ document . getElementById ( "hobbies" ) . style . display = "none" ;
90+
91+ document . getElementById ( "profile-pic" ) . src = 'Angela_Photo.jpg' ;
92+
93+ }
94+
95+ function changeImage ( ) {
96+
97+ document . getElementById ( "profile-pic" ) . src = 'Angela_Photo2.jpg' ;
98+ document . getElementById ( "profile-pic" ) . style . width = "800" ;
99+ }
100+ </ script >
101+
102+
103+
104+ </ body >
105+
106+ </ html >
0 commit comments