Frontend Mentor - Interactive pricing component solution

This is a solution to the Interactive pricing component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects wherein we are tested on our ability to convert observations into code.

Overview

The challenge

Users should be able to:

View the optimal layout for the app depending on their device's screen size (recommended sizes: 375px and 1440px)
See hover states for all interactive elements on the page
Use the slider and toggle to see prices for different page view numbers

Links

Solution URL: Git repo
Live Site URL: Interactive pricing component by Shreyansh Agarwal

My process

Built with

Semantic HTML5 markup
CSS custom properties
Flexbox
CSS Grid
Bootstrap-5
Javascript ES6
Mobile-first workflow

What I learned

This challaenge was pretty good on manipulation of inputs which are dynamic in nature, have non-uniform step sizes and toggling logically to display different values. It was a great combination of javascript's functionality and advanced CSS manipulation. It also required to manipulate CSS properties using JS's logic (slider's color). I learnt alot more about positioning of elements, DOM manipulation and controlling CSS using JS.

<span class="toggle_switch form-check form-switch form-check-inline">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault" oninput="toggle()">
</span>

.sliding{
    -webkit-appearance: none;
    width: 100%;
    height: 7px;
    background: linear-gradient(to right, hsl(174, 77%, 80%) 0%, hsl(174, 77%, 80%) 50%, hsl(224, 65%, 95%) 50%, hsl(224, 65%, 95%) 100%);
    border-radius: 15px;
    outline: none;
    opacity: 0.8;
}
.sliding::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 100%;
    background-image: url("images/icon-slider.svg");
    background-repeat:no-repeat;
    background-clip: content-box;
    background-position: 50%;
    background-size: 20px;
    background-color:hsl(174, 86%, 45%);
    filter: drop-shadow(0 0 0.5rem hsl(174, 86%, 45%));
    cursor: pointer;
  }

  .sliding::-webkit-slider-thumb:hover{
      background-color: hsl(174, 79%, 38%);
  }

document.getElementById("slider").oninput = function(){
    $('.page_val').html(netVal(this.value).pageview)
    $('.pricing').html(netVal(this.value).price)

    var value = (this.value-this.min)/(this.max-this.min)*100
    this.style.background = 'linear-gradient(to right, hsl(174, 77%, 80%) 0%, hsl(174, 77%, 80%) ' + value + '%, hsl(224, 65%, 95%) ' + value + '%, hsl(224, 65%, 95%) 100%)'
}

Useful resources

Bootstrap - Bootstrap's components come very handy while positioning; adding custom styles to them is easier than creating an element from raw HTML and then adding same styles. Bootstrap's grid system also works pretty well when working with responsive columns.
HTML DOM input range - Article that helped to manipulate input tag.
Customising thumb of slider - Stackoverflow's solution to customise the webkit-slider-thumb using jQuery

ShreyanshIITK20 / Interactive-pricing-component

Frontend Mentor - Interactive pricing component solution

Table of contents