Skip to content

Commit f6e0f42

Browse files
d-coder111d-coder111
authored
Merge pull request #20 from Shreyash2001/random-spell-button
feat: completed spell of the day section
2 parents 8d15593 + 64d02c8 commit f6e0f42

File tree

3 files changed

+225
-54
lines changed

3 files changed

+225
-54
lines changed

‎index.html

+12
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,22 @@
77
<link rel="stylesheet" href="styles.css">
88
</head>
99
<body>
10+
1011
<div class="image-container">
1112
<img src="https://imgs.search.brave.com/6Sffhw0RU1m6DlaxDyoDRRJrLVhXStCPmkCoCG_0A8Y/rs:fit:860:0:0:0/g:ce/aHR0cHM6Ly9tZWRp/YS5wcm9wcm9mcy5j/b20vaW1hZ2VzL1FN/L3VzZXJfaW1hZ2Vz/LzI1MDM4NTIvUG90/dGVybW9yZS1Ib3Vz/ZS1Tb3J0aW5nLUhh/dC0ud2VicA"
1213
alt="Hogwarts">
1314
</div>
15+
<div class="spell-container">
16+
<div class="spell-internal-container">
17+
<div>
18+
<h1>Spell of the day</h1>
19+
</div>
20+
<button id="generateSpellBtn">Today's Spell</button>
21+
<div class="spell-box">
22+
<span id="spellText" class="spell-text"></span>
23+
</div>
24+
</div>
25+
</div>
1426
<div class="container">
1527
<h1>Which Hogwarts House Do You Belong To?</h1>
1628
<p>Answer the questions below to find out your house!</p>

‎script.js

