/Interactive-rating-component

A interative rating component, where you can rate the service which are give by organization for improvment. It is build with Html, Css and Javascript. Hope you like it :)

Primary LanguageCSS

Table of contents

Overview

The challenge

Users should be able to:

  • View the optimal layout for the site depending on their device's screen size
  • See hover states for all interactive elements on the page

Screenshot

Links

My process

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • Mobile-first workflow
  • CSS animation
  • Javascript
  • Javascript ES6

What I learned

Making the card to rotate in 180deg on click with transform to card.

.card,
.card__back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.back__card {
    display: flex;
    align-items: center;
    transform: rotateY(180deg);
}
submit.addEventListener("click", () => {
  // console.log('heloow')
  if (selected) {
    inner.style.transform = `rotateY(180deg)`;
  } else {
    alert("Plese give rating first!");
  }
});

Author