Design comparison
SolutionDesign
Solution retrospective
Updated:
- Automatically fetch data and create boxes
- Recode html.css *Recode style.css
Community feedback
- @msunjiPosted over 2 years ago
Great job solving this challenge! 👍
About your question, you need to iterate over
data
. You can use themap()
method to go over each element in thedata
array. My solution might require reworking your HTML and CSS a bit, but here's what you could try out:- In
index.html
, make adiv
that contains all the cards. You will be modifying the content of thisdiv
in yourapp.js
withinnerHTML
. - In
app.js
, you'll want tomap()
through your data and save the results to a variable. After which,join()
the results and then set the variable as the innerHTML.
Here's what mapping through your data would look like:
let markup = data.map((category) => { let { title, timeframes } = category; // You can use object destructuring here // Use template strings below so you can set the category title (Work, Play, etc) and the timeframes as well. return ` <div class="card"> <h2 class="card__title">${title}</h2> // you can type out the rest of your code for your card </h2> ` }).join(''); cards.innerHTML = markup;
You can refactor things further and make a function so you don't have to keep rewriting the
map()
part for each timeframe.It's a bit of a long suggestion, but I hope it helps!
Marked as helpful0 - In
- @mark-escosuraPosted over 2 years ago
Nice work 😁 If u want to get your component to the center of the web page u should use
body { display:flex; flex-direction:column; justify-content: center; align-items:center; }
1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord