Skip to content

Commit 9d4e751

Browse files
BastedEggsRYummyBastedEggsRYummy
authored
Merge pull request #21 from hack-rpi/Aaryan-RCOSLearning
Fortune Cookie
2 parents 52ffa21 + 38c5918 commit 9d4e751

File tree

9 files changed

+273
-0
lines changed

9 files changed

+273
-0
lines changed

‎AaryanFolder/Animated Menu Icon/index.html

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Animated Menu Icon</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div class="menu-icon"
11+
onclick="toggleMenu(this)">
12+
<span class="line line1"></span>
13+
<span class="line line2"></span>
14+
<span class="line line3"></span>
15+
</div>
16+
<script src="script.js"></script>
17+
</body>
18+
</html>

‎AaryanFolder/Animated Menu Icon/script.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
function toggleMenu(icon){
2+
icon.classList.toggle("active");
3+
}

‎AaryanFolder/Animated Menu Icon/style.css

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
body{
7+
display: flex;
8+
justify-content: center;
9+
align-items: center;
10+
height: 100vh;
11+
background-color: #f5f5f5;
12+
}
13+
.menu-icon{
14+
width: 30px;
15+
height: 25px;
16+
cursor: pointer;
17+
display: flex;
18+
flex-direction: column;
19+
justify-content: space-between;
20+
}
21+
.line{
22+
width: 100%;
23+
height: 4px;
24+
background-color: #333;
25+
border-radius: 4px;
26+
transition: transform 0.4s ease, opacity 0.4s ease;
27+
}
28+
.menu-icon.active .line{
29+
transform: translateY(10px) rotate(45deg);
30+
}
31+
.menu-icon.active .line2{
32+
opacity: 0;
33+
}
34+
.menu-icon.active .line3{
35+
transform: translateY(-10px) rotate(-45deg);
36+
}

‎AaryanFolder/Fortune Cookie/index.html

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Fortune Cookie</title>
7+
<link rel="stylesheet" href="style.css" />
8+
<link
9+
href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
10+
rel="stylesheet"
11+
/>
12+
</head>
13+
<body>
14+
<div class="container">
15+
<h3>Fortune Cookie</h3>
16+
<h1>🥠</h1>
17+
<p id="fortuneMessage">Click the cookie to get your fortune!</p>
18+
<button id="openCookie">Open Cookie</button>
19+
</div>
20+
<script src="script.js"></script>
21+
</body>
22+
</html>

‎AaryanFolder/Fortune Cookie/script.js

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
let fortunes = [
2+
"You will have a great day today! 🌟",
3+
"Something unexpected will make you smile. 😊",
4+
"Success is coming your way! 🚀",
5+
"A pleasant surprise is waiting for you. 🎁",
6+
"You will make a new friend soon. 🤝",
7+
"An exciting opportunity will present itself. 🎉",
8+
"Happiness is closer than you think! ❤️",
9+
"Be patient. Good things take time. ⏳",
10+
"A big change is coming in your life. Embrace it! 🔄",
11+
"Your kindness will return to you in unexpected ways. 💖",
12+
"You will soon cross paths with someone important. 🌍",
13+
"Good fortune will follow you wherever you go. 🍀",
14+
"A dream you have will soon come true. 🌙",
15+
"Trust your instincts; they will guide you well. 🧭",
16+
"Adventure is out there—be ready! 🏔️",
17+
"You will soon receive great news. 📩",
18+
];
19+
20+
document.getElementById("openCookie").addEventListener("click", function () {
21+
let randomIndex = Math.floor(Math.random() * fortunes.length);
22+
document.getElementById("fortuneMessage").innerText = fortunes[randomIndex];
23+
});

‎AaryanFolder/Fortune Cookie/style.css

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
body {
2+
font-family: "Poppins", sans-serif;
3+
text-align: center;
4+
background-color: #ffa500; /* Orange background */
5+
margin: 50px;
6+
}
7+
8+
.container {
9+
max-width: 400px;
10+
margin: auto;
11+
background-color: #ffffff;
12+
padding: 20px;
13+
border-radius: 10px;
14+
}
15+
16+
h1 {
17+
font-size: 50px;
18+
}
19+
20+
h3 {
21+
font-size: 40px;
22+
}
23+
24+
p {
25+
background-color: rgba(255, 190, 70, 0.2);
26+
font-size: 18px;
27+
margin: 20px 0;
28+
}
29+
30+
button {
31+
padding: 10px 15px;
32+
font-size: 16px;
33+
background-color: orange;
34+
color: #ffffff;
35+
border: none;
36+
border-radius: 5px;
37+
cursor: pointer;
38+
}
39+
40+
button:hover {
41+
background-color: darkorange;
42+
}

