Skip to content
OverviewSolutions
14
Comments
11
Nurcholis
@cholis04

All comments

  • Nurcholis•420
    @cholis04Posted over 2 years ago

    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
    1
  • Nurcholis•420
    @cholis04Posted over 2 years ago

    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
    0
  • Nurcholis•420
    @cholis04Posted over 2 years ago

    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
    0
  • Samuel•200
    @samupapatiSubmitted over 2 years ago

    when clicking on the button the sentence takes a second to load, is there a way to change the sentence immediately?

    advice generator using flex

    1
    Nurcholis•420
    @cholis04Posted over 2 years ago

    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
    1
  • Nurcholis•420
    @cholis04Posted over 2 years ago

    Good job ANIKET DUBEY

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

    1
  • Pon Huang•210
    @ponhuangSubmitted over 2 years ago

    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.

    Signup Form - SCSS

    1
    Nurcholis•420
    @cholis04Posted over 2 years ago

    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
    1
  • Ajay•50
    @Away87Submitted over 2 years ago

    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

    Responsive rating card using react

    2
    Nurcholis•420
    @cholis04Posted over 2 years ago

    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
    0
  • Nurcholis•420
    @cholis04Posted over 2 years ago

    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
    4
  • Prabhash Ranjan•2,540
    @besttlookkSubmitted over 2 years ago

    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:

    1. Just when we load the app for flicker of a second style does not apply. Why is that?[SOLVED]
    2. I want you make my dark mode perisistent, for that i tried to use Local-storage but then it started giving error "Prop 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

    REST Countries Using NextJS + Styled-componets + Axios - 3rd Version

    1
    Nurcholis•420
    @cholis04Posted over 2 years ago

    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

    2
  • Nurcholis•420
    @cholis04Posted almost 3 years ago

    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
    2
  • Nurcholis•420
    @cholis04Posted almost 3 years ago

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

    5