assignement colortoggleFrieda Haringsma Assignment: Color Toggle WincAcademy
live-preview: https://color-toggle-assignement.netlify.app/
With this assignment you will create your very first color toggle with JavaScript.
It will be a choice menu, which will change your background color of your webpage.
Have fun and good luck!
Requirements:
The minimum requirements that your project needs to meet:
As a user I can click on the hamburger icon and it will show me a menu of color choices.
Use an ul and li for the menu. Focus mostly on JavaScript(Minimum time for CSS) The next icon you will be using for the menu: Hamburger icon
As a user I am allowed to pick a color from the menu(The colors are described in the menu as text). Each item in the menu is a different color.
As a user I can only click on one color from of the menu.
When the color is clicked on the menu, the background of the webpage will change into the picked color.
After the color has been picked, the menu will close.
Bonus Requirements:
As a user I don't want the colors in the menu described in text. I want to see them also with their corresponding color. Each "row " has a different color.
As a user I want to click onto a radio button in the color menu, so I can see which color is "active" on that moment.
As a user I want to open the menu when I hover over the Hamburger icon with the mouse instead of clicking on it. The menu closes when the mouse is not hovering on the hamburger icon.
As a user I want to see the picked color name described into my webpage and it changes after changing color.
As a user I want to see the menu sliding in and out smoothly into the screen, instead of popping out suddenly.(Use CSS transition and the direction doesn't matter)
As a user I am able to change the color with the keyboard.(1 for home, 2 for red, 3 for orange, etc.) ⇒ ****Here you need new Event Type...