All comments

• 

  Younes Adjoudj•240

  @younesadjoudjSubmitted about 1 year ago

  Hi guys! I'm so exiceted, this my first solution with JavaScript. What do you think of my solution? Any feedback is welcome.

  Below is the JS code:

  let primaryScreen = document.querySelector(".screen-primary");
  let thankYouScreen = document.querySelector(".screen-thank-you");
  let rate = document.querySelectorAll(".rate");
  let rateSelected = document.querySelector('.rate-selected');
  
  let lastClickedRate = null;
  
  rate.forEach((div) => {
      div.addEventListener('click', function() {
          if (lastClickedRate) {
              lastClickedRate.style.backgroundColor = 'hsl(217, 10%, 35%)'; // Restore the initial style of the last clicked div
              lastClickedRate.style.color = "hsl(217, 12%, 63%)";
          }
  
          this.style.backgroundColor = 'hsl(25, 97%, 53%)'; // Change the style of the currently clicked div
          this.style.color = "#fff";
          lastClickedRate = this; // Updates reference to last clicked div
  
          rateSelected.textContent = div.dataset.value; // save the data value of the selected rate
      }); 
  });
  
  btn.addEventListener("click", () => {
      primaryScreen.style.display = "none"; 
      thankYouScreen.style.display = "initial";
  } );
  

  

  Interactive rating component main

  1

  40
  

  Younes Adjoudj•240

  @younesadjoudjPosted about 1 year ago

  JS code Updated:

  let primaryScreen = document.querySelector(".screen-primary");
  let thankYouScreen = document.querySelector(".screen-thank-you");
  let rate = document.querySelectorAll(".rate");
  let rateSelected = document.querySelector('.rate-selected');
  
  let lastClickedRate = null;
  rateSelected.textContent = "";
  
  rate.forEach((div) => {
      div.addEventListener('click', function() {
          if (lastClickedRate) {
              lastClickedRate.style.backgroundColor = 'hsl(217, 10%, 35%)'; // Restore the initial style of the last clicked div
              lastClickedRate.style.color = "hsl(217, 12%, 63%)";
          }
  
          this.style.backgroundColor = 'hsl(25, 97%, 53%)'; // Change the style of the currently clicked div
          this.style.color = "#fff";
          lastClickedRate = this; // Updates reference to last clicked div
  
          rateSelected.textContent = div.dataset.value; // save the data value of the selected rate
      }); 
  });
  
  btn.addEventListener("click", (e) => {
      e.preventDefault();
      if(rateSelected.textContent == "") {
          window.alert("Please choose an option and try again");
      } else {
          primaryScreen.style.display = "none"; 
          thankYouScreen.style.display = "initial";    
      }
  } );
  

  0
• 

  Ajayfrizzy•60

  @AjayfrizzySubmitted over 1 year ago

  I encounter some difficulty on the responsiveness and some other little error like some tag I'm not suppose to use but I was able to scale through and I feel I can work on media query at least 70% for now

  

  Responsive landing page using CSS

  1

  20
  

  Younes Adjoudj•240

  @younesadjoudjPosted over 1 year ago

  @Ajayfrizzy Great job! I think better to styling with a mobile-first approach.

  0

  This comment has received 3 repliesShow
• 

  BekstersLab•40

  @BekstersLabSubmitted over 1 year ago

  I had an issue creating the spacing between the sale/full prices and the cart icon/button text. I tried adding a right-margin using the following pseudo-elements:

           <div class="prices">
              <p>
                <span class="sale-price">$149.99</span>
                <span class="full-price">$169.99</span>
              </p>
            </div>
  

  .sale-price::after {
    margin-right: 20px;
  }
  

  The only fix I could come up with was to add multiple non-breaking spaces to my html file. The pseudo-elements work fine if I add content, just not with adding margins or padding.

  Googling came up with the solution to apply display:block to the parent element. I tried adding this to all classes for container elements all the way up to, but not including, main but this made no difference.

  Any help on resolving this issue would be greatly appreciated as I'm not happy with using non-breaking spaces and it bothers me that I don't understand why the pseudo-elements are behaving this way.

  

  Responsive Product Card Using Flexbox

  1

  20
  

  Younes Adjoudj•240

  @younesadjoudjPosted over 1 year ago

  @BekstersLab Hi! Very nice work. For the spacing between sale/full prices, try a display: flex on the parent element, and add a gap css property (for exemple: gap: 2rem;). And don't forget to align the items on the secondary axis so that the full price is positioned in the middele.

  .prices p {
      display: flex;
      align-items: center;
      gap: 2rem;
  }
  

  1