Frontend Mentor - Interactive rating component solution

This is a solution to the Interactive rating component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

The challenge

Users should be able to:

• View the optimal layout for the app depending on their device's screen size
• See hover states for all interactive elements on the page
• Select and submit a number rating
• See the "Thank you" card state after submitting a rating

Screenshot

Links

• Solution URL: https://github.com/miranlegin/fem-interactive-rating-component
• Live Site URL: https://frontend-mentor-challenge19.netlify.app/

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• CSS Grid
• Mobile-first workflow
• Vue.js - JS framework

What I learned

After watching some tutorial on Vue.js online i've decided to give it a go on this project and see how it goes. This project was small enough to setup and everything went smoothly from installation forward.

Didn't want to start to ambitious and have hiccups along the way so i first started to markup the HTML from design and applied some basic CSS styling just to get going. Next step was to install Vue.js and i've used their CDN to not make things more complicated than it should be. After that i've brainstorm on how to approach Javascript part and minutes later i've had my first draft.

Coming from Vanilla JS i've added more logic than was necessary and later need to downgrade a bit. Overall experience was quite enjoyable and am looking forward to future challenges.

HTML markup was pretty straightforward and only needed to update original markup on couple of places

---

Transition wrapper around cards

<Transition name="slide-up" mode="out-in">...</Transition>

If-else logic

<div v-if="!voted" class="card rating"></div>

<div v-else class="card thank-you"></div>

v-model for handling checked radio buttons

<input type="radio" value="1" v-model="pick" />

v-on:click or @click for listening on click event and running a method

<button class="submit" v-on:click="submitRating">Submit</button>

---

Because of adding custom Transition name [slide-up] it was necessary to reference it in CSS also

.slide-up-enter-active,
.slide-up-leave-active {
  transition: all 0.75s cubic-bezier(0.35, 0, 0.55, 1);
}

---

In just a couple of rows I was able to setup Javascript logic thanks to Vue.js internal mechanism

voted: false,
pick: 0,

submitRating() {
  if (this.pick > 0) {
    this.voted = true;
  }
},

Continued development

I'm looking forward to use Vue.js on other challenges and i'm definitely confident to take it up a notch.

Useful resources

• Vue.js Crash Course on Youtube - This is the tutorial from which all started.
• Vue.js docs - Helped me to figure out logic behind Vue.js transitions
• Easings for transitions - Like always there are more than enough transitions to get started
• Simple CSS clamp generator - For basic need perfect solution

Author

• Frontend Mentor - @miranlegin