‎AaryanFolder/Story Generator/index.html

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Interactive Story Generator 📖</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<div class="container">
11+
<h1>Interactive Story Generator</h1>
12+
<div class="wrapper">
13+
<div>
14+
<label for="name">Enter a Name:</label>
15+
<input type="text" id="name" placeholder="Type a name..." required />
16+
</div>
17+
<div>
18+
<label for="place">Enter a Place:</label>
19+
<input type="text" id="place" placeholder="Type a place..." required />
20+
</div>
21+
<div>
22+
<label for="object">Enter an Object:</label>
23+
<input type="text" id="object" placeholder="Type an object..." required />
24+
</div>
25+
<div>
26+
<label for="action">Enter an Action:</label>
27+
<input type="text" id="action" placeholder="Type an action..." required />
28+
</div>
29+
</div>
30+
<button id="generateStory">Generate Story</button>
31+
<div id="story" class="story"></div>
32+
</div>
33+
<script src="script.js"></script>
34+
</body>
35+
</html>

‎AaryanFolder/Story Generator/script.js

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
document.getElementById("generateStory").addEventListener("click", function () {
2+
let name = document.getElementById("name").value.trim();
3+
let place = document.getElementById("place").value.trim();
4+
let object = document.getElementById("object").value.trim();
5+
let action = document.getElementById("action").value.trim();
6+
let storyDiv = document.getElementById("story");
7+
8+
if (name === "" || place === "" || object === "" || action === "") {
9+
alert("Please fill in all fields!");
10+
return;
11+
}
12+
13+
let stories = [
14+
`One day, ${name} went to ${place} and found a mysterious ${object}. Without thinking, ${name} decided to ${action}, and something magical happened!`,
15+
`In the heart of ${place}, ${name} discovered a hidden ${object}. As curiosity took over, ${name} started to ${action}, and the adventure began!`,
16+
`${name} was walking through ${place} when suddenly a ${object} appeared. Without hesitation, ${name} chose to ${action}, leading to an unforgettable experience!`,
17+
`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!`,
18+
`One night at ${place}, ${name} found an ancient ${object}. The moment they tried to ${action}, the object began to glow, revealing a hidden secret!`,
19+
`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!`,
20+
`${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!`,
21+
`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!`,
22+
`While hiking in ${place}, ${name} found a magical ${object}. They realized that if they ${action}, they could unlock its hidden powers!`,
23+
`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!`,
24+
`In ${place}, ${name} found a treasure map leading to a hidden ${object}. With excitement, ${name} set out to ${action}, uncovering secrets along the way!`,
25+
`While visiting ${place}, ${name} encountered a friendly ${object}. Together, they decided to ${action}, and their friendship blossomed into an epic adventure!`,
26+
`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!`,
27+
`One sunny day in ${place}, ${name} found a magical ${object}. They realized that if they ${action}, they could make their wildest dreams come true!`,
28+
];
29+
30+
let randomStory = stories[Math.floor(Math.random() * stories.length)];
31+
32+
storyDiv.innerText = randomStory;
33+
storyDiv.style.display = "block";
34+
});

‎AaryanFolder/Story Generator/style.css

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
body {
2+
font-family: "Poppins", sans-serif;
3+
box-sizing: border-box;
4+
background-color: #fa3546;
5+
margin: 20px;
6+
}
7+
8+
.container {
9+
position: absolute;
10+
width: min(400px, 90vw);
11+
transform: translate(-50%, -50%);
12+
left: 50%;
13+
top: 50%;
14+
background: white;
15+
padding: 30px;
16+
border-radius: 10px;
17+
box-shadow: 0 30px 30px rgba(0, 0, 0, 0.2);
18+
}
19+
20+
.wrapper {
21+
display: grid;
22+
grid-template-columns: 1fr 1fr;
23+
gap: 15px;
24+
}
25+
26+
input {
27+
width: 90%;
28+
padding: 10px;
29+
margin-bottom: 15px;
30+
border: 1.5px solid #000000;
31+
border-radius: 5px;
32+
}
33+
34+
label {
35+
font-weight: bold;
36+
display: block;
37+
margin-bottom: 10px;
38+
}
39+
40+
button {
41+
width: 95%;
42+
background-color: #fa3546;
43+
color: white;
44+
cursor: pointer;
45+
border: none;
46+
padding: 15px 0;
47+
border-radius: 10px;
48+
}
49+
50+
button:hover {
51+
background-color: #45a049;
52+
}
53+
54+
.story {
55+
margin-top: 20px;
56+
padding: 15px;
57+
background: #fff3cd;
58+
border-radius: 10px;
59+
display: none;
60+
}

0 commit comments

Comments
 (0)