Unit Converter Project - JS/Html/Css
Here is a video of me talking about the code and demonstrating the functionality.
Ahh finally. I completed my first coding course! “Learn JavaScript for free” on scrimba has assigned a final project, a unit converter.
Essentially, I was to recreate the converter based on the following requirements: link to requirements.
The design was to be recreated from scratch while hitting the required functionality. I found that writing the code was actually pretty easy. Creating an event listener, refactoring, if else statements all came pretty easily. Getting the button and input to work together was also quite simple.
I did have to look up a few things. I wasn’t aware of .toFixed() and had to look up how to edit the inside text of an input field. I also had absolutely no clue how to remove the arrows from the input field. I just stole some css code from stackoverflow because there was no information on that at all within the course.
I found that I really enjoy refactoring. Creating a line of script that automatically inputs the values I need and can be customized in multiple ways is really satisfying. As well as creating functions that can work with various different inputs. I didn’t go too crazy with the reusability of the functions in this project. I can easily see how I could make them much more “plug and play” for any project that needs a unit conversion aspect, though.
The biggest issue for me was the css. The course goes over some basic stuff. Like sizing, colors, font weight, etc. To make the text stay centered and not move off to the side, I would need to do some further investigation. I had it set to stay centered, but it moves away from the center of the screen when the conversions are displayed.
All in all, I had a really good time creating this little application. I felt that I was challenged, but not left completely in the dark on how to complete it. Now that I have some basic JavaScript under my belt, I’m excited to move on to Nodejs.
Code:
Js
```
const inputEl = document.getElementById("input-nbr")
const convertEl = document.getElementById("convert-btn")
let lengthOut = document.getElementById("length-Output")
let volumeOut = document.getElementById("volume-Output")
let massOut = document.getElementById("mass-Output")
let inputNumber = 0
convertEl.addEventListener("click", function(){
inputNumber = Number(inputEl.value)
if (inputNumber <= 999 && inputNumber >= -999){
convertLength()
convertVolume()
convertMass()
} else {
lengthOut.textContent = `input value must be >/= -999 or </= 999`
volumeOut.textContent = `input value must be >/= -999 or </= 999`
massOut.textContent = `input value must be >/= -999 or </= 999`
}
})
function convertLength(){
let mToFt = inputNumber * 3.281
mToFt = mToFt.toFixed(3)
let ftToM = inputNumber / 3.281
ftToM = ftToM.toFixed(3)
lengthOut.textContent = `${inputNumber} meters = ${mToFt} feet | ${inputNumber} feet = ${ftToM} meters`
mToFt = 0
ftToM = 0
}
function convertVolume(){
let lToGal = inputNumber * 0.264
lToGal = lToGal.toFixed(3)
let galToL = inputNumber / 0.264
galToL = galToL.toFixed(3)
volumeOut.textContent = `${inputNumber} liters = ${lToGal} gallons | ${inputNumber} gallons = ${galToL} liters`
lToGal = 0
galToL = 0
}
function convertMass(){
let kgToLbs = inputNumber * 2.204
kgToLbs = kgToLbs.toFixed(3)
let lbsToKg = inputNumber / 2.204
lbsToKg = lbsToKg.toFixed(3)
massOut.textContent = `${inputNumber} kilograms = ${kgToLbs} pounds | ${inputNumber} pounds = ${lbsToKg} kilograms`
kgToLbs = 0
lbsToKg = 0
}
```
html
```
<html>
<head>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="title">
<p id="title">Metric/Imperial Unit Converson</p>
<div id="background">
</div>
<div id="dataBox">
</div>
<div id="dataBox2">
</div>
<div id="dataBox3">
</div>
<div class="input-group">
<input type="number" id="input-nbr" min="-999" max="999">
</div>
<div class="input-group">
<button type="submit" id="convert-btn" value="Convert">Convert</button>
</div>
<div id="length-group">
<p> Length (Meters/Feet)</p>
<p id="length-Output"></p>
</div>
<div id="volume-group">
<p> Volume (Liters/Gallons)</p>
<p id="volume-Output"></p>
</div>
<div id="mass-group">
<p> Mass (Kilograms/Pounds)</p>
<p id="mass-Output"></p>
</div>
<script src="index.js"></script>
</body>
</html>
```
css
```
#background {
position: relative;
background-color: #F4F4F4;
width: 385px;
height: 316px;
margin-left: -74px;
margin-top: 110px;
}
#dataBox {
position: absolute;
background-color: white;
margin-top: -295px;
margin-left: -50px;
color: red;
width: 336px;
height: 80px;
}
#dataBox2 {
position: absolute;
background-color: white;
margin-top: -195px;
margin-left: -50px;
color: red;
width: 336px;
height: 80px;
}
#dataBox3 {
position: absolute;
background-color: white;
margin-top: -95px;
margin-left: -50px;
color: red;
width: 336px;
height: 80px;
}
body {
margin: 0;
position: relative;
width: 300px;
height: 340px;
background-color: #6943FF;
}
#title {
white-space: nowrap;
text-align: left;
font-size: 20px;
margin-left: -35px;
margin-right: px;
margin-top: 18px;
padding-bottom: 20px;
font-weight: bold;
color: #F4F4F4;
}
#length-group{
position: fixed;
text-align: center;
white-space: nowrap;
margin-top: -350px;
padding-top: 60px;
margin-left: 35px;
font-size: 16px;
font-weight: bold;
color: #5A537B;
}
#length-Output {
margin-left: -60px;
font-size: 12px;
color: #353535;
}
#volume-group{
position: absolute;
text-align: center;
white-space: nowrap;
padding-top: 40px;
margin-left: 25px;
margin-top: -230px;
font-size: 16px;
font-weight: bold;
color: #5A537B;
}
#volume-Output {
margin-left: -60px;
font-size: 12px;
color: #353535;
}
#mass-group{
position: absolute;
text-align: center;
white-space: nowrap;
padding-top: 40px;
margin-left: 17px;
margin-top: -130px;
font-size: 16px;
font-weight: bold;
color: #5A537B;
}
#mass-Output {
margin-left: -60px;
font-size: 12px;
color: #353535;
}
div {
text-align: center;
margin-left: 75px;
}
input {
background: #6943FF;
border-color: #F4F4F4;
border-radius: 4px;
box-shadow: 1px 1px 1px black;
position: absolute;
width: 80px;
height: 50px;
margin-top: -432px;
margin-bottom: 100px;
margin-left: -80px;
font-size: 45px;
text-align: center;
align-self: center;
}
input, select, textarea{
color: #FFFFFF;
font-weight: bold;
font-style: normal;
line-height: 42%;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 0;
}
button {
position: absolute;
background-color: #F4F4F4;
text-decoration-color: black;
border: none;
border-radius: 4px;
margin-top: -364px;
margin-left: -78px;
width: 85px;
height: 28px;
font-size: 13px;
}
```
