It is not complete, I can't seem to change the font-weight of the h2 when clicked due to me copying the code from stackoverflow and didn't bother to know how it worked or even why. Please can someone help me with the issues above, thanks. And also feedback are appreciated.
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.
I cant seem to find a way to layer the "ready to build your community?" block on top of the footer tried to use positions with relating the block with the top element and even making it self a position relative and making the footer absolute when i think about i can use the pseudo elements before and after ill try that next time any suggestions would be great its just my 3rd week i have a lot to learn.
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.
Tried my hand on JS with full dedication, and also took the help of youtube, whenever I got Stuck. Any suggestion on how I can improve more and better will be helpful....
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!
this challenge was relatively easy to tackle , I tried to respect the spacings as much as I could, however I do have some areas of code that I'm unsure of, for example the way I centered the product card I would much appreciate some feedback on that.
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!
Hello ! This is my approach for the 'Four-Card-Feature-Section' challenge.If there are any things I could do to make my code 'cleaner' or if there are any other approaches to design structure , I would like to listen to your suggestions.
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.
I have a question. I couldn't figure out how to add a particular hover effect on the image. I need more assistance on that. If I can get resources on how to do that. Thanks.
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!
I am still learning about media queries, so any advice on that would be so welcome. Other problem I had was that some components would lay over others, I don't know why...
Hey!
A tip: you should look up "mobile first design" ( https://medium.com/@Vincentxia77/what-is-mobile-first-design-why-its-important-how-to-make-it-7d3cf2e29d00 ) . I noticed that the media query is for mobile (smaller resolutions) and the "normal css" is for the pc version. It's easier if you start mobile first and work your way up the resolutions.
I added a max-width of 350px to the .hero .text-section class for the big resolution. This makes it so that the text doesn't spread out all over the screen (on widescreen like I have). I also added the following media query to make the design more "fluent".
@media screen and (max-width: 900px) {
.mockup{
width: 500px;
}
}
Als to the mobile version I added the following code to the .hero class:
min-height: 600px;
and to the .header class:
min-height: 50px;
By giving a min-height to these classes you make it so they can't shrink below certain px, which means no overlap!
Hope this helps!
Made some necessary changes after reading some wonderful feedback.
Any more suggestions for improvements will be welcomed :)
Hey bro, looking good!
I noticed that the button didn't work, you can add it with the code below if you like. I noticed you'll run into an error eventually with this code. I think it's because some advice statements are actually > 95 characters long and it gives an error. I'm not 100% on that.
const diceBtn = document.querySelector(".dice-img");
diceBtn.addEventListener("click", async function() {
let adviceData = await generateAdvice();
theAdvice.textContent = `"${adviceData.advice}"`;
adviceNum.textContent = `Advice #${adviceData.id}`;
});