Units Converter
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
margin: 0;
padding: 0;
}
.converter-container {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 50px;
}
.converter {
display: flex;
align-items: center;
background-color: #fff;
padding: 10px;
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
h1 {
color: #333;
}
.input-section,
.output-section {
display: flex;
flex-direction: column;
align-items: center;
margin: 0 10px;
}
select {
margin-top: 5px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 5px;
}
input {
margin-top: 5px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 5px;
text-align: center;
}
.arrow {
font-size: 24px;
}
@media screen and (max-width: 480px) {
.converter {
flex-direction: column;
}
.input-section,
.output-section {
margin: 10px 0;
}
.arrow {
font-size: 20px;
}
}
document.addEventListener("DOMContentLoaded", function() {
const inputValue = document.getElementById("inputValue");
const inputUnit = document.getElementById("inputUnit");
const outputValue = document.getElementById("outputValue");
const outputUnit = document.getElementById("outputUnit");
function convertUnits() {
const value = inputValue.value;
const inputUnitValue = inputUnit.value;
const outputUnitValue = outputUnit.value;
if (!value || isNaN(value)) {
outputValue.value = "";
return;
}
const quantity = Qty(value + " " + inputUnitValue);
const result = quantity.to(outputUnitValue);
outputValue.value = result.scalar.toFixed(2);
}
inputValue.addEventListener("input", convertUnits);
inputUnit.addEventListener("change", convertUnits);
outputUnit.addEventListener("change", convertUnits);
});
Documentation
Step 1:- Open txt file from the folder for code
Step 2:- Copy all code
Step 3:- Open your website dashboard or blog
Step 4:- Add HTML element
Step 5:- Paste all code in your html element
Step 6:- Save file
Done you are successfully Pasted code in your website.
0 Comments