completing the project
What challenges did you encounter, and how did you overcome them?well creating the independent function
What specific areas of your project would you like help with?an advice would do
Hey @TheBeyonder616. Great job completing the challenge
Here's a few tips to make your project better Improve Accessibility: Wrap each FAQ question in a <button> element instead of just using <h2>. This will enhance accessibility, making it easier for users to navigate with a keyboard.
Simplify Image Handling: Instead of switching between two image sources using JavaScript, you can manage the display of the plus and minus icons with CSS classes. This will simplify your code and make it more maintainable.
Avoid Repetitive Code: Consider combining the updateImageSrc and toggleFAQ logic into a single function. This will reduce code repetition and make your script more efficient.
Use Event Delegation: Rather than attaching an event listener to each individual FAQ, add a single event listener to a parent element. This way, it can handle clicks on all FAQs, simplifying your code.
Enhance Readability: Rename your variables for better clarity. For example, instead of faqAnswers, use answers. Clearer variable names make your code easier to understand and maintain.
When I have two different html pages how do I handle JavaScript files? I use main.js for index.html and using html script elements for the other html pages.
Hey @matt2282, great job on completing the challenge! 🎉 There are a couple of things that could make your solution even better:
HTML Structure: It might be simpler to have all the HTML in one file. This way, everything is in one place, making it easier to manage and update.
Modal Display: For the thank you modal, you can set its styles to display: none by default, and then use JavaScript to change it to display: block when it's time to show it. At the same time, you could hide the rating container with display: none when the thank you modal is displayed. This would make the transition smoother and more intuitive.
Deployment: I recommend deploying your project using Vercel or Netlify. GitHub Pages can sometimes be unstable, and right now, I'm unable to view your solution because of it.
What do you think? 😊
When I have two different html pages how do I handle JavaScript files? I use main.js for index.html and using html script elements for the other html pages.
Hey @matt2282, great job on completing the challenge! 🎉 There are a couple of things that could make your solution even better:
HTML Structure: It might be simpler to have all the HTML in one file. This way, everything is in one place, making it easier to manage and update.
Modal Display: For the thank you modal, you can set its styles to display: none by default, and then use JavaScript to change it to display: block when it's time to show it. At the same time, you could hide the rating container with display: none when the thank you modal is displayed. This would make the transition smoother and more intuitive.
Deployment: I recommend deploying your project using Vercel or Netlify. GitHub Pages can sometimes be unstable, and right now, I'm unable to view your solution because of it.
What do you think? 😊
Hey @Ajztyles,
Congratulations on completing the challenge! 🎉
I noticed that the hero image isn't displaying. After checking your code, it looks like you didn't upload the assets folder that contains the image. This could be the reason why the hero image is missing.
If you're having trouble uploading folders, you can use either GitHub desktop, or VSCode's source control to create a repository and upload it to GitHub. This way, you can ensure that all your project files, including the assets folder, are correctly uploaded.
Here are some video tutorials that might be helpful:
watch this from 2:48Feel free to ask any questions if you need further assistance. Good luck on your coding journey!
Best regards,
This challenge is hard to complete since it involves in Java Script and positioning the elements is hard.
Congratulations @Gogul11 on completing the challenge. You did well with your solution.
Here's a few things you can do to make it even better
body which is the parent of the main.display: grid;
align-items: center;
min-height: 100dvh;
Use classes instead of ID's for most elements. CSS classes offer a way to efficiently manage styles and create a more modular and organized CSS code. A class can be used by many elements. Whereas an ID must be unique on a page, like a name tag.
For the text above the inputs, use <label></label>. This helps with accessibility. Screen readers need will announce the text inside of the label letting the user know the input content.
Congrats again on completing the challenge. Happy coding ✨
Congratulations @Ethanneece on completing the challenge. You're solution looks good. A few adjustments would make it even better.
I have only one suggestion. Properly center the main. You can do so by wrapping it with another div, and then declaring
display: grid;
place-items: center;
min-height: 100dvh;
and it should be fixed. hope this helps.
Happy coding✨
In this project I tried to do some different things, such as using font-face in the css, avoiding Google Fonts and also using nested styles.
I felt good about creating error validation for my form.
What challenges did you encounter, and how did you overcome them?I had a little trouble finding a regex to validate the email.
Then I saw that I did the structure of my main container wrong, I had to make a compromise to separate the section in the desktop version. I create a class tks and adjust the size of the container in the success message.
I felt that my css is not very organized.
Hey @tufcoder. Great work you did there. I'm really digging that validation, I love how you handled it.
Here's one thing I think you can do to make your work even better.
Consider changing the min-width in your media-query to about 55rem. The reason behind this is that, on screens smaller than 1440px (small laptops and tablets), what would be presented to them is the mobile view of the site. I noticed this because my screen width is less than 1440px.
Other than what I've mentioned above, I think your work is great. Keep up the wonderful work.
Happy coding✨
In this project I tried to do some different things, such as using font-face in the css, avoiding Google Fonts and also using nested styles.
I felt good about creating error validation for my form.
What challenges did you encounter, and how did you overcome them?I had a little trouble finding a regex to validate the email.
Then I saw that I did the structure of my main container wrong, I had to make a compromise to separate the section in the desktop version. I create a class tks and adjust the size of the container in the success message.
I felt that my css is not very organized.
Hey @tufcoder. Great work you did there. I'm really digging that validation, I love how you handled it.
Here's one thing I think you can do to make your work even better.
Consider changing the min-width in your media-query to about 55rem. The reason behind this is that, on screens smaller than 1440px (small laptops and tablets), what would be presented to them is the mobile view of the site. I noticed this because my screen width is less than 1440px.
Other than what I've mentioned above, I think your work is great. Keep up the wonderful work.
Happy coding✨
im proud that I was able to successfully buld the share component and also making it interactive and reponsive, next time I would like to make the js more efficient.
What challenges did you encounter, and how did you overcome them?Had some problems with manipulating the share components but after googling I was able to learn some manipulation in css dont neccessary apply in js. ex - in css we can say : .classname { display: "hidden" /to hide a certain element/}
but in js the "hidden" attribute doesnt work and took almost an hour to figure it out.
instead i use the "none" attribute like this : status.style.display = "none"
What specific areas of your project would you like help with?I would like to know if there was effiecient way to make the share component interactive. Thanks for the help!
Hi @Natty-tech,
Congratulations on successfully completing the challenge! 🥳 Your effort is truly commendable. I believe that incorporating a bit more padding around the furnituredetail section would enhance its overall aesthetic appeal. Additionally, it might be beneficial to position the attribution class outside of the furnituredetail element to maintain the integrity of the layout.
Another suggestion for improvement could be to consider utilizing a button for the share image. This adjustment would enhance the accessibility of toggling the sharebar feature, making it more user-friendly.
I hope these tweaks elevate the quality of your project.
.
What challenges did you encounter, and how did you overcome them?.
What specific areas of your project would you like help with?Still responsiveness @media
Hi @mellingh, your solution looks amazing! I especially love how closely it matches the design. Great job🥳🙌!!!
I noticed the links are in separate divs. Using an unordered list <ul> might be a cleaner way to structure navigation elements, as it's specifically designed for that purpose.
it may look something like this
<ul class="social-links">
<li class="link-item"><a href="#">Github</a></li>
<li class="link-item"><a href="#">Frontend Mentor</a></li>
<li class="link-item"><a href="#">LinkedIn</a></li>
<li class="link-item"><a href="#">Tweeter</a></li>
<li class="link-item"><a href="#">Instagram</a></li>
</ul>
Also, I saw you didn't include box-sizing: border-box in your reset. It can be helpful for element sizing because it includes padding and borders in the total size. Would you like to know more about it?
Overall, fantastic work! Every project helps us learn and grow as developers. I recorded my solution on YouTube too : KimDoesCode Maybe we can check each other's work out sometime and learn from each other?
Have a wonderful day and happy coding! ✨
Hi there @Mod12d, I just checked the GitHub repository for the code and I received a 404 error saying that the page doesn't exist. It's difficult to provide feedback without the code. Let me know when you upload the files
i am glad i was able to complete the challenge and now will be able to move on to the next one
What challenges did you encounter, and how did you overcome them?css units was difficult to determine but overcome it through trial by error
What specific areas of your project would you like help with?javascript in further projects
Hi @AbdulquddusMuhammad, I just checked the github repo for the code and the only thing I found was the readme file. It'll be easier to provide you with feedback if the files are uploaded
