Skip to content
OverviewSolutions
24
Comments
20
Lesley Kimutai
@Leskim

All comments

  • Lesley Kimutai•565
    @LeskimPosted about 1 year ago

    Kazi safi bro

    0
  • Lesley Kimutai•565
    @LeskimPosted over 1 year ago

    You can add the hover on the bars by adding a p tag with the amount while mapping out the data

     <div class=${ bar.day === dayName ? "activeday" : "bar"} 
         style="height:${bar.amount * 3}px"> </div>
         <p class="amount">$${bar.amount}</p>
         <p class="day"> ${bar.day} </p>

    then setting it to display when the bars are hovered using css

    .bar_items {
  position: relative;
}

.amount {
  position: absolute;
  top: -2.3rem;
  background-color: var(--Darkbrown);
  color: var(--Verypaleorange);
  padding: 0.5rem;
  font-size: 0.7rem;
  border-radius: 3px;
  display: none;
}

.bar:hover + .amount {
  display: block;
}
    Marked as helpful
    0
  • Lesley Kimutai•565
    @LeskimPosted over 1 year ago

    Hello, Kudos on completing the challenge👏🏾. To get the column2 and column3 to look like the design(move a bit from the top) you can use the transform property -- transform: translateY(20px) for column2 and about 40px for column3. I can see you tried it with margin-top.

    Marked as helpful
    0
  • Alt08•60
    @Alt08Submitted over 1 year ago

    I couldn't place the hover on the NFTimage.

    Suggestions on how to achieve it?

    NTF card with flexbox

    2
    Lesley Kimutai•565
    @LeskimPosted over 1 year ago

    @Alt08 Nice completing the challenge👏🏾. To add the hover effect you can add an empty div with a class of .view below your nft img then style the container__img section when the div is hovered. You can also add the eye image on hover too and center it as shown below. Hope this helps you out

     .container__img .view:hover  {
  background-color: var(--Cyan);
  background-image: url("../images/icon-view.svg");
  background-repeat: no-repeat;
  background-position: center;
  z-index: 1;
  opacity: 0.75;
}```
    1
  • Lesley Kimutai•565
    @LeskimPosted about 2 years ago

    Congrats on completing the challenge

    The main section should have a max-width property so that on larger screens it does not become too big as yours does coz you've set your width to 150vh which changes your width even when one brings up the developer tools due to height change ---stick to px/% for widths.

    Also setting an explicit height on the main height: 350px has made text overflow out of the first section --you can edit out this part and maybe reduce the padding a bit on the first section

    Finally fix your accessibility issues span tags should be inside h1, p tags -- not the other way around

    1
  • Lesley Kimutai•565
    @LeskimPosted about 2 years ago

    Nice work Kibiwot 👏🏾 ... Edit how the avatar img has been linked to the phone so that it shows up Also fix the accessibility issue for not labeling the radio input elements

    1
  • Lesley Kimutai•565
    @LeskimPosted about 2 years ago

    Nice work... try fixing the accessibility issue by changing the

    <div class="left-size">
 185 
<span> GB Left </span>
</div>

    to incorporate a h1 around 185 GB Left

    1
  • Lesley Kimutai•565
    @LeskimPosted about 2 years ago

    Hey ...Robert 👋🏾 awesome solution ...just that the body has different bg color + try fixi g the accessibility issues

    1
  • Lesley Kimutai•565
    @LeskimPosted about 2 years ago

    You can try fixing the accesibility issues and give a bit of padding to the bottom paragraph to get a bit of separation from the top one

    Marked as helpful
    2
  • Lesley Kimutai•565
    @LeskimPosted over 2 years ago

    👏🏾kudos on your first challenge 🍾. For your accessibility issues you can change the container div to a main tag and the attribution div to a footer. That will clear up the issues

    0
  • Olanrewaju Akinola•30
    @Olanrewaju-AkSubmitted over 2 years ago

    I found centering the qr code in the middle of the page very challenging even though I used flexbox. I will appreciate anyone who can review my code and point out what I have done wrong

    Qr-code-Component

    3
    Lesley Kimutai•565
    @LeskimPosted over 2 years ago

    Hey Akinola ... first removew the width:70vw on your body coz that's messing things for you. Then use one width percentage on the .container like your width:80% and set a max-width: 450px of a fixed value. This will enable you scrub off the @media queries you have.

    To center it you were there👏🏾 with margin:auto just add a bit of top margin margin: 5rem auto to get it from the top of the page.

    Hope this helps

    Marked as helpful
    0
  • Soojeong•220
    @kongguksuSubmitted over 2 years ago

    edited: I fixed the bug and now the codes are simplified!

    This is my first Frontend Mentor JS challenge. I'm learning JavaScript but I realized it's still quite challenging for me to adapt what I learned into actual project, even for a small one like this.

    I couldn't follow the DRY principle (Do not Repeat Yourself) and ended up writing a ton of codes that were repeated over and over again.

    Please let me know if there is a better way to fix this :)

    Interactive Rating Component

    3
    Lesley Kimutai•565
    @LeskimPosted over 2 years ago

    You could have given all the star a general class then select them all at once with QuerySelectorAll then use a for loop ora forEach to add the click event to all the stars then use classList toggle to add or remove the class star-clicked when the user clicks any of the stars

    So something like this would have simplified most of your repeated code : -

    
stars.forEach((star) => {
  star.addEventListener('click', function() {
    star.classList.toggle('star-clicked')
   // then dynamically get the starNum from the innerHTML of the star clicked
   starNum = star.innerHTML;
  })
})
    Marked as helpful
    1