@rileydevdzn
Posted
Hi @Enis67
You did so many things well on this project, don’t give up!
You did a great job using semantic HTML elements including main and h1 👏, you recognized the rating options as a list (nicely done!), you’re following good practices resetting defaults, using global variables on the root, and keeping specificity low AND you’re employing Flexbox for responsiveness in your CSS, AND you recognized elements you needed to manipulate, you iterated through a list, AND used JavaScript to make your component interactive displaying a new message on clicking the submit button. That is a lot! 🙌
One of the most important skills a front-end developer needs is problem-solving. The ability to look at a problem, break it down into individual pieces and then put those pieces back together to create a solution. It is paramount to being a good developer, and that is exactly what you’re doing so keep it up! The tools and the frameworks and all the rest will come. And know that you are not alone, we all struggle with this. (The top photo in that article is exactly how I feel sometimes too)
Here are a few suggestions for your code:
In the html, if you scroll to the bottom you’ll see some commented out sections (Rating state end, thank-you state start/end) from the starter file. Think of these as hints toward one way of solving this.
In your code, you’re using a single card and dynamically updating the content items inside the card. This is one way to solve it. My suggestions are for another way to solve it, that you might find slightly easier when it comes to manipulating the JS.
Another way to do this is to create 2 separate divs for the card that we show at different times. At first, we’d see 1 div with the initial content (How did we do, ratings, submit button) - I’ll call that the ‘rating-div’. And after clicking the submit button, we’d see a 2nd div with the thank-you content (thanks message, image, you selected x of 5 rating), I’ll call that the ‘thankyou-div’. That’s what those commented-out sections in the starter file were alluding to.
-
See if you can create a new ‘thankyou-div’ in the “thank you state start/end” portion of the html file that includes all of the thank-you content. Essentially you’re creating two “faces” of the card that we’ll show to a user. Or if you want to think of them as 2 cards (like a card-flip), whatever works for you.
-
After you’ve created the thankyou-div, now we need to put this div on the page, where it takes up the exact same position and size as the rating-div. Essentially we’re stacking the thank-you div on top of the rating-div.
-
By creating a second thankyou-div, we can keep the content of this div static (creating it in HTML and styling in CSS so you can remove those content items from JS) instead of updating all of the content dynamically. (We do still have to update the ‘you selected x of 5’ later). And once we have the thankyou-div positioned (stacked on top of the rating div), now we need to figure out how to display this div.
Obviously we want to see the rating-div when we first load the page, so we need to make the thankyou-div invisible at first, and then show after a user clicks the submit button. We have 2 primary properties for visibility: display and visibility. We want to make sure the thankyou-div is invisible both visually and to screen readers so it doesn’t confuse anyone.
- Ok so we’ve got the thankyou-div create, positioned, and invisible at first. Now how do we show it? There are a number of ways to do this, but I’ll point you toward a JS tutorial that manipulates styling using CSS classes since it’s a pretty straightforward option.
I’m impressed with the solution you came up with and you’ve hit on all of the concepts you need in your code. The reason I’m suggesting this alternate approach is because it moves the content creation into HTML and styling into CSS so you’re not adding and styling elements from JS. You can add/style from JS and it works to do some things (like dynamic updates of a line), but for the majority of your content it’s better practice to keep the structure (HTML), style (CSS), and interactivity (JS) separate, also makes it easier to debug, update, and maintain in the long run.
I’ll stop there because this answer is already super long, but try that out. On that website you’ll also find tutorials for lots of other common tasks including manipulating elements (like iterating over elements - which you already did - and manipulating the HTML of an element). If you have any questions or want to go over the next steps, let me know. Coding is hard and you are doing awesome, so keep going! You've got this. 😊 🙌
Hope this helps and happy coding!
