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.
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
- Mobile
- Solution URL: https://www.frontendmentor.io/solutions/results-summary-component-X6HrQwemxW
- Live Site URL: https://fm-results-summary-component-delta.vercel.app/
- Semantic HTML5 markup
- Flexbox
- Mobile-first workflow
- SCSS - For styles
- JQuery - For Populate JSON data
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))
);
- Website - Syahrizal Ardana
- Frontend Mentor - @Gombeng