From 551575059343e0a77d76064f21e5a166e73ea2b4 Mon Sep 17 00:00:00 2001 From: Ishita Mukherjee Date: Fri, 24 May 2024 12:44:03 +0530 Subject: [PATCH] Added Population Density Calculator (#793) --- .../Population-Density-Calculator/README.md | 25 ++++ .../Population-Density-Calculator/index.html | 40 +++++++ .../Population-Density-Calculator/script.js | 15 +++ .../Population-Density-Calculator/style.css | 111 ++++++++++++++++++ index.html | 14 +++ 5 files changed, 205 insertions(+) create mode 100644 Calculators/Population-Density-Calculator/README.md create mode 100644 Calculators/Population-Density-Calculator/index.html create mode 100644 Calculators/Population-Density-Calculator/script.js create mode 100644 Calculators/Population-Density-Calculator/style.css diff --git a/Calculators/Population-Density-Calculator/README.md b/Calculators/Population-Density-Calculator/README.md new file mode 100644 index 000000000..cd3c444cb --- /dev/null +++ b/Calculators/Population-Density-Calculator/README.md @@ -0,0 +1,25 @@ +#

Population Density Calculator

+ +## Description :- + +A simple web-based Population Density Calculator that allows users to calculate the population density of an area after taking inputs as number of population of that place and the area of the place. + +## Tech Stacks :- + +- HTML +- CSS +- JavaScript + +## Features :- + +- Calculate population density for given inputs. +- Easy-to-use command-line interface. +- You can reset the calculation to starting. + +## Screenshots :- + +![image](https://github.com/Ishitamukherjee2004/CalcDiverse/assets/138589633/8051c5db-c43b-43c8-b914-eb799da394d9) + + +![image](https://github.com/Ishitamukherjee2004/CalcDiverse/assets/138589633/a9e0b7d8-eadf-4ddb-8796-2882bd3f2ac4) + diff --git a/Calculators/Population-Density-Calculator/index.html b/Calculators/Population-Density-Calculator/index.html new file mode 100644 index 000000000..1f7ee8e4a --- /dev/null +++ b/Calculators/Population-Density-Calculator/index.html @@ -0,0 +1,40 @@ + + + + + + + + Population Density Calculator + + + +
+
+
+

Population Density

+

Calculator

+
+
+ +
+
+ +
+
+ + +
+
+

+
+ +
+
+ + + + + + \ No newline at end of file diff --git a/Calculators/Population-Density-Calculator/script.js b/Calculators/Population-Density-Calculator/script.js new file mode 100644 index 000000000..ba319b15a --- /dev/null +++ b/Calculators/Population-Density-Calculator/script.js @@ -0,0 +1,15 @@ + +function calculate() { + const population = document.getElementById("population").value; + const area = document.getElementById("area").value; + const result = document.getElementById('result'); + + result.innerHTML="The population density of the area "+area+" km with a population of "+population+" is "+population/area; +} + +function reset() { + document.getElementById('population').value = '' + document.getElementById('area').value = '' + const result = document.getElementById('result'); + result.innerHTML = ''; +} \ No newline at end of file diff --git a/Calculators/Population-Density-Calculator/style.css b/Calculators/Population-Density-Calculator/style.css new file mode 100644 index 000000000..84154910a --- /dev/null +++ b/Calculators/Population-Density-Calculator/style.css @@ -0,0 +1,111 @@ +body { + background-color: #66876e; + background-image: linear-gradient(62deg, #296a2b 0%, #a0c6a6 100%); + +} + +.container { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 420px; + height: 500px; + background: transparent; + border-radius: 10px; + border: 3px solid rgba(12, 12, 12, 0.5); + box-shadow: 0 0 10 rgba(0, 0, 0, 0.2); + backdrop-filter: blur(8px); +} + +.calculator-section { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 3rem; +} + +.calculator-section h2 { + font-size: 1.7rem; + color: black; + font-weight: 700; +} + +.calculator-section .heading-line-2 { + text-align: center; +} + +.headings { + line-height: 18px; +} + +.form-field input { + width: 15rem; + height: 1.2rem; + background: transparent; + border: none; + outline: none; + border-bottom: 1.5px solid black; + font-size: 1.2rem; +} + +::placeholder { + font-size: 1rem; + font-weight: 600; + color: black; +} + +.button-64 { + align-items: center; + background-image: linear-gradient(144deg, #93a380, #5B42F3 50%, #00DDEB); + border: 0; + border-radius: 8px; + box-shadow: rgba(37, 74, 29, 0.2) 0 15px 30px -5px; + box-sizing: border-box; + color: #FFFFFF; + display: flex; + font-family: Phantomsans, sans-serif; + font-size: 25px; + justify-content: center; + line-height: 1em; + max-width: 100%; + min-width: 120px; + padding: 3px; + text-decoration: none; + user-select: none; + -webkit-user-select: none; + touch-action: manipulation; + white-space: nowrap; + cursor: pointer; +} + +.button-64:active, +.button-64:hover { + outline: 0; +} + +.button-64 span { + background-color: rgb(5, 6, 45); + padding: 16px 24px; + border-radius: 6px; + width: 100%; + height: 100%; + transition: 300ms; +} + +.button-64:hover span { + background: none; +} + +#result { + font-size: 1.5rem; + margin: 10px 7px; +} + +.buttons-container { + display: flex; + align-items: center; + justify-content: center; + gap: 1rem; +} \ No newline at end of file diff --git a/index.html b/index.html index da218260a..b555f8e1c 100644 --- a/index.html +++ b/index.html @@ -1378,6 +1378,20 @@

Calculates nPr and nCr after taking inputs as n and r.

+
+
+

Population Density Calculator

+

Calculates the density of the population in a specific area.

+
+ + + + + Source Code + +
+
+

Power Calculator