-
Notifications
You must be signed in to change notification settings - Fork 382
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1684 from shriyadindi/plant-care
Interactive Virtual Plant Care Guide
- Loading branch information
Showing
4 changed files
with
183 additions
and
0 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 |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Virtual Plant Care Guide</title> | ||
| <link rel="stylesheet" href="styles.css"> | ||
| </head> | ||
| <body> | ||
| <div class="container"> | ||
| <h1>Virtual Plant Care Guide</h1> | ||
| <p>Select a plant to learn how to care for it:</p> | ||
| <div class="plant-selection"> | ||
| <button class="plant-btn" data-plant="cactus">Cactus</button> | ||
| <button class="plant-btn" data-plant="fern">Fern</button> | ||
| <button class="plant-btn" data-plant="succulent">Succulent</button> | ||
| <button class="plant-btn" data-plant="orchid">Orchid</button> | ||
| </div> | ||
| <div id="plant-care-details" class="plant-care-details"> | ||
| <h2>Plant Care Details</h2> | ||
| <p id="care-info">Select a plant to view its care guide.</p> | ||
| </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 |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
|
|
||
| const careInfo = { | ||
| cactus: "Cacti thrive in bright sunlight and well-draining soil. Water sparingly—only when the soil is dry. Overwatering is the most common cause of issues with cacti. They prefer warmer temperatures and don't require much humidity.", | ||
| fern: "Ferns enjoy indirect sunlight and high humidity. Water them regularly to keep the soil moist, but avoid waterlogging. They also thrive in slightly cooler environments, so keep them away from direct heat sources.", | ||
| succulent: "Succulents need lots of light and very little water. They grow best in dry conditions, so make sure their soil drains well. Water deeply but infrequently, allowing the soil to dry out completely between waterings.", | ||
| orchid: "Orchids require indirect light and high humidity. Water them once a week by soaking the roots, but make sure they have proper drainage to avoid root rot. They also benefit from orchid-specific fertilizer during their growing season." | ||
| }; | ||
|
|
||
| const plantButtons = document.querySelectorAll('.plant-btn'); | ||
| const careInfoDisplay = document.getElementById('care-info'); | ||
|
|
||
| plantButtons.forEach(button => { | ||
| button.addEventListener('click', function() { | ||
| const selectedPlant = this.getAttribute('data-plant'); | ||
| careInfoDisplay.textContent = careInfo[selectedPlant]; | ||
| }); | ||
| }); |
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 |
|---|---|---|
| @@ -0,0 +1,128 @@ | ||
| /* styles.css */ | ||
| * { | ||
| margin: 0; | ||
| padding: 0; | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| body { | ||
| font-family: 'Poppins', sans-serif; | ||
| background: linear-gradient(135deg, #b2f9fc, #69eacb); | ||
| height: 100vh; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| color: #333; | ||
| overflow: hidden; | ||
| } | ||
|
|
||
| .container { | ||
| background: white; | ||
| padding: 40px; | ||
| border-radius: 20px; | ||
| box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); | ||
| max-width: 750px; | ||
| width: 100%; | ||
| text-align: center; | ||
| transition: all 0.3s ease; | ||
| } | ||
|
|
||
| .container:hover { | ||
| transform: translateY(-10px); | ||
| } | ||
|
|
||
| h1 { | ||
| font-size: 2.8rem; | ||
| color: #2c9676; | ||
| margin-bottom: 20px; | ||
| letter-spacing: 1.5px; | ||
| text-transform: uppercase; | ||
| } | ||
|
|
||
| p { | ||
| font-size: 1.2rem; | ||
| margin-bottom: 30px; | ||
| color: #444; | ||
| line-height: 1.6; | ||
| } | ||
|
|
||
| .plant-selection { | ||
| display: flex; | ||
| justify-content: space-around; | ||
| flex-wrap: wrap; | ||
| gap: 15px; | ||
| margin-bottom: 30px; | ||
| } | ||
|
|
||
| .plant-btn { | ||
| padding: 15px 25px; | ||
| background-color: #4CAF50; | ||
| color: white; | ||
| border: none; | ||
| border-radius: 50px; | ||
| font-size: 1.1rem; | ||
| cursor: pointer; | ||
| transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; | ||
| box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); | ||
| text-transform: uppercase; | ||
| } | ||
|
|
||
| .plant-btn:hover { | ||
| background-color: #43A047; | ||
| transform: translateY(-3px); | ||
| box-shadow: 0 8px 20px rgba(0, 123, 255, 0.3); | ||
| } | ||
|
|
||
| .plant-btn:active { | ||
| transform: translateY(2px); | ||
| box-shadow: 0 3px 10px rgba(0, 123, 255, 0.2); | ||
| } | ||
|
|
||
| .plant-care-details { | ||
| background-color: #f9f9f9; | ||
| padding: 25px; | ||
| border-radius: 15px; | ||
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); | ||
| transition: background-color 0.3s ease; | ||
| max-width: 100%; | ||
| } | ||
|
|
||
| .plant-care-details:hover { | ||
| background-color: #f0f8ff; | ||
| } | ||
|
|
||
| #care-info { | ||
| font-size: 1.2rem; | ||
| color: #555; | ||
| line-height: 1.6; | ||
| } | ||
|
|
||
| h2 { | ||
| margin-bottom: 15px; | ||
| font-size: 1.8rem; | ||
| color: #2c9676; | ||
| text-transform: uppercase; | ||
| } | ||
|
|
||
| @media (max-width: 768px) { | ||
| .container { | ||
| padding: 30px; | ||
| } | ||
|
|
||
| h1 { | ||
| font-size: 2.2rem; | ||
| } | ||
|
|
||
| p { | ||
| font-size: 1.1rem; | ||
| } | ||
|
|
||
| .plant-btn { | ||
| padding: 12px 18px; | ||
| font-size: 1rem; | ||
| } | ||
|
|
||
| #care-info { | ||
| font-size: 1.1rem; | ||
| } | ||
| } |