Skip to content

Commit a9ac290

Browse files
harshita2216harshita2216
authored
Merge pull request #240 from jugeshraghav/speedDistanceTimeCalculator
Speed distance time calculator
2 parents 317fcbc + 0e9eeac commit a9ac290

File tree

14 files changed

+373
-2
lines changed

14 files changed

+373
-2
lines changed

‎Index.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -82,5 +82,5 @@
8282
| [Password Generator](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Password%20Generator) | A password generator app to generate strong passwords which can be easily used for authentication. |
8383
| [Parallex Website](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Chess-Game) | A basic website using HTML, CSS, JAVASCRIPT with modern look. |
8484
| [Weight Converter](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Weight%20Converter) |A web page where used can convert weight from kilograms to grams, ounces and pounds.
85-
86-
| [Restaurant website](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Restaurant-website) |A Restuarant website with a simple and user friendly design ad a database linked to it.
85+
| [Restaurant website](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Restaurant-website) |A Restuarant website with a simple and user friendly design ad a database linked to it.
86+
| [Speed-Distance-Time-Calculator](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/speed-distance-time-calculator) |It is a multi pager Speed Distnace Time Calculator with simple but userfriendly design.

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

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
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)"><br><br>
29+
<input type="number" id="time" placeholder="Enter the time(in seconds)"><br><br>
30+
<input type="button" value="distance" id="speed" onclick="calcDistance()">
31+
<h3 id="calculatedDistanceDisplay"></h3>
32+
</div>
33+
<button class="backButton"><a href="index.html">Back</a></button>
34+
</div>
35+
<script>
36+
37+
function calcDistance() {
38+
let speed = document.getElementById("speed").value;
39+
let time = document.getElementById("time").value;
40+
let calculatedSpeedDisplay = document.getElementById("calculatedSpeedDisplay");
41+
let distance = speed * time;
42+
calculatedDistanceDisplay.innerText = `The calculated distance is ${distance} metres.`;
43+
}
44+
45+
46+
47+
</script>
48+
</body>
49+
50+
</html>

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

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
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)"><br><br>
31+
<input type="number" id="time" placeholder="Enter the time(in seconds)"><br><br>
32+
<input type="button" value="Speed" id="speed" onclick="calcSpeed()">
33+
<h3 id="calculatedSpeedDisplay"></h3>
34+
</div>
35+
<button class="backButton"><a href="index.html">Back</a></button>
36+
</div>
37+
<script>
38+
39+
function calcSpeed() {
40+
let distance = document.getElementById("distance").value;
41+
let time = document.getElementById("time").value;
42+
let calculatedSpeedDisplay = document.getElementById("calculatedSpeedDisplay");
43+
let speed = distance / time;
44+
calculatedSpeedDisplay.innerText = `The calculated speed is ${speed} m/s`;
45+
}
46+
47+
48+
</script>
49+
</body>
50+
51+
</html>

‎speed-distance-time-calculator/CalcTime.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-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+
<button class="backButton"><a href="index.html">Back</a></button>
37+
</div>
38+
<script>
39+
40+
function calcTime() {
41+
let distance = document.getElementById("distance").value;
42+
let speed = document.getElementById("speed").value;
43+
let calculatedTimeDisplay = document.getElementById("calculatedTimeDisplay");
44+
let time = distance / speed;
45+
calculatedTimeDisplay.innerText = `The calculated time is ${time} seconds.`;
46+
}
47+
48+
49+
50+
</script>
51+
</body>
52+
53+
</html>

‎speed-distance-time-calculator/images/distance.png

62.9 KB
Loading

‎speed-distance-time-calculator/images/distanceCal.png

93.4 KB
Loading

‎speed-distance-time-calculator/images/index.png

276 KB
Loading

‎speed-distance-time-calculator/images/speed.jpg

68.9 KB
Loading

‎speed-distance-time-calculator/images/speedCal.png

126 KB
Loading

‎speed-distance-time-calculator/images/time.jpg

115 KB
Loading

0 commit comments

Comments
 (0)