Made with SASS partials, variables and mixins

Community feedback

• 

  Wellington Damasio•210

  @wellington-damasioPosted almost 2 years ago

  Hi Radek,

  First of all, congratulations for the styling. I saw a lot of beginners having overflow problems in their card components because of the use of fixed width.

  Anyway, there's two ways you could complete this challenge:

  1. DOM Manipulation: Updating the HTML of the card when user press the submit button.
  2. Building the 2 cards with HTML + CSS and hiding the "thank you" card behind the first card.

  I used the second approach because updating the DOM would require me to write different styles and HTML structures for the "thank you" card anyway.

  If you want to understand how it works here the code, I hope it's clean enough so that you can understand it: https://github.com/wellington-damasio/interactive-rating-component

  If you want to use DOM Manipulation what I recommend you to do is to write the second card in HTML + CSS, insert the variables of the ratings like you're already doing inside that card and then cut and paste this whole HTML in the JavaScript file.

  What you're going to do next is use the submit event (with the submit button) to replace the whole HTML structure inside the card with the HTML of the "thank you card you wrote".

  If you don't know how to exactly do it, serch for the innerHTML property and submit event on Google.

  You'll basically want to attach the submit event to the form in you're card to replace it's HTML with something like card.innerHTML = 'your html code here'

  For the rating buttons active state you'll just have to include a code that cleans all states before attaching a new active state.

  Something like

  rating.forEach((item) => {
      item.addEventListener('click', (event) => {
          let score = item.textContent;
          let feedback = document.createElement('p');
          item.classList.remove('rating__box--active');
          event.target.classList.add('rating__box--active)
          msg = `You selected ${score} out of 5`;
          feedback.textContent = msg;
          section.appendChild(feedback);
      })
  

  In the above code I used the event.target to update the selected button with the active state while removing the active state from the other buttons

  Again, congrats for the CSS styling, just trying the give your classes more meaningful names like 'card', 'card-header', and so.

  If you have any questions don't hesitate to ask me. Cheers!

  Marked as helpful

  1

  ---

  

  Radek•490

  @RadexmanPosted almost 2 years ago

  @wellington-damasio Thank you very much for such extensive feedback! I saw your solution, the use of radio buttons in the form is a phenomenal idea. I changed the code according to your hints and now it works fine. I still haven't been able to make it possible to press only one button, I'm wondering how to get such an effect without changing the whole component to one form with radio buttons. Anyway, thanks a lot for the extensive and helpful feedback.

  0