Frontend-Mentor-E-commerce-product-page HTML CSS JS

Community feedback

• 

  Miroslav•180

  @miroslavdurinPosted over 2 years ago

  Toggle menu icon is working on a second click because you are checking "left" property of a DOM element you named menuBurger inside of inline-styles, but you've set that property inside of a class ".nav" (main.css on line 899). You can write something like this:

  menuBurger.addEventListener("click", function(){
      if (window.getComputedStyle(navBar).left < "0px"){
          navBar.style.left= "0";
          cross.style.display = "block";
          appearOverlay();  
      }else{
          navBar.style.left= "-100%";
          disappearOverlay ();
      }
  })
  

  or

  menuBurger.addEventListener("click", function(){
      if (navBar.getBoundingClientRect().x < 0){
          navBar.style.left= "0";
          cross.style.display = "block";
          appearOverlay();  
      }else{
          navBar.style.left= "-100%";
          disappearOverlay ();
      }
  })
  

  Both of those solutions work fine, but using too much of inline-styled properties is a bad practice. We usually use classes for that kind of job. I would suggest that you check some of the popular Udemy courses or maybe some YouTube videos to see how it's done.

  Marked as helpful

  1

  ---

  

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  @miroslavdurin Thanks a lot , I'll take your suggestions on board.

  0
• 

  Adarsh•1,640

  @adram3l3chPosted almost 3 years ago

  HI, this one looks great.

  toggle menu issue

  element.style is used to set or get inline style. you cant get external css styles with element.style.

  svg

  You cant directly set fill on svg , you have to select the path inside svg and set fill on that svg path { fill : #a5d5ef}

  Marked as helpful

  0
• 

  Soe Wai Yan Aung•410

  @soewaiyanagPosted almost 3 years ago

  So you want to change fill on hover right? I solve it by creating SVG as a react component. Here is my submitting. But you can solve it with pure CSS too. If you are using vs-code copy the codes inside SVG. And paste it in HTML and treat it as an HTML element. Give it a className and also remove its inline fill attribute(must remove otherwise CSS won't work). Now you can modify fill with CSS.

  Marked as helpful

  0
• 

  GrischK•140

  @GrischKPosted over 2 years ago

  Very good job !!!

  0