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
I need help with the getting the url to actually get shortened. I keep getting NETWORK ERROR, AXIOS ERROR, and similar errors in the console. I need your help to resolve these
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:48
Feel 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✨