diff --git a/index.html b/index.html index 1e369e65..382df06c 100644 --- a/index.html +++ b/index.html @@ -1016,6 +1016,42 @@

Password Toggle

+ +
+ habits logo +
+
+

Habit tracker

+

+ Tracks habits +

+
+ + + +
+ creative writing logo +
+
+

Creative writing

+

+ Generates creative writing prompts +

+
+ + + +
+ plant +
+
+

Interactive Virtual Plant Care Guide

+

+ The best guide for your gardening journey! +

+
+ + diff --git a/projects/Creative writing/index.html b/projects/Creative writing/index.html new file mode 100644 index 00000000..f8b64f0c --- /dev/null +++ b/projects/Creative writing/index.html @@ -0,0 +1,17 @@ + + + + + + Creative Writing Prompt Generator + + + +
+

Creative Writing Prompt Generator

+ +
+
+ + + diff --git a/projects/Creative writing/script.js b/projects/Creative writing/script.js new file mode 100644 index 00000000..43aae32b --- /dev/null +++ b/projects/Creative writing/script.js @@ -0,0 +1,18 @@ +// script.js +const prompts = [ + "Write a story about a character who can’t stop telling lies.", + "Imagine a world where people can live forever. How does society function?", + "Write a letter to your future self 10 years from now.", + "Describe the last day of a forgotten civilization.", + "Write about a character who discovers they can control the weather.", + "You wake up one morning to find that gravity has reversed. What happens next?", + "Write a short story that takes place in a dream.", + "A character finds a mysterious object washed up on the shore. What is it?", + "In a world where animals can speak, write about a day in the life of a dog.", + "Write a story about someone who receives a message from their future self." +]; + +document.getElementById("generateBtn").addEventListener("click", function() { + const randomIndex = Math.floor(Math.random() * prompts.length); + document.getElementById("promptDisplay").textContent = prompts[randomIndex]; +}); diff --git a/projects/Creative writing/styles.css b/projects/Creative writing/styles.css new file mode 100644 index 00000000..05214653 --- /dev/null +++ b/projects/Creative writing/styles.css @@ -0,0 +1,79 @@ +/* styles.css */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Poppins', sans-serif; + background: linear-gradient(135deg, #74ebd5, #ACB6E5); + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + color: #333; +} + +.container { + background: white; + padding: 40px; + border-radius: 15px; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); + max-width: 600px; + width: 100%; + text-align: center; + transition: all 0.3s ease; +} + +.container:hover { + transform: translateY(-10px); +} + +h1 { + font-size: 2.5rem; + color: #007BFF; + margin-bottom: 20px; + letter-spacing: 1px; +} + +#promptDisplay { + margin-top: 30px; + font-size: 1.4rem; + color: #555; + background-color: #f9f9f9; + padding: 20px; + border-radius: 10px; + box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.05); + min-height: 80px; + transition: background-color 0.3s ease; +} + +#promptDisplay:hover { + background-color: #e8f4ff; +} + +button { + padding: 12px 25px; + font-size: 1.1rem; + color: white; + background: linear-gradient(135deg, #007BFF, #00A8FF); + border: none; + border-radius: 50px; + cursor: pointer; + box-shadow: 0 5px 15px rgba(0, 123, 255, 0.3); + transition: all 0.3s ease; + outline: none; +} + +button:hover { + background: linear-gradient(135deg, #0056b3, #007BFF); + transform: translateY(-3px); + box-shadow: 0 8px 20px rgba(0, 123, 255, 0.4); +} + +button:active { + transform: translateY(1px); + box-shadow: 0 3px 10px rgba(0, 123, 255, 0.2); +} + diff --git a/projects/Habit tracker/index.html b/projects/Habit tracker/index.html new file mode 100644 index 00000000..570a4747 --- /dev/null +++ b/projects/Habit tracker/index.html @@ -0,0 +1,23 @@ + + + + + + Habit Tracker + + + +
+

Habit Tracker

+ + + +
+

Your Habits

+
    +
    +
    + + + + diff --git a/projects/Habit tracker/script.js b/projects/Habit tracker/script.js new file mode 100644 index 00000000..349833bc --- /dev/null +++ b/projects/Habit tracker/script.js @@ -0,0 +1,23 @@ +document.getElementById('addHabitBtn').addEventListener('click', addHabit); + +function addHabit() { + const habitInput = document.getElementById('habitInput'); + const habitText = habitInput.value.trim(); + + if (habitText) { + const habitList = document.getElementById('habitList'); + const li = document.createElement('li'); + li.innerHTML = ` + ${habitText} + `; + habitList.appendChild(li); + habitInput.value = ''; // Clear input + } else { + alert('Please enter a habit!'); + } +} + +function removeHabit(button) { + const li = button.parentElement; + li.remove(); +} diff --git a/projects/Habit tracker/styles.css b/projects/Habit tracker/styles.css new file mode 100644 index 00000000..1685c262 --- /dev/null +++ b/projects/Habit tracker/styles.css @@ -0,0 +1,91 @@ +body { + font-family: 'Arial', sans-serif; + background-color: #eef2f3; + margin: 0; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.container { + background: white; + border-radius: 15px; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); + padding: 30px; + width: 400px; + text-align: center; +} + +h1 { + color: #333; + margin-bottom: 20px; +} + +input[type="text"] { + width: calc(100% - 22px); + padding: 12px; + border: 1px solid #ddd; + border-radius: 5px; + margin-bottom: 15px; + transition: border-color 0.3s; +} + +input[type="text"]:focus { + border-color: #007bff; + outline: none; +} + +button { + padding: 12px 15px; + border: none; + border-radius: 5px; + background-color: #007bff; + color: white; + font-size: 16px; + cursor: pointer; + transition: background-color 0.3s, transform 0.2s; +} + +button:hover { + background-color: #0056b3; + transform: translateY(-2px); +} + +.habits-list { + margin-top: 30px; +} + +ul { + list-style-type: none; + padding: 0; +} + +li { + background: #f8f9fa; + border-radius: 5px; + padding: 15px; + margin: 10px 0; + display: flex; + justify-content: space-between; + align-items: center; + transition: background-color 0.3s; +} + +li:hover { + background: #e2e6ea; +} + +li button { + background: transparent; + border: none; + color: #dc3545; + font-size: 16px; + cursor: pointer; + transition: color 0.3s; +} + +li button:hover { + color: #c82333; +} diff --git a/projects/Plant care/index.html b/projects/Plant care/index.html new file mode 100644 index 00000000..98800f2b --- /dev/null +++ b/projects/Plant care/index.html @@ -0,0 +1,26 @@ + + + + + + Virtual Plant Care Guide + + + +
    +

    Virtual Plant Care Guide

    +

    Select a plant to learn how to care for it:

    +
    + + + + +
    +
    +

    Plant Care Details

    +

    Select a plant to view its care guide.

    +
    +
    + + + diff --git a/projects/Plant care/script.js b/projects/Plant care/script.js new file mode 100644 index 00000000..5bab277b --- /dev/null +++ b/projects/Plant care/script.js @@ -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]; + }); +}); diff --git a/projects/Plant care/styles.css b/projects/Plant care/styles.css new file mode 100644 index 00000000..45385b38 --- /dev/null +++ b/projects/Plant care/styles.css @@ -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; + } +}