Skip to content

50Projects-HTML-CSS-JavaScript : Weight converter #19

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Jul 13, 2024
Merged

50Projects-HTML-CSS-JavaScript : Weight converter #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
392612d
create a template for the project
tajulafreen Jul 13, 2024
e90b01b
Add semantic tags
tajulafreen Jul 13, 2024
4cb39f0
Add styles
tajulafreen Jul 13, 2024
ea7e1c5
Add functionalities
tajulafreen Jul 13, 2024
91cc7cd
update readme
tajulafreen Jul 13, 2024
8d53e1a
solve styleint error
tajulafreen Jul 13, 2024
8644dbb
sove linter error
tajulafreen Jul 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -188,6 +188,17 @@ In order to run this project you need:
</details>
</li>

<li>
<details>
<summary>Weight Converter</summary>
<p>Weight Converter is a simple and efficient tool built using HTML, CSS, and JavaScript. The Weight Converter project is a beginner-friendly web development project designed to help users convert weight measurements seamlessly. Users can input a weight in kilograms and instantly see conversions to grams, pounds, and ounces.</p>
<ul>
<li><a href="https://tajulafreen.github.io/50Projects-HTML-CSS-JavaScript/Source-Code/WeightConverter/">Live Demo</a></li>
<li><a href="https://github.com/tajulafreen/50Projects-HTML-CSS-JavaScript/tree/main/Source-Code/WeightConverter">Source</a></li>
</ul>
</details>
</li>

</ol>

<p align="right">(<a href="#readme-top">back to top</a>)</p>
Expand Down
43 changes: 43 additions & 0 deletions Source-Code/WeightConverter/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weight Converter</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Weight Converter</h1>
<div class="card">
<form name="converter" class="main" action="index.html" method="POST">
<ul>
<li>
<label for="kgs">Weight (in kgs): </label>
<input class="values" type="text" name="inkilograms" id="kgs" placeholder="Enter Weight..">
</li>
<li>
<input class="buttons" id="convertButton" value="Convert" type="button" onclick="convert()"/>
<input class="buttons" id="resetButton" value="Reset" type="reset"/>
</li>
</ul>
<ul class="flex">
<li>
<label for="grams">Weight (in grams): </label>
<input class="values" type="text" name="ingrams" id="grams">
</li>
<li>
<label for="pounds">Weight (in pounds): </label>
<input class="values" type="text" name="inpounds" id="pounds">
</li>
<li>
<label for="ounces">Weight (in ounces): </label>
<input class="values" type="text" name="inounces" id="ounces">
</li>
</ul>
</form>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
35 changes: 35 additions & 0 deletions Source-Code/WeightConverter/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
document.addEventListener('DOMContentLoaded', () => {
const convertButton = document.getElementById('convertButton');
const resetButton = document.getElementById('resetButton');

function convert() {
const kilograms = parseFloat(document.getElementById('kgs').value);

if (Number.isNaN(kilograms) || kilograms <= 0) {
window.alert('Weight must be greater than zero!!');
} else {
const gramsResult = kilograms * 1000;
const poundsResult = kilograms * 2.20462;
const ouncesResult = kilograms * 35.274;

document.getElementById('grams').value = gramsResult.toFixed(2);
document.getElementById('pounds').value = poundsResult.toFixed(3);
document.getElementById('ounces').value = ouncesResult.toFixed(2);
}
}

function clearResults() {
document.getElementById('grams').value = '';
document.getElementById('pounds').value = '';
document.getElementById('ounces').value = '';
}

convertButton.addEventListener('click', () => {
convert();
});

resetButton.addEventListener('click', () => {
document.getElementById('converter').reset();
clearResults();
});
});
75 changes: 75 additions & 0 deletions Source-Code/WeightConverter/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
/* stylelint-disable */
body {
background: linear-gradient(to left, aqua, rgb(0, 128, 255));
line-height: 0.5;
text-align: center;
}

.main {
width: 500px;
position: absolute;
top: 40%;
left: 50%;
transition: 0.25px;
transform: translate(-50%, -50%);
justify-items: center;
text-align: center;
}

.container {
display: flex;
flex-direction: column;
align-items: center;
}

.card {
box-shadow: 0 4px 8px 0;
transition: 0.4s;
width: 300px;
text-align: center;
font-size: 16px;
float: left;
margin: 10px;
}

h1 {
font-size: 30px;
color: antiquewhite;
text-align: center;
}

.values {
width: 240px;
text-align: center;
border: 2px solid transparent;
border-radius: 5px;
padding: 10px 0;
}

li {
list-style-type: none;
}

ul {
display: flex;
flex-direction: column;
gap: 15px;
justify-content: flex-start;
}

.buttons {
border: 3px solid;
background-color: rgb(40, 211, 40);
color: white;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
text-align: center;
width: 80px;
height: 40px;
margin-left: 40px;
}

label {
font-size: 20px;
}
Loading