Skip to content

Commit 9e38e46

Browse files
harshita2216harshita2216
authored
Merge pull request #149 from palaksinghania05/weight_converter
added weight converter
2 parents 7cda26e + fbb8f43 commit 9e38e46

File tree

6 files changed

+140
-1
lines changed

6 files changed

+140
-1
lines changed

‎Index.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,4 +80,4 @@
8080
| [Chess Game](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Chess-Game) | A basic chess game for entertainment purpose. |
8181
| [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. |
8282
| [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. |
83-
83+
| [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.

‎Weight Converter/README.md

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
# Weight Converter
2+
# Made by: Palak Singhania
3+
4+
# Description
5+
1. This is a simple weight converter project in which the user enters the weight in kilograms and it gets converted to
6+
grams, pounds and ounces.
7+
2. It contains two files : index.html and main.css
8+
9+
# screenshots
10+
a. When we don't enter any value or the value is less than or equal to zero then an alert appears.
11+
12+
![](https://github.com/palaksinghania05/Web-dev-mini-projects/blob/weight_converter/Weight%20Converter/screenshots/when_no_value_passed.png)
13+
14+
b. When we enter a valid value then it gets converted on clicking convert button.
15+
16+
![](https://github.com/palaksinghania05/Web-dev-mini-projects/blob/weight_converter/Weight%20Converter/screenshots/smooth_functioning.png)
17+
18+
19+
c. On clicking Reset button, the fields will get cleared.

‎Weight Converter/index.html

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Weight Convertor</title>
8+
<link rel="stylesheet" href="main.css">
9+
<script>
10+
function convert(){
11+
var kilograms;
12+
kilograms = document.getElementById('kgs').value;
13+
14+
if(isNaN(kilograms) || kilograms<=0){
15+
window.alert("Weight must be greater than zero!!");
16+
}
17+
else{
18+
var result;
19+
result = kilograms*1000;
20+
document.getElementById('grams').value = result.toFixed(2);
21+
result = kilograms*2.20462;
22+
document.getElementById('pounds').value = result.toFixed(3);
23+
result = kilograms*35.274;
24+
document.getElementById('ounces').value = result.toFixed(2);
25+
}
26+
}
27+
</script>
28+
</head>
29+
<body>
30+
<br></br>
31+
<h1> Weight Converter</h1>
32+
<br></br>
33+
<div class="card">
34+
<form name="converter" class="main" action="index.html" method="POST">
35+
<label>Weight (in kgs) : </label>
36+
<input class="values" type="text" name="inkilograms" id="kgs" placeholder="Enter Weight..">
37+
<br></br>
38+
<br></br>
39+
<input id="buttons" value="Convert" type="button" onclick="convert()"/>
40+
<input id="buttons" value="Reset" type="reset"/>
41+
<br></br>
42+
<br></br>
43+
<br></br>
44+
<label>Weight (in grams) : </label>
45+
<input class="values" type="text" name="ingrams" id="grams">
46+
<br></br>
47+
<label>Weight (in pounds) : </label>
48+
<input class="values" type="text" name="inpounds" id="pounds">
49+
<br></br>
50+
<label>Weight (in ounces) : </label></td>
51+
<input class="values" type="text" name="inounces" id="ounces">
52+
</form>
53+
</div>
54+
55+
</body>
56+
</html>

‎Weight Converter/main.css

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
body{
2+
background: linear-gradient(to left, aqua, orange);
3+
line-height: 0.5;
4+
text-align: center;
5+
}
6+
7+
.main{
8+
width: 500px;
9+
padding-bottom: 100;
10+
position: absolute;
11+
top:40%;
12+
left:50%;
13+
transition:0.25px;
14+
transform: translate(-50%,-50%);
15+
justify-items: center;
16+
text-align: center;
17+
}
18+
19+
.card{
20+
box-shadow: 0 4px 8px 0;
21+
transition: 0.4s;
22+
width: 300px;
23+
text-align: center;
24+
font-size: 16px;
25+
float: left;
26+
margin: 10px;
27+
}
28+
29+
h1{
30+
font-size: 30px;
31+
margin-top: 40px;
32+
color: antiquewhite;
33+
text-align: center;
34+
}
35+
36+
.values{
37+
width: 240px;
38+
text-align: center;
39+
border: 2px solid transparent;
40+
border-radius: 5px;
41+
font-size: 20;
42+
padding: 10px 0px;
43+
transition: border 0.5px;
44+
}
45+
46+
#buttons{
47+
border:3px solid;
48+
background-color: green;
49+
color: white;
50+
font-size: 16px;
51+
border-radius: 5px;
52+
cursor: pointer;
53+
text-align: center;
54+
width: 80px;
55+
height: 40px;
56+
margin-left: 40px;
57+
}
58+
59+
60+
label{
61+
font-size: 20px;
62+
}
63+
64+

‎Weight Converter/screenshots/smooth_functioning.png

324 KB
Loading

‎Weight Converter/screenshots/when_no_value_passed.png

305 KB
Loading

0 commit comments

Comments
 (0)