├── .vscode └── settings.json ├── icons └── icon.png ├── diagon_alley.mp3 ├── protego-105518.mp3 ├── assests ├── Hermione.mp4 └── images │ ├── wand.png │ ├── upicon.png │ ├── graybolt.png │ ├── sorting-hat.png │ └── clipart1985953.png ├── README.md ├── Code_of_conduct.md ├── index.html ├── styles.css └── script.js /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } 4 | -------------------------------------------------------------------------------- /icons/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/d-coder111/The-Wizards-Sorting-Hat/HEAD/icons/icon.png -------------------------------------------------------------------------------- /diagon_alley.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/d-coder111/The-Wizards-Sorting-Hat/HEAD/diagon_alley.mp3 -------------------------------------------------------------------------------- /protego-105518.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/d-coder111/The-Wizards-Sorting-Hat/HEAD/protego-105518.mp3 -------------------------------------------------------------------------------- /assests/Hermione.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/d-coder111/The-Wizards-Sorting-Hat/HEAD/assests/Hermione.mp4 -------------------------------------------------------------------------------- /assests/images/wand.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/d-coder111/The-Wizards-Sorting-Hat/HEAD/assests/images/wand.png -------------------------------------------------------------------------------- /assests/images/upicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/d-coder111/The-Wizards-Sorting-Hat/HEAD/assests/images/upicon.png -------------------------------------------------------------------------------- /assests/images/graybolt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/d-coder111/The-Wizards-Sorting-Hat/HEAD/assests/images/graybolt.png -------------------------------------------------------------------------------- /assests/images/sorting-hat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/d-coder111/The-Wizards-Sorting-Hat/HEAD/assests/images/sorting-hat.png -------------------------------------------------------------------------------- /assests/images/clipart1985953.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/d-coder111/The-Wizards-Sorting-Hat/HEAD/assests/images/clipart1985953.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Sorting-hat🎩🧙‍♀️ 2 | 3 | 📌A fun web-based quiz that determines which Hogwarts House (Gryffindor, Hufflepuff, Ravenclaw, or Slytherin) you belong 4 | to based on your personality traits. The website asks a series of questions, and based on the user's answers, it sorts 5 | them into a house. 6 | 7 | 8 |

