Frontend Mentor - Results summary component solution

This is a solution to the Results summary 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
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

• View the optimal layout for the interface depending on their device's screen size
• See hover and focus states for all interactive elements on the page
• Bonus: Use the local JSON data to dynamically populate the content

Screenshot

• Mobile

---

---

Links

• Solution URL: https://www.frontendmentor.io/solutions/results-summary-component-X6HrQwemxW
• Live Site URL: https://fm-results-summary-component-delta.vercel.app/

My process

Built with

• Semantic HTML5 markup
• Flexbox
• Mobile-first workflow
• SCSS - For styles
• JQuery - For Populate JSON data

What I learned

Using JQuery

• Intialize this first

$(document).ready(function () {
  // Your code here
});

• Select element

$(".cards"); // By class
$("#button"); // By id

• Fetching JSON Data

$.getJSON("yourData.json", function (result) {
  $.each(result, function (index, data) {
    console.log(data);
  });
});

• Chaining

const $card = $("<div>").addClass(`card ${data.category}`);
$card.append(
  $("<div>")
    .addClass("category")
    .append($("<img>").attr("src", data.icon).attr("alt", data.category))
    .append($("<span>").addClass(data.category).text(data.category))
);

Useful resources

• JQuery Cheat Sheet

Author

• Website - Syahrizal Ardana
• Frontend Mentor - @Gombeng