-
Notifications
You must be signed in to change notification settings - Fork 395
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
28 changed files
with
1,105 additions
and
186 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
# <p align="center">Body Shape Calculator</p> | ||
|
||
## Description :- | ||
|
||
Calculator that is based on comparing the waist and bust/chest measurements to the hip measurements. This helps categorize a body shape category (Rectangle, hourglass, triangle, etc).<br> | ||
This calculator will display your body shape + suggest clothing styles. | ||
|
||
## Tech Stacks :- | ||
|
||
- HTML | ||
- CSS | ||
- JavaScript | ||
|
||
## Screenshots :- | ||
|
||
![image](https://github.com/user-attachments/assets/06ede4c0-221e-40b2-ba15-3d200151c4c8) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,47 @@ | ||
<!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>Body Shape Calculator</title> | ||
</head> | ||
|
||
<body> | ||
<h1>Find your body style</h1> | ||
<div class="container"> | ||
<div class="input-group"> | ||
<label for="bust">Bust:</label> | ||
<input type="number" id="bust" name="bust" placeholder="Bust"> | ||
<select class="unit-selector"> | ||
<option value="inches">in</option> | ||
<option value="centimeters">cm</option> | ||
</select> | ||
</div> | ||
<div class="input-group"> | ||
<label for="waist">Waist:</label> | ||
<input type="number" id="waist" name="waist" placeholder="Waist"> | ||
<select class="unit-selector"> | ||
<option value="inches">in</option> | ||
<option value="centimeters">cm</option> | ||
</select> | ||
</div> | ||
<div class="input-group"> | ||
<label for="hips">Hips:</label> | ||
<input type="number" id="hips" name="hips" placeholder="Hips"> | ||
<select class="unit-selector"> | ||
<option value="inches">in</option> | ||
<option value="centimeters">cm</option> | ||
</select> | ||
</div> | ||
<button onclick="calculateShape()">Calculate</button> | ||
</div> | ||
<div id="result"></div> | ||
<div id="suggestion"></div> | ||
<hr> | ||
<footer>"Embrace your individuality and rock what makes you feel good!"</footer> | ||
<script src="script.js"></script> | ||
</body> | ||
|
||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,60 @@ | ||
function calculateShape() { | ||
const bustInput = document.getElementById("bust"); | ||
const waistInput = document.getElementById("waist"); | ||
const hipsInput = document.getElementById("hips"); | ||
|
||
// Get unit values from each select element | ||
const bustUnit = bustInput.parentElement.querySelector(".unit-selector").value; | ||
const waistUnit = waistInput.parentElement.querySelector(".unit-selector").value; | ||
const hipsUnit = hipsInput.parentElement.querySelector(".unit-selector").value; | ||
|
||
let convertedBust = parseFloat(bustInput.value); | ||
let convertedWaist = parseFloat(waistInput.value); | ||
let convertedHips = parseFloat(hipsInput.value); | ||
|
||
// Convert to centimeters if selected | ||
if (bustUnit === "centimeters") { | ||
convertedBust *= 2.54; | ||
} | ||
if (waistUnit === "centimeters") { | ||
convertedWaist *= 2.54; | ||
} | ||
if (hipsUnit === "centimeters") { | ||
convertedHips *= 2.54; | ||
} | ||
|
||
let resultText; | ||
let suggestionText; | ||
|
||
if (convertedBust > convertedWaist && convertedBust > convertedHips) { | ||
resultText = "RESULT:-Triangle Shape"; | ||
suggestionText = "SUGGESTION:-Wear clothes like A-line skirts, V-neck tops, and wrap dresses."; | ||
} else if (convertedWaist > convertedBust && convertedWaist > convertedHips) { | ||
resultText = "RESULT:-Inverted Triangle Shape"; | ||
suggestionText = "SUGGESTION:-Wear clothes like wide-leg pants, boat neck tops, and structured jackets."; | ||
} else if (convertedHips > convertedBust && convertedHips > convertedWaist) { | ||
resultText = "RESULT:-Rectangle Shape"; | ||
suggestionText = "SUGGESTION:-Wear clothes like high-waisted pants, peplum tops, and belted dresses."; | ||
} else if (convertedBust === convertedWaist && convertedBust === convertedHips) { | ||
resultText = "RESULT:-Hourglass Shape"; | ||
suggestionText = "SUGGESTION:-Wear clothes like wrap dresses, pencil skirts, and fitted tops."; | ||
} else if (convertedBust === convertedWaist || convertedBust === convertedHips || convertedWaist === convertedHips) { | ||
resultText = "RESULT:-Diamond Shape"; | ||
suggestionText = "SUGGESTION:-Wear clothes like bootcut pants, off-the-shoulder tops, and empire waist dresses."; | ||
} else if (convertedBust < convertedWaist && convertedBust < convertedHips) { | ||
resultText = "RESULT:-Pear Shape"; | ||
suggestionText = "SUGGESTION:-Wear clothes like bootcut pants, off-the-shoulder tops, and empire waist dresses."; | ||
} else if (convertedWaist < convertedBust && convertedWaist < convertedHips) { | ||
resultText = "RESULT:-Apple Shape"; | ||
suggestionText = "SUGGESTION:-Wear clothes like A-line skirts, V-neck tops, and wrap dresses."; | ||
} else if (convertedHips < convertedBust && convertedHips < convertedWaist) { | ||
resultText = "RESULT:-Oval Shape"; | ||
suggestionText = "SUGGESTION:-Wear clothes like wide-leg pants, boat neck tops, and structured jackets."; | ||
} else { | ||
resultText = "Invalid input. Please enter valid measurements."; | ||
suggestionText = ""; | ||
} | ||
|
||
document.getElementById("result").innerHTML = resultText; | ||
document.getElementById("suggestion").innerHTML = suggestionText; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,123 @@ | ||
body { | ||
font-weight: bold; | ||
background: rgb(238, 174, 202); | ||
background: radial-gradient(circle, rgba(238, 174, 202, 1) 0%, rgba(148, 187, 233, 1) 100%); | ||
opacity: 1; | ||
font-family: Arial, sans-serif; | ||
display: block; | ||
justify-content: center; | ||
align-items: center; | ||
height: 100vh; | ||
margin: 20; | ||
color: #111010; | ||
} | ||
|
||
footer { | ||
color: #111010; | ||
text-align: center; | ||
display: block; | ||
} | ||
|
||
img { | ||
margin-bottom: 20px; | ||
width: 70px; | ||
height: 50px; | ||
} | ||
|
||
h1 { | ||
text-align: center; | ||
font-style: oblique; | ||
font-size: 1.5em; | ||
font-weight: bolder; | ||
|
||
} | ||
|
||
.container { | ||
display: block; | ||
background-color: rgba(221, 178, 203, 0.768); | ||
padding: 20px; | ||
border-radius: 8px; | ||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); | ||
max-width: 400px; | ||
width: 100%; | ||
text-align: center; | ||
margin: 0 auto; | ||
} | ||
|
||
hr { | ||
color: #cba8ec; | ||
} | ||
|
||
label { | ||
display: flex; | ||
margin-bottom: 5px; | ||
font-weight: bold; | ||
} | ||
|
||
.input-group { | ||
margin-bottom: 15px; | ||
display: flex; | ||
justify-content: space-between; | ||
align-items: center; | ||
border-radius: 5px; | ||
} | ||
|
||
.input-group input { | ||
width: 80%; | ||
padding: 10px; | ||
border: 1px solid rgb(234, 229, 230); | ||
border-radius: 5px; | ||
font-size: 16px; | ||
} | ||
|
||
.input-group button { | ||
width: 100%; | ||
padding: 10px; | ||
background-color: #de8dad; | ||
color: white; | ||
border: none; | ||
border-radius: 5px 0 0 5px; | ||
cursor: pointer; | ||
font-size: 1em; | ||
transition: background-color 0.3s ease; | ||
} | ||
|
||
button:hover { | ||
background-color: rgb(222, 197, 210); | ||
} | ||
|
||
.unit-selector { | ||
padding: 10px; | ||
border-color: #e4b3c7; | ||
color: rgb(157, 155, 155); | ||
border: #de8dad; | ||
border-radius: 0 5px 5px 0; | ||
cursor: pointer; | ||
font-size: 1em; | ||
} | ||
|
||
#result { | ||
margin-top: 20px; | ||
padding: 15px; | ||
text-align: center; | ||
font-size: 1.2em; | ||
font-weight: bold; | ||
} | ||
|
||
.footer { | ||
text-align: center; | ||
font-size: 1em; | ||
font-weight: lighter; | ||
color: #ada8a8; | ||
} | ||
|
||
#result.hidden { | ||
display: none; | ||
} | ||
|
||
#suggestion { | ||
font-size: 1em; | ||
font-weight: lighter; | ||
color: #454445; | ||
text-align: center; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
# <p align="center">Capacitance Calculator</p> | ||
|
||
## Description :- | ||
|
||
This calculator will help to find the capacitance in a parallel plate capacitor. | ||
|
||
## Tech Stacks :- | ||
|
||
- HTML | ||
- CSS | ||
- JavaScript | ||
|
||
## Screenshots :- | ||
|
||
![image](https://github.com/user-attachments/assets/f9692a50-1dc2-4a22-89e8-33a2431b66a1) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
<!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>Capacitance Calculator</title> | ||
</head> | ||
<body> | ||
<div class="calculator"> | ||
<h1>Parallel Plate Capacitor Calculator</h1> | ||
<label for="area">A (plate area):</label> | ||
<input type="number" id="area" placeholder="Enter area in mm²"> | ||
<span>(mm²)</span> | ||
<br> | ||
<label for="distance">d (distance):</label> | ||
<input type="number" id="distance" placeholder="Enter distance in mm"> | ||
<span>(mm)</span> | ||
<br> | ||
<label for="dielectric">K (dielectric constant):</label> | ||
<input type="number" id="dielectric" value="1"> | ||
<br> | ||
<button onclick="computeCapacitance()">Compute</button> | ||
<br> | ||
<label for="capacitanceUF">Capacitance:</label> | ||
<input type="text" id="capacitanceUF" readonly> | ||
<span>(uF)</span> | ||
<br> | ||
<label for="capacitancePF">Capacitance:</label> | ||
<input type="text" id="capacitancePF" readonly> | ||
<span>(pF)</span> | ||
</div> | ||
<script src="script.js"></script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
function computeCapacitance() { | ||
const epsilon0 = 8.854187817e-12; // Vacuum permittivity in F/m | ||
const area = document.getElementById("area").value; | ||
const distance = document.getElementById("distance").value; | ||
const dielectric = document.getElementById("dielectric").value; | ||
|
||
if (area && distance && dielectric) { | ||
const areaMeters = area * 1e-6; // convert mm² to m² | ||
const distanceMeters = distance * 1e-3; // convert mm to m | ||
const capacitanceFarads = | ||
(dielectric * epsilon0 * areaMeters) / distanceMeters; | ||
|
||
const capacitanceMicroFarads = capacitanceFarads * 1e6; | ||
const capacitancePicoFarads = capacitanceFarads * 1e12; | ||
|
||
document.getElementById("capacitanceUF").value = | ||
capacitanceMicroFarads.toFixed(6); | ||
document.getElementById("capacitancePF").value = | ||
capacitancePicoFarads.toFixed(6); | ||
} else { | ||
alert("Please fill in all fields."); | ||
} | ||
} |
Oops, something went wrong.