custom properties CSS

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  Hi Jetyun, great work here, and great questions as well. I also completed this challenge recently, so I'm quite familiar with some of the hurdles involved here. Anyway, I don't know whether I can answer all these questions, but I'll try!

  1. The toggle button works fine for me when I click on the empty area to switch states, and I can't see anything in your CSS or JS that makes it dragable. It's also a checkbox, which means that its state is changed through clicking and that no matter where you click in the area, as long as clicking happens, the toggling should happen. I think the only two things I'd change here is the width of the div (maybe 300px), as things look super squished right now, and I'd also add cursor:pointer to the slider.

  2. I used 15px (or 0.9375 rem in my case) for the body text.

  3. Instead of using ::first-letter, can you try using a <span> tag for the dollar sign and then changing the font-size in the CSS with the span? That's what I did in my solution!

  4. Yes, the JS can be simplified! Just using what you have here instead of writing something new: Since you're using a conditional statement instead of an event listener, you can try using the checkbox state for evaluation instead of the three elements, where true means annual is checked, and false means monthly is checked. Instead of writing 6 lines of inline styles, you can try removing/adding a class on the parent of the 6 elements (in this case, I'd choose the grid as the parent element), and that class would change the styles. I haven't tested this, just basing on theory and past experience, so I do apologize if things get switched around, but anyway it looks like this:

     // JS
     
     const checkboxEl = document.querySelector("[type=checkbox]")
     const gridEl = document.querySelector(".grid")
     
     function changeprice(){
        if (checkboxEl.checked) {
           gridEl.classList.add("is-checked")
        } else {
           gridEl.classList.remove("is-checked")
        }
      }
     
     // CSS:
     
     .annual {
        display: none;
      }
     .is-checked .annual {
         display: inline-block;
     }
     .monthly {
        display: inline-block;
      }
     .is-checked .monthly {
         display: none;
     }
     

  5. I actually did it without any JS; it just involved a careful placement of where the input elements need to be in order for them to affect the styling of other selectors. Solution is here if you're interested!

  6. Yes, this is normal in my experience, and I've heard of experienced developers doing similar things, just with more complex tasks. It gets faster though once you get good with the problem solving!

  Marked as helpful

  0