From 536ae3193aa6d164b6c5276e3ef8eee0d5f3eebd Mon Sep 17 00:00:00 2001 From: aarugaut Date: Thu, 10 Apr 2025 22:33:55 -0400 Subject: [PATCH 1/3] Fortune Cookie A little webpage where you click a button and get a fortune --- AaryanFolder/Fortune Cookie/index.html | 22 ++++++++++++++ AaryanFolder/Fortune Cookie/script.js | 23 ++++++++++++++ AaryanFolder/Fortune Cookie/style.css | 42 ++++++++++++++++++++++++++ 3 files changed, 87 insertions(+) create mode 100644 AaryanFolder/Fortune Cookie/index.html create mode 100644 AaryanFolder/Fortune Cookie/script.js create mode 100644 AaryanFolder/Fortune Cookie/style.css diff --git a/AaryanFolder/Fortune Cookie/index.html b/AaryanFolder/Fortune Cookie/index.html new file mode 100644 index 0000000..5a6199a --- /dev/null +++ b/AaryanFolder/Fortune Cookie/index.html @@ -0,0 +1,22 @@ + + + + + + Fortune Cookie + + + + +
+

Fortune Cookie

+

🥠

+

Click the cookie to get your fortune!

+ +
+ + + \ No newline at end of file diff --git a/AaryanFolder/Fortune Cookie/script.js b/AaryanFolder/Fortune Cookie/script.js new file mode 100644 index 0000000..84de469 --- /dev/null +++ b/AaryanFolder/Fortune Cookie/script.js @@ -0,0 +1,23 @@ +let fortunes = [ + "You will have a great day today! 🌟", + "Something unexpected will make you smile. 😊", + "Success is coming your way! 🚀", + "A pleasant surprise is waiting for you. 🎁", + "You will make a new friend soon. 🤝", + "An exciting opportunity will present itself. 🎉", + "Happiness is closer than you think! ❤️", + "Be patient. Good things take time. ⏳", + "A big change is coming in your life. Embrace it! 🔄", + "Your kindness will return to you in unexpected ways. 💖", + "You will soon cross paths with someone important. 🌍", + "Good fortune will follow you wherever you go. 🍀", + "A dream you have will soon come true. 🌙", + "Trust your instincts; they will guide you well. 🧭", + "Adventure is out there—be ready! 🏔️", + "You will soon receive great news. 📩", + ]; + + document.getElementById("openCookie").addEventListener("click", function () { + let randomIndex = Math.floor(Math.random() * fortunes.length); + document.getElementById("fortuneMessage").innerText = fortunes[randomIndex]; + }); \ No newline at end of file diff --git a/AaryanFolder/Fortune Cookie/style.css b/AaryanFolder/Fortune Cookie/style.css new file mode 100644 index 0000000..fb93498 --- /dev/null +++ b/AaryanFolder/Fortune Cookie/style.css @@ -0,0 +1,42 @@ +body { + font-family: "Poppins", sans-serif; + text-align: center; + background-color: #ffa500; /* Orange background */ + margin: 50px; + } + + .container { + max-width: 400px; + margin: auto; + background-color: #ffffff; + padding: 20px; + border-radius: 10px; + } + + h1 { + font-size: 50px; + } + + h3 { + font-size: 40px; + } + + p { + background-color: rgba(255, 190, 70, 0.2); + font-size: 18px; + margin: 20px 0; + } + + button { + padding: 10px 15px; + font-size: 16px; + background-color: orange; + color: #ffffff; + border: none; + border-radius: 5px; + cursor: pointer; + } + + button:hover { + background-color: darkorange; + } \ No newline at end of file From 63931d0af283c3361612681a2786ddbfe080ecb0 Mon Sep 17 00:00:00 2001 From: aarugaut Date: Fri, 11 Apr 2025 16:27:29 -0400 Subject: [PATCH 2/3] Interactive Story Generator You type in a name, action, place, and object and get a random story --- AaryanFolder/Story Generator/index.html | 35 +++++++++++++++ AaryanFolder/Story Generator/script.js | 34 ++++++++++++++ AaryanFolder/Story Generator/style.css | 60 +++++++++++++++++++++++++ 3 files changed, 129 insertions(+) create mode 100644 AaryanFolder/Story Generator/index.html create mode 100644 AaryanFolder/Story Generator/script.js create mode 100644 AaryanFolder/Story Generator/style.css diff --git a/AaryanFolder/Story Generator/index.html b/AaryanFolder/Story Generator/index.html new file mode 100644 index 0000000..389e32f --- /dev/null +++ b/AaryanFolder/Story Generator/index.html @@ -0,0 +1,35 @@ + + + + + + Interactive Story Generator 📖 + + + +
+

Interactive Story Generator

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+ + + \ No newline at end of file diff --git a/AaryanFolder/Story Generator/script.js b/AaryanFolder/Story Generator/script.js new file mode 100644 index 0000000..70edef4 --- /dev/null +++ b/AaryanFolder/Story Generator/script.js @@ -0,0 +1,34 @@ +document.getElementById("generateStory").addEventListener("click", function () { + let name = document.getElementById("name").value.trim(); + let place = document.getElementById("place").value.trim(); + let object = document.getElementById("object").value.trim(); + let action = document.getElementById("action").value.trim(); + let storyDiv = document.getElementById("story"); + + if (name === "" || place === "" || object === "" || action === "") { + alert("Please fill in all fields!"); + return; + } + + let stories = [ + `One day, ${name} went to ${place} and found a mysterious ${object}. Without thinking, ${name} decided to ${action}, and something magical happened!`, + `In the heart of ${place}, ${name} discovered a hidden ${object}. As curiosity took over, ${name} started to ${action}, and the adventure began!`, + `${name} was walking through ${place} when suddenly a ${object} appeared. Without hesitation, ${name} chose to ${action}, leading to an unforgettable experience!`, + `While exploring ${place}, ${name} saw a sparkling ${object}. As soon as they touched it, they were transported to a new world where they had to ${action} to find a way back home!`, + `One night at ${place}, ${name} found an ancient ${object}. The moment they tried to ${action}, the object began to glow, revealing a hidden secret!`, + `At ${place}, ${name} was given a strange ${object} by an old wise person. They were told that if they ${action} at the right moment, something incredible would happen!`, + `${name} was cleaning their attic when they stumbled upon an old ${object}. Curious, they decided to ${action}, and suddenly, they were taken on a journey through time!`, + `In ${place}, ${name} met a talking ${object}. The ${object} asked ${name} to help it ${action}, and together they embarked on a quest to save the day!`, + `While hiking in ${place}, ${name} found a magical ${object}. They realized that if they ${action}, they could unlock its hidden powers!`, + `During a stormy night in ${place}, ${name} discovered a glowing ${object}. As the thunder roared, ${name} bravely decided to ${action}, and the storm turned into a beautiful light show!`, + `In ${place}, ${name} found a treasure map leading to a hidden ${object}. With excitement, ${name} set out to ${action}, uncovering secrets along the way!`, + `While visiting ${place}, ${name} encountered a friendly ${object}. Together, they decided to ${action}, and their friendship blossomed into an epic adventure!`, + `In ${place}, ${name} discovered a mysterious ${object} that granted wishes. Eager to test its power, ${name} wished to ${action}, and the world around them changed forever!`, + `One sunny day in ${place}, ${name} found a magical ${object}. They realized that if they ${action}, they could make their wildest dreams come true!`, + ]; + + let randomStory = stories[Math.floor(Math.random() * stories.length)]; + + storyDiv.innerText = randomStory; + storyDiv.style.display = "block"; + }); \ No newline at end of file diff --git a/AaryanFolder/Story Generator/style.css b/AaryanFolder/Story Generator/style.css new file mode 100644 index 0000000..8f7b0c2 --- /dev/null +++ b/AaryanFolder/Story Generator/style.css @@ -0,0 +1,60 @@ +body { + font-family: "Poppins", sans-serif; + box-sizing: border-box; + background-color: #fa3546; + margin: 20px; + } + + .container { + position: absolute; + width: min(400px, 90vw); + transform: translate(-50%, -50%); + left: 50%; + top: 50%; + background: white; + padding: 30px; + border-radius: 10px; + box-shadow: 0 30px 30px rgba(0, 0, 0, 0.2); + } + + .wrapper { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 15px; + } + + input { + width: 90%; + padding: 10px; + margin-bottom: 15px; + border: 1.5px solid #000000; + border-radius: 5px; + } + + label { + font-weight: bold; + display: block; + margin-bottom: 10px; + } + + button { + width: 95%; + background-color: #fa3546; + color: white; + cursor: pointer; + border: none; + padding: 15px 0; + border-radius: 10px; + } + + button:hover { + background-color: #45a049; + } + + .story { + margin-top: 20px; + padding: 15px; + background: #fff3cd; + border-radius: 10px; + display: none; + } \ No newline at end of file From 38c59184ade34211fe74bb47890cd893a6b2766e Mon Sep 17 00:00:00 2001 From: aarugaut Date: Fri, 11 Apr 2025 16:42:52 -0400 Subject: [PATCH 3/3] Animated Menu Icon Created a little animated menu icon that has a smooth transition. --- AaryanFolder/Animated Menu Icon/index.html | 18 +++++++++++ AaryanFolder/Animated Menu Icon/script.js | 3 ++ AaryanFolder/Animated Menu Icon/style.css | 36 ++++++++++++++++++++++ 3 files changed, 57 insertions(+) create mode 100644 AaryanFolder/Animated Menu Icon/index.html create mode 100644 AaryanFolder/Animated Menu Icon/script.js create mode 100644 AaryanFolder/Animated Menu Icon/style.css diff --git a/AaryanFolder/Animated Menu Icon/index.html b/AaryanFolder/Animated Menu Icon/index.html new file mode 100644 index 0000000..116c9bc --- /dev/null +++ b/AaryanFolder/Animated Menu Icon/index.html @@ -0,0 +1,18 @@ + + + + + + Animated Menu Icon + + + +
+ + + +
+ + + \ No newline at end of file diff --git a/AaryanFolder/Animated Menu Icon/script.js b/AaryanFolder/Animated Menu Icon/script.js new file mode 100644 index 0000000..a315ff5 --- /dev/null +++ b/AaryanFolder/Animated Menu Icon/script.js @@ -0,0 +1,3 @@ +function toggleMenu(icon){ + icon.classList.toggle("active"); +} \ No newline at end of file diff --git a/AaryanFolder/Animated Menu Icon/style.css b/AaryanFolder/Animated Menu Icon/style.css new file mode 100644 index 0000000..bd52a8d --- /dev/null +++ b/AaryanFolder/Animated Menu Icon/style.css @@ -0,0 +1,36 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} +body{ + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background-color: #f5f5f5; +} +.menu-icon{ + width: 30px; + height: 25px; + cursor: pointer; + display: flex; + flex-direction: column; + justify-content: space-between; +} +.line{ + width: 100%; + height: 4px; + background-color: #333; + border-radius: 4px; + transition: transform 0.4s ease, opacity 0.4s ease; +} +.menu-icon.active .line{ + transform: translateY(10px) rotate(45deg); +} +.menu-icon.active .line2{ + opacity: 0; +} +.menu-icon.active .line3{ + transform: translateY(-10px) rotate(-45deg); +} \ No newline at end of file