In this project, we'll create a toggle button that switches the website between dark and light modes, with a sliding animation for a more visually appealing transition. We'll use keyframe CSS queries to create the animation and JavaScript to change the background color dynamically. The user's preference will be stored using the browser's local storage, ensuring that their selection persists even if they refresh the page. This project will teach you advanced CSS techniques, JavaScript programming, and how to improve the user experience by storing data in the browser.
Continue your learning journey with these handpicked projects that share similar concepts and technologies
In this project, we create a rock, paper, and scissors game. The computer will also choose a random option, and the results will be displayed. You can win, lose, or tie. Scores are tracked at the bottom. We'll use HTML for structure, CSS for a modern look, and JavaScript to generate the computer's choice and compare the results. This game is an interactive way to test your luck and strategy against a computer opponent.
View project%202.webp?alt=media&token=7ffdb0b5-c934-43e2-a7a1-029e283cce6f)
In this project, you will learn how to build a testimonial slider using HTML, CSS and JavaScript. We use a timer to change the sliders automatically and also we have added a bountiful animation showing the slides.
View project
In this project, we're developing a recipe book application that features a variety of recipes obtained through a free recipe API. We need an API key to access this API. Each time the page is refreshed, a new set of recipes with distinct ingredients will be displayed. Additionally, a link is provided to access the recipe website.
View project