Article preview Component

Solution retrospective
Being able to use Javascript no matter how little. I was very happy when I was able to figure out the solution. Oh! the silly me could not stop giggling.
What challenges did you encounter, and how did you overcome them?You know, I was confused. Where did all the things I read from the theory go? It is such an easy challenge, and I should have been able to figure out the solution right away, but that certainly did not happen. In the end, it was a lot of trial and error. Ok, try this? Did not work, try more.
What specific areas of your project would you like help with?Please check out my JavaScript, as this little elf is still new on this journey to learn his JavaScript magic!
Please log in to post a comment
Log in with GitHubCommunity feedback
- P@huyphan2210
Hi, @Taresta,
I’ve reviewed your solution and your question about JavaScript. I’d like to share some thoughts:
Your code contains quite a bit of duplication, which can be reduced by using a reusable function. Let’s call it
updateVisibility
.Here’s a refactored version of your code:
const footerContainer = document.querySelector('.footer-container'); const avatarContainer = document.querySelector('.avatar-container'); const shareContainer = document.querySelector('.share-container'); const shareButton = document.getElementById('share'); // Utility function to update visibility based on screen size and button state const updateVisibility = () => { const isMobile = window.innerWidth < 768; const isClicked = shareButton.classList.contains('clicked'); avatarContainer.classList.toggle('hidden', isMobile && isClicked); shareContainer.classList.toggle('hidden', !(isClicked)); footerContainer.classList.toggle('dark', isMobile && isClicked); }; // Initially hide the share container // I recommend adding the "hidden" class directly in your HTML to avoid this line. shareContainer.classList.add('hidden'); // Handle share button click shareButton.addEventListener('click', (e) => { e.currentTarget.classList.toggle('clicked'); updateVisibility(); }); // Handle window resize window.addEventListener('resize', updateVisibility);
Improvements Made:
- Created
updateVisibility
Function:
- Centralizes the logic for updating visibility based on screen size and button state.
- Reduces code duplication between the
click
andresize
handlers.
- Simplified Conditional Logic:
- Used
classList.toggle()
with its second argument to conditionally add/remove classes. - Removed unnecessary
if...else
blocks for better clarity.
- Renamed Variables for Clarity:
- Changed
share
toshareButton
for better readability.
Hope this helps!
Marked as helpful - Created
Join 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