Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions21Comments11

All comments

  • lieneil• 560

    @NJVS

    Posted

    Hi Emmanuel, congrats on completing the challenge!

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

    0
  • Reckson Zirsangzela Khiangte• 180

    @Saga-sanga

    Submitted

    Finally finished up this project using CSS grid and flexbox. I used a lot of CSS selectors in this practice project. I also learnt how to use pseudo classes such as :not() and practiced mobile first design. My main question:

    • How do I change the svg color on hover? I tried using fill but it doesn't work for this specific SVG file.

    Responsive Landing page with Navigation

    1

    lieneil• 560

    @NJVS

    Posted

    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
  • Caleb Sim• 410

    @CodeLamp168

    Submitted

    Been a while since I used javascript, so the script feels needlessly complex for something as simple as a click event.

    Would love some tips on how to deal with javascript in this situation.

    Had to configure the answers' class in the css to absolute and push them far away from the entire body so I could animate a transition instead of a sloppy display block reveal. If any alternatives to this solution, I would love to know.

    FAQ Accordion Javascript CSS and Basic HTML

    1

    lieneil• 560

    @NJVS

    Posted

    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

    @NJVS

    Posted

    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
  • Abdul rehman• 650

    @abymani

    Submitted

    Setting navigational menu was difficult for me . I think my javascript code is not optimal it does work but there must be a way to do it better. any suggestions will be appreciated.

    Intro section with dropdown navigation

    3

    lieneil• 560

    @NJVS

    Posted

    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
  • Victor Paumier• 140

    @lifeaddikt

    Submitted

    Any feedbacks would be welcome !

    I had some difficulties on the dropdown menu i have used position:fixed.... it would be better to use position : absolute i guess... but i didn't have a parent item to do it properly.

    I also add difficulties on the desktop on sharing the main content in 2 sections that are well responsive. I'm steel learning flex-basis, flex-shrink and grow... Im not clear with everything.

    Thank's :)

    Responsive dropdown Menu using HTML SCSS JS

    #sass/scss#accessibility

    1

    lieneil• 560

    @NJVS

    Posted

    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
  • lieneil• 560

    @NJVS

    Posted

    Congrats, your solution looks really good. But there's a small problem, the dropdown menu is still clickable even though its not visible, I suggest to add css property visibility: hidden/visibility: visible on dropdown menus because opacity only makes the element transparent.

    Marked as helpful

    0
  • Snehamoy Bag• 600

    @snehamoybag

    Submitted

    This is my second time uploading this challenge. I've managed to add some transition effect to the accordion using the element.style.maxHeight = element.scrollHeight + "px" , but this effect only works when the accordion opens..but doesn't work when its closing. I'll be super grateful if anybody can teach me how to do it. 🙇🏾‍♂️

    Update : made the javascript cleaner and added a little bit of transition effect using the opacity property

    FAQ accordion card with Javascript

    1

    lieneil• 560

    @NJVS

    Posted

    Hi, CSS display property cannot be animated. You can just set max-height: 0 on your .faq-acc-answer and do the element.scrollHeight, then element.removeAttribute("style") to remove the element.style.maxHeight. I just submit my solution, you can check it if you want <3

    Marked as helpful

    0
  • lieneil• 560

    @NJVS

    Posted

    I suggest to use CSS Grid, Its easier this way <3. A Complete Guide to Grid

    0
  • lieneil• 560

    @NJVS

    Posted

    Try to use <input type="radio"> instead of <button>. With this you'll only need one event listener, instead of the numberContainer and check which button triggers the click event. GOOD LUCK <3

    0
  • lieneil• 560

    @NJVS

    Posted

    I suggest to use <picture> element for responsive images, this changed my life LOL

    https://web.dev/learn/design/picture-element/

    0