Skip to content

Commit 4f7c1aa

Browse files
Jaideep25-techJaideep25-tech
authored
Merge pull request Dezenix#292 from Kumar-Ankit56/Kumar-Ankit56-patch-1
Weight-converter
2 parents 8a3182d + d269a3c commit 4f7c1aa

File tree

4 files changed

+141
-0
lines changed

4 files changed

+141
-0
lines changed

‎Weight-converter/Readme.md

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
### Description
2+
3+
**Project title**
4+
Weight-converter
5+
6+
**Project Description**
7+
8+
### How does it work
9+
It is an awesome project in javascript you just need to enter your weight in the respective column as kilogram, pound and ounces You will get the respective value in the rest of the text field.
10+
11+
**Stack**:
12+
And in order to tick the check box just put x inside them for example - [x] like this. Please delete options that are not relevant.
13+
14+
- [x] Html
15+
- [x] CSS
16+
- [x] Javascript
17+
18+
19+
20+
### Screenshots
21+
![Screenshot (219)](https://user-images.githubusercontent.com/73521123/169858357-126f00f6-c3f5-49db-9b27-4b9ab46e7f31.png)
22+
23+
24+
25+
Uploading vlc-record-2022-05-23-21h21m50s-Weight Converter and 1 more page - Person 2 - Microsoft​ Edge-.mp4…
26+
27+
28+
29+
30+
### Additional information
31+
@AyushSingh22 sir plz review and assign me.

‎Weight-converter/index.html

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
5+
<title>Weight Converter</title>
6+
<!-- Google Fonts -->
7+
<link
8+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
9+
rel="stylesheet"
10+
/>
11+
<!-- Stylesheet -->
12+
<link rel="stylesheet" href="./style.css" />
13+
</head>
14+
<body>
15+
<div class="container">
16+
<h2>Weight Converter</h2>
17+
<div class="input-wrapper">
18+
<label for="kg">Kilogram:</label>
19+
<input type="number" id="kg" value="10" />
20+
</div>
21+
<div class="input-wrapper">
22+
<label for="lb">Pounds:</label>
23+
<input type="number" id="lb" />
24+
</div>
25+
<div class="input-wrapper">
26+
<label for="oz">Ounces:</label>
27+
<input type="number" id="oz" />
28+
</div>
29+
</div>
30+
<!-- Script -->
31+
<script src="./script.js"></script>
32+
</body>
33+
</html>

‎Weight-converter/script.js

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
let kgRef = document.getElementById("kg");
2+
let lbRef = document.getElementById("lb");
3+
let ozRef = document.getElementById("oz");
4+
5+
let convertFromKg = () => {
6+
let kg = kgRef.value;
7+
//toFixed(2) limits the decimals to 2 digits.
8+
lbRef.value = (kg * 2.205).toFixed(2);
9+
ozRef.value = (kg * 35.274).toFixed(2);
10+
};
11+
12+
let convertFromLb = () => {
13+
let lb = lbRef.value;
14+
kgRef.value = (lb / 2.205).toFixed(2);
15+
ozRef.value = (lb * 16).toFixed(2);
16+
};
17+
18+
let convertFromOz = () => {
19+
let oz = ozRef.value;
20+
kgRef.value = (oz / 35.274).toFixed(2);
21+
lbRef.value = (oz / 16).toFixed(2);
22+
};
23+
24+
kgRef.addEventListener("input", convertFromKg);
25+
lbRef.addEventListener("input", convertFromLb);
26+
ozRef.addEventListener("input", convertFromOz);
27+
window.addEventListener("load", convertFromKg);

‎Weight-converter/style.css

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
* {
2+
padding: 0;
3+
margin: 0;
4+
box-sizing: border-box;
5+
font-family: "Poppins", sans-serif;
6+
}
7+
body {
8+
height: 100vh;
9+
background: #090221;
10+
}
11+
.container {
12+
background-color: #ffffff;
13+
width: 90vw;
14+
font-size: 16px;
15+
max-width: 28em;
16+
padding: 3em;
17+
position: absolute;
18+
transform: translate(-50%, -50%);
19+
top: 50%;
20+
left: 50%;
21+
box-shadow: 0 0 3.2em rgba(1, 3, 29, 0.2);
22+
border-radius: 0.6em;
23+
}
24+
h2 {
25+
font-size: 2em;
26+
text-align: center;
27+
margin-bottom: 1.5em;
28+
}
29+
.input-wrapper input {
30+
display: block;
31+
width: 100%;
32+
font-size: 1.35em;
33+
padding: 0.4em;
34+
border: 1px solid #a0a0a0;
35+
border-radius: 0.2em;
36+
}
37+
.input-wrapper label {
38+
display: block;
39+
font-size: 1.1em;
40+
font-weight: 600;
41+
margin-bottom: 0.25em;
42+
}
43+
.input-wrapper:not(:last-child) {
44+
margin-bottom: 1.2em;
45+
}
46+
@media screen and (max-width: 28em) {
47+
.container {
48+
font-size: 14px;
49+
}
50+
}

0 commit comments

Comments
 (0)