Looking to hire developers?
@cholis04
@emersonmelomartins
Submitted
The most invalid attributes its because of custom components created with styled-components to do or not some design.
I really don't know if should i ask here, but how do i avoid those html issues?
@cholis04
Posted
Hi Emerson Melo Martins,
When you pass custom props to a style component, you need to add a prefix ($) to the props name to prevent the props from being an invalid attribute on the DOM.
export function PrimaryCard(...) {
return (
<CardContainer $type={type}>
...
...
<CardFooter $color={footerColor}>
...
</CardFooter>
</CardContainer>
);
}
interface IPrimaryCardFooterProps {
$color: PrimaryCardFooterColorType;
}
export const CardFooter = styled.footer<IPrimaryCardFooterProps>`
position: relative;
color: ${(props) => props.theme[CARD_FOOTER_COLORS[props.$color]]};
display: flex;
align-items: center;
gap: 0.5rem;
`;
Transient props reference here
To improve accessibility, you can add a label to the tag <input type="checkbox" aria-label="Toggle theme" />
Marked as helpful
@Cachilox
Submitted
I had a problem with putting the hover effect on the social network icons, I would need some advice on how to do it.
@cholis04
Posted
Hi Mariano Alvarez, congrats on your work.
It's a bit tricky to make the svg change color when hovered. I guess you can remove the img tag and replace it with the svg tag itself.
<div class="footer__social">
...
<a href="#" class="footer__media">
<svg class="footer__icon" ...>
<path .../>
</svg>
</a>
...
</div>
then you can select the path in sass to change the fill color.
footer__media:hover {
& > svg > path {
fill: hsl(176, 68%, 64%);
}
}
}
And if I may add, make sure the img tag has the alt attribute, but if the image is used for decoration, use the empty alt value <img src="..." alt="" />
To use the <section> tag you must include the heading tag inside the <h1> - <h6>. If you want to wrap an element, use the meaningless <div> tag
<div class="footer__container container">
<figure class="footer__picture">
<img src="./images/logo.svg" class="footer__img">
</figure>
<div class="footer__links">
<a href="#" class="footer__link">FAQs</a>
<a href="#" class="footer__link two">Contact Us</a>
<a href="#" class="footer__link">Privacy Policy</a>
<a href="#" class="footer__link four">Press Kit</a>
<a href="#" class="footer__link">Install Guide</a>
</div>
</div>
<div class="brands container">
<img src="./images/logo-google.png" class="brands__item">
<img src="./images/logo-ibm.png" class="brands__item">
<img src="./images/logo-microsoft.png" class="brands__item">
<img src="./images/logo-hp.png" class="brands__item">
<img src="./images/logo-vector-graphics.png" class="brands__item">
</div>
You can do the same with other tags.
And lastly, I don't see the background as it is in the design, try to add it.
Marked as helpful
@hectorjbd
Submitted
It was difficult for me to place two div next to each other. I didn't know which one to use: grid or flex
@cholis04
Posted
Hi Hector Brito, You did a good job!
Flex can be used for alignment on one axis, horizontally or vertically. But Grid can do alignment on both, vertical and horizontal.
And to improve accessibility you should wrap the main content with the <main> tag.
Marked as helpful
@samupapati
Submitted
when clicking on the button the sentence takes a second to load, is there a way to change the sentence immediately?
@cholis04
Posted
Hi Samuel,
The advice sentence is taken from the API and it takes a few seconds to load depending on the internet connection speed. You can provide a load state while the data is fetching.
And if I may add, there are a few problems listed :
1. Buttons must have discernible text
To improve accessibility, each button should have visible text. However, if you are using an image in the button and there is no text listed, you can add the aria-label attribute to the button :
<button id="buttonGerar" aria-label="Generate Advice"><img src="./assets/images/icon-dice.svg"></button>
2. Images must have alternate text
For images intended for decoration, add an alt attribute with an empty value.
<img id="divider" src="./assets/images/pattern-divider-desktop.svg" alt="">
<img src="./assets/images/icon-dice.svg" alt="">
3. Document should have one main landmark
Make sure you wrap the main content with the <main> tag.
<main>
<div class="container">
...
</div>
</main>
4. Page should contain a level-one heading
And lastly, each page must have one <h1> tag. In this case, you can replace the <p id="advice">Advice #117</p> tag with <h1 id="advice"> Advice #117</h1>
Hope this helps you, and happy coding
Marked as helpful
@Aniket1026
Submitted
@cholis04
Posted
Good job ANIKET DUBEY
However, to increase the accessibility of your page, wrap the main content with <main> tag.
@ponhuang
Submitted
I am a newbie in JavaScript, this form validation is quite hard for me now. I was learning via YouTube video. However, here is one problem I have in JavaScript.
The error icon and error message only shows up the first input, and I guess is the querySeletor only pick up the first element class. But if I use querySelectorAll, it is going to be an array, and it won't work as well. In this case, how can we make it work? Is there any better way to write this code?
For designing part, there is one part I want to optimize. How to make the error icon to align center with placeholder? I use flexbox and align-items to center, but it is not working. If you know how to fix it, please let me know. Appreciate for advance.
@cholis04
Posted
Hi Pon Huang. Great job on this challenge!
Looks like you're having a little trouble in this challenge. Let's take a look at the problem you're having:
- Error icon and message appear only on first input
All icons and error messages have the same class name. So you need to tell the browser specifically which icon and error message is given the class name 'hidden'
You can select the icon and error message based on the input element itself :
const invalidateElement = (element) => {
const currentElement = element;
const errorIcon = currentElement.nextElementSibling;
const errorMessage = currentElement.parentElement.nextElementSibling;
currentElement.classList.add('invalid');
errorIcon.classList.remove('hidden');
errorMessage.classList.remove('hidden');
};
You can do the same for your reset element function. So you don't have to select icons and error messages by document, you can delete the previous code :
const errorMessage = document.querySelector(".error-message"); // remove this line
const errorIcon = document.querySelector(".error-icon"); //remove this line
- Error icon not center align
You should remove the margin-bottom property on the input tag.
input {
display: block;
width: 100%;
height: 5.6rem;
/* margin-bottom: 0.6rem; Remove this line */
padding-left: 2.5rem;
font-family: inherit;
border: 1px solid $color-grayish-blue;
border-radius: 5px;
}
Maybe a little suggestion, you should give the margin-top and margin-bottom properties with the value 1rem in your error message.
Hopefully can help. Happy coding
Marked as helpful
@Away87
Submitted
The texts are actually elevated up a bit. It messes with centering. If you look closely in the rating icons, you can notice the text is not centered correctly. I found that it is being caused due to the font-family. Anyone know the Issue ? Other Feedbacks are appreciated. Thank you in advance
@cholis04
Posted
Congratulations on your work.
I guess you can assign value to justify-content to space-between so that the spacing between buttons is equal and fills the wrapper on the form.
export const RatingIcons = styled.form`
display: flex;
justify-content: space-between; // Replace space-evenly
margin-bottom: 1em;
`
Marked as helpful
@ognwan
Submitted
Any feedback will be appreciated. Thanks
@cholis04
Posted
Hi Gerald Nwa Ekezie,
I see you give a border when the button hovers. So, it would help if you gave the button a transparent border. This keeps your element's height from extending
.cars button{
...
/* New Transparent Border */
border:1px solid transparent;
...
}
.cars button:hover{
...
color: white;
border: solid 1px white;
}
#happycoding
Marked as helpful
@besttlookk
Submitted
Hi everyone, This is my 3rd version of this challenge. Earlier one i made using (React + Tailwind) & (Vanilla Js + Sass). For this one i went for NextJS + Styled-components as i wannted to learn both. As it is first few project Next and Styled-component, i am facing some issues which i am pointing out:
className did not match.".I also want to know whats the best file-structure for styled-component files.
If you get any other bug, do let me know. Feedback is always welcome.
Thanks #happyCoding
@cholis04
Posted
This is it, you've done it. Good work.
As you requested, I will try to help you to review your solution.
Let's start with the problem you described above:
I guess it's because the behavior of styled components towards SSR is different.
We need to inject the server-side rendered styles into the <head>.
To do that, you can create a .babelrc file in the root folder, then copy the following code.
Then in the file _document.js, You can also copy the following code.
For more details, you can read from the documentation directly here.
To be honest, I'm also new to learning about implementing themes in styled-components. But I found a good article about this. Maybe you can follow the implementation.
If I may add, there seems to be some problem with the report.
To improve accessibility, make sure you put your content inside the <main> tag.
Heading levels should only increase by one. Example :
<h1>Setting the Exposure Manually on a Camera</h1>
<p>Put text here...</p>
<h2>Set the ISO</h2>
<p>Put text here...</p>
<h2>Choose an aperture</h2>
<p>Put text here...</p>
<h2>Choose a shutter speed</h2>
<p>Put text here...</p>
https://dequeuniversity.com/rules/axe/4.3/heading-order?application=axeAPI
Hope this helps. #happyCoding
@Jemi-code
Submitted
@cholis04
Posted
Hi @Jemi-code, excellent project work.
However, I see some accessibility issues and HTML issues in the report.
I guess you can replace from :
<div class="body"></div>
to :
<main> </main>
Hope this helps. Happy Coding
Marked as helpful
@sirargill
Submitted
I did not get the way to add the bluish color on the image. Pls do suggest ways to add that.
@cholis04
Posted
Hi Ujjwal Singh 👋,
Adding color to an image can be done by adding a background color to the parent element, then mix-blend mode on the image element in it. And reduce the opacity to make it look the same as the design. I think it works pretty well.
Here is the code:
.card-thumbnail {
background-color: hsl(277, 64%, 61%);
}
.card-thumbnail > img {
mix-blend-mode: multiply;
filter: opacity(75%);
}
Hope this helps ✌️