Hello, learner today In this blog post, We will be creating an Aspect Ratio Calculator Using Javascript. In the past post, we have created many projects one of them is the Multi-Step Form. Without wasting time Now it is time to create an Aspect Ratio Calculator.
The aspect Ratio Calculator is used to change the aspect ratio and get the corresponding dimensions. Or the user can change one of the dimensions to get the value of the other dimension corresponding to the aspect ratio.
This is the best project for a beginner Frontend developer. If you are a javascript beginner, this just might be the perfect project for you to start with.
In this project, We have used HTML for structure for the project and CSS for styling the project with different CSS properties At last we have used Javascript for the calculation. You can check height and width using the aspect ratio and Vice versa.
If you’re having difficulty understanding what I’m saying or what this Aspect Ratio Calculator then You can ask me in the comment.
| Code By | Coding thai |
| Language Used | HTML, CSS and JS |
| Responsive | Yes |
| External Link / Dependencies | No |
There are 3 types of styles to connect CSS with HTML files. Inline CSS, Internal CSS, External CSS. For Inline CSS in this, we have to write the CSS code inside the HTML code using style Attribute elements. For internal CSS we have to use the Style tag in the Head section on HTML File. We have used this Internal CSS in The below section. Last is External CSS for this we have to create another CSS File in the same folder this
Preview of Aspect Ratio Calculator
In this preview, we have used internal CSS in the code. In the internal CSS, we have to write the code in the head section using the Style tag. We have to write the code in <Style> CSS code </style> in the Head section in the HTML file. This code is run in Codepen.io
See the Pen Aspect Ratio Calculator Using HTML CSS and Javascript by Coding thai (@Codingthai) on CodePen.
You might like this
Aspect Ratio Calculator Using HTML CSS and Javascript [Source code]
For Creating An Aspect Ratio Calculator using HTML, CSS, and JS. First, you have to create Three files (HTML, CSS, and JS) files with the named index.html, style.css, and Script.js in the same folder and you have to link the CSS and JS files to HTML. after that paste the below code, the HTML code in index.html, and paste the CSS code in style.css Again paste the Js code in script.js that’s all after pasting the code.
First, you have to create an HTML file with the named index.html paste the below HTML code on it, and save it. Remember to give a .html extension to the HTML file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Aspect Ratio Calculator | CodingThai</title>
</head>
<body>
<div class="container">
<h2>
<span>Aspect Ratio</span>
Calculator
</h2>
<div class="wrapper-1">
<input type="number" id="ratio-width" value="16">
<input type="number" id="ratio-height" value="9">
</div>
<div class="box">
<div class="wrapper-2">
<label for="width">Width:</label>
<input type="number" id="width" value="1280">
</div>
<div class="wrapper-3">
<label for="height">Height:</label>
<input type="number" id="height" value="720">
</div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>After pasting the HTML code, Now have to create a second CSS file with the named style.css. Paste the below code on it and save it. Again remember to give a .css extension to the CSS file.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
background-color: #895cf3;
}
.container{
width: 500px;
background: #fff;
padding: 80px 40px;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
border-radius: 10px;
box-shadow: 0 30px 45px rgba(18, 8, 39, 0.2);
}
h2{
text-align: center;
font-size: 40px;
font-weight: 600;
letter-spacing: 2px;
}
h2 span{
color: #895cf3;
}
.wrapper-1{
display: flex;
align-items: center;
justify-content: center;
margin: 50px 0 70px 0;
gap: 10px;
}
.wrapper-1 input{
width: 100px;
font-size: 30px;
font-weight: 600;
}
input{
padding: 15px 10px;
border: 1px solid #bbc0c5;
border-radius: 5px;
color: #170444;
outline: none;
}
input:focus{
border: 2px solid #895cf3;
}
label{
color: #170444;
font-weight: 600;
letter-spacing: 0.6px;
}
.box{
display: flex;
justify-content: space-between;
gap: 15px;
}
.wrapper-2 input, .wrapper-3 input{
width: 100%;
font-size: 18px;
}After pasting the HTML and CSS code, Now have to create a third Javascript file with the named script.js. Paste the below code on it and save it. Again remember to give a .js extension to the javascript file.
let ratioWidth = document.getElementById("ratio-width");
let ratioHeight = document.getElementById("ratio-height");
let width = document.getElementById("width");
let height = document.getElementById("height");
let calculateWidth = () => {
let aspectRatio = ratioWidth.value / ratioHeight.value;
width.value = parseFloat((height.value * aspectRatio).toFixed(2));
};
let calculateHeight = () => {
let aspectRatio = ratioWidth.value / ratioHeight.value;
height.value = parseFloat((width.value / aspectRatio).toFixed(2));
}
height.addEventListener("input", calculateWidth);
width.addEventListener("input", calculateHeight);
ratioHeight.addEventListener("input", calculateWidth);
ratioWidth.addEventListener("input", calculateHeight);That’s all after pasting the code your code will be successfully run. If you get any kind of error/problem in the code just comment or contact me on social media
Output Result
| Written By | @narendra-chand |
| Code By | Coding thai |
| Code idea | @AsmrProg |