Skip to content

Commit 5fa8b2f

Browse files
sundarcodessundarcodes
committed
Merge remote-tracking branch 'asif/master'
2 parents 1d9f1ac + f5e169a commit 5fa8b2f

File tree

3 files changed

+244
-109
lines changed

3 files changed

+244
-109
lines changed

‎DOMAccessQuiz/app.css‎

Lines changed: 29 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,34 @@
1-
.box1{
2-
height:20px;
3-
width:20px;
4-
border-width: 1px;
5-
border-style: solid;
6-
border-color: black;
1+
.box1 {
2+
height: 20px;
3+
width: 20px;
4+
border-width: 1px;
5+
border-style: solid;
6+
border-color: black;
77
}
88

9-
.box2{
10-
height:20px;
11-
width:20px;
12-
border-width: 1px;
13-
border-style: solid;
14-
border-color: black;
15-
background-color: green;
9+
.box2 {
10+
height: 20px;
11+
width: 20px;
12+
border-width: 1px;
13+
border-style: solid;
14+
border-color: black;
15+
background-color: green;
1616
}
1717

18-
.box{
19-
height:40px;
20-
width:40px;
21-
border-width: 1px;
22-
border-style: solid;
23-
border-color: black;
24-
background-color: yellow;
18+
.box2 {
19+
height: 20px;
20+
width: 20px;
21+
border-width: 1px;
22+
border-style: solid;
23+
border-color: black;
24+
background-color: green;
25+
}
26+
27+
.box {
28+
height: 40px;
29+
width: 40px;
30+
border-width: 1px;
31+
border-style: solid;
32+
border-color: black;
33+
background-color: yellow;
2534
}

‎DOMAccessQuiz/app.js‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
var marg = 0;
2+
3+
function identifyById() {
4+
console.log(document.getElementById("para1"));
5+
}
6+
7+
function identifyByClass() {
8+
console.log(document.getElementsByClassName("class1"));
9+
}
10+
11+
function byTag() {
12+
console.log(document.getElementsByTagName("p"));
13+
}
14+
15+
function changeBackground() {
16+
var elem = document.getElementById("block1");
17+
elem.style.background = "blue";
18+
}
19+
20+
function increaseFont() {
21+
var elem = document.getElementById("block2");
22+
elem.style.fontSize = "4em";
23+
}
24+
25+
function changeFontColor() {
26+
var elem = document.getElementById("block3");
27+
elem.style.color = "green";
28+
}
29+
30+
function revertColor() {
31+
var elem = document.getElementById("block3");
32+
elem.style.color = "black";
33+
}
34+
35+
function hide() {
36+
var elem = document.getElementById("block4");
37+
elem.style.visibility = "hidden";
38+
}
39+
40+
function changeBackColor(color, className) {
41+
var elem = document.getElementsByClassName(className);
42+
for (i = 0; i < elem.length; i++) {
43+
elem[i].style.background = color;
44+
}
45+
}
46+
47+
function numbersOnly(e) {
48+
49+
var charCode = e.which || e.keycode;
50+
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
51+
return false;
52+
}
53+
return true;
54+
}
55+
56+
function addAdjacent() {
57+
var elem = document.getElementById("para2");
58+
elem.insertAdjacentHTML("afterend", "<p>I got generated on the fly...</p>");
59+
}
60+
61+
function removePara() {
62+
var elem = document.getElementById("para4");
63+
elem.remove();
64+
}
65+
66+
function myMove() {
67+
var elem = document.getElementById("box5");
68+
var color = '#' + (Math.random() * 0xFFFFFF << 0).toString(16);
69+
elem.style.background = color;
70+
elem.style.marginLeft = (marg + 5) + 'px';
71+
}
72+
73+
function myFunction() {
74+
var elem = document.getElementById('fname');
75+
elem.value = elem.value.toUpperCase();
76+
}
77+
78+
function changeOn() {
79+
// body...
80+
var elem = document.getElementById('fname1');
81+
elem.value = elem.value.toUpperCase();
82+
}
83+
84+
function preferedBrowser() {
85+
// body...
86+
var elem = document.getElementById("browsers");
87+
alert(elem.value);
88+
}
89+
90+
function color(elem) {
91+
// body...
92+
elem.style.background = "red";
93+
}
94+
95+
function inputxt() {
96+
var elem = document.getElementById('demo');
97+
demo.innerHTML = 'You selected some text';
98+
}
99+
100+
function confirmInput() {
101+
102+
}
103+
104+
function message() {
105+
alert("Reset");
106+
}
107+
108+
function keydown(n) {
109+
var elem = n;
110+
var color = '#' + (Math.random() * 0xFFFFFF << 0).toString(16);
111+
elem.style.background = color;
112+
}
113+
114+
function keypress(n) {
115+
var elem = document.getElementById('keycode');
116+
elem.innerHTML = n.which || n.keycode;
117+
}
118+
119+
function keyup() {
120+
var elem = document.getElementById('fname2');
121+
elem.value = elem.value.toUpperCase();
122+
}
123+
124+
function writeMessage() {
125+
var elem1 = document.getElementsByName('myInput')[0];
126+
var elem2 = document.getElementsByName('mySecondInput')[0];
127+
elem2.value = elem1.value;
128+
}

‎DOMAccessQuiz/index.html‎

Lines changed: 87 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,121 +1,119 @@
11
<html>
2+
23
<head>
3-
<title>DOM Access JS Quiz</title>
4-
<link rel="stylesheet" href="app.css">
5-
<script src="jquery.js"></script>
6-
<script type="text/javascript" src="jquery-ui.js"></script>
7-
<script src="app.js"></script>
4+
<title>DOM Access JS Quiz</title>
5+
<link rel="stylesheet" href="app.css">
6+
<script src="jquery.js"></script>
7+
<script type="text/javascript" src="jquery-ui.js"></script>
8+
<script src="app.js"></script>
89
</head>
910
<h1>Welcome to JS DOM Exercise</h1>
1011
<p id="para1">1. Hello there..Could you identify me ? My id is para1</p>
12+
<a href="#" onclick="identifyById()">document.getElementsById</a>
1113
<hr>
1214
<p class="class1">2. Hi again...I don't have a id but you can find by my class which is class1 </p>
15+
<a href="#" onclick="identifyByClass()">document.getElementsByClassName</a>
1316
<hr>
1417
<p> 3. Oh.Oh.Oh.. wait a minute.. I don't have a id nor do I have a class in me.. Could you find me and my peers if I tell you that I am a p element ? </p>
18+
<a href="#" onclick="byTag()">document.getElementsByTagName</a>
1519
<hr>
1620
<div id="block1">4. I am inside a div.Can you change my background color to blue.. My id is block1</div>
21+
<a href="#" onclick="changeBackground()">Change Background Color</a>
1722
<hr>
1823
<div id="block2">5. On mouse click, can you increase my fontsize. My id is block2</div>
24+
<a href="#" onclick="increaseFont()">Increase Font Size</a>
1925
<hr>
20-
<div id="block3">6. Can you change my font color to green on mouse over.. and roll it back to black when is mouse is moved out.. yeh..my id is block3</div>
21-
<hr>
22-
<div id="block4">7. On double click, can you hide me ?. My id is block4</div>
26+
<div id="block3" onmouseover="changeFontColor()" onmouseout="revertColor()">6. Can you change my font color to green on mouse over.. and roll it back to black when is mouse is moved out.. yeh..my id is block3</div>
2327
<hr>
24-
8. Can you please change all the boxes background color to green. All of them have class as box1 ?
28+
<div id="block4" ondblclick="hide()">7. On double click, can you hide me ?. My id is block4</div>
29+
<hr> 8. Can you please change all the boxes background color to green. All of them have class as box1 ?
2530
<div class="box1"></div>
2631
<div class="box1"></div>
2732
<div class="box1"></div>
28-
<hr>
29-
9. Can you now change all the box background color to blue on mouse click. All of them have class as box2 ?
30-
<div class="box2"></div>
31-
<div class="box2"></div>
32-
<div class="box2"></div>
33-
<hr>
34-
10. Can you just make this textbox to accept only numbers ?
35-
<input type="text" id="input1">
33+
<a href="#" onclick="changeBackColor('green ', 'box1' )">Change background color</a>
34+
<hr> 9. Can you now change all the box background color to blue on mouse click. All of them have class as box2 ?
35+
<div class="box2" onclick="changeBackColor('blue','box2')"></div>
36+
<div class="box2" onclick="changeBackColor('blue','box2')"></div>
37+
<div class="box2" onclick="changeBackColor('blue','box2')"></div>
38+
<hr> 10. Can you just make this textbox to accept only numbers ?
39+
<input type="text" id="input1" onkeypress="return numbersOnly(event)">
3640
<hr>
3741
<p id='para2'>11. Can you add one more para below me with the text "I got generated on the fly...". My id is para2</p>
42+
<a href="#" onclick="addAdjacent()">Add new para</a>
3843
<hr>
3944
<p id='para3'>12. I don't like the fellow below me. Could you remove it. My id is para3 and next elment id is para4</p>
4045
<p id='para4'>13. Are you going to remove me ? </p>
46+
<a href="#" onclick="removePara()">Remove para4</a>
4147
<hr>
4248
<p>14. Can you animate the below box. Its id is box5.</p>
43-
<div class="box" id="box5"></div>
44-
45-
46-
<h2 style = "text-align:center">*********Dom Events**********</h2>
47-
<ol>
48-
<li>
49-
<h4>on Blurr & on Change- When you leave the input field, a function is triggered which transforms the input text to upper case.</h4>
50-
51-
Enter your name: <input type="text" id="fname" onblur="myFunction()">
52-
</li>
53-
54-
<li>
55-
<h4>When you leave the input field, a function is triggered which transforms the input text to upper case.</h4>
56-
Enter your name: <input type="text" id="fname1" onchange="chageon()">
57-
</li>
58-
59-
<li>
60-
<h4> onchange - When a user selects a dropdown value</h4>
61-
<form>
62-
Choose which browser you prefer:
63-
<select id="browsers" onchange="preferedBrowser()">
49+
<div class="box" id="box5" onmousemove="myMove()"></div>
50+
<h2 style="text-align:center">*********Dom Events**********</h2>
51+
<ol>
52+
<li>
53+
<h4>on Blurr & on Change- When you leave the input field, a function is triggered which transforms the input text to upper case.</h4> Enter your name:
54+
<input type="text" id="fname" onblur="myFunction(fname.value)">
55+
</li>
56+
<li>
57+
<h4>When you leave the input field, a function is triggered which transforms the input text to upper case.</h4> Enter your name:
58+
<input type="text" id="fname1" onchange="changeOn()">
59+
</li>
60+
<li>
61+
<h4> onchange - When a user selects a dropdown value</h4>
62+
<form>
63+
Choose which browser you prefer:
64+
<select id="browsers" onchange="preferedBrowser()">
6465
<option value="Chrome">Chrome</option>
65-
<option value="Internet Explorer">Internet Explorer</option>
6666
<option value="Firefox">Firefox</option>
67-
</select>
68-
</form>
69-
</li>
70-
71-
<li>
72-
<h4>When the input field gets focus, a function is triggered which changes the background-color.</h4>
73-
Enter your name: <input type="text" onfocus="color(this)">
74-
</li>
75-
76-
<li>
77-
<h4>When input text is selected</h4>
78-
Some text: <input type="text" value="Hello world!" onselect="inputxt()">
79-
<p id="demo" style="background-color:yellow"></p>
80-
81-
</li>
82-
83-
<li>
84-
<h4>When a user clicks the submit button</h4>
85-
<form onsubmit="confirmInput()" action="http://www.codeastra.com/">
86-
Enter your name: <input id="fname" type="text" size="20">
87-
<input type="submit">
88-
</form>
89-
</li>
90-
<li>
91-
<h4>When a user clicks the reset button</h4>
92-
<form onreset="message()">
93-
Enter your name: <input type="text" size="20">
94-
<input type="reset">
95-
</form>
96-
</li>
97-
<li>
98-
<h4>A function is triggered when the user is pressing a key in the input field.</h4>
99-
<input type="text" onkeydown="keydown()">
100-
</li>
101-
<li>
102-
<h4>A function is triggered when the user is pressing a key in the input field.</h4>
103-
<input type="text" onkeypress="keypress()">
104-
</li>
105-
<li>
106-
107-
<h4>A function is triggered when the user releases a key in the input field. The function transforms the character to upper case.</h4>
108-
Enter your name: <input type="text" id="fname2" onkeyup="keyup()">
109-
</li>
110-
<li>
111-
<h4>The onkeyup event occurs when the a keyboard key is on it's way UP.</h4>
112-
<form>
67+
<option value="Internet Explorer">Internet Explorer</option>
68+
</select>
69+
</form>
70+
</li>
71+
<li>
72+
<h4>When the input field gets focus, a function is triggered which changes the background-color.</h4> Enter your name:
73+
<input type="text" onfocus="color(this)">
74+
</li>
75+
<li>
76+
<h4>When input text is selected</h4> Some text:
77+
<input type="text" value="Hello world!" onselect="inputxt()">
78+
<p id="demo" style="background-color:yellow"></p>
79+
</li>
80+
<li>
81+
<h4>When a user clicks the submit button</h4>
82+
<form onsubmit="confirmInput()" action="http://www.codeastra.com/">
83+
Enter your name:
84+
<input id="fname" type="text" size="20">
85+
<input type="submit">
86+
</form>
87+
</li>
88+
<li>
89+
<h4>When a user clicks the reset button</h4>
90+
<form onreset="message()">
91+
Enter your name:
92+
<input type="text" size="20">
93+
<input type="reset">
94+
</form>
95+
</li>
96+
<li>
97+
<h4>A function is triggered when the user is pressing a key in the input field.</h4>
98+
<input type="text" id="input1" onkeydown="keydown(this)">
99+
</li>
100+
<li>
101+
<h4>A function is triggered when the user is pressing a key in the input field.</h4>
102+
<input type="text" id="input2" onkeypress="keypress(event)">
103+
<p>Key Code is <span id="keycode"></span></p>
104+
</li>
105+
<li>
106+
<h4>A function is triggered when the user releases a key in the input field. The function transforms the character to upper case.</h4> Enter your name:
107+
<input type="text" id="fname2" onkeyup="keyup()">
108+
</li>
109+
<li>
110+
<h4>The onkeyup event occurs when the a keyboard key is on it's way UP.</h4>
111+
<form>
113112
Enter your name:
114113
<input type="text" name="myInput" onkeyup="writeMessage()" size="20">
115114
<input type="text" name="mySecondInput" size="20">
116-
</form>
117-
</li>
118-
</ol>
119-
115+
</form>
116+
</li>
117+
</ol>
120118

121119
</html>

0 commit comments

Comments
 (0)