Skip to content
OverviewSolutions
21
Comments
11

lieneil

@NJVS560 points

Hi there! I'm Neil, welcome to my profile.

Latest solutions

View more solutions

Latest comments

  • lieneil•560
    @NJVSPosted about 2 years ago

    Hi Emmanuel, congrats on completing the challenge!

    I just want to ask, where can i download the emoji you're using? Thanks ^_^

    0
  • lieneil•560
    @NJVSPosted over 2 years ago

    Hi, about your question. The color of the arrow svg is in the stroke, so instead of fill, just use the stroke property to change its color. But I've noticed that you embed your svgs using the img tag. As far as I know, the easiest way to alter svg icons' color on hover is to just use inline svg.

    Heres an article about ways to embed svg on html

    Marked as helpful
    0
  • lieneil•560
    @NJVSPosted over 2 years ago

    Hi Caleb, what I've done is initially set a max-height: 0 to the p.answer, you can't animate a transition if you just set max-height to auto, so i use javascript property scrollHeight to get it's fully expanded height.

    //style.css
.answer {
  max-height: 0;
}

//script.js
button.addEventListener('click', function(){
  const answer= target.closest('div.faq-container').querySelector('p.answer');
  answer.style.maxHeight = `${answer.scrollHeight}px`
}
    Marked as helpful
    0
  • lieneil•560
    @NJVSPosted over 2 years ago

    Great work completing this challenge. I have a little suggestion, you can use <input type="radio"> instead of <button> on your ratings. By doing this, you will only need one click event, just for the <button class="btn__submit" id="submit">. ^_^

    Marked as helpful
    1
  • lieneil•560
    @NJVSPosted over 2 years ago

    Hi, Abdul. Congrats for completing the challenge.

    Regarding your dropdowns, I've notice that the <li id="features"> and <li id="company"> has the same click event. You can just assign a identical class name for your dropdown like this <li class="dropdown"> then select both of them in javascript then run a forEach() method then add click event(thats a lot of "then" LOL). Also, instead of toggling class for sub-menu, <a> and <i class="fa-solid">, I suggest to just toggle a class on their parent element.

    const dropdowns = document.querySelectorAll("li.dropdown");

dropdowns.forEach(dropdown => {
  dropdown.addEventListener("click", function(event) {
    event.currentTarget.classList.toggle("active");
  });
});

    .dropdown.active > a {
  font-weight: 700;
}
.dropdown.active > a i.fa-solid {
  transform: rotate(180deg);
}
.dropdown.active > .sub-menu {
  display: block;
}
    Marked as helpful
    1
  • lieneil•560
    @NJVSPosted over 2 years ago

    Great work completing this challenge.

    Regarding your dropdown menu, I think you can better position your <ul class="dropdown"> by moving your dropdown inside the <li class="nav__site-links__dropdown-links">.

    <li class="nav__site-links__dropdown-links">
  <a href="#">Features</a>
  <ul class="dropdown features>
    <li>...</li>
    <li>...</li>
    <li>...</li>
  </ul>
</li>

    .nav__site-links__dropdown-links  {
  position: relative;

  .dropdown {
    position: absolute;
    top: 120%;

    &.features {
      right: 0;
    }
    &.company{
      left: 0;
    }
  }
}
    Marked as helpful
    1
View more comments