84 lines
2.1 KiB
JavaScript
84 lines
2.1 KiB
JavaScript
//this class returns a list of cards to the DOM
|
|
//by mapping (looping) over an array
|
|
|
|
class IdeaList {
|
|
constructor() {
|
|
this._ideaListEl = document.querySelector('#idea-list');
|
|
this._ideas = [
|
|
{
|
|
id: 1,
|
|
text: 'Idea 1',
|
|
username: 'John',
|
|
date: '02/01/2023',
|
|
tag: 'Business',
|
|
},
|
|
{
|
|
id: 2,
|
|
text: 'Idea 2',
|
|
username: 'Jimmy',
|
|
date: '02/01/2023',
|
|
tag: 'Technology',
|
|
},
|
|
{
|
|
id: 3,
|
|
text: 'Idea 3',
|
|
username: 'Jill',
|
|
date: '02/01/2023',
|
|
tag: 'Fashion',
|
|
},
|
|
];
|
|
|
|
//adding a set (datatype)
|
|
this._validTags = new Set();
|
|
this._validTags.add('technology');
|
|
this._validTags.add('software');
|
|
this._validTags.add('business');
|
|
this._validTags.add('education');
|
|
this._validTags.add('health');
|
|
this._validTags.add('inventions');
|
|
}
|
|
|
|
getTagClass(tag) {
|
|
tag = tag.toLowerCase();
|
|
let tagClass = '';
|
|
//check if the tag that is passed in is within the set
|
|
if (this._validTags.has(tag)) {
|
|
tagClass = `tag-${tag}`;
|
|
} else {
|
|
tagClass = '';
|
|
}
|
|
return tagClass;
|
|
}
|
|
|
|
render() {
|
|
//use map on the array, creating a card for each item in the array and display
|
|
// them on the DOM
|
|
//map takes in a function as a parameter
|
|
|
|
this._ideaListEl.innerHTML = this._ideas
|
|
.map((idea) => {
|
|
//passing the tag entered for each item into the getTagClass function on each iteration of the map
|
|
const tagClass = this.getTagClass(idea.tag);
|
|
//it will be treated as an array of template strings
|
|
return `
|
|
|
|
<div class="card">
|
|
<button class="delete"><i class="fas fa-times"></i></button>
|
|
<h3>
|
|
${idea.text}
|
|
</h3>
|
|
<p class="tag ${tagClass}">${idea.tag.toUpperCase()}</p>
|
|
<p>
|
|
Posted on <span class="date">${idea.date}</span> by
|
|
<span class="author">${idea.username}</span>
|
|
</p>
|
|
</div>
|
|
|
|
`;
|
|
})
|
|
.join(''); //to turn it back in to a string
|
|
}
|
|
}
|
|
|
|
export default IdeaList;
|