Javascript-Homework/styleObjectAssignment.html at main · Thinkgraser/Javascript-Homework · 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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WDV221 Style Object-CSS Interactions In Class Exercises</title>
<style type="text/css">
<!--
.style1 {color: #FF0000}
-->
</style>
<script>
  function changeRed(){
  document.getElementById("changeToRed").style.color = "red";
 }
  function centerH3(){
    document.getElementById("h3text").style.textAlign="center";
  }
  function leftH3(){
    console.log("inside leftH3")
    document.getElementById("h3text").style.textAlign = "start";
  }
  function changeFont(){
    document.getElementById("font").style.fontFamily = "Arial";
  }
  function returnFont(){
    document.getElementById("font").style.fontFamily = "times new roman";
  }
  function changeToBigText(){
    document.getElementById("changeSize").style.fontSize = "24px";
  }
  function changeTextSizeBack(){
    document.getElementById("changeSize").style.fontSize = "16px";
  }
  function yelowBackground(){
    document.getElementById("changeBackground").style.backgroundColor = "yellow";
  }
  function noFrog(){
    document.getElementById("frog").style.display = "none";
  }
  function frogAppear(){
    document.getElementById("frog").style.display = "block";
  }
  function bigFrog(){
    document.getElementById("frog").style.width = "200px"
    document.getElementById("frog").style.height = "200px"
  }
  function normalFrog(){
    document.getElementById("frog").style.width = "100px"
    document.getElementById("frog").style.height = "100px"
  }
  function addBorder(){
    document.getElementById("border").style.border = "3px solid black";
  }
  function removeBorder(){
    document.getElementById("border").style.border = "none";
  }
  function greenBackground(){
    document.getElementById("backgroundGreen").style.backgroundColor = "green";
  }
  function normalBackground(){
    document.getElementById("backgroundGreen").style.background = "none";
  }
  </script>
</head>

<body>
<h1>WDV221 Intro Javascript</h1>
<h3 id="h3text">Style Object - CSS Interactions - In Class Exercises</h3>
<p>Please modify this page to create the following Dynamic HMTL effects. </p>
<p id = "changeToRed" onclick= changeRed() >1. Click this paragraph to change the font color to red.</p>
<p onmouseover = centerH3() >2. Mousever this paragraph to center the H3 element containing &quot;CSS Interactions&quot;.</p>
<p>3. Click the button to left align the H3 element. </p>
<p>
  <label>
  <input type="submit" name="button" id="button" value="Submit" onclick= "leftH3()"/>
  </label>
</p>
<p id = "font" onmouseover="changeFont()" onclick="returnFont()">4. Mouseover this paragraph to change the font to a font of you choice. 5. Click on this paragraph to return the font to the default font.</p>
<p>6. Click on the button to make the word <span id = "changeSize">SALE</span> font size 24. </p>
<p>
  <label>
  <input type="submit" name="button2" id="button2" value="Submit" onclick="changeToBigText()"/>
  </label>
</p>
<p>7. Click on the button to return the word to its original size.</p>
<p>
  <label>
    <input type="submit" name="button3" id="button3" value="Submit" onclick="changeTextSizeBack()"/>
  </label>
</p>
<p onclick="yelowBackground()" id="changeBackground">8. Use an eventhandler of your choice on this paragraph to make the paragraph background color yellow. </p>
<p onclick="noFrog()">9. Use an onclick event to hide the Frog image shown below.</p>
<p>10. Use the following button to make the Frog image shown below reappear.</p>
<p>
  <input type="submit" name="button4" id="button4" value="Submit" onclick="frogAppear()"/>
</p>
<p >11. Mouseover the Frong image to make its height and width double its original size. </p>
<p onmouseover="bigFrog()" onclick="normalFrog()"><img id = "frog" src="frog.jpg" width="100" height="100" /></p>
<p>12. Use a click event on the Frog image to make it return to original size. </p>
<p ondblclick="addBorder()" id = "border">13. Doubleclick on this paragraph to place a border around this paragraph.</p>
<p onclick="removeBorder()">14. Use an event handler of your choice to remove the border from the previous paragraph. </p>
<p onmouseover="greenBackground()" onmouseout="normalBackground()" id="backgroundGreen">15. Mouseover this paragraph to turn its background color to green. When you mouseoff the paragraph return it to its normal color. </p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</body>
</html>