-
Notifications
You must be signed in to change notification settings - Fork 3.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Create Toy App #16
base: master
Are you sure you want to change the base?
Create Toy App #16
Conversation
App is able to fetch toys from backend API. We can also add new toys to our backend as well as update the likes.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Awesome work!
const createHTMLElement = (tag, className, textContent, src, id) => { | ||
const element = document.createElement(tag) | ||
if(className) element.className = className | ||
if(textContent) element.textContent = textContent | ||
if(src) element.src = src | ||
if(id) element.id = id | ||
return element | ||
} | ||
|
||
const renderToyCard = (toy) => { | ||
const div = createHTMLElement('div', 'card') | ||
div.appendChild(createHTMLElement('h2', null, toy.name)) | ||
div.appendChild(createHTMLElement('img', 'toy-avatar', null,toy.image)) | ||
div.appendChild(createHTMLElement('p', null, `${toy.likes} Likes`)) | ||
const button = createHTMLElement('button', 'like-btn', `Like ❤️`, null, `${toy.id}`) | ||
button.style.cursor = 'pointer' | ||
button.addEventListener('click', handlePATCHLikes) | ||
div.appendChild(button) | ||
toyCollection.appendChild(div) | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I appreciate the idea, but it's certainly confusing. Contrary to the saying, sometimes more is less. Sacrificing readability to make something shorter is always a tough dilemma, but I think in this case being more explicit is the way to go. But again, I love the creativity.
e.target[0].value = '' | ||
e.target[1].value = '' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
e.target[0].value = '' | |
e.target[1].value = '' | |
e.target.reset() |
}) | ||
.then(res => res.json()) | ||
.then(data => updateLikes(data, event)) | ||
.catch(handleError) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice!
App is able to fetch toys from backend API. We can also add new toys to our backend as well as update the likes.