Skip to content

Commit 636e181

Browse files
thenaveensaggamthenaveensaggam
authored
Update 15_JS_Math_Date_Objects.html
1 parent 8a80042 commit 636e181

File tree

1 file changed

+120
-23
lines changed

1 file changed

+120
-23
lines changed

‎JS_Starter_Template/12_JS_Math_Date_Objects/15_JS_Math_Date_Objects.html‎

Lines changed: 120 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -2,39 +2,74 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5-
<title>JS Math & Date Objects</title>
5+
<title>JS Math & Date</title>
66
<style>
77
body{
8-
margin: 0;
98
font-family: "Comic Sans MS",sans-serif;
109
}
1110
h2{
1211
background-color: lightgreen;
1312
text-align: center;
1413
padding: 10px;
1514
}
16-
div{
15+
#math-div{
1716
background-color: seagreen;
17+
text-align: center;
1818
padding: 10px;
19+
color: white;
20+
}
21+
22+
#date-div{
23+
background-color: coral;
1924
text-align: center;
25+
padding: 10px;
2026
color: white;
21-
margin-bottom: 10px;
2227
}
2328

29+
#india-time{
30+
background-color: orangered;
31+
color: white;
32+
text-align: center;
33+
width: 500px;
34+
padding: 15px;
35+
margin-top: 20px;
36+
float: left;
37+
}
2438

39+
#us-time{
40+
background-color: darkblue;
41+
color: white;
42+
text-align: center;
43+
width: 500px;
44+
padding: 15px;
45+
margin-top: 20px;
46+
float: right;
47+
}
2548
</style>
2649
</head>
2750
<body>
2851

29-
<h2>JS Math & Date Objects Example</h2>
30-
<div>
31-
<h1 id="display"></h1>
52+
<h2>JS Math Example</h2>
53+
<div id="math-div">
54+
<h1 id="math"></h1>
55+
</div>
56+
57+
<h2>JS Date Example</h2>
58+
<div id="date-div">
59+
<h1 id="date"></h1>
3260
</div>
3361

34-
<div>
35-
<h1 id="clock"></h1>
62+
<div id="india-time">
63+
<h3>India Time</h3>
64+
<h1 id="india">10:00 AM</h1>
3665
</div>
3766

67+
<div id="us-time">
68+
<h3>US Time</h3>
69+
<h1 id="us">10:00 AM</h1>
70+
</div>
71+
72+
3873
</body>
3974

4075
<script>
@@ -44,19 +79,40 @@ <h1 id="clock"></h1>
4479
*/
4580

4681
// Math PI and Sqrt
82+
var piValue = Math.PI;
83+
var output = "The Pi Value is : " + piValue;
84+
console.log(output);
85+
document.getElementById('math').innerHTML = output;
4786

87+
// Sqrt of 16
88+
var sqrt16 = Math.sqrt(16);
89+
output = "The Sqrt of 16 is : " + sqrt16;
90+
console.log(output);
91+
document.getElementById('math').innerHTML = output;
4892

4993
// find the min of 4 numbers
50-
94+
var min = Math.min(10,20,4,60,80,596,454);
95+
output = "The Minimum number is : " + min;
96+
console.log(output);
97+
document.getElementById('math').innerHTML = output;
5198

5299
// find the Max of 4 numbers
53-
100+
var max = Math.max(10,20,4,60,80,596,454);
101+
output = "The Maximum number is : " + max;
102+
console.log(output);
103+
document.getElementById('math').innerHTML = output;
54104

55105
// find the 'x' to the power of 'y' value, ex: 2^4
106+
var twoPowFour = Math.pow(2,4);
107+
output = " 2 to the power of 4 is : " + twoPowFour;
108+
console.log(output);
109+
document.getElementById('math').innerHTML = output;
56110

57-
58-
// generate the random numbers from 0 to 100
59-
111+
// generate the random numbers from 0 to 10000
112+
var random = Math.round(Math.random() * 10000);
113+
output = "The Random number is : " + random;
114+
console.log(output);
115+
document.getElementById('math').innerHTML = output;
60116

61117
/* For more details about Math Object, please have a look at
62118
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math
@@ -68,23 +124,64 @@ <h1 id="clock"></h1>
68124
*/
69125

70126
// get today's date
71-
127+
var today = new Date();
128+
console.log(today);
129+
document.getElementById('date').innerHTML = today + " ";
72130

73131
//get date of the month 0 - 31 getDate()
74-
75-
76-
//get day of the week 0 - 6 getDay()
132+
var date = today.getDate() + "/" + (today.getMonth()+1) + "/" + today.getFullYear();
133+
console.log(today);
134+
document.getElementById('date').innerHTML = date;
77135

78136

79137
// get full day of the week using switch statement
80-
81-
82-
// Display a Digital Clock on the web page
83-
138+
var day = today.getDay();
139+
output = "";
140+
switch(day){
141+
case 0:
142+
output = "Sunday";
143+
break;
144+
case 1:
145+
output = "Monday";
146+
break;
147+
case 2:
148+
output = "Tuesday";
149+
break;
150+
default :
151+
output = "Don't Know";
152+
break;
153+
}
154+
console.log("Today is : " + output);
155+
document.getElementById('date').innerHTML = "Today is : " + output;
84156

85157
/* For More Details about Date() please have a look at
86158
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date
87159
*/
88160

161+
function indianTime() {
162+
var today = new Date();
163+
var options = {
164+
timeZone :'Asia/Kolkata'
165+
};
166+
var iTime = today.toLocaleTimeString('en-US',options);
167+
document.getElementById('india').innerHTML = iTime;
168+
}
169+
170+
indianTime();
171+
setInterval(indianTime,1000);
172+
173+
function usTime() {
174+
var today = new Date();
175+
var options = {
176+
timeZone :'America/New_York'
177+
};
178+
var uTime = today.toLocaleTimeString('en-US',options);
179+
document.getElementById('us').innerHTML = uTime;
180+
}
181+
182+
usTime();
183+
setInterval(usTime,1000);
184+
185+
89186
</script>
90-
</html>
187+
</html>

0 commit comments

Comments
 (0)