Skip to content

Commit 43c5bc7

Browse files
jugeshraghavjugeshraghav
committed
speed distance time calculator added.
1 parent 4f5c668 commit 43c5bc7

File tree

5 files changed

+266
-0
lines changed

5 files changed

+266
-0
lines changed

‎speed-distance-time-calculator/CalcDistance.html

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<link rel="stylesheet" href="style.css">
9+
<title>Distance-Calculator</title>
10+
</head>
11+
12+
<body>
13+
14+
<div id="distanceContainer" style="text-align: center;">
15+
<div class="container">
16+
<div class="speedCalculator">
17+
<h1>Distance Calculator</h1>
18+
<p>Distance is the measurement of actual path covered byy any object.</p>
19+
<br>
20+
<p>Distance is the product of speed of an object to the time taken.
21+
</p>
22+
<h3 class="formula">Distance = Speed * Time
23+
</h3>
24+
<h4>SI unit of Distance is metre(m).</h4>
25+
<br>
26+
<h3><em>Fill in the speed(in m/s) and time(in seconds) and calculate the Distance. </em></h3>
27+
28+
<input type="number" id="speed" placeholder="Enter the Speed(in m/s)"
29+
><br><br>
30+
<input type="number" id="time" placeholder="Enter the time(in seconds)"
31+
><br><br>
32+
<input type="button" value="distance" id="speed" onclick="calcDistance()">
33+
<h3 id="calculatedDistanceDisplay"></h3>
34+
</div>
35+
36+
</div>
37+
<script>
38+
39+
function calcDistance() {
40+
let speed = document.getElementById("speed").value;
41+
let time = document.getElementById("time").value;
42+
let calculatedSpeedDisplay = document.getElementById("calculatedSpeedDisplay");
43+
let distance = speed * time;
44+
calculatedDistanceDisplay.innerText = `The calculated distance is ${distance} metres.`;
45+
}
46+
47+
48+
49+
</script>
50+
</body>
51+
52+
</html>

‎speed-distance-time-calculator/CalcSpeed.html

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<link rel="stylesheet" href="style.css">
9+
<title>Speed-Calculator</title>
10+
</head>
11+
12+
<body>
13+
14+
<div id="speedContainer" class="container">
15+
16+
<div class="speedCalculator">
17+
<h1>Speed Calculator</h1>
18+
<p>Speed can be thought of as the rate at which an object covers distance. A fast-moving object has
19+
a high speed and covers a relatively large distance in a given amount of time, while a
20+
slow-moving object covers a relatively small amount of distance in the same amount of time.</p>
21+
<br>
22+
<p>Speed is the ratio of Distance travelled by any object to the time taken to travel the distance.
23+
</p>
24+
<h3 class="formula">Speed= Distance/Time
25+
</h3>
26+
<h4>SI unit of speed is m/s.</h4>
27+
<br>
28+
<h3><em>Fill in the distance(in metres) and time(in seconds) and calculate the speed. </em></h3>
29+
30+
<input type="number" id="distance" placeholder="Enter the Distance(in metres)"
31+
><br><br>
32+
<input type="number" id="time" placeholder="Enter the time(in seconds)"
33+
><br><br>
34+
<input type="button" value="Speed" id="speed" onclick="calcSpeed()">
35+
<h3 id="calculatedSpeedDisplay"></h3>
36+
</div>
37+
38+
</div>
39+
<script>
40+
41+
function calcSpeed() {
42+
let distance = document.getElementById("distance").value;
43+
let time = document.getElementById("time").value;
44+
let calculatedSpeedDisplay = document.getElementById("calculatedSpeedDisplay");
45+
let speed = distance / time;
46+
calculatedSpeedDisplay.innerText = `The calculated speed is ${speed} m/s`;
47+
}
48+
49+
50+
</script>
51+
</body>
52+
53+
</html>

