just9krish/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 :)

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
• Author

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

• Solution URL: Click here
• Live Site URL: Click here

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

• Linkedin - @rvamit2648
• Instagram - @Just9krish
• Frontend Mentor - @Just9krish