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
OverviewSolutions24Comments20

All comments

  • Lesley Kimutai• 565

    @Leskim

    Posted

    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

    @Leskim

    Posted

    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

    @Alt08

    Submitted

    I couldn't place the hover on the NFTimage.

    Suggestions on how to achieve it?

    NTF card with flexbox

    #accessibility#animation

    2

    Lesley Kimutai• 565

    @Leskim

    Posted

    @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

    @Leskim

    Posted

    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

    @Leskim

    Posted

    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

    @Leskim

    Posted

    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

    @Leskim

    Posted

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

    1
  • Lesley Kimutai• 565

    @Leskim

    Posted

    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

    @Leskim

    Posted

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

    Submitted

    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

    @Leskim

    Posted

    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

    @kongguksu

    Submitted

    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

    @Leskim

    Posted

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

    @Leskim

    Posted

    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

    0
  • Lesley Kimutai• 565

    @Leskim

    Posted

    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

    1
  • Lesley Kimutai• 565

    @Leskim

    Posted

    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

    1
  • Lesley Kimutai• 565

    @Leskim

    Posted

    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

    1
  • Lesley Kimutai• 565

    @Leskim

    Posted

    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

    0
  • Lesley Kimutai• 565

    @Leskim

    Posted

    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

    0
  • dominiquemc• 90

    @dominiquemc

    Submitted

    This one was a bit on the challenging side but great practice. I would love any comments on what I could have added or did differently. Thank you!

    Social Proof Challenge

    1

    Lesley Kimutai• 565

    @Leskim

    Posted

    Hi Dominique ..... Rather than using a margin-top for the the buyer-irene and buyer-anne you could have used the transform translateY property to get the required outcome so that the div itself drops a bit and its height property remains as it was.

    Marked as helpful

    1
  • Lesley Kimutai• 565

    @Leskim

    Posted

    Your frame div should have two divs in it : one for the content and another to take the image:- display flex on the frame will display the two divs in a row, on mobile change the flex-direction of the frame to column and that does it ...N/B column-reverse so that the image goes on top

    The frame div align-contents center will center your two divs ...add a margin top and auto the left and right so the div can respond with differnt layouts :-

    Hoping this will help remedy your issue

    Marked as helpful

    0