diff --git a/Calculators/Carbon-Footprint-Calculator/README.md b/Calculators/Carbon-Footprint-Calculator/README.md index 4290bb9a4..aa1705ffc 100644 --- a/Calculators/Carbon-Footprint-Calculator/README.md +++ b/Calculators/Carbon-Footprint-Calculator/README.md @@ -2,7 +2,7 @@ ## Description :- -The Carbon Footprint Calculator is a web application that estimates an individual's carbon footprint based on the miles driven per year, per month, and per week. Users can input the miles driven for each period, and the calculator provides an estimate of the carbon footprint in kilograms of CO2. +The Carbon Footprint Calculator is a web application that helps users estimate their monthly carbon footprint based on their electricity usage, gas usage, kilometers driven, and flights taken per year. ## Tech Stacks :- @@ -12,21 +12,23 @@ The Carbon Footprint Calculator is a web application that estimates an individua ## Features :- -- Estimate carbon footprint based on miles driven per year, month, and week. -- Responsive design for various screen sizes. -- User-friendly interface with modern styling. +- Calculate the carbon footprint based on: + - Electricity usage (kWh per month) + - Gas usage (kg per month) + - Kilometers driven (per month) + - Flights taken (per year) +- Clear and intuitive UI +- Responsive design for various screen sizes -## How It Works :- +## Usage :- -1. **Enter Miles Driven:** - - Input the number of miles driven for the desired time period (year, month, or week). - -2. **Calculate Carbon Footprint:** - - Click the "Calculate" button to obtain estimates for the carbon footprint. - -3. **View Results:** - - The application displays the estimated carbon footprint in kilograms of CO2 for each time period. +1. Enter your monthly electricity usage in kWh. +2. Enter your monthly gas usage in kg. +3. Enter the kilometers you drive per month. +4. Enter the number of flights you take per year. +5. Click the "Calculate" button to see your estimated carbon footprint in kg CO2e per month. +6. Click the "Reset" button to clear all inputs. ## Screenshots :- -![image](https://github.com/Rakesh9100/CalcDiverse/assets/142514166/1dcf17fc-fe45-4264-866f-9fb42d0454b6) +![image](https://github.com/Rakesh9100/CalcDiverse/assets/73993775/333f5a99-935d-422c-a57f-c33e89fcdb3e) diff --git a/Calculators/Carbon-Footprint-Calculator/index.html b/Calculators/Carbon-Footprint-Calculator/index.html index d5fe7acec..e1784baf4 100644 --- a/Calculators/Carbon-Footprint-Calculator/index.html +++ b/Calculators/Carbon-Footprint-Calculator/index.html @@ -1,30 +1,41 @@ - Carbon Footprint Calculator - -
-

Carbon Footprint Calculator

- - - - - - - - - - - -
+

