delavegar25 / clean-room

Clean your room Project

Animation

In this project, i'm to create a delightful user experience.

Built a Checkbox button using css and javascript and added some aria attributes to make it seamless for the user.

The checkbox has three svgs which are:

• Not-completed icon.

• Loading icon.

• Completed icon.

  Used the Css pseduo-class to focus and hover on the button for seamless experience.

  Dived more on the css animation using the @keyframes spin and zoom-in-spin for both the loading and completed icon svgs, added the animation-name, animation-duration, animation-timing-function. The keyframes for the animation is to transition from one state to another, using the 0 deg to 360deg for the loading spinner icon and 270deg to 360deg for the completed icon.

  Manipulated the DOM with the javascript, adding the classList to add and remove the (css class 'hidden').

  Added the arialabel on the button to tell the user what is Marked as done or not, added the aria-hidden="true" to the svgs to not make it visible to the screen reader.