Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added 2d distance calci #2385

Merged
merged 7 commits into from
Jul 15, 2024
Merged

Added 2d distance calci #2385

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
ae25ca1
Create Readme.md
pavitraag Jul 13, 2024
06e917b
Update Readme.md
pavitraag Jul 13, 2024
a68b016
Create style.css
pavitraag Jul 13, 2024
87e7cdd
Create index.html
pavitraag Jul 13, 2024
3a4f644
Create script.js
pavitraag Jul 13, 2024
053f3a6
Update index.html
pavitraag Jul 13, 2024
aaecd38
Create manifest.json
pavitraag Jul 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions 2D Distance Calculator/Readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
# <p align="center">2D Distance Calculator</p>

## Description :-

Calculates the distance between two points on a 2D plane.

## Tech Stacks :-

- HTML
- CSS
- JavaScript

100 changes: 100 additions & 0 deletions 2D Distance Calculator/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
<!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" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@500&display=swap" rel="stylesheet">
<title>2D Shapes Calculator</title>
</head>

<body>
<div class="card">
<div class="waviy">
<span style="--i:1">2</span>
<span style="--i:2">D</span>
<span style="--i:11">&nbsp;</span>
<span style="--i:3">S</span>
<span style="--i:4">H</span>
<span style="--i:5">A</span>
<span style="--i:6">P</span>
<span style="--i:7">E</span>
<span style="--i:8">S</span>
<span style="--i:9">&nbsp;</span>
<span style="--i:10">C</span>
<span style="--i:11">A</span>
<span style="--i:12">L</span>
<span style="--i:13">C</span>
<span style="--i:14">U</span>
<span style="--i:15">L</span>
<span style="--i:16">A</span>
<span style="--i:17">T</span>
<span style="--i:18">O</span>
<span style="--i:19">R</span>
</div>
<br><br>
<div class="row">
<select id="shape" name="shape" onchange="showDimensions()" required>
<option value="" disabled selected hidden>Select a shape</option>
<option value="rectangle">Rectangle</option>
<option value="square">Square</option>
<option value="circle">Circle</option>
<option value="triangle">Triangle</option>
<option value="parallelogram">Parallelogram</option>
<option value="rhombus">Rhombus</option>
<option value="trapezoid">Trapezoid</option>
<option value="hexagon">Hexagon</option>
<option value="nsides">N-Sided Polygon</option>
</select>
</div>
<br>
<div class="row" id="nsides-row" style="display: none;">
<label for="nofsides">No. of sides of polygon:</label>
<input type="number" id="nofsides" name="nofsides">
</div><br>
<div class="row" id="length-row" style="display: none;">
<label for="length">Enter Length:</label>
<input type="number" id="length" name="length">
</div><br>
<div class="row" id="width-row" style="display: none;">
<label for="width">Enter Width:</label>
<input type="number" id="width" name="width">
</div><br>

<div class="row" id="metric-row" style="display: none;">
<label for="metric">Choose Metric:</label>
<select name="metric" id="metric">
<option value="m">m</option>
<option value="cm">cm</option>
<option value="km">km</option>
</select>
</div><br>

<div class="row" id="radius-row" style="display: none;">
<label for="radius">Enter Radius:</label>
<input type="number" id="radius" name="radius">
</div><br>
<div class="row" id="diagonal1-row" style="display: none;">
<label for="diagonal1">Enter Diagonal 1:</label>
<input type="number" id="diagonal1" name="diagonal1">
</div>
<br>
<div class="row" id="diagonal2-row" style="display: none;">
<label for="diagonal2">Enter Diagonal 2:</label>
<input type="number" id="diagonal2" name="diagonal2">
</div>
<div class="rule"></div>
<div class="form-footer">
<button class="button" onclick="calculate(event)">Calculate</button>
</div>
<div id="result-container">
<p id="result"></p>
</div>
</div>
<script src="script.js"></script>
</body>

