Skip to content
OverviewSolutions
58
Comments
13

Lucas Cerri

@llKryptonixllGermany1,160 points

Hey I am Lucas Cerri and I am trying to improve my frontend skills here.

I’m currently learning...

React JS.

Latest solutions

View more solutions

Latest comments

  • Yousef Attia•310
    @Deeperr0
    What are you most proud of, and what would you do differently next time?

    I learned how to deal with cookies in JavaScript. I would add more comments next time

    What challenges did you encounter, and how did you overcome them?

    I had a problem with storing the cookies in a way that would be easily accessible and iterable. In the end decided to stick with a JSON object

    What specific areas of your project would you like help with?

    I would really appreciate some feedback regarding the clarity of my code and how can I write cleaner and more optimized code as in my opinion thats as clean and optimized as it can get.

    Responsive product list with cart

    1
    Lucas Cerri•1,160
    @llKryptonixll

    First of all great work. I saw that you wrote :

    <img
    src="${
			screenWidth > 768
				? product.image.desktop
				: screenWidth > 375
				? product.image.tablet
				: product.image.mobile
	}"
    alt="${product.name}"
    class="product-image"
/>

    You dont need javascript to do it so leave the ternary and write it like this:

    <picture>
    <source srcset={desktop} media="(min-width: 1024px)" />
    <source srcset={tablet} media="(min-width: 768px)" />
    <img src={mobile} alt={name} />
</picture>

    `

    `

    Marked as helpful
  • Lucas Cerri•1,160
    @llKryptonixll

    Hey nice work, but I would also call the function after the page has loaded, so that a random advice can be seen after the page has loaded and not an empty area. window.addEventListener("load", getAdvice); Or just call the function without the load event.

    The HTML looks very good but i would replace:

<div class="dice">
    <img src="./images/icon-dice.svg" alt="">
</div>

with:

<button aria-label="Get random advice button">
    <img src="images/icon-dice.svg" alt="Dice Icon">
</button>

This is better for screenreaders and accessibility
    Marked as helpful
  • Lucas Cerri•1,160
    @llKryptonixll

    Hey great work it looks good. To remove the unwanted horizontal scrollbar you can add margin: 0 to your body but for larger projects you might want to use a css reset. I also saw that your img has an empty alt attribute you should add one for accessibility and seo purposes.

  • Lucas Cerri•1,160
    @llKryptonixll

    Hey it looks very good and if you want the color you can use the chrome extension color picker and take any colors from the web. Here the color: #FF527A

    Marked as helpful
  • Lucas Cerri•1,160
    @llKryptonixll

    Hey great work , did you see the accessibility report? Your anchors are: <a href="#"> but you should add a discernible text. So if you are using icons as an anchor obviously there is no discernible text but for this we have aria-label attributes and with them you can add an discernible text. For example if you have an facebook icon and you are using it in an anchor tag you can write it like: <a aria-label="our facebook page" href="#">

  • Lucas Cerri•1,160
    @llKryptonixll

    no problem i did not see the code but it works now nice

View more comments