9 | 10 | [![PRs Welcome](https://img.shields.io/badge/PRs-Welcome-brightgreen.svg?style=flat&logo=github)](https://github.com/d-coder111/sorting-hat) 11 | [![Open Source Love](https://img.shields.io/badge/Open%20Source-%F0%9F%A4%8D-Green)](https://github.com/d-coder111/sorting-hat) 12 | [![contributions welcome](https://img.shields.io/static/v1.svg?label=Contributions&message=Welcome&color=0059b3)](https://github.com/d-coder111/sorting-hat) 13 | [![Hacktoberfest-24](https://img.shields.io/static/v1.svg?label=Hacktoberfest-24&message=Accepted&color=red)](https://github.com/d-coder111/sorting-hat) 14 | 15 |

16 | 17 | ### 🌟 How to Contribute: 18 | 19 | 1. Register your GitHub ID on [Hackoberfest Website](https://hacktoberfest.com/auth/) 20 | 2. Fork the repository. 21 | 3. Implement the features listed in the suggested improvements section. Feel free to contribute your own ideas for 22 | enhancing the project further. 23 | 4. Commit and push your changes. 24 | 5. Create a pull request to the original repository. 25 | 6. Your pull request will be reviewed and merged. 26 | 27 | ### 🎯 Suggested Improvements: 28 | 29 | - ❓Additional Questions: Add more questions to the quiz for enhanced user engagement. 30 | - 🏘Detailed House Descriptions: Provide descriptions for each house after the user is sorted. 31 | - 💖Animations and Effects: Incorporate fun animations or effects during the sorting process. 32 | - 🔊Sound Effects: Add sound effects to enhance the overall user experience. 33 | - 💫Theme Options: Allow users to select different themes for the quiz interface. 34 | - 🔮Spells section: Include a "Spell of the Day" section and design it with a creative layout. 35 | 36 | #### 💡You are welcome to add your own better ideas and features to this project. 37 | 38 | ### Enjoy finding out which Hogwarts house you truly belong to!🧙‍♂️✨ 39 | 40 | #### 💟Want to add a little sparkle of encouragement? Tap the star button on the repository to show your support!⭐ 41 | -------------------------------------------------------------------------------- /Code_of_conduct.md: -------------------------------------------------------------------------------- 1 | # The Wizards Sorting Hat Project Code of Conduct 2 | 3 | ## Welcome 4 | 5 | Welcome to the **The Wizards Sorting Hat** repository! **The Wizards Sorting Hat** is a fun web-based quiz that determines which Hogwarts House (Gryffindor, Hufflepuff, Ravenclaw, or Slytherin) you belong to based on your personality traits. The website asks a series of questions, and based on the user's answers, it sorts them into a house. Our goal is to create an open, inclusive, and respectful environment where developers can engage and collaborate. We are committed to maintaining a harassment-free experience for everyone involved. 6 | 7 | ## Our Pledge 8 | 9 | We as members, contributors, and leaders pledge to make participation in **The Wizards Sorting Hat** a harassment-free experience for everyone, regardless of age, body size, visible or invisible disability, ethnicity, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, or sexual identity and orientation. 10 | 11 | We pledge to act in ways that contribute to an open, welcoming, diverse, inclusive, and healthy community, ensuring that all contributors feel supported and empowered to engage meaningfully in the project. 12 | 13 | ## Our Standards 14 | 15 | To maintain a positive, constructive, and respectful environment in the **The Wizards Sorting Hat** project, all participants are expected to adhere to the following standards: 16 | 17 | ### Positive Behavior: 18 | - **Respectful Communication**: Engage with others respectfully, ensuring that discussions remain professional and focused on the goals of the project. 19 | - **Constructive Feedback**: Provide feedback that is constructive, helpful, and aimed at improving contributions while being respectful and encouraging. 20 | - **Collaboration**: Work openly and cooperatively with others, sharing knowledge and ideas that contribute to the growth of the platform. 21 | - **Inclusivity**: Use language and actions that welcome and include all participants, regardless of their background or experience level. 22 | - **Recognition**: Acknowledge and appreciate the contributions of all members, whether through code, design, feedback, or discussions. 23 | - **Professionalism**: Maintain professionalism in all interactions, ensuring that the project’s goals and values are prioritized. 24 | 25 | ### Unacceptable Behavior: 26 | - **Harassment**: Any form of harassment, including unwelcome comments, personal attacks, or inappropriate behavior, is strictly prohibited. 27 | - **Discrimination**: Discriminatory remarks or behavior based on personal identity, beliefs, or background will not be tolerated. 28 | - **Disrespect**: Engaging in trolling, dismissive comments, or inflammatory remarks that disrupt the collaborative nature of the project is unacceptable. 29 | - **Privacy Violations**: Sharing private or sensitive information about others without their explicit consent is not allowed. 30 | - **Unethical Conduct**: Misusing the platform, violating ethical standards, or spreading misinformation is prohibited. 31 | - **Disruption**: Any actions that intentionally disrupt or interfere with the progress of the project or the community’s efforts will not be tolerated. 32 | 33 | ## Project Goals 34 | 35 | The **The Wizards Sorting Hat** project aims to create a social platform that allows developers to engage with the GitHub community through authenticated interactions. The key goals include: 36 | - **Community Engagement**: Providing a space for developers to share thoughts, ideas, and insights with the wider GitHub community. 37 | - **Collaboration**: Encouraging interaction and collaboration among developers through meaningful discussions and updates. 38 | - **GitHub Profile Exploration**: Enabling users to explore the GitHub profiles of fellow developers, facilitating networking and knowledge-sharing. 39 | - **Open Source Contributions**: Promoting open-source development and collaboration, allowing contributors to enhance the platform’s features and capabilities. 40 | 41 | ## Enforcement Responsibilities 42 | 43 | Community leaders and maintainers of the **The Wizards Sorting Hat** project are responsible for enforcing this Code of Conduct. They are expected to: 44 | 45 | - Clearly communicate the standards for acceptable behavior and ensure that all participants are aware of them. 46 | - Respond to violations of the Code of Conduct in a timely and fair manner. 47 | - Take appropriate corrective actions, such as removing inappropriate comments, posts, or contributions that do not align with community standards. 48 | - Apply disciplinary measures, including temporary or permanent bans, in cases of repeated or serious violations of the Code of Conduct. 49 | 50 | ## Scope 51 | 52 | This Code of Conduct applies to all spaces managed by **The Wizards Sorting Hat**, including GitHub repositories, issue trackers, discussions, and other communication platforms. It also applies when community members represent the project in public spaces, such as conferences, online events, or forums. 53 | 54 | ## Reporting Violations 55 | 56 | If you experience or witness behavior that violates this Code of Conduct, please report it by contacting the project leaders at **divy777888@gmail.com**. All complaints will be reviewed promptly and confidentially. The community leaders are committed to ensuring a safe and positive environment and will take appropriate action to address any issues. 57 | 58 | ## Consequences of Unacceptable Behavior 59 | 60 | If a community member is found to have violated this Code of Conduct, the community leaders may take the following actions: 61 | 62 | 1. **Correction**: A private conversation with the individual to address the violation and provide guidance on how to improve their behavior. 63 | 2. **Warning**: A formal warning outlining the unacceptable behavior and providing expectations for future conduct. 64 | 3. **Temporary Suspension**: A temporary suspension from participating in the project or community spaces, with the possibility of reinstatement after review. 65 | 4. **Permanent Ban**: Permanent removal from the project and all community spaces for repeated or severe violations. 66 | 67 | ## Enforcement Guidelines 68 | 69 | Community leaders will follow these guidelines when determining the consequences for violations of this Code of Conduct: 70 | 71 | 1. **Correction**: 72 | - **Community Impact**: A minor violation that causes minimal disruption to the project. 73 | - **Consequence**: A private conversation to clarify the violation and provide guidance on behavior improvement. 74 | 75 | 2. **Warning**: 76 | - **Community Impact**: A moderate violation that negatively affects the collaborative environment of the project. 77 | - **Consequence**: A formal warning with clear expectations for future behavior. 78 | 79 | 3. **Temporary Suspension**: 80 | - **Community Impact**: A significant violation that harms the community or disrupts the progress of the project. 81 | - **Consequence**: Temporary suspension from participating in the project, with the possibility of reinstatement after review. 82 | 83 | 4. **Permanent Ban**: 84 | - **Community Impact**: A severe or repeated violation that undermines the project’s goals or the community’s values. 85 | - **Consequence**: Permanent removal from the project and all related spaces. 86 | 87 | ## Building a Positive Community 88 | 89 | At **The Wizards Sorting Hat**, we are dedicated to creating a welcoming, inclusive, and supportive community where developers can engage, share insights, and collaborate effectively. By working together, we can create a platform that promotes meaningful interaction and knowledge sharing among GitHub users. Let’s work together with respect, integrity, and a shared passion for connecting developers through innovative solutions. 90 | 91 | ## Attribution 92 | 93 | This Code of Conduct is adapted from the [Contributor Covenant](https://www.contributor-covenant.org), version 2.0, available [here](https://www.contributor-covenant.org/version/2/0/code_of_conduct.html). 94 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Sorting Hat Quiz 8 | 9 | 10 | 11 | 12 | 13 | 14 | 17 | 18 | 19 | 20 | Magic Wand

21 |

22 |

23 |

24 |

25 | 26 |

27 |

31 | 32 |

33 | 34 | 35 |

Which Hogwarts House Do You Belong To?

36 |

37 | 38 |

39 |

40 | 41 | 242 | 243 | 244 | 245 | 246 | Hogwarts Clipart

247 | 248 | 249 | 250 | 251 | 252 | 287 | 288 | 289 | 290 | 291 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | cursor: none !important; 3 | } 4 | 5 | body { 6 | font-family: "Arial", sans-serif; 7 | background: radial-gradient(circle at center, #1b1f3b, #0a0c22, #000000); 8 | margin: 0; 9 | } 10 | 11 | .custom-cursor { 12 | position: absolute; 13 | pointer-events: none; 14 | width: 60px; 15 | /* Adjust the size of the wand */ 16 | height: 60px; 17 | /* Adjust the size of the wand */ 18 | transform: translate(-25%, -25%); 19 | transition: transform 0.1s ease-out; 20 | z-index: 10000; 21 | } 22 | 23 | /* Sparkle particle style */ 24 | .sparkle { 25 | position: absolute; 26 | width: 2.5px; 27 | height: 2.5px; 28 | background-color: rgba(255, 255, 255, 0.8); 29 | border-radius: 50%; 30 | pointer-events: none; 31 | animation: sparkle-animation 0.8s ease-out forwards; 32 | box-shadow: 0 0 10px 2px rgba(255, 157, 0, 0.5); 33 | transition: all 0.2s; 34 | z-index: 9999; 35 | } 36 | 37 | /* Sparkle particle animation */ 38 | @keyframes sparkle-animation { 39 | 0% { 40 | transform: scale(1); 41 | opacity: 1; 42 | } 43 | 100% { 44 | transform: scale(2); 45 | opacity: 0; 46 | } 47 | } 48 | 49 | 50 | 51 | .container { 52 | max-width: 1918px; 53 | padding: 20px; 54 | border-radius: 10px; 55 | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 56 | position: relative; 57 | background: none; 58 | z-index: 0; 59 | transition: all 0.3s ease; 60 | } 61 | 62 | /* Quiz Question styling */ 63 | .question { 64 | font-family: 'libre-baskerville-bold', serif; 65 | font-weight: 600; 66 | color: white; 67 | margin-bottom: 20px; 68 | padding: 15px; 69 | border: 1px solid #ccc; 70 | border-radius: 8px; 71 | } 72 | 73 | .question:hover { 74 | background-color: rgba(0, 0, 0, 0.318); 75 | } 76 | 77 | .question input[type="radio"] { 78 | display: none; 79 | } 80 | 81 | .question label { 82 | display: block; 83 | background-color: rgba(255, 255, 255, 0.1); 84 | padding: 15px; 85 | margin: 10px 0; 86 | border-radius: 10px; 87 | cursor: pointer; 88 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 89 | transition: all 0.3s ease; 90 | font-family: 'Gabriela', serif; 91 | font-size: 22px; 92 | color: yellow; 93 | text-shadow: 0 0 3px black; 94 | } 95 | 96 | .question label:hover { 97 | background-color: rgba(255, 255, 255, 0.2); 98 | transform: translateY(-2px); 99 | } 100 | 101 | .question input[type="radio"]:checked+label { 102 | background: linear-gradient(135deg, #8A2BE2, #E6E6FA); 103 | color: white; 104 | border: 2px solid rgba(255, 0, 0, 0.9); 105 | box-shadow: 0 0 10px rgba(255, 0, 0, 0.7); 106 | } 107 | 108 | 109 | /* Buttons */ 110 | button { 111 | display: block; 112 | width: 100%; 113 | padding: 10px; 114 | background-color: #6200ea; 115 | color: #fff; 116 | border: none; 117 | border-radius: 5px; 118 | cursor: pointer; 119 | font-size: 1.2em; 120 | margin: 10px 5px; 121 | transition: background-color 0.3s ease, transform 0.3s ease; 122 | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 123 | } 124 | 125 | .theme-buttons { 126 | display: flex; 127 | justify-content: space-between; 128 | margin-bottom: 18px; 129 | gap: 15px; 130 | font-size: 14px; 131 | } 132 | 133 | @media (max-width: 600px) { 134 | .theme-buttons { 135 | flex-wrap: wrap; 136 | } 137 | } 138 | 139 | .theme-buttons .theme-button { 140 | padding: 7px; 141 | text-align: center; 142 | } 143 | 144 | /* End THEME Options*/ 145 | h1 { 146 | text-align: center; 147 | font-size: 2.5em; 148 | color: #d9d504; 149 | } 150 | 151 | @keyframes lightSweep { 152 | 0% { 153 | background-position: 0% 50%; 154 | } 155 | 156 | 50% { 157 | background-position: 100% 50%; 158 | } 159 | 160 | 100% { 161 | background-position: 0% 50%; 162 | } 163 | } 164 | 165 | .light-sweep { 166 | position: fixed; 167 | top: 0; 168 | left: 0; 169 | width: 100%; 170 | height: 100%; 171 | background: linear-gradient(120deg, 172 | rgba(255, 255, 255, 0.05), 173 | rgba(255, 255, 255, 0.2), 174 | rgba(255, 255, 255, 0.05)); 175 | background-size: 200%; 176 | animation: lightSweep 4s infinite; 177 | z-index: 1; 178 | pointer-events: none; 179 | } 180 | 181 | .question:hover { 182 | background-color: rgba(0, 0, 0, 0.318); 183 | } 184 | 185 | .video-container { 186 | position: absolute; 187 | top: 0; 188 | left: 0; 189 | border-radius: 15px; 190 | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); 191 | width: 100%; 192 | height: 266px; 193 | overflow: hidden; 194 | z-index: 2; 195 | } 196 | 197 | video { 198 | width: 100%; 199 | opacity: 70%; 200 | height: auto; 201 | filter: brightness(130%); 202 | object-fit: cover; 203 | } 204 | 205 | @keyframes fadeIn { 206 | from { 207 | opacity: 0; 208 | } 209 | 210 | to { 211 | opacity: 1; 212 | } 213 | } 214 | 215 | .questP { 216 | font-family: 'Cinzel Decorative', serif; 217 | color: #fffae6; 218 | font-size: 2.5rem; 219 | margin: 1% 1%; 220 | color: #fff; 221 | text-shadow: 0px 0px 2px black; 222 | text-align: center; 223 | } 224 | 225 | h3 { 226 | font-family: 'medievalsharp-regular', serif; 227 | font-size: 2rem; 228 | margin-top: auto; 229 | } 230 | 231 | label { 232 | font-family: 'Gabriela', serif; 233 | font-size: 22px; 234 | color: yellow; 235 | text-shadow: 0 0 3px black; 236 | } 237 | 238 | .overlay-text { 239 | position: absolute; 240 | top: 15%; 241 | left: 50%; 242 | transform: translate(-50%, -50%); 243 | z-index: 2; 244 | font-family: 'Cinzel Decorative', serif; 245 | color: #fffae6; 246 | font-size: 53px; 247 | font-weight: bold; 248 | text-align: center; 249 | text-shadow: 250 | 0 0 10px rgba(255, 255, 0, 0.8), 251 | 0 0 20px rgba(255, 255, 0, 0.6), 252 | 0 0 30px rgba(255, 255, 0, 0.4); 253 | } 254 | 255 | .spell-of-the-day-container { 256 | text-align: center; 257 | margin: 40px auto; 258 | padding: 20px; 259 | background-color: rgba(0, 0, 0, 0.7); 260 | border-radius: 10px; 261 | box-shadow: 0 0 20px rgba(255, 223, 0, 0.5); 262 | max-width: 600px; /* Adjust as needed */ 263 | } 264 | 265 | .spell-of-the-day-container h2 { 266 | color: #f7d354; 267 | font-family: 'Cinzel Decorative', serif; 268 | font-size: 2em; 269 | margin-bottom: 20px; 270 | } 271 | 272 | .reveal-spell-btn { 273 | background-color: #6200ea; 274 | color: white; 275 | font-family: 'Cinzel Decorative', serif; 276 | padding: 10px 20px; 277 | font-size: 1em; 278 | border: none; 279 | border-radius: 5px; 280 | cursor: pointer; 281 | transition: background-color 0.3s ease, transform 0.3s ease; 282 | } 283 | 284 | .reveal-spell-btn:hover { 285 | background-color: #3700b3; 286 | transform: translateY(-2px); 287 | } 288 | 289 | .spell-of-the-day { 290 | margin-top: 20px; 291 | } 292 | 293 | .spell-text { 294 | font-family: 'MedievalSharp', cursive; 295 | font-size: 1.5em; 296 | color: #f7d354; 297 | text-shadow: 0 0 5px rgba(255, 255, 0, 0.5); 298 | animation: spellGlow 2s infinite alternate; 299 | } 300 | 301 | @keyframes spellGlow { 302 | from { 303 | text-shadow: 0 0 5px rgba(255, 255, 0, 0.5); 304 | } 305 | to { 306 | text-shadow: 0 0 15px rgba(255, 255, 0, 0.8), 0 0 20px rgba(255, 255, 0, 0.5); 307 | } 308 | } 309 | 310 | button:hover { 311 | background-color: #33dd08; 312 | transform: translateY(-2px); 313 | } 314 | 315 | button:disabled { 316 | background-color: #ccc; 317 | cursor: not-allowed; 318 | } 319 | 320 | /*result card*/ 321 | .result { 322 | margin-top: 20px; 323 | text-align: center; 324 | font-size: 1.8em; 325 | padding: 30px; 326 | border: 3px solid #8b4513; 327 | border-radius: 15px; 328 | background: radial-gradient(circle, #3b3b3b 0%, #1a1a1a 100%); 329 | color: #f4f4f4; 330 | box-shadow: 0 0 20px rgba(255, 223, 0, 0.7), 0 0 40px rgba(255, 223, 0, 0.5); 331 | position: relative; 332 | transition: transform 0.5s ease-in-out, box-shadow 0.5s ease-in-out; 333 | } 334 | 335 | .result:hover { 336 | transform: scale(1.05); 337 | box-shadow: 0 0 30px rgba(255, 223, 0, 1), 0 0 60px rgba(255, 223, 0, 0.8); 338 | } 339 | 340 | .result::before, 341 | .result::after { 342 | content: ""; 343 | position: absolute; 344 | width: 20px; 345 | height: 20px; 346 | background-color: #f4f4f4; 347 | border-radius: 50%; 348 | animation: glow 2s infinite alternate; 349 | } 350 | 351 | .result::before { 352 | top: 10px; 353 | left: 10px; 354 | } 355 | 356 | .result::after { 357 | bottom: 10px; 358 | right: 10px; 359 | } 360 | 361 | @keyframes glow { 362 | 0% { 363 | box-shadow: 0 0 10px rgba(255, 223, 0, 0.5); 364 | } 365 | 366 | 100% { 367 | box-shadow: 0 0 20px rgba(255, 223, 0, 1); 368 | } 369 | } 370 | 371 | /*end of result card*/ 372 | 373 | #houseImage { 374 | display: block; 375 | margin: 20px auto; 376 | width: 100px; 377 | height: auto; 378 | border-radius: 10px; 379 | box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); 380 | } 381 | 382 | .spell-container { 383 | text-align: center; 384 | display: flex; 385 | align-items: center; 386 | justify-content: space-around; 387 | margin: 262px 0px; 388 | padding: 20px; 389 | } 390 | 391 | .logo-img { 392 | width: 33%; 393 | border-radius: 10px; 394 | } 395 | 396 | .houses-img { 397 | width: 33%; 398 | border-radius: 10px; 399 | } 400 | 401 | .spell-internal-container { 402 | max-width: 600px; 403 | margin: 0 auto; 404 | padding: 20px; 405 | background-color: white; 406 | border-radius: 10px; 407 | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 408 | } 409 | 410 | #generateSpellBtn { 411 | background-color: #1f1f1f; 412 | color: white; 413 | padding: 15px 32px; 414 | font-size: 18px; 415 | border: none; 416 | border-radius: 8px; 417 | cursor: pointer; 418 | position: relative; 419 | overflow: hidden; 420 | z-index: 1; 421 | transition: color 0.4s ease-out, transform 0.4s ease-out; 422 | } 423 | 424 | #generateSpellBtn::before { 425 | content: ""; 426 | position: absolute; 427 | top: 0; 428 | left: 0; 429 | width: 100%; 430 | height: 100%; 431 | background: linear-gradient(120deg, #170a2c, #00c8ff54, #6200ea5d); 432 | z-index: -1; 433 | transition: transform 0.4s ease-out; 434 | transform: scaleX(0); 435 | transform-origin: left; 436 | } 437 | 438 | #generateSpellBtn:hover::before { 439 | transform: scaleX(1); 440 | } 441 | 442 | #generateSpellBtn:hover { 443 | color: #f7f7f7; 444 | transform: scale(1.05); 445 | /* Adds scaling on hover */ 446 | } 447 | 448 | .spell-box { 449 | margin-top: 30px; 450 | font-size: 32px; 451 | height: 50px; 452 | background-color: black; 453 | border-radius: 12px; 454 | padding: 10px 20px; 455 | color: white; 456 | text-align: center; 457 | box-shadow: 0 0 8px 3px rgba(235, 124, 20, 0.6); 458 | 459 | transition: box-shadow 0.4s ease-in-out; 460 | } 461 | 462 | /* --------- Footer section ----------- */ 463 | .footer { 464 | background-color: hsla(20, 100%, 2%, 0.984); 465 | /* Dark color to match the Hogwarts theme */ 466 | color: burlywood; 467 | /* Light text color */ 468 | text-align: center; 469 | padding: 30px; 470 | position: relative; 471 | bottom: 0; 472 | margin-top: 30px; 473 | } 474 | 475 | .footer .footer-top { 476 | border-bottom: 2px solid goldenrod; 477 | padding: 20px 10px; 478 | display: grid; 479 | grid-template-columns: repeat(4, auto); 480 | gap: 5px 5px; 481 | align-content: center; 482 | justify-content: space-evenly; 483 | } 484 | 485 | .footer .footer-top .img-icon { 486 | width: 310px; 487 | height: 250px; 488 | background-image: url(assests/images/sorting-hat.png); 489 | background-size: cover; 490 | background-position: center; 491 | overflow: hidden; 492 | display: flex; 493 | align-items: center; 494 | justify-content: center; 495 | margin: 0 auto; 496 | } 497 | 498 | .footer .footer-top p { 499 | font-size: 20px; 500 | margin-bottom: 15px; 501 | } 502 | 503 | .footer a { 504 | color: burlywood; 505 | text-decoration: none; 506 | font-size: 20px; 507 | } 508 | 509 | .footer .footer-top .links a { 510 | display: inline-block; 511 | margin-bottom: 20px; 512 | } 513 | 514 | .footer .footer-top .social-links a { 515 | margin: 0 10px; 516 | } 517 | 518 | .footer .footer-top .social-links { 519 | margin-bottom: 15px; 520 | } 521 | 522 | .footer .footer-top .btn { 523 | max-width: 120px; 524 | font-size: 16px; 525 | font-weight: bold; 526 | color: #1b0e08; 527 | background-color: burlywood; 528 | margin-top: 15px; 529 | } 530 | 531 | .footer a:hover { 532 | color: #f39c12; 533 | /* A highlight color for hover */ 534 | } 535 | 536 | .footer .btn:hover { 537 | background-color: #f39c12; 538 | } 539 | 540 | .footer i { 541 | font-size: 20px; 542 | } 543 | 544 | .footer .footer-top .newsletter input[type="email"] { 545 | width: 100%; 546 | max-width: 300px; 547 | /* Maximum width for larger screens */ 548 | padding: 10px; 549 | font-size: 16px; 550 | color: #1b0e08; 551 | /* Dark text color */ 552 | background-color: #f4f4f4; 553 | /* Light background color */ 554 | border: 2px solid burlywood; 555 | /* Match with the footer theme */ 556 | border-radius: 5px; 557 | /* Rounded edges */ 558 | margin-top: 10px; 559 | margin-bottom: 15px; 560 | box-sizing: border-box; 561 | } 562 | 563 | .footer .footer-top .newsletter input[type="email"]:focus { 564 | outline: none; 565 | border-color: #f39c12; 566 | /* Highlight border on focus */ 567 | box-shadow: 0 0 5px rgba(243, 156, 18, 0.5); 568 | /* Add shadow on focus */ 569 | } 570 | 571 | .footer .footer-bottom { 572 | align-content: center; 573 | text-align: center; 574 | } 575 | 576 | 577 | /* ------------- Media queries --------------- */ 578 | @media (max-width: 768px) { 579 | 580 | .logo-img, 581 | .houses-img { 582 | display: none; 583 | } 584 | } 585 | 586 | @media (max-width: 768px) { 587 | .footer .footer-top { 588 | grid-template-columns: 1fr; 589 | } 590 | 591 | .footer .footer-top .img-icon { 592 | margin-bottom: 20px; 593 | } 594 | 595 | .footer .footer-top .social-links a { 596 | margin: 0 5px; 597 | } 598 | 599 | .footer .footer-top p { 600 | font-size: 18px; 601 | } 602 | 603 | .footer .footer-top .newsletter input[type="email"] { 604 | max-width: 100%; 605 | font-size: 14px; 606 | } 607 | 608 | .footer .footer-top .newsletter form { 609 | display: flex; 610 | flex-direction: column; 611 | align-items: center; 612 | } 613 | 614 | .footer .footer-top .newsletter .btn { 615 | margin: 15px 0; 616 | } 617 | } 618 | 619 | @media (min-width: 769px) and (max-width: 1024px) { 620 | .footer .footer-top { 621 | grid-template-columns: repeat(2, auto); 622 | } 623 | 624 | .footer .footer-top .links a { 625 | margin-bottom: 15px; 626 | } 627 | 628 | .footer .footer-top p { 629 | font-size: 18px; 630 | } 631 | } 632 | 633 | .theme-buttons button { 634 | color: white !important; /* Ensure text always stays white */ 635 | transition: background-color 0.3s, transform 0.3s; 636 | } 637 | 638 | .theme-buttons button:hover, 639 | .theme-buttons button:active { 640 | transform: scale(1.05); 641 | } 642 | 643 | @media (max-width: 1300px) { 644 | .spell-of-the-day-container { 645 | margin: 20px auto; 646 | padding: 10px; 647 | } 648 | } 649 | 650 | /*FAB 651 | */ 652 | .to-top { 653 | z-index: 10; 654 | position: fixed; 655 | bottom: 20px; 656 | right: 20px; 657 | pointer-events: none; 658 | border:#1f1f1f; 659 | width: auto; 660 | height:auto; 661 | color: whitesmoke; 662 | display:flex; 663 | align-items: center; 664 | justify-content: center; 665 | font-size: 32px; 666 | text-decoration: none; 667 | opacity: 0; 668 | transition: all .4s; 669 | } 670 | 671 | .to-top img { 672 | display : block; 673 | } 674 | .to-top .fa-arrow-up { 675 | position: absolute; 676 | 677 | } 678 | 679 | .to-top.active { 680 | 681 | cursor: pointer; 682 | pointer-events: auto; 683 | opacity:1 684 | } -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 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 | } 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 ${assignedHouse}!
${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 🦌", // A Patronus, often an animal like a stag. 72 | "Alarte Ascendare 🦅", // A spell that makes things ascend, represented by a flying bird. 73 | "Avada Kedavra 💀", // The killing curse, symbolized by a skull. 74 | "Accio 🧲", // A summoning spell, represented by a magnet for attraction. 75 | "Stupefy ⚡", // The stunning spell, represented by a lightning bolt. 76 | "Wingardium Leviosa 🦋", // The levitation spell, represented by a wand. 77 | "Alohomora 🗝️", // Unlocking spell, represented by a key. 78 | "Lumos 🔦", // The light-producing spell, represented by a flashlight. 79 | ]; 80 | 81 | function getSpellOfTheDay() { 82 | const currentDate = new Date(); 83 | const dayOfYear = getDayOfYear(currentDate); 84 | 85 | const spellIndex = dayOfYear % spells.length; 86 | return spells[spellIndex]; 87 | } 88 | 89 | // Helper function to get the current day of the year (1 - 365) 90 | function getDayOfYear(date) { 91 | const start = new Date(date.getFullYear(), 0, 0); 92 | const diff = 93 | date - 94 | start + 95 | (start.getTimezoneOffset() - date.getTimezoneOffset()) * 60 * 1000; 96 | const oneDay = 1000 * 60 * 60 * 24; 97 | return Math.floor(diff / oneDay); 98 | } 99 | 100 | // Function to handle the option selection 101 | function handleOptionSelection() { 102 | const options = document.querySelectorAll('input[name="options"]'); 103 | 104 | options.forEach(option => { 105 | option.addEventListener('change', function() { 106 | // Store the selected value 107 | const selectedValue = option.value; 108 | localStorage.setItem('selectedAnswer', selectedValue); // Store the selected value 109 | console.log("Selected answer stored: " + selectedValue); 110 | 111 | // Change the background color of the selected option 112 | options.forEach(opt => { 113 | const label = opt.parentElement; // Reference to the label 114 | if (opt.checked) { 115 | label.classList.add('selected'); // Add class to selected label 116 | } else { 117 | label.classList.remove('selected'); // Remove class from unselected labels 118 | } 119 | }); 120 | }); 121 | }); 122 | } 123 | 124 | // Function to load the stored answer (if it exists) when the page loads 125 | function loadStoredAnswer() { 126 | const storedAnswer = localStorage.getItem('selectedAnswer'); 127 | 128 | if (storedAnswer) { 129 | const optionToSelect = document.querySelector(`input[name="options"][value="${storedAnswer}"]`); 130 | 131 | if (optionToSelect) { 132 | optionToSelect.checked = true; // Check the stored option 133 | const label = optionToSelect.parentElement; // Reference to the label 134 | label.classList.add('selected'); // Set the class to green 135 | } 136 | } 137 | } 138 | 139 | 140 | // Theme styles object using CSS-like naming conventions 141 | const themeStyles = { 142 | default: { 143 | // The default theme will be handled separately 144 | }, 145 | gryffindor: { 146 | 'color': '#FFC500', 147 | 'question-background': 'rgba(116, 0, 1, 0.7)', 148 | 'button-background': '#740001', 149 | 'button-color': '#FFC500', 150 | 'question-border': '2px solid #FFC500', 151 | 'text-shadow': '1px 1px 2px #000' 152 | }, 153 | ravenclaw: { 154 | 'color': '#946B2D', 155 | 'question-background': 'rgba(0, 10, 144, 0.7)', 156 | 'button-background': '#0E1A40', 157 | 'button-color': '#946B2D', 158 | 'question-border': '2px solid #946B2D', 159 | 'text-shadow': '1px 1px 2px #000' 160 | }, 161 | hufflepuff: { 162 | 'color': '#ECB939', 163 | 'question-background': 'rgba(55, 46, 41, 0.7)', 164 | 'button-background': '#372E29', 165 | 'button-color': '#ECB939', 166 | 'question-border': '2px solid #ECB939', 167 | 'text-shadow': '1px 1px 2px #000' 168 | }, 169 | slytherin: { 170 | 'color': '#AAAAAA', 171 | 'question-background': 'rgba(26, 71, 42, 0.7)', 172 | 'button-background': '#1A472A', 173 | 'button-color': '#AAAAAA', 174 | 'question-border': '2px solid #AAAAAA', 175 | 'text-shadow': '1px 1px 2px #000' 176 | } 177 | }; 178 | 179 | // Function to apply theme 180 | function applyTheme(themeName) { 181 | const container = document.getElementById('quiz-container'); 182 | const questions = container.querySelectorAll('.question'); 183 | const buttons = container.querySelectorAll('button'); 184 | const labels = container.querySelectorAll('label'); 185 | 186 | if (themeName === 'default') { 187 | // // Reset to original CSS styles 188 | // document.body.style.cssText = ` 189 | // font-family: "Arial", sans-serif; 190 | // background: radial-gradient(circle at center, #1b1f3b, #0a0c22, #000000); 191 | // margin: 0; 192 | // `; 193 | 194 | // container.style.cssText = ` 195 | // max-width: 1918px; 196 | // margin: -198px auto; 197 | // padding: 20px 40px; 198 | // border-radius: 10px; 199 | // box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 200 | // position: relative; 201 | // background: none; 202 | // z-index: 0; 203 | // transition: all 0.3s ease; 204 | // `; 205 | 206 | // questions.forEach(question => { 207 | // question.style.cssText = ` 208 | // font-family: 'libre-baskerville-bold', serif; 209 | // font-weight: 600; 210 | // color: white; 211 | // margin-bottom: 20px; 212 | // padding: 15px; 213 | // border: 1px solid #ccc; 214 | // border-radius: 8px; 215 | // transition: background-color 0.3s; 216 | // `; 217 | // }); 218 | 219 | // buttons.forEach(button => { 220 | // button.style.cssText = ` 221 | // display: block; 222 | // width: 100%; 223 | // padding: 10px; 224 | // background-color: #6200ea; 225 | // color: #fff; 226 | // border: none; 227 | // border-radius: 5px; 228 | // cursor: pointer; 229 | // font-size: 1.2em; 230 | // margin: 10px 5px; 231 | // transition: background-color 0.3s ease, transform 0.3s ease; 232 | // box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 233 | // `; 234 | // }); 235 | 236 | // labels.forEach(label => { 237 | // label.style.cssText = ` 238 | // font-family: 'Gabriela', serif; 239 | // font-size: 22px; 240 | // color: yellow; 241 | // text-shadow: 0 0 3px black; 242 | // display: block; 243 | // background-color: #ff000017; 244 | // padding: 15px; 245 | // margin: 10px 0; 246 | // border-radius: 10px; 247 | // cursor: pointer; 248 | // box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 249 | // transition: background-color 0.3s ease, transform 0.3s ease; 250 | // `; 251 | // }); 252 | } else { 253 | const theme = themeStyles[themeName]; 254 | document.body.style.background = theme['background']; 255 | container.style.color = theme['color']; 256 | container.style.textShadow = theme['text-shadow']; 257 | 258 | questions.forEach(question => { 259 | question.style.backgroundColor = theme['question-background']; 260 | question.style.border = theme['question-border']; 261 | }); 262 | 263 | buttons.forEach(button => { 264 | button.style.backgroundColor = theme['button-background']; 265 | button.style.color = 'white'; // Always keep text white 266 | }); 267 | 268 | labels.forEach(label => { 269 | label.style.backgroundColor = theme['question-background']; 270 | label.style.color = theme['color']; 271 | label.style.border = theme['question-border']; 272 | }); 273 | } 274 | 275 | // Add some Harry Potter-inspired decorative elements 276 | addDecorativeElements(themeName); 277 | 278 | // Save the current theme to localStorage 279 | localStorage.setItem('selectedTheme', themeName); 280 | } 281 | 282 | // Function to add decorative elements based on the theme 283 | function addDecorativeElements(themeName) { 284 | let decorElement = document.getElementById('theme-decor'); 285 | if (!decorElement) { 286 | decorElement = document.createElement('div'); 287 | decorElement.id = 'theme-decor'; 288 | document.body.appendChild(decorElement); 289 | } 290 | 291 | switch(themeName) { 292 | case 'gryffindor': 293 | decorElement.innerHTML = '🦁'; 294 | break; 295 | case 'ravenclaw': 296 | decorElement.innerHTML = '🦅'; 297 | break; 298 | case 'hufflepuff': 299 | decorElement.innerHTML = '🦡'; 300 | break; 301 | case 'slytherin': 302 | decorElement.innerHTML = '🐍'; 303 | break; 304 | default: 305 | decorElement.innerHTML = '⚡'; 306 | } 307 | 308 | decorElement.style.cssText = ` 309 | position: fixed; 310 | top: 20px; 311 | right: 20px; 312 | font-size: 40px; 313 | z-index: 1000; 314 | `; 315 | } 316 | 317 | // Event listener for theme buttons 318 | document.querySelectorAll('.theme-button').forEach(button => { 319 | button.addEventListener('click', () => { 320 | const theme = button.getAttribute('data-theme'); 321 | applyTheme(theme); 322 | }); 323 | }); 324 | 325 | // Function to apply the saved theme or default on page load 326 | function applySavedTheme() { 327 | applyTheme('ravenclaw'); 328 | } 329 | 330 | // Apply saved theme on page load 331 | document.addEventListener('DOMContentLoaded', applySavedTheme); 332 | 333 | // Call the function to set up event listeners 334 | handleOptionSelection(); 335 | 336 | // Load the previously stored answer when the page loads 337 | window.onload = function() { 338 | loadStoredAnswer(); 339 | 340 | // Automatically display the spell of the day 341 | const spellTextElement = document.getElementById("spellText"); 342 | const spellOfTheDay = getSpellOfTheDay(); 343 | spellTextElement.textContent = spellOfTheDay; 344 | 345 | // Ensure the spell text is positioned correctly before showing it 346 | setTimeout(() => { 347 | spellTextElement.style.opacity = '1'; 348 | spellTextElement.style.animation = 'levitate 3s ease-in-out infinite'; 349 | }, 100); 350 | }; 351 | 352 | // modifying the year of copyright section 353 | const currentYear = new Date().getFullYear(); 354 | document.querySelector(".footer-bottom h4").innerHTML = `Sorting Hat Quiz © ${currentYear} | All Rights Reserved.`; 355 | 356 | //after submitting the form 357 | 358 | const submitSound = document.querySelector('#submitSound'); 359 | const quiz = document.getElementById("quizForm"); 360 | const backgroundSound = document.querySelector("#backgroundSound"); 361 | 362 | 363 | quiz.addEventListener('submit', function (event) { 364 | event.preventDefault(); 365 | submitSound.play(); 366 | }); 367 | 368 | 369 | window.addEventListener('load', () => { 370 | backgroundSound.play(); 371 | backgroundSound.loop = false; 372 | }); 373 | 374 | document.addEventListener('DOMContentLoaded', () => { 375 | const lightningBolt = document.createElement('img'); 376 | lightningBolt.src = 'assests/images/graybolt.png'; // Path to the image 377 | lightningBolt.alt = 'Lightning Bolt'; 378 | lightningBolt.style.width = '50px'; // Set the size of the image 379 | lightningBolt.style.position = 'absolute'; // Change to absolute positioning 380 | lightningBolt.style.bottom = '5%'; // Position it 10% from the bottom of the first section 381 | lightningBolt.style.left = '50%'; // Center it horizontally 382 | lightningBolt.style.transform = 'translateX(-50%)'; // Adjust for centering 383 | lightningBolt.style.cursor = 'pointer'; // Change cursor to pointer on hover 384 | 385 | // Scroll to the quiz container when clicked 386 | lightningBolt.addEventListener('click', () => { 387 | const quizContainer = document.getElementById('quiz-container'); 388 | quizContainer.scrollIntoView({ behavior: 'smooth' }); 389 | }); 390 | 391 | // Append the image to the first section 392 | const firstSection = document.querySelector('.relative'); // Assuming this is the first section 393 | firstSection.appendChild(lightningBolt); // Append the image to the first section 394 | 395 | }); 396 | 397 | document.addEventListener('DOMContentLoaded', function() { 398 | const generateSpellBtn = document.getElementById('generateSpellBtn'); 399 | const spellText = document.getElementById('spellText'); 400 | const spellOfTheDay = document.getElementById('spellOfTheDay'); 401 | const backgroundSound = document.getElementById('backgroundSound'); 402 | 403 | generateSpellBtn.addEventListener('click', () => { 404 | const todaysSpell = getSpellOfTheDay(); 405 | spellOfTheDay.style.display = 'block'; 406 | generateSpellBtn.textContent = todaysSpell 407 | 408 | // Play background sound 409 | backgroundSound.play(); 410 | backgroundSound.loop = true; 411 | }); 412 | }); 413 | 414 | //fab 415 | 416 | var toTop = document.querySelector('.to-top'); 417 | 418 | window.addEventListener('scroll', function() { 419 | if(window.pageYOffset > 100) { 420 | toTop.classList.add("active"); 421 | } 422 | else 423 | { 424 | toTop.classList.remove("active") 425 | } 426 | }); 427 | 428 | // Get the wand cursor 429 | const wandCursor = document.getElementById('wandCursor'); 430 | let lastMouseX = 0; 431 | let lastMouseY = 0; 432 | 433 | function wandPositionAnimation(x, y) { 434 | createSparkle(x, y); 435 | wandCursor.style.left = `${x}px`; 436 | wandCursor.style.top = `${y}px`; 437 | } 438 | 439 | document.addEventListener('mousemove', function (e) { 440 | lastMouseX = e.clientX; 441 | lastMouseY = e.clientY; 442 | wandPositionAnimation(e.pageX, e.pageY) 443 | }); 444 | 445 | document.addEventListener('scroll', function (e) { 446 | const scrollX = window.scrollX; 447 | const scrollY = window.scrollY; 448 | const absoluteX = lastMouseX + scrollX; 449 | const absoluteY = lastMouseY + scrollY; 450 | wandPositionAnimation(absoluteX, absoluteY) 451 | }); 452 | 453 | function addRotation() { 454 | wandCursor.style.transform = 'rotate(45deg)'; 455 | wandCursor.style.transformOrigin = '50% 0%'; 456 | } 457 | 458 | function removeRotation() { 459 | wandCursor.style.transform = 'translate(-25%, -25%)'; 460 | } 461 | 462 | // Elements to hover over (button, label, etc.) 463 | const hoverElements = ['button', '.question label', '#generateSpellBtn']; 464 | 465 | // Add event listeners to the elements 466 | hoverElements.forEach(hoverElement => { 467 | var elements = document.querySelectorAll(hoverElement); 468 | elements.forEach(element => { 469 | element.addEventListener('mouseenter', addRotation); 470 | element.addEventListener('mouseleave', removeRotation); 471 | }) 472 | }); 473 | 474 | // Function to create sparkles at the given position 475 | function createSparkle(x, y) { 476 | const sparkle = document.createElement('div'); 477 | sparkle.className = 'sparkle'; 478 | document.body.appendChild(sparkle); 479 | 480 | const offsetX = (Math.random() - 0.5) * 40; 481 | const offsetY = (Math.random() - 0.5) * 40; 482 | sparkle.style.left = `${x + offsetX}px`; 483 | sparkle.style.top = `${y + offsetY}px`; 484 | 485 | setTimeout(() => { 486 | sparkle.remove(); 487 | }, 500); 488 | } 489 | --------------------------------------------------------------------------------

Which Hogwarts House Do You Belong To?

1. What do you value the most?

2. What would you do in a difficult situation?

3. What's your biggest strength?

4. How do you prefer to spend your free time?

5. What is your ideal pet?

6. Which of these words resonates with you the most?

7. What kind of leader are you?

8. What would you like to be known for?

9. If you were at Hogwarts, what would be your favorite subject?

10. What is your ideal way to spend a weekend?

11. What is your biggest fear?

12. Which color do you feel most drawn to?

Spell of the Day