</html>
10 changes: 10 additions & 0 deletions 2D Distance Calculator/manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"manifest_version": 3,
"name": "2D Shapes Calculator",
"version": "1.0",
"description": "Calculate the perimeter and area of various 2D shapes.",
"permissions": [],
"action": {
"default_popup": "index.html"
}
}
151 changes: 151 additions & 0 deletions 2D Distance Calculator/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,151 @@
function calculate(event) {
event.preventDefault();
var shape = document.getElementById("shape").value;
var numSides = parseFloat(document.getElementById("nofsides").value);
var length = parseFloat(document.getElementById("length").value);
var width = parseFloat(document.getElementById("width").value);
var radius = parseFloat(document.getElementById("radius").value);
var diagonal1 = parseFloat(document.getElementById("diagonal1").value);
var diagonal2 = parseFloat(document.getElementById("diagonal2").value);
var resultContainer = document.getElementById("result");
var metric = document.getElementById("metric").value

if (shape === "") {
resultContainer.textContent = "Please select a shape.";
return;
} else if (shape === "square" || shape === "hexagon" || shape === "nsides") {
if (isNaN(length)) {
resultContainer.textContent = "Enter valid numerical value";
return;
}
} else if (shape === "rhombus") {
if (isNaN(diagonal1) || isNaN(diagonal2)) {
resultContainer.textContent = "Enter valid numerical value";
return;
}
} else if (shape === "circle") {
if (isNaN(radius)) {
resultContainer.textContent = "Enter valid numerical value";
return;
}
} else {
if (isNaN(length) || isNaN(width)) {
resultContainer.textContent = "Enter valid numerical value";
return;
}
}

if (length < 0 || width < 0 || radius < 0 || diagonal1 < 0 || diagonal2 < 0) {
resultContainer.textContent = "Enter a positive value.";
return;
}

var perimeter, area;

switch (shape) {
case "rectangle":
perimeter = 2 * (length + width);
area = length * width;
break;
case "square":
perimeter = 4 * length;
area = Math.pow(length, 2);
break;
case "circle":
perimeter = 2 * Math.PI * radius;
area = Math.PI * Math.pow(radius, 2);
break;
case "triangle":
perimeter = 3 * length;
area = (length * width) / 2;
break;
case "parallelogram":
perimeter = 2 * (length + width);
area = length * width;
break;
case "rhombus":
perimeter = 4 * Math.sqrt(Math.pow(diagonal1 / 2, 2) + Math.pow(diagonal2 / 2, 2));
area = (diagonal1 * diagonal2) / 2;
break;
case "trapezoid":
// Assuming the height is the average of the parallel sides
var height = (length + width) / 2;
perimeter = length + width;
area = ((length + width) * height) / 2;
break;
case "hexagon":
perimeter = 6 * length;
area = (3 * Math.sqrt(3) * Math.pow(length, 2)) / 2;
break;
case "nsides":
perimeter = numSides * length;
area = (numSides * length * length) / (4 * Math.tan(Math.PI / numSides));
break;
// Add cases for more shapes as needed
default:
break;
}
resultContainer.textContent = `Perimeter: ${perimeter.toFixed(2)} ${metric}, Area: ${(area).toFixed(2)} ${metric}²`;
}


function showDimensions() {
var shape = document.getElementById("shape").value;

// Hide all dimension rows initially
document.getElementById("nsides-row").style.display = "none";
document.getElementById("length-row").style.display = "none";
document.getElementById("width-row").style.display = "none";
document.getElementById("radius-row").style.display = "none";
document.getElementById("diagonal1-row").style.display = "none";
document.getElementById("diagonal2-row").style.display = "none";

// Show the relevant dimension row based on the selected shape
switch (shape) {
case "rectangle":
document.getElementById("length-row").style.display = "block";
document.getElementById("width-row").style.display = "block";
document.getElementById("metric-row").style.display = "block";
break;
case "square":
document.getElementById("length-row").style.display = "block";
document.getElementById("metric-row").style.display = "block";
break;
case "circle":
document.getElementById("radius-row").style.display = "block";
document.getElementById("metric-row").style.display = "block";
break;
case "triangle":
document.getElementById("length-row").style.display = "block";
document.getElementById("width-row").style.display = "block";
document.getElementById("metric-row").style.display = "block";
break;
case "parallelogram":
document.getElementById("length-row").style.display = "block";
document.getElementById("width-row").style.display = "block";
document.getElementById("metric-row").style.display = "block";
break;
case "rhombus":
document.getElementById("diagonal1-row").style.display = "block";
document.getElementById("diagonal2-row").style.display = "block";
document.getElementById("metric-row").style.display = "block";
break;
case "trapezoid":
document.getElementById("length-row").style.display = "block";
document.getElementById("width-row").style.display = "block";
document.getElementById("metric-row").style.display = "block";
break;
case "hexagon":
document.getElementById("length-row").style.display = "block";
document.getElementById("metric-row").style.display = "block";
break;
case "nsides":
document.getElementById("nsides-row").style.display = "block";
document.getElementById("length-row").style.display = "block";
document.getElementById("metric-row").style.display = "block";
break;
// Add cases for more shapes as needed
default:
break;
}
}
Loading
Loading