+105-54
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,109 @@
1-
document.getElementById('quizForm').addEventListener('submit', function (e) {
2-
e.preventDefault();
3-
4-
// Store house points
5-
const housePoints = {
6-
Gryffindor: 0,
7-
Ravenclaw: 0,
8-
Hufflepuff: 0,
9-
Slytherin: 0
10-
};
11-
12-
// Count the selected answers
13-
const form = new FormData(this);
14-
let attemptedQuestions = 0; // Track attempted questions
15-
16-
for (let pair of form.entries()) {
17-
if (housePoints[pair[1]] !== undefined) {
18-
housePoints[pair[1]] += 1;
19-
attemptedQuestions++; // Increment for each attempted question
20-
}
21-
}
1+
document.getElementById("quizForm").addEventListener("submit", function (e) {
2+
e.preventDefault();
3+
4+
// Store house points
5+
const housePoints = {
6+
Gryffindor: 0,
7+
Ravenclaw: 0,
8+
Hufflepuff: 0,
9+
Slytherin: 0,
10+
};
2211

23-
// Check if any questions were attempted
24-
if (attemptedQuestions === 0) {
25-
const resultDiv = document.getElementById('result');
26-
resultDiv.innerHTML = "You're out of Hogwarts!";
27-
return; // Stop execution if no questions were attempted
12+
// Count the selected answers
13+
const form = new FormData(this);
14+
let attemptedQuestions = 0; // Track attempted questions
15+
16+
for (let pair of form.entries()) {
17+
if (housePoints[pair[1]] !== undefined) {
18+
housePoints[pair[1]] += 1;
19+
attemptedQuestions++; // Increment for each attempted question
2820
}
21+
}
22+
23+
// Check if any questions were attempted
24+
if (attemptedQuestions === 0) {
25+
const resultDiv = document.getElementById("result");
26+
resultDiv.innerHTML = "You're out of Hogwarts!";
27+
return; // Stop execution if no questions were attempted
28+
}
29+
30+
// Determine the house with the highest points
31+
let assignedHouse = Object.keys(housePoints).reduce((a, b) =>
32+
housePoints[a] > housePoints[b] ? a : b
33+
);
34+
35+
// House descriptions
36+
const houseDescriptions = {
37+
Gryffindor:
38+
"You have been sorted into Gryffindor, the house of the brave and daring! Known for their courage, Gryffindors are always ready to stand up for what is right, no matter the odds. With a bold heart and a fierce sense of justice, you are never afraid to take risks or face challenges head-on. Welcome to the house of heroes like Harry Potter, Hermione Granger, and Albus Dumbledore!",
39+
Ravenclaw:
40+
"Welcome to Ravenclaw, where wisdom and learning are prized above all! As a member of this house, you are valued for your intelligence, creativity, and curiosity. Ravenclaws are known for their sharp minds and thirst for knowledge, always seeking answers to life’s mysteries. You join the ranks of greats like Luna Lovegood and Cho Chang, where cleverness and ingenuity reign supreme!",
41+
Hufflepuff:
42+
"You’ve been sorted into Hufflepuff, the house of loyalty and kindness! Hufflepuffs are known for their strong sense of fairness, patience, and dedication. You are someone who values friendship, hard work, and the well-being of others. In Hufflepuff, every person matters, and unity is key. You stand alongside legends like Newt Scamander and Cedric Diggory, where inclusivity and perseverance define your strength!",
43+
Slytherin:
44+
"Welcome to Slytherin, where ambition and cunning pave the way to greatness! As a Slytherin, you are driven by your goals and never shy away from doing what it takes to succeed. Known for being resourceful and strategic, you can navigate challenges with ease and foresight. In Slytherin, you follow in the footsteps of powerhouses like Severus Snape and Merlin, with ambition as your guiding star!",
45+
};
46+
47+
// House images
48+
const houseImages = {
49+
Gryffindor:
50+
"https://i.pinimg.com/564x/20/32/4c/20324c7839e5f076e7a3d5baa7b77f62.jpg",
51+
Ravenclaw:
52+
"https://i.pinimg.com/564x/92/b5/65/92b5654268d9f3157ed1ec58f6d63c3e.jpg",
53+
Hufflepuff:
54+
"https://i.pinimg.com/564x/66/ba/0c/66ba0cd629a306ecf9d207c90d2184be.jpg",
55+
Slytherin:
56+
"https://i.pinimg.com/564x/c1/4f/36/c14f36dea82449f6ee5af5c2a6007c66.jpg",
57+
};
58+
59+
// Display result
60+
const resultDiv = document.getElementById("result");
61+
resultDiv.innerHTML = `🎉 You belong to <strong>${assignedHouse}</strong>!<br>${houseDescriptions[assignedHouse]}`;
62+
63+
// Display the house image
64+
const houseImage = document.getElementById("houseImage");
65+
houseImage.src = houseImages[assignedHouse];
66+
houseImage.alt = `${assignedHouse} logo`;
67+
houseImage.style.display = "block";
68+
});
69+
70+
const spells = [
71+
"Expecto Patronum",
72+
"Alarte Ascendare",
73+
"Avada Kedavra",
74+
"Accio",
75+
"Stupefy",
76+
"Wingardium Leviosa",
77+
"Alohomora",
78+
];
79+
80+
function getSpellOfTheDay() {
81+
const currentDate = new Date();
82+
const dayOfYear = getDayOfYear(currentDate);
83+
84+
const spellIndex = dayOfYear % spells.length;
85+
return spells[spellIndex];
86+
}
87+
88+
// Helper function to get the current day of the year (1 - 365)
89+
function getDayOfYear(date) {
90+
const start = new Date(date.getFullYear(), 0, 0);
91+
const diff =
92+
date -
93+
start +
94+
(start.getTimezoneOffset() - date.getTimezoneOffset()) * 60 * 1000;
95+
const oneDay = 1000 * 60 * 60 * 24;
96+
return Math.floor(diff / oneDay);
97+
}
98+
99+
document.getElementById("generateSpellBtn").addEventListener("click", () => {
100+
const spellTextElement = document.getElementById("spellText");
101+
const randomSpell = getSpellOfTheDay();
29102

30-
// Determine the house with the highest points
31-
let assignedHouse = Object.keys(housePoints).reduce((a, b) => housePoints[a] > housePoints[b] ? a : b);
32-
33-
// House descriptions
34-
const houseDescriptions = {
35-
Gryffindor: "You have been sorted into Gryffindor, the house of the brave and daring! Known for their courage, Gryffindors are always ready to stand up for what is right, no matter the odds. With a bold heart and a fierce sense of justice, you are never afraid to take risks or face challenges head-on. Welcome to the house of heroes like Harry Potter, Hermione Granger, and Albus Dumbledore!",
36-
Ravenclaw: "Welcome to Ravenclaw, where wisdom and learning are prized above all! As a member of this house, you are valued for your intelligence, creativity, and curiosity. Ravenclaws are known for their sharp minds and thirst for knowledge, always seeking answers to life’s mysteries. You join the ranks of greats like Luna Lovegood and Cho Chang, where cleverness and ingenuity reign supreme!",
37-
Hufflepuff: "You’ve been sorted into Hufflepuff, the house of loyalty and kindness! Hufflepuffs are known for their strong sense of fairness, patience, and dedication. You are someone who values friendship, hard work, and the well-being of others. In Hufflepuff, every person matters, and unity is key. You stand alongside legends like Newt Scamander and Cedric Diggory, where inclusivity and perseverance define your strength!",
38-
Slytherin: "Welcome to Slytherin, where ambition and cunning pave the way to greatness! As a Slytherin, you are driven by your goals and never shy away from doing what it takes to succeed. Known for being resourceful and strategic, you can navigate challenges with ease and foresight. In Slytherin, you follow in the footsteps of powerhouses like Severus Snape and Merlin, with ambition as your guiding star!"
39-
};
40-
41-
// House images
42-
const houseImages = {
43-
Gryffindor: "https://i.pinimg.com/564x/20/32/4c/20324c7839e5f076e7a3d5baa7b77f62.jpg",
44-
Ravenclaw: "https://i.pinimg.com/564x/92/b5/65/92b5654268d9f3157ed1ec58f6d63c3e.jpg",
45-
Hufflepuff: "https://i.pinimg.com/564x/66/ba/0c/66ba0cd629a306ecf9d207c90d2184be.jpg",
46-
Slytherin: "https://i.pinimg.com/564x/c1/4f/36/c14f36dea82449f6ee5af5c2a6007c66.jpg"
47-
};
48-
49-
// Display result
50-
const resultDiv = document.getElementById('result');
51-
resultDiv.innerHTML = `🎉 You belong to <strong>${assignedHouse}</strong>!<br>${houseDescriptions[assignedHouse]}`;
52-
53-
// Display the house image
54-
const houseImage = document.getElementById('houseImage');
55-
houseImage.src = houseImages[assignedHouse];
56-
houseImage.alt = `${assignedHouse} logo`;
57-
houseImage.style.display = 'block';
103+
// Clear previous spell and reset animation
104+
spellTextElement.style.animation = "none";
105+
setTimeout(() => {
106+
spellTextElement.textContent = randomSpell;
107+
spellTextElement.style.animation = "";
108+
}, 10); // Small delay to trigger reflow and restart animation
58109
});

‎styles.css

+108
Original file line numberDiff line numberDiff line change
@@ -98,10 +98,12 @@ button:hover {
9898
0% {
9999
box-shadow: 0 0 10px rgba(255, 223, 0, 0.5);
100100
}
101+
101102
100% {
102103
box-shadow: 0 0 20px rgba(255, 223, 0, 1);
103104
}
104105
}
106+
105107
/*end of result card*/
106108

107109
#houseImage {
@@ -117,5 +119,111 @@ button:hover {
117119
display: flex;
118120
justify-content: center;
119121
align-items: center;
122+
123+
}
124+
125+
.spell-container {
126+
text-align: center;
127+
display: flex;
128+
flex-direction: column;
129+
align-items: center;
130+
justify-content: center;
131+
margin: 20px 0px;
132+
}
133+
134+
.spell-internal-container {
135+
max-width: 600px;
136+
margin: 0 auto;
137+
padding: 20px;
138+
background-color: white;
139+
border-radius: 10px;
140+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
141+
}
142+
143+
#generateSpellBtn {
144+
background-color: #1f1f1f;
145+
color: white;
146+
padding: 15px 32px;
147+
font-size: 18px;
148+
border: none;
149+
border-radius: 8px;
150+
cursor: pointer;
151+
position: relative;
152+
overflow: hidden;
153+
z-index: 1;
154+
transition: color 0.4s ease-out, transform 0.4s ease-out;
155+
}
156+
157+
#generateSpellBtn::before {
158+
content: "";
159+
position: absolute;
160+
top: 0;
161+
left: 0;
162+
width: 100%;
163+
height: 100%;
164+
background: linear-gradient(120deg, #170a2c, #00c8ff54, #6200ea5d);
165+
z-index: -1;
166+
transition: transform 0.4s ease-out;
167+
transform: scaleX(0);
168+
transform-origin: left;
120169
}
121170

171+
#generateSpellBtn:hover::before {
172+
transform: scaleX(1);
173+
}
174+
175+
#generateSpellBtn:hover {
176+
color: #f7f7f7;
177+
transform: scale(1.05);
178+
/* Adds scaling on hover */
179+
}
180+
181+
.spell-box {
182+
margin-top: 30px;
183+
font-size: 32px;
184+
height: 50px;
185+
background-color: black;
186+
border-radius: 12px;
187+
padding: 10px 20px;
188+
color: white;
189+
text-align: center;
190+
box-shadow: 0 0 8px 3px rgba(235, 124, 20, 0.6);
191+
192+
193+
transition: box-shadow 0.4s ease-in-out;
194+
}
195+
196+
.spell-text {
197+
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
198+
display: inline-block;
199+
border-right: 2px solid white;
200+
white-space: nowrap;
201+
overflow: hidden;
202+
letter-spacing: 2px;
203+
font-weight: 600;
204+
background: linear-gradient(90deg, #fa9a1c, #7873f5, #42e695);
205+
background-clip: text;
206+
-webkit-background-clip: text;
207+
color: transparent;
208+
animation: writeText 2s steps(30, end), blinkCaret 0.75s step-end infinite;
209+
}
210+
211+
@keyframes writeText {
212+
from {
213+
width: 0;
214+
}
215+
216+
to {
217+
width: 100%;
218+
}
219+
}
220+
221+
@keyframes blinkCaret {
222+
from, to {
223+
border-color: transparent;
224+
}
225+
226+
50% {
227+
border-color: transparent;
228+
}
229+
}

0 commit comments

Comments
 (0)