Skip to content

Commit

Permalink
Completed
Browse files Browse the repository at this point in the history
sumugowda committed Feb 11, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
1 parent 9e6d47e commit b22e888
Showing 7 changed files with 111 additions and 0 deletions.
12 changes: 12 additions & 0 deletions Calculators/Aspect-Ratio-Calculator/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
This is a simple Aspect Ratio Calculator that allows users to input width and height values and calculates the simplified aspect ratio. The calculator uses the greatest common divisor (GCD) to simplify the ratio.

## Tech Stacks

- HTML
- CSS
- JavaScript

## Screenshots
![image](calculator.png)


Binary file added Calculators/Aspect-Ratio-Calculator/bg.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
27 changes: 27 additions & 0 deletions Calculators/Aspect-Ratio-Calculator/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Aspect Ratio Calculator</title>

</head>
<body>
<div class="calculator">
<h2>Aspect Ratio Calculator</h2>

<label for="width">Width:</label>
<input type="number" id="width" placeholder="Enter width" oninput="calculateAspectRatio()">

<label for="height">Height:</label>
<input type="number" id="height" placeholder="Enter height" oninput="calculateAspectRatio()">

<h3>Aspect Ratio:</h3>
<p id="aspectRatio"></p>
</div>

<script src="script.js"></script>

</body>
</html>
16 changes: 16 additions & 0 deletions Calculators/Aspect-Ratio-Calculator/script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
function calculateAspectRatio() {
const width = document.getElementById('width').value;
const height = document.getElementById('height').value;

if (width && height && width > 0 && height > 0) {
const gcd = findGCD(width, height);
const aspectRatio = `${width / gcd}:${height / gcd}`;
document.getElementById('aspectRatio').innerHTML = `Aspect Ratio: ${aspectRatio}`;
} else {
document.getElementById('aspectRatio').innerHTML = 'Enter valid width and height.';
}
}

function findGCD(a, b) {
return b === 0 ? a : findGCD(b, a % b);
}
42 changes: 42 additions & 0 deletions Calculators/Aspect-Ratio-Calculator/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@

@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');

body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: "Roboto Condensed", sans-serif;
background:url(./bg.jpg);
color: #fff;

}

.calculator {
text-align: center;
border: 1px solid #fff;
width: 500px;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
background: transparent;
backdrop-filter: blur(10px);
display: flex;
flex-direction: column;
}

input {
margin: 10px 5px;
padding: 10px;
font-size: 16px;
background: transparent;
color: #fff;
border: none;
border-bottom: 1px solid;
}

p {
font-size: 16px;
margin: 5px 0;
}
14 changes: 14 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -1793,6 +1793,20 @@ <h3>Checks the number is neon or not and finds neon numbers in a range.</h3>
</div>
</div>
</div>
<div class="box">
<div class="content">
<h2>Aspect Ratio Calculator</h2>
<h3>Shows the aspect ratio of the specified height and width</h3>
<div class="card-footer">
<a href="./Calculators/Aspect-Ratio-Calculator/index.html" target="_blank">
<button>Try Now</button>
</a>
<a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Aspect-Ratio-Calculator" title="Source Code" target="_blank">
<img src="./assets/images/github.png" alt="Source Code"></img>
</a>
</div>
</div>
</div>
</div>

<!-- Calculator Section Ends Here -->

0 comments on commit b22e888

Please sign in to comment.