Skip to content
OverviewSolutions
14
Comments
11

Nurcholis

@cholis04420 points

I love graphic design and am passionate about coding.

I’m currently learning...

Web Development

Latest solutions

View more solutions

Latest comments

  • Nurcholis•420
    @cholis04

    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
  • Nurcholis•420
    @cholis04

    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
  • Nurcholis•420
    @cholis04

    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
  • Nurcholis•420
    @cholis04

    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
  • Nurcholis•420
    @cholis04

    Good job ANIKET DUBEY

    However, to increase the accessibility of your page, wrap the main content with <main> tag.

  • Nurcholis•420
    @cholis04

    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
View more comments