-
Notifications
You must be signed in to change notification settings - Fork 396
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Enhanced Carbon Footprint Calculator (#1211)
- Loading branch information
1 parent
310767b
commit d66d209
Showing
5 changed files
with
147 additions
and
134 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,30 +1,41 @@ | ||
| <!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>Carbon Footprint Calculator</title> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div class="calculator-container"> | ||
| <h1>Carbon Footprint Calculator</h1> | ||
| <label for="milesDrivenYear">Enter Miles Driven per Year:</label> | ||
| <input type="number" id="milesDrivenYear" placeholder="Enter miles driven per year"> | ||
|
|
||
| <label for="milesDrivenMonth">Enter Miles Driven per Month:</label> | ||
| <input type="number" id="milesDrivenMonth" placeholder="Enter miles driven per month"> | ||
|
|
||
| <label for="milesDrivenWeek">Enter Miles Driven per Week:</label> | ||
| <input type="number" id="milesDrivenWeek" placeholder="Enter miles driven per week"> | ||
|
|
||
| <button onclick="calculateCarbonFootprint()">Calculate</button> | ||
|
|
||
| <div id="result" class="result-container"></div> | ||
| <h1 class="waviy"><span style="--i:1">C</span><span style="--i:2">a</span><span style="--i:3">r</span><span style="--i:4">b</span><span style="--i:5">o</span><span style="--i:6">n</span> <span style="--i:7">F</span><span style="--i:8">o</span><span style="--i:9">o</span><span style="--i:10">t</span><span style="--i:11">p</span><span style="--i:12">r</span><span style="--i:13">i</span><span style="--i:14">n</span><span style="--i:15">t</span> <span style="--i:16">C</span><span style="--i:17">a</span><span style="--i:18">l</span><span style="--i:19">c</span><span style="--i:20">u</span><span style="--i:21">l</span><span style="--i:22">a</span><span style="--i:23">t</span><span style="--i:24">o</span><span style="--i:25">r</span></h1> | ||
| <div class="card"> | ||
| <div class="input"> | ||
| <label for="electricity">Electricity Usage (kWh per month):</label> | ||
| <input type="number" id="electricity" name="electricity"> | ||
| </div> | ||
| <div class="input"> | ||
| <label for="gas">Gas Usage (kg per month):</label> | ||
| <input type="number" id="gas" name="gas"> | ||
| </div> | ||
| <div class="input"> | ||
| <label for="kilometers">Kilometers Driven (per month):</label> | ||
| <input type="number" id="kilometers" name="kilometers"> | ||
| </div> | ||
| <div class="input"> | ||
| <label for="flights">Flights Taken (per year):</label> | ||
| <input type="number" id="flights" name="flights"> | ||
| </div> | ||
| <div class="button"> | ||
| <button id="convert" onclick="calculateCarbonFootprint()">Calculate</button> | ||
| </div> | ||
| <div class="result"> | ||
| <input type="text" id="result" readonly> | ||
| </div> | ||
| <div class="button"> | ||
| <button id="reset" onclick="resetForm()">Reset</button> | ||
| </div> | ||
| </div> | ||
| <script src="script.js"></script> | ||
| </body> | ||
| </html> | ||
|
|
||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters