Added Population Density Calculator (#793)

Rakesh9100 · May 24, 2024 · 5515750 · 5515750
1 parent c478eee
commit 5515750
Show file tree

Hide file tree

Showing 5 changed files with 205 additions and 0 deletions.
diff --git a/Calculators/Population-Density-Calculator/README.md b/Calculators/Population-Density-Calculator/README.md
@@ -0,0 +1,25 @@
+# <p align="center">Population Density Calculator</p>
+
+## 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
@@ -0,0 +1,40 @@
+<!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>Population Density Calculator</title>
+</head>
+
+<body>
+    <div class="container">
+        <div class="calculator-section">
+            <div class="headings">
+                <h2>Population Density</h2>
+                <h2 class="heading-line-2">Calculator</h2>
+            </div>
+            <div class="form-field">
+                <input type="number" id="population" min="0" placeholder="No. of population: ">
+            </div>
+            <div class="form-field">
+                <input type="number" id="area" min="0" placeholder="Area of the place in km: ">
+            </div>
+            <div class="buttons-container">
+                <button class="button-64" role="button"><span class="text"
+                        onclick="calculate()">Calculate</span></button>
+                <button class="button-64" role="button"><span class="text" onclick="reset()">Reset</span></button>
+            </div>
+            <div class="result-container">
+                <p id="result"></p>
+            </div>
+
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+
+</body>
+
+</html>
diff --git a/Calculators/Population-Density-Calculator/script.js 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 = '';
+}
diff --git a/Calculators/Population-Density-Calculator/style.css 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;
+}
diff --git a/index.html b/index.html
@@ -1378,6 +1378,20 @@ <h3>Calculates nPr and nCr after taking inputs as n and r.</h3>
                 </div>
             </div>
         </div>
+        <div class="box">
+            <div class="content">
+                <h2>Population Density Calculator</h2>
+                <h3>Calculates the density of the population in a specific area.</h3>
+                <div class="card-footer">
+                    <a href="./Calculators/Population-Density-Calculator/index.html" target="_blank">
+                        <button>Try Now</button>
+                    </a>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Population-Density-Calculator" title="Source Code" target="_blank">
+                        <img src="./assets/images/github.png" alt="Source Code"></img>
+                    </a>
+                </div>
+            </div>
+        </div>
         <div class="box">
             <div class="content">
                 <h2>Power Calculator</h2>