Skip to content
OverviewSolutions
10
Comments
8

Absorberend

@AbsorberendNL390 points

Currently studying to become a web2 frontend dev.

I’m currently learning...

React!

Latest solutions

View more solutions

Latest comments

  • Absorberend•390
    @Absorberend

    Hey man,

    I added to your code a little bit, this is what I came up with:

    /* added to the top of your JS file: */
const faqHeaders = document.querySelectorAll('.subhead');

/* inside the btn.addEventListener after e.preventDefault(): */

      faqHeaders.forEach(subhead => {
        subhead.style.fontWeight = "400"
      });
      e.target.style.fontWeight = "700";

... etc. etc.

    Basically what I did was I selected the current button you press on (e.target) and gave it a styling of 700. After that I selected all the subheaders (see faqHeaders) and right before the styling of e.target I made sure all the styling of all the subheaders is set back to 400. This to make sure only the selected subheader will have a bold font.

    PS: I think you're using a bit of outdated code here (with var) and maybe also some complicated functions. Try to use normal functions in this challenge and you'll be fine. I'd say keep it simple and if you get stuck during a project try to learn a bit more modern JS and come back (that's how I did it at least). StackOverflow is great and all, but only copy code if you understand it. Most of it is (imo) outdated code.

    Marked as helpful
  • Absorberend•390
    @Absorberend

    Hey man,

    I added the following code to your style.css file:

    (after the opening @media (max-width: 63.9375em) tag)

.main-plus {
  padding: 1em;
  position: relative;
  width: 550px;
  margin: 0 auto;
}

.main-plus-container {
  position: absolute;
  top: -50px;
}

(before the .main-plus .main-plus-container tag)

    I gave the main-plus-container class a position of absolute and its parent (main-plus) a position of relative. I made sure that the parent main-plus class is centered on the page and matched the width with the child main-plus-container class. The only thing left to do is to give the footer a little bit of top margin and you're good I think. I hope this helps!

    PS: I'm not sure if this is intended but your GitHub basically has all the files you're using to learn coding in one repository. Not sure if you want all of this open to the public. It's more common to have a repository for each project you're working on.

  • Absorberend•390
    @Absorberend

    Hey man,

    Looking good! You're doing great!

    I added a little bit of JavaScript to add a class to the rating you clicked to change its colors. This is what I came up with:

    ratingNo.forEach((e) => {
    e.addEventListener("click", () => {
         ratingTaken.innerHTML = e.innerHTML;

         ratingNo.forEach(rate => rate.classList.remove("rating_yes"));
         e.classList.add("rating_yes");    
    })
})

    I renamed the .rating_no:target CSS class to the following:

    .rating_yes {
    color: hsl(213, 20%, 22%);
    background-color:hsl(217, 12%, 63%) ; 
    cursor: pointer;
}

    Basically what this function does it adds the .rating_yes class to the rating you clicked. But right before that it checks and removes the .rating_yes class from all the other ratings so you wont have any duplicates.

    I hope this helps my man, keep it up!

    Marked as helpful
  • Absorberend•390
    @Absorberend

    Hey man, looking good!

    In terms of centering the product card I changed the following:

    body{
  background-color: hsl(30, 38%, 92%);
  margin: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

    I also noticed the mobile design wasn't working properly because of the media query, so I changed that to: @media (max-width: 600px)

    Basically what I did was I removed the margin on the body and gave the body 100% width and height 100vh instead. Just so the body covers the whole page (which is needed to center a div). After that I gave it the display of flex and made it so that the content would be centered vertically with align-items: center and horizontally with justify-content: center. I hope this helps!

    Marked as helpful
  • Absorberend•390
    @Absorberend

    My man! Looks good!

    One thing you might try is adding some more CSS to your 48em media query to give the feature-box'es some more room to expand/breath. They seem to get pretty cramped at this resolution size. Here is what I came up with:

    @media (max-width: 48em) {
  .container {
    padding: 0 2rem;
  }

  .feature-box {
    padding: 2.2rem;
  }

  .imgBx {
    margin-top: 2rem;
  }
}

    I think your code is really clean man, but in terms of readability I like to use pixels instead of "em" for my media queries so I instantly know what I'm looking at. But that might be personal preference. Also maybe add some comments in your CSS (just like you did in your media queries CSS file) to improve readability.

    Marked as helpful
  • Absorberend•390
    @Absorberend

    Hey man, looking good!

    To answer your question I added the following code:

    In your HTML file:

    (after the opening <main> tag)
        <div class="eth-img-wrapper">
            <img src="/images/image-equilibrium.jpg" alt="Diamond NFT Image" id="equilibrium">
            <div class="eth-hover">
                <img src="/images/icon-view.svg" />
            </div>
        </div>
(before the opening <article> tag)

    To your CSS:

    (after #equilibrium )

.eth-img-wrapper {
    position: relative;
}

.eth-hover {
    position: absolute;
    background-color: cyan;
    width: 100%;
    height: 100%;
    top: 0px;
    display: none;
    opacity: 0.5;
    justify-content: center;
    align-items: center;
}

#equilibrium:hover + .eth-hover{
    display: flex;
}

    So basically what I did was I added another <div> which is invisible on top of the NFT image. Both the NFT image and the new div are child elements of the new eth-img-wrapper element I created. I made the position of the new div element absolute and the wrapper element relative, just so the new <div> can overlap/sit on top of the NFT image and will match the position + resolution of the actual NFT image. Whenever you hover over the NFT image it will make the div visible again, and there you have it.

    Hope this helps!

    Marked as helpful
View more comments