-
Notifications
You must be signed in to change notification settings - Fork 394
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
2b7341d
commit f789391
Showing
5 changed files
with
179 additions
and
177 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,41 +1,42 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Photosynthesis Rate Calculator</title> | ||
| <link rel="stylesheet" href="style.css"> | ||
| </head> | ||
| <body> | ||
| <div class="calculator"> | ||
| <!-- Page title --> | ||
| <h1>Photosynthesis Rate Calculator</h1> | ||
|
|
||
| <!-- Input group for light intensity --> | ||
| <div class="input-group"> | ||
| <label for="light">Light Intensity (µmol/m²/s):</label> | ||
| <input type="number" id="light" placeholder="Enter light intensity"> | ||
| </div> | ||
|
|
||
| <!-- Input group for CO2 concentration --> | ||
| <div class="input-group"> | ||
| <label for="co2">CO₂ Concentration (ppm):</label> | ||
| <input type="number" id="co2" placeholder="Enter CO₂ concentration"> | ||
| </div> | ||
|
|
||
| <!-- Input group for temperature --> | ||
| <div class="input-group"> | ||
| <label for="temperature ">Temperature (°C):</label> | ||
| <input type="number" id="temperature" placeholder="Enter temperature"> | ||
| </div> | ||
|
|
||
| <!-- Button to calculate the photosynthesis rate --> | ||
| <button onclick="calculateRate()">Calculate Rate</button> | ||
|
|
||
| <!-- Section to display the result --> | ||
| <div class="result" id="result"></div> | ||
| </div> | ||
|
|
||
| <script src="script.js"></script> | ||
| </body> | ||
| <!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>Photosynthesis Rate Calculator</title> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div class="calculator"> | ||
| <h1>Photosynthesis Rate Calculator</h1> | ||
|
|
||
| <!-- Input group for light intensity --> | ||
| <div class="input-group"> | ||
| <label for="light">Light Intensity (µmol/m²/s):</label> | ||
| <input type="number" id="light" placeholder="Enter light intensity"> | ||
| </div> | ||
|
|
||
| <!-- Input group for CO2 concentration --> | ||
| <div class="input-group"> | ||
| <label for="co2">CO₂ Concentration (ppm):</label> | ||
| <input type="number" id="co2" placeholder="Enter CO₂ concentration"> | ||
| </div> | ||
|
|
||
| <!-- Input group for temperature --> | ||
| <div class="input-group"> | ||
| <label for="temperature ">Temperature (°C):</label> | ||
| <input type="number" id="temperature" placeholder="Enter temperature"> | ||
| </div> | ||
|
|
||
| <!-- Button to calculate the photosynthesis rate --> | ||
| <button onclick="calculateRate()">Calculate Rate</button> | ||
|
|
||
| <!-- Section to display the result --> | ||
| <div class="result" id="result"></div> | ||
| </div> | ||
| <script src="script.js"></script> | ||
| </body> | ||
|
|
||
| </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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,24 +1,21 @@ | ||
| function calculateRate() { | ||
|
|
||
| // Retrieve and parse the input values for light intensity, CO2 concentration, and temperature | ||
| const light = parseFloat(document.getElementById('light').value); | ||
| const co2 = parseFloat(document.getElementById('co2').value); | ||
| const temperature = parseFloat(document.getElementById('temperature').value); | ||
|
|
||
| // Validate the input values to ensure they are numbers | ||
| if (isNaN(light) || isNaN(co2) || isNaN(temperature)) { | ||
| document.getElementById('result').textContent = 'Please enter valid inputs.'; | ||
| return; | ||
| } | ||
|
|
||
| // Simplified formula for calculating the photosynthesis rate | ||
| // - Light contributes positively to the rate (scaled by 0.05) | ||
| // - CO2 contributes positively to the rate (scaled by 0.02) | ||
| // - Deviation from the optimal temperature of 25°C reduces the rate (scaled by 0.1) | ||
| const rate = ((light * 0.05) + (co2 * 0.02) - Math.abs(temperature - 25) * 0.1).toFixed(2); | ||
|
|
||
| // Display the calculated photosynthesis rate in the result section | ||
| document.getElementById('result').textContent = | ||
| `The photosynthesis rate is ${rate} units.` ; | ||
| } | ||
|
|
||
| function calculateRate() { | ||
| // Retrieve and parse the input values for light intensity, CO2 concentration, and temperature | ||
| const light = parseFloat(document.getElementById('light').value); | ||
| const co2 = parseFloat(document.getElementById('co2').value); | ||
| const temperature = parseFloat(document.getElementById('temperature').value); | ||
|
|
||
| // Validate the input values to ensure they are numbers | ||
| if (isNaN(light) || isNaN(co2) || isNaN(temperature)) { | ||
| document.getElementById('result').textContent = 'Please enter valid inputs.'; | ||
| return; | ||
| } | ||
|
|
||
| // Simplified formula for calculating the photosynthesis rate | ||
| // - Light contributes positively to the rate (scaled by 0.05) | ||
| // - CO2 contributes positively to the rate (scaled by 0.02) | ||
| // - Deviation from the optimal temperature of 25°C reduces the rate (scaled by 0.1) | ||
| const rate = ((light * 0.05) + (co2 * 0.02) - Math.abs(temperature - 25) * 0.1).toFixed(2); | ||
|
|
||
| // Display the calculated photosynthesis rate in the result section | ||
| document.getElementById('result').textContent = `The photosynthesis rate is ${rate} units.`; | ||
| } |
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,98 +1,100 @@ | ||
| * { | ||
| margin: 0; | ||
| padding: 0; | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| body { | ||
| font-family: 'Poppins', sans-serif; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| min-height: 100vh; | ||
| background: linear-gradient(to bottom right, #43cea2, #185a9d); | ||
| color: #fff; | ||
| background-size: 800% 800%; | ||
| animation: color-transition 6s infinite; | ||
| } | ||
|
|
||
| @keyframes color-transition { | ||
| 0% { | ||
| background-position: 0% 50%; | ||
| } | ||
| 50% { | ||
| background-position: 100% 50%; | ||
| } | ||
| 100% { | ||
| background-position: 0% 50%; | ||
| } | ||
| } | ||
|
|
||
| .calculator { | ||
| background: rgba(255, 255, 255, 0.9); | ||
| border-radius: 20px; | ||
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); | ||
| padding: 40px; | ||
| max-width: 400px; | ||
| width: 100%; | ||
| text-align: center; | ||
| color: #333; | ||
| } | ||
|
|
||
| .calculator h1 { | ||
| font-size: 2rem; | ||
| margin-bottom: 20px; | ||
| color: #185a9d; | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| .input-group { | ||
| margin-bottom: 20px; | ||
| } | ||
|
|
||
| .input-group label { | ||
| display: block; | ||
| font-weight: 600; | ||
| margin-bottom: 10px; | ||
| text-align: left; | ||
| color: #185a9d; | ||
| } | ||
|
|
||
| .input-group input { | ||
| width: 100%; | ||
| padding: 12px; | ||
| border: 2px solid #43cea2; | ||
| border-radius: 8px; | ||
| font-size: 1rem; | ||
| outline: none; | ||
| transition: 0.3s; | ||
| } | ||
|
|
||
| .input-group input:focus { | ||
| border-color: #185a9d; | ||
| box-shadow: 0 0 8px rgba(67, 206, 162, 0.5); | ||
| } | ||
|
|
||
| button { | ||
| background: linear-gradient(to right, #43cea2, #185a9d); | ||
| color: #fff; | ||
| border: none; | ||
| padding: 12px 25px; | ||
| font-size: 1rem; | ||
| border-radius: 50px; | ||
| cursor: pointer; | ||
| transition: transform 0.3s ease, background 0.3s ease; | ||
| } | ||
|
|
||
| button:hover { | ||
| transform: scale(1.05); | ||
| background: linear-gradient(to right, #185a9d, #43cea2); | ||
| } | ||
|
|
||
| .result { | ||
| margin-top: 20px; | ||
| font-size: 1.4rem; | ||
| font-weight: bold; | ||
| color: #185a9d; | ||
| text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); | ||
| } | ||
| * { | ||
| margin: 0; | ||
| padding: 0; | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| body { | ||
| font-family: 'Poppins', sans-serif; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| min-height: 100vh; | ||
| background: linear-gradient(to bottom right, #43cea2, #185a9d); | ||
| color: #fff; | ||
| background-size: 800% 800%; | ||
| animation: color-transition 6s infinite; | ||
| } | ||
|
|
||
| @keyframes color-transition { | ||
| 0% { | ||
| background-position: 0% 50%; | ||
| } | ||
|
|
||
| 50% { | ||
| background-position: 100% 50%; | ||
| } | ||
|
|
||
| 100% { | ||
| background-position: 0% 50%; | ||
| } | ||
| } | ||
|
|
||
| .calculator { | ||
| background: rgba(255, 255, 255, 0.9); | ||
| border-radius: 20px; | ||
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); | ||
| padding: 40px; | ||
| max-width: 400px; | ||
| width: 100%; | ||
| text-align: center; | ||
| color: #333; | ||
| } | ||
|
|
||
| .calculator h1 { | ||
| font-size: 2rem; | ||
| margin-bottom: 20px; | ||
| color: #185a9d; | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| .input-group { | ||
| margin-bottom: 20px; | ||
| } | ||
|
|
||
| .input-group label { | ||
| display: block; | ||
| font-weight: 600; | ||
| margin-bottom: 10px; | ||
| text-align: left; | ||
| color: #185a9d; | ||
| } | ||
|
|
||
| .input-group input { | ||
| width: 100%; | ||
| padding: 12px; | ||
| border: 2px solid #43cea2; | ||
| border-radius: 8px; | ||
| font-size: 1rem; | ||
| outline: none; | ||
| transition: 0.3s; | ||
| } | ||
|
|
||
| .input-group input:focus { | ||
| border-color: #185a9d; | ||
| box-shadow: 0 0 8px rgba(67, 206, 162, 0.5); | ||
| } | ||
|
|
||
| button { | ||
| background: linear-gradient(to right, #43cea2, #185a9d); | ||
| color: #fff; | ||
| border: none; | ||
| padding: 12px 25px; | ||
| font-size: 1rem; | ||
| border-radius: 50px; | ||
| cursor: pointer; | ||
| transition: transform 0.3s ease, background 0.3s ease; | ||
| } | ||
|
|
||
| button:hover { | ||
| transform: scale(1.05); | ||
| background: linear-gradient(to right, #185a9d, #43cea2); | ||
| } | ||
|
|
||
| .result { | ||
| margin-top: 20px; | ||
| font-size: 1.4rem; | ||
| font-weight: bold; | ||
| color: #185a9d; | ||
| text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); | ||
| } |
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