From d5818114944335434ca1a8581f74fe77cdf2d92b Mon Sep 17 00:00:00 2001 From: thenagarajanv Date: Mon, 3 Jun 2024 17:58:14 +0530 Subject: [PATCH] InflationCalculator --- Calculators/Inflation-Calculator/index.html | 50 +++++++ Calculators/Inflation-Calculator/script.js | 22 +++ Calculators/Inflation-Calculator/styles.css | 157 ++++++++++++++++++++ index.html | 14 ++ 4 files changed, 243 insertions(+) create mode 100644 Calculators/Inflation-Calculator/index.html create mode 100644 Calculators/Inflation-Calculator/script.js create mode 100644 Calculators/Inflation-Calculator/styles.css diff --git a/Calculators/Inflation-Calculator/index.html b/Calculators/Inflation-Calculator/index.html new file mode 100644 index 000000000..dfc195031 --- /dev/null +++ b/Calculators/Inflation-Calculator/index.html @@ -0,0 +1,50 @@ + + + + + + + + Inflation Calculator + + + +
+

Inflation Calculator

+
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ +
+ + + + + + + Submit + +
+ +
+ +
+
+ + + + + \ No newline at end of file diff --git a/Calculators/Inflation-Calculator/script.js b/Calculators/Inflation-Calculator/script.js new file mode 100644 index 000000000..25d89db12 --- /dev/null +++ b/Calculators/Inflation-Calculator/script.js @@ -0,0 +1,22 @@ +// eventlistener for submit button +const button = document.querySelector('.btn') +button.addEventListener('click', function () { + // take user age input and check error + const currentCost = document.getElementById('current-cost-input').value + const rateOfInflation = document.getElementById('pa-input').value + const noOfYears = document.getElementById('noy-input').value + // Formula for calculation + const futureCost = currentCost * (Math.pow((1 + (rateOfInflation / 100)), noOfYears)); + // display area + const contentBox = document.querySelector('.content-box') + var existingDiv = document.querySelector('.content') + if (!existingDiv) { + var displayDiv = document.createElement('div') + displayDiv.className = 'content' + contentBox.appendChild(displayDiv) + displayDiv.textContent = "Future Cost : " + String.fromCharCode(8377) + Math.floor(futureCost); + } + else { + existingDiv.textContent = `Wrong Calculation` + } +}) \ No newline at end of file diff --git a/Calculators/Inflation-Calculator/styles.css b/Calculators/Inflation-Calculator/styles.css new file mode 100644 index 000000000..3b5523e7d --- /dev/null +++ b/Calculators/Inflation-Calculator/styles.css @@ -0,0 +1,157 @@ +html { + height: 100%; +} + +body { + margin: 0; + padding: 0; + font-family: sans-serif; + background: linear-gradient(#141e30, #492455); +} + +.container-box { + position: absolute; + top: 50%; + left: 50%; + width: 400px; + padding: 40px; + transform: translate(-50%, -50%); + background: rgba(0, 0, 0, .5); + box-sizing: border-box; + box-shadow: 0 15px 25px rgba(0, 0, 0, .6); + border-radius: 10px; +} + +.container-box h2 { + margin: 0 0 30px; + padding: 0; + color: #fff; + text-align: center; +} + +.container-box .input-box { + position: relative; +} + +.container-box .input-box input { + width: 100%; + padding: 10px 0; + font-size: 16px; + color: #fff; + margin-bottom: 12px; + border: none; + border-bottom: 1px solid #fff; + outline: none; + background: transparent; +} + +.container-box .input-box label { + position: absolute; + top: 0; + left: 0; + padding: 10px 0; + font-size: 16px; + color: #fff; + pointer-events: none; + transition: .5s; +} + +.container-box .input-box input:focus~label, +.container-box .input-box input:valid~label { + top: -20px; + left: 0; + color: #8003f4; + font-size: 13px; +} + +.container-box form a { + position: relative; + display: inline-block; + padding: 10px 20px; + color: #03e9f4; + font-size: 16px; + text-decoration: none; + text-transform: uppercase; + overflow: hidden; + transition: .5s; + margin-top: 40px; + letter-spacing: 4px; + border: 2px solid #03e9f4; +} + +.container-box a:hover { + background: #1bbe72; + color: #fff; + border-radius: 5px; + box-shadow: 0 0 5px #2c7b1c; +} + +.container-box a span { + position: absolute; + display: block; +} + + +.content { + color: #fff; + padding: 4px; + text-align: center; +} + +.content-box { + margin-top: 20px; + border: 2px solid #03e9f4; + border-radius: 4px; +} + +.error-box, +.option-error-box { + background-color: #ffcccc; + color: #ff0000; + border: 1px solid #ff0000; + padding: 10px; + border-radius: 10px; + margin-bottom: 10px; +} + +.input-group { + position: relative; + margin-bottom: 33px; + border-bottom: 1px solid rgba(255, 255, 255, 0.2); +} + +.select-box { + position: relative; + margin-top: 10px; +} + +.select-box option { + background: rgba(0, 0, 0, .5); + color: #fff; + overflow: auto; +} + +.select-box label { + position: absolute; + top: 0; + left: 0; + padding: 5px 0; + margin-bottom: 5px; + font-size: 16px; + color: #fff; + pointer-events: none; + transition: .5s; +} + +.select-box select { + width: 100%; + padding: 10px 0; + font-size: 16px; + color: #fff; + margin-top: 25px; + margin-bottom: 30px; + border: none; + border-bottom: 1px solid #fff; + outline: none; + background: transparent; +} \ No newline at end of file diff --git a/index.html b/index.html index f404388d7..217ce80a4 100644 --- a/index.html +++ b/index.html @@ -1310,6 +1310,20 @@

Converts between infix, prefix and postfix expressions.

+
+
+

Inflation Calculator

+

Which takes Current Cost, Rate of Inflation, Time Period and Future Cost

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

Intelligence Calculator