Skip to content

Commit

Permalink
close to final
Browse files Browse the repository at this point in the history
  • Loading branch information
@aalee9263
aalee9263 committed Oct 25, 2023
1 parent 3a603eb commit 58e196e
Show file tree
Hide file tree
Showing 5 changed files with 117 additions and 51 deletions.
56 changes: 56 additions & 0 deletions converter.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
<!DOCTYPE html>
<html>
<head>
<title>Length Converter</title>
</head>
<body>
<h1>Lengths Converter</h1>
<label for="meters">Meters:</label>
<input type="number" id="meters" oninput="convertLength('meters')" />
<br>
<label for="centimeters">Centimeters:</label>
<input type="number" id="centimeters" oninput="convertLength('centimeters')" />
<br>
<label for="inches">Inches:</label>
<input type="number" id="inches" oninput="convertLength('inches')" />
<br>
<label for="feet">Feet:</label>
<input type="number" id="feet" oninput="convertLength('feet')" />
<br>
<label for="yards">Yards:</label>
<input type="number" id="yards" oninput="convertLength('yards')" />
<br>
<label for="miles">Miles:</label>
<input type="number" id="miles" oninput="convertLength('miles')" />
<br>
<label for="kilometers">Kilometers:</label>
<input type="number" id="kilometers" oninput="convertLength('kilometers')" />
<br>
<label for="millimeters">Millimeters:</label>
<input type="number" id="millimeters" oninput="convertLength('millimeters')" />

<script>
function convertLength(unit) {
let units = {
meters: 1,
centimeters: 100,
inches: 39.37,
feet: 3.28,
yards: 1.09,
miles: 0.000621,
kilometers: 0.001,
millimeters: 1000
};

let value = parseFloat(document.getElementById(unit).value);

for (let otherUnit in units) {
if (otherUnit !== unit) {
let convertedValue = value * units[unit] / units[otherUnit];
document.getElementById(otherUnit).value = convertedValue;
}
}
}
</script>
</body>
</html>
11 changes: 0 additions & 11 deletions converter.js
View file

This file was deleted.

59 changes: 29 additions & 30 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,36 +5,35 @@
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h2 style="letter-spacing: 7px; line-height: 40px">
Lengths Converter
</h2>inches,
feet, yards, kilometers, and miles.
<div class="converter">
<form class="container">
<label for="meter">Meter</label>
<input type="number" id="meter" oninput="metAndCen()" />
</form>
<form class="container">
<label for="centimeter">Centimeters</label>
<input type="number" id="centimeter" oninput="metAndInch()" />
</form>
<form class="container">
<label for="inch">Inches</label>
<input type="number" id="inch" oninput="cenAndInch()" />
</form>
<form class="container">
<label for="inch">Inches</label>
<input type="number" id="inch" oninput="cenToMet()" />
</form>
<form class="container">
<label for="inch">Inches</label>
<input type="number" id="inch" oninput="cenToMet()" />
</form>
<form class="container">
<label for="inch">Inches</label>
<input type="number" id="inch" oninput="cenToMet()" />
</form>
<h2 style="letter-spacing: 7px; line-height: 40px">Lengths Converter</h2>
<div class="converter">
<form class="container">
<label for="meters">Meters:</label>
<input type="number" id="meters" oninput="convertLength('meters')" />
</form>
<form class="container"><label for="centimeters">Centimeters:</label>
<input type="number" id="centimeters" oninput="convertLength('centimeters')" />
</form>
<form class="container"><label for="inches">Inches:</label>
<input type="number" id="inches" oninput="convertLength('inches')" />
</form>
<form class="container"><label for="feet">Feet:</label>
<input type="number" id="feet" oninput="convertLength('feet')" />
</form>
<form class="container"><label for="yards">Yards:</label>
<input type="number" id="yards" oninput="convertLength('yards')" />
</form>
<form class="container"><label for="miles">Miles:</label>
<input type="number" id="miles" oninput="convertLength('miles')" />
</form>
<form class="container"><label for="kilometers">Kilometers:</label>
<input type="number" id="kilometers" oninput="convertLength('kilometers')" />
</form>
<form class="container"><label for="millimeters">Millimeters:</label>
<input type="number" id="millimeters" oninput="convertLength('millimeters')" />
</form>
</div>
<script src="./converter.js"></script>
</div>
<script src="./script.js"></script>
</body>
</html>
21 changes: 21 additions & 0 deletions script.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
function convertLength(unit) {
let units = {
meters: 1,
centimeters: 100,
inches: 39.37,
feet: 3.28,
yards: 1.09,
miles: 0.000621,
kilometers: 0.001,
millimeters: 1000
};

let value = parseFloat(document.getElementById(unit).value);

for (let otherUnit in units) {
if (otherUnit !== unit) {
let convertedValue = value * units[unit] / units[otherUnit];
document.getElementById(otherUnit).value = convertedValue;
}
}
}
21 changes: 11 additions & 10 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,37 +17,38 @@ body {
color: #b6b1b1dc;
}
.converter {
width: 420px;
width: 520px;
margin: 0 auto;
border: 1px solid #ccc;
padding: 10px;
border-radius: 20px;
background: linear-gradient(45deg, #0a0a0a, #3a4452);
display: flex;
justify-content: space-evenly;
justify-content: space-between;
color: #ffffffdc;
font-size: 22px;
flex-wrap: wrap;

}

label {
margin: 16px;
margin-left: 20px;
}
.container {
margin: 10px;
display: flex;
flex-direction: column;
}
input {
width: 90%;
width: 180px;
border: 1px solid #717377;
box-shadow: 0px 3px 15px rgba(113, 115, 119, 0.5);
border-radius: 10px;
padding: 3px;
padding: 0;
margin: 10px 10px;
background: transparent;
font-size: 50px;
text-align: left;
cursor: pointer;
color: #ffffff;
}
.formula {
display: flex;
flex-direction: row;
}
}

0 comments on commit 58e196e

Please sign in to comment.