Carbon Footprint Calculator

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+ +
+
+ +
+ - \ No newline at end of file diff --git a/Calculators/Carbon-Footprint-Calculator/script.js b/Calculators/Carbon-Footprint-Calculator/script.js index fbae5b883..40ebd7fdb 100644 --- a/Calculators/Carbon-Footprint-Calculator/script.js +++ b/Calculators/Carbon-Footprint-Calculator/script.js @@ -1,22 +1,28 @@ function calculateCarbonFootprint() { - // Get the input values - var milesDrivenYear = parseFloat(document.getElementById("milesDrivenYear").value); - var milesDrivenMonth = parseFloat(document.getElementById("milesDrivenMonth").value); - var milesDrivenWeek = parseFloat(document.getElementById("milesDrivenWeek").value); + let electricity = document.getElementById('electricity').value || 0; + let gas = document.getElementById('gas').value || 0; + let kilometers = document.getElementById('kilometers').value || 0; + let flights = document.getElementById('flights').value || 0; - // Validate inputs - if (isNaN(milesDrivenYear) || isNaN(milesDrivenMonth) || isNaN(milesDrivenWeek)) { - alert("Please enter valid numbers for miles driven."); - return; - } + let electricityEmissionFactor = 0.233; // kg CO2 per kWh + let gasEmissionFactor = 2.204; // kg CO2 per kg + let carEmissionFactor = 0.12; // kg CO2 per km + let flightEmissionFactor = 250; // kg CO2 per flight - // Calculate carbon footprints - var carbonFootprintYear = calculateCO2Emissions(milesDrivenYear); - var carbonFootprintMonth = calculateCO2Emissions(milesDrivenMonth); - var carbonFootprintWeek = calculateCO2Emissions(milesDrivenWeek); + let totalEmissions = (electricity * electricityEmissionFactor) + + (gas * gasEmissionFactor) + + (kilometers * carEmissionFactor) + + (flights * flightEmissionFactor / 12); - // Display the results - displayResults(carbonFootprintYear, carbonFootprintMonth, carbonFootprintWeek); + document.getElementById('result').value = totalEmissions.toFixed(2) + ' kg CO2 per month'; +} + +function resetForm() { + document.getElementById('electricity').value = ''; + document.getElementById('gas').value = ''; + document.getElementById('kilometers').value = ''; + document.getElementById('flights').value = ''; + document.getElementById('result').value = ''; } // Function to calculate CO2 emissions based on miles driven diff --git a/Calculators/Carbon-Footprint-Calculator/style.css b/Calculators/Carbon-Footprint-Calculator/style.css index 83c0b3724..57ec507d4 100644 --- a/Calculators/Carbon-Footprint-Calculator/style.css +++ b/Calculators/Carbon-Footprint-Calculator/style.css @@ -1,113 +1,107 @@ -body { - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - background: linear-gradient(to bottom right, #3494e6, #ec6ead); +@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap'); + +* { + padding: 0; margin: 0; + box-sizing: border-box; +} + +.waviy { + position: relative; + font-size: 2.2rem; +} + +.waviy span { + font-family: 'Alfa Slab One', cursive; + position: relative; + display: inline-block; + color: #fff; + text-transform: uppercase; + animation: waviy 1s infinite; + animation-delay: calc(.1s * var(--i)); +} + +@keyframes waviy { + 0%, 40%, 100% { + transform: translateY(0) + } + 20% { + transform: translateY(-20px) + } +} + +body { + font-family: 'Inconsolata', monospace; display: flex; + flex-direction: column; align-items: center; - justify-content: center; + text-align: center; + background: linear-gradient(to right bottom, #7ed0e7, #77c1ee, #87afee, #a399e1, #bf80c6); height: 100vh; + margin: 0; +} + +h1 { + color: #fff; + font-weight: 100; + margin-bottom: 50px; + margin-top: 20px; + font-size: 40px; } -.calculator-container { - background-color: #fff; +.card { + background: rgba(255, 255, 255, 0.2); + backdrop-filter: blur(10px); + border-radius: 15px; padding: 20px; - border-radius: 12px; - box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); text-align: center; - animation: fadeInUp 0.8s ease-out; - max-width: 400px; - width: 100%; + max-width: 550px; + width: 90%; + margin-bottom: 20px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } -button { - background-color: #4caf50; - color: #fff; - padding: 12px 20px; - /* Smaller button padding */ - border: none; - border-radius: 6px; - cursor: pointer; - font-size: 16px; - /* Slightly smaller font size */ - margin-top: 15px; - transition: background-color 0.3s ease, transform 0.2s ease-out; +.input { + margin-bottom: 15px; } -button:hover { - background-color: #45a049; - transform: scale(1.05); +.input label { + display: block; + margin-bottom: 5px; + color: #fff; } -input { +.input input { + width: 100%; padding: 10px; - /* Smaller input padding */ - margin: 10px 0; - /* Reduced margin */ - width: 90%; - /* Adjusted width for responsiveness */ box-sizing: border-box; - font-size: 14px; - /* Slightly smaller font size */ + border-radius: 5px; border: 1px solid #ccc; - border-radius: 6px; - transition: border-color 0.3s ease, transform 0.2s ease-out; } -input:focus { - outline: none; - border-color: #4caf50; - transform: scale(1.02); +.button { + margin-top: 20px; } -.result-container { - font-size: 18px; - /* Slightly larger font size for result */ - font-weight: bold; - color: #333; - margin-top: 15px; - animation: fadeIn 1s ease-out; +.button button { + padding: 10px 20px; + background-color: #1e90ff; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s ease; } -/* Media queries for responsiveness */ -@media screen and (max-width: 600px) { - .calculator-container { - padding: 15px; - } - - button { - padding: 10px 15px; - font-size: 14px; - } - - input { - padding: 8px; - font-size: 12px; - } - - .result-container { - font-size: 16px; - } +.button button:hover { + background-color: #4682b4; } -/* Animations */ -@keyframes fadeInUp { - from { - opacity: 0; - transform: translateY(20px); - } - - to { - opacity: 1; - transform: translateY(0); - } +.result input { + width: 100%; + padding: 10px; + box-sizing: border-box; + border-radius: 5px; + border: 1px solid #ccc; + margin-top: 20px; } - -@keyframes fadeIn { - from { - opacity: 0; - } - - to { - opacity: 1; - } -} \ No newline at end of file diff --git a/index.html b/index.html index 7ed51e7d3..b77257336 100644 --- a/index.html +++ b/index.html @@ -641,7 +641,7 @@

Converts capacitor values between different units.

Carbon Footprint Calculator

-

Calculates an individual's carbon footprint based on the miles driven per year, per month, and per week.

+

Calculates an individual's carbon footprint based on some input parameters.