Skip to content
OverviewSolutions
24
Comments
20
Lesley Kimutai
@Leskim

All comments

  • Lesley Kimutai•565
    @Leskim

    Kazi safi bro

  • Lesley Kimutai•565
    @Leskim

    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
  • Lesley Kimutai•565
    @Leskim

    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
  • Lesley Kimutai•565
    @Leskim

    @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;
}```
  • Lesley Kimutai•565
    @Leskim

    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

  • Lesley Kimutai•565
    @Leskim

    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

  • Lesley Kimutai•565
    @Leskim

    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

  • Lesley Kimutai•565
    @Leskim

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

  • Lesley Kimutai•565
    @Leskim

    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
  • Lesley Kimutai•565
    @Leskim

    👏🏾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

  • Lesley Kimutai•565
    @Leskim

    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
  • Lesley Kimutai•565
    @Leskim

    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
  • Lesley Kimutai•565
    @Leskim

    used a setTimeout on my main.js to handle the background being the same for a while before it reverts back but on the second hover the percentage cannot be viewed. Any help on this ?? Thanks in advance

  • Lesley Kimutai•565
    @Leskim

    Hello ... nice work on the challenge just fix up the accessibility issues such as having a main in your html markup for the div class=main-card and giving alt text to your image

  • Lesley Kimutai•565
    @Leskim

    Hey ... solution looks good just go ahead and clear up the accessibility issues in your code like changing the block div to a main section

    Marked as helpful
  • Lesley Kimutai•565
    @Leskim

    Kudos 👏🏾 ... just add a bit of top and bottom margin on the .main-card seen so it doesn't stick to the top margin : 20px auto would work fine

    Marked as helpful
  • Lesley Kimutai•565
    @Leskim

    Nicely done 👏🏾.... just a bit of border-radius on the main section Also you haven't added the hover part on the image. Its in the design files

  • Lesley Kimutai•565
    @Leskim

    Nice 💯

    Kudos on your first challenge 💪🏽

    The h1's font-size is a bit small .... also this would be a good project to use blockquotes in your project. You can look into it here :- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote I also recommend adding a Readme file on your project

    From Kenya to the world 🇰🇪 🤜🏽

    Marked as helpful