diff --git a/Calculators/GDP-Calculator/README.md b/Calculators/GDP-Calculator/README.md new file mode 100644 index 000000000..08c232a6b --- /dev/null +++ b/Calculators/GDP-Calculator/README.md @@ -0,0 +1,15 @@ +#

GDP Calculator

+ +## Description :- + +This is a GDP calculator (Gross Domestic Product), which helps to calculate the aggregate domestic output produced in a given country in a nominal term using the Expenditure Approach. + +## Tech Stacks :- + +- HTML +- CSS +- JavaScript + +## Screenshots :- + +![image](https://github.com/Rakesh9100/CalcDiverse/assets/73993775/1158f5b9-316e-4b03-8d8e-491f2734a77d) diff --git a/Calculators/GDP-Calculator/index.html b/Calculators/GDP-Calculator/index.html new file mode 100644 index 000000000..17a643329 --- /dev/null +++ b/Calculators/GDP-Calculator/index.html @@ -0,0 +1,66 @@ + + + + + + + + GDP Calculator + + + +
+
+

GDP Calculator

+

+ Gross domestic product is defined by the Organisation for Economic Co-operation and Development (OECD) as + "an aggregate measure of production equal to the sum of the gross values added of all resident and + institutional units engaged in production + (plus any taxes, and minus any subsidies, on products not included in the value of their outputs.") +
More simply, it can be defined as a monetary measure of the market value of final goods produced over a period of time, + typically quarterly or yearly, + that is often used to determine the economic performance of a region or country. +

+
+
+ +
+ +
+
+ Expenditure Approach +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
+
+
+
+
+
+ + diff --git a/Calculators/GDP-Calculator/script.js b/Calculators/GDP-Calculator/script.js new file mode 100644 index 000000000..9716e2dbf --- /dev/null +++ b/Calculators/GDP-Calculator/script.js @@ -0,0 +1,14 @@ +document.getElementById("GDPcalc").addEventListener("submit", function(e) { + e.preventDefault(); + + let personal = parseFloat(document.getElementById("personal").value); + let investment = parseFloat(document.getElementById("investment").value); + let consumption = parseFloat(document.getElementById("consumption").value); + let exports = parseFloat(document.getElementById("exports").value); + let imports = parseFloat(document.getElementById("imports").value); + + let GDP = personal + investment + consumption + exports - imports; + + let value = document.querySelector(".value"); + value.textContent = GDP; +}); diff --git a/Calculators/GDP-Calculator/style.css b/Calculators/GDP-Calculator/style.css new file mode 100644 index 000000000..641b695f4 --- /dev/null +++ b/Calculators/GDP-Calculator/style.css @@ -0,0 +1,174 @@ +html, +body { + margin: 0; + padding: 0; + font-family: Arial, Helvetica, sans-serif; +} + +.container { + display: flex; +} + +.left-section { + background-color: #17202A; + box-sizing: border-box; + color: white; + padding: 30px; + height: 100vh; + width: 40%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.left-section h1 { + font-size: 4rem; + margin-top: 0; + white-space: nowrap; + overflow: hidden; + border-right: .15em solid orange; + /* The cursor */ + width: 0; + /* Ensures the text starts at width 0 */ + animation: typing 4s steps(22) forwards, blink-caret .75s step-end infinite; + +} + +@keyframes typing { + from { + width: 0; + } + + to { + width: 100%; + } +} + +@keyframes blink-caret { + + from, + to { + border-color: transparent; + } + + 50% { + border-color: orange; + } +} + +.left-section p { + font-size: 1.1rem; + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; +} + +.right-section { + background-color: #f4f4f9; + box-sizing: border-box; + padding: 30px; + width: 100vw; + height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +form { + display: flex; + flex-direction: column; +} + +.calcfield { + margin-bottom: 20px; + box-shadow: #000000; +} + +fieldset { + width: 30vw; + box-shadow: #000000; + border-radius: 10px; +} + +legend { + font-size: 1.2em; + font-weight: bold; + margin-bottom: 10px; + color: #17202A; +} + +.field { + margin-bottom: 15px; +} + +.field label { + display: block; + margin-bottom: 5px; + font-weight: bold; + color: #333; +} + +.field input { + width: 90%; + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + font-size: 1em; +} + +.buttons { + display: flex; + align-items: center; + justify-content: center; + gap: 15px; +} + +button { + padding: 10px 15px; + border: none; + border-radius: 4px; + cursor: pointer; + font-size: 1em; +} + +button.calculate { + background-color: #2e3b4e; + color: #fff; +} + +button.clear { + background-color: #f4f4f9; + color: #2e3b4e; +} + +button.calculate:hover { + background-color: #1d2735; +} + +button.clear:hover { + background-color: #e4e4e9; +} + +.output { + display: flex; + align-items: center; + padding: 15px; + /* justify-content: center; */ + border: 2px solid #ccc; + width: 40%; + height: 30px; + margin-top: 20px; + font-size: 1.2em; + color: #2e3b4e; +} + +.output::before { + font-weight: 700; + content: 'GDP: '; + text-align: center; +} + +.value { + color: rgb(75, 2, 2); + font-size: 3rem; +} diff --git a/index.html b/index.html index 205748ef4..8f0587687 100644 --- a/index.html +++ b/index.html @@ -1408,6 +1408,20 @@

Calculates Greatest Common Divisor of Two values or multiple values.

+
+
+

GDP Calculator

+

Calculates the gross domestic product using the expenditure approach.

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

GPA Calculator