‎speed-distance-time-calculator/CalcTime.html

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<link rel="stylesheet" href="style.css">
9+
<title>Speed-Distance-Time-Calculator</title>
10+
</head>
11+
12+
<body>
13+
14+
<div id="timeContainer" class="container">
15+
16+
17+
<div class="timeCalculator">
18+
<h1>Time Calculator</h1>
19+
<p>Time taken by any object to cover a specific distance.</p>
20+
<br>
21+
<p>Time is the ratio of distance of an object to the speed.
22+
</p>
23+
<h3 class="formula">Time=
24+
Distance/Speed</h3>
25+
<h4>SI unit of time is s(seconds).</h4>
26+
<br>
27+
<h3><em>Fill in the distance(in metres) and speed(in m/s) and calculate the
28+
time. </em></h3>
29+
30+
<input type="text" id="distance" placeholder="Enter the Distance(in metres)"><br><br>
31+
<input type="text" id="speed" placeholder="Enter the speed(in m/s)"><br><br>
32+
<input type="button" value="Time" id="time" onclick="calcTime()">
33+
<h3 id="calculatedTimeDisplay"></h3>
34+
</div>
35+
36+
</div>
37+
<script>
38+
39+
function calcTime() {
40+
let distance = document.getElementById("distance").value;
41+
let speed = document.getElementById("speed").value;
42+
let calculatedTimeDisplay = document.getElementById("calculatedTimeDisplay");
43+
let time = distance / speed;
44+
calculatedTimeDisplay.innerText = `The calculated time is ${time} seconds.`;
45+
}
46+
47+
48+
49+
</script>
50+
</body>
51+
52+
</html>

‎speed-distance-time-calculator/index.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
9+
<title>Speed-Distance-Time-Calculator</title>
10+
</head>
11+
12+
<body>
13+
14+
</body>
15+
16+
</html>

‎speed-distance-time-calculator/style.css

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
*{
2+
margin:0;
3+
padding:0;
4+
box-sizing:border-box;
5+
}
6+
7+
8+
.container{
9+
height:100vh;
10+
padding-top:5%;
11+
text-align:center;
12+
}
13+
14+
15+
h1{
16+
font-size:50px;
17+
margin-bottom:20px;
18+
font-family:cursive;
19+
animation-name:multipleColors;
20+
animation-duration:4s;
21+
animation-iteration-count: infinite;
22+
}
23+
24+
@keyframes multipleColors {
25+
0%{
26+
color:yellow;
27+
}
28+
25%{
29+
color:red;
30+
}
31+
50%{
32+
color:white;
33+
}
34+
75%{
35+
color:lightgreen;
36+
}
37+
100%{
38+
color:yellow;
39+
}
40+
}
41+
p{
42+
font-size:20px;
43+
width:900px;
44+
margin:auto;
45+
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
46+
}
47+
.formula{
48+
border:2px solid yellow;
49+
width:250px;
50+
padding:50px 0px;
51+
margin:30px auto;
52+
}
53+
54+
input{
55+
font-size:16px;
56+
width:500px;
57+
padding:10px;
58+
margin:10px;
59+
}
60+
input[type="button"]{
61+
font-size:20px;
62+
background-color:yellow !important;
63+
width:100px !important;
64+
color:black;
65+
padding:10px 20px;
66+
border:none;
67+
border-radius:20px;
68+
}
69+
input[type="button"]:hover{
70+
font-size:30px;
71+
width:200px !important;
72+
border-radius:30px;
73+
}
74+
75+
/*******Time Calculator*******/
76+
#timeContainer{
77+
background-color:darkslateblue;
78+
color:white;
79+
}
80+
81+
82+
/*******speed Calculator*******/
83+
#speedContainer{
84+
background-color:green;
85+
color:white;
86+
}
87+
88+
/*******speed Calculator*******/
89+
#distanceContainer{
90+
background-color:lightpink;
91+
color:white;
92+
}
93+

0 commit comments

Comments
 (0)