A fun web application that generates random soccer-related facts, tracks the progress with a slider, and triggers confetti with a "SIUUUU!" animation when a specific milestone (FUN FACT #7) is reached. The app also allows users to toggle between light and dark modes.
- Random Fact Generator: Click the "Generate Fact!" button to show a random soccer fact.
- Slider Progress: Tracks the fact number visually using a slider.
- Confetti & Animation: Fun confetti animation and "SIUUUU!" popup when the slider reaches "FUN FACT #7".
- Light & Dark Mode: Switch between light and dark themes using the theme toggle button.
- Clear Fact Button: Clears the current fact and resets the slider and fact counter.
- Generate Fact: Click the "Generate Fact!" button to display a new random soccer fact. Each fact is associated with a number, displayed as "FUN FACT #X".
- Slider: The slider will update to show the current fact's progress. It ranges from "FUN FACT #1" to "FUN FACT #8".
- Confetti: When the slider reaches "FUN FACT #7", the confetti will trigger and a "SIUUUU!" popup will appear.
- Clear Fact: You can reset the facts by clicking the "Clear Fact" button, which will reset the fact counter, slider, and text.
- Theme Toggle: Switch between light and dark modes using the theme toggle button at the top-right corner.
- HTML: Markup for the page structure.
- CSS: Styling for the webpage, with custom styles for both light and dark modes.
- JavaScript: Logic for the random fact generation, slider update, confetti effects, and theme toggle.
You can run this project locally by following these steps:
-
Clone the repository:
git clone https://github.com/your-username/kick-off-facts.git
-
Open the project folder:
cd kick-off-facts -
Open
index.htmlin your browser: Simply double-clickindex.htmlor open it via your browser's "Open File" option.
To see the project in action, visit the https://skydiee.github.io/Kick-Off-Facts/
If you would like to contribute to this project, feel free to open an issue or submit a pull request.