Skip to content
OverviewSolutions
14
Comments
11
Nurcholis
@cholis04

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

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

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

    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:

    • Flash of unstyled content.

    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.

    • Theming with Styled-Components

    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.

    1. To improve accessibility, make sure you put your content inside the <main> tag.

    2. 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

  • Nurcholis•420
    @cholis04

    Hi @Jemi-code, excellent project work.

    However, I see some accessibility issues and HTML issues in the report.

    • Document should have one main landmark

    I guess you can replace from :

    <div class="body"></div>

    to :

    <main> </main>
    • When using the tag section, add heading (h2-h6) elements to identify headings to all sections.

    Hope this helps. Happy Coding

    Marked as helpful
  • Nurcholis•420
    @cholis04

    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 ✌️