Skip to content
OverviewSolutions
37
Comments
12

Florian Stăncioiu

@florianstancioiuRomania740 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

I’m currently learning...

JavaScript, React, Redux Toolkit, Vue 3, Pinia, TypeScript

Latest solutions

View more solutions

Latest comments

  • mihai3636•270
    @mihai3636
    What are you most proud of, and what would you do differently next time?

    I integrated the spacing and font size system with scss and I am pretty happy about it. Besides, it's the first whole page which I did after a pretty long time.

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

    That ordered list counter was pretty tricky and I did not get it right straight away. I learned about the way css counter works and managed to create my custom counter.

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

    Any tip is greatly appreciated! Check out my scss, please!

    Recipe page with custom css counter and scss

    #sass/scss
    1
    Florian Stăncioiu•740
    @florianstancioiu

    Hi, good job for finishing this challenge!

    As I glace across the HTML and SCSS files, there's two things I see you can improve in the next projects. Firstly, don't use <hr/> (or <br/>) tags to draw lines (or add space) to your HTML pages, you can use CSS to do that, for example: you can use border-bottom (or margin-bottom).

    The second thing to improve is to use a modern CSS reset file from the internet instead of writing one yourself.

  • Florian Stăncioiu•740
    @florianstancioiu

    I managed to get the Storybook published on Chromatic.

  • Florian Stăncioiu•740
    @florianstancioiu

    I updated my solution so that a new advice would load on mouse click.

    The reason why the click seemed to not trigger a HTTP request was because of HTTP caching, I had to cache bust every fetch request. The click was triggering a request, except the data from that request was always the same because of caching...

  • Florian Stăncioiu•740
    @florianstancioiu

    Hi Laura,

    Here is my advice on the eye section of the challenge:

    You can overwrite the existing .overlay div with this HTML structure:

    <div class="overlay-wrapper">
<div class="overlay"></div>
<img class="icon" src="" alt="Eye Icon" />
</div>

    Don't keep the eye icon inside the .overlay div because the opacity property affects every single child element. Use the z-index property to get the .icon in front of the .overlay.

    Note: The z-index property only works if there's a position property on the element as well.

    Here is some advice that will help you write better CSS code overall:

    • Install prettier in Visual Studio Code (I asume you use vscode). Follow a youtube tutorial if you can't get the hang of it with the written text, prettier is a must have for a beginner.

    • Use rem instead of px, here is a video about it. And here is how to use rem in a nutshell: you set the font-size of the html tag to 62.5% which makes 1rem equal to 10px for all child elements

    html { font-size: 62.5%; } 
body { font-size: 1.4rem; } /* =14px */
h1   { font-size: 2.4rem; } /* =24px */
    • Instead of doing this in CSS:
    * {
margin: 0;
padding: 0;
box-sizing: border-box;
}

    Use a modern CSS reset like this one here.

    Marked as helpful
  • Florian Stăncioiu•740
    @florianstancioiu

    Well done, the new design looks fantastic!

    Great work, I'm speechless!

  • Florian Stăncioiu•740
    @florianstancioiu

    Hi Mubaraq,

    Here are some tips to make your code more readable.

    • First off, install prettier for vscode (I'm assuming you use Visual Studio Code, if not, please install prettier for your text editor of choice). https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

    • Secondly, try to separate the JavaScript logic in different files (You can create a slider.js for the slider and a cart.js file for the cart), writting all JS code inside one giant file is a big mistake and should be avoided.

    • Thirdly, writting HTML strings directly to DOM is prone to security exploits like XSS. You can aleviate this by using <template></template> tags or by using a template engine. Here are some resources on using the template tag: https://javascript.info/template-element , https://www.w3schools.com/tags/tag_template.asp

    (Don't lose too much sleep over the third tip)

    Now let's address your issues:

    1. Updating the total cost price- I get a nan on the total cost price of the product

    The reason why you get NaN is because the string starts with a $, and that turns into NaN. The simplest solution is to remove the $ character using productPrice.substring(1).

    // If the product is not in the cart, add it as a new cart item
const cartItem = {
  // ...
  totalPrice: Number(productPrice.substring(1)) * Number(productCount),
};
    1. Deleting a product from the cart - the remove button doesn't seem to be triggered. Was working fine before

    The reason why it didn't work is because the click event is targeting the image element, and the image element doesnt have the .remove-button class, so we have to look for the nearest/closest element with that class.

    To fix it, replace this line:

    if (event.target.classList.contains('remove-button')) {
  // ...
}

    with

    if (event.target.closest('.remove-button')) {
  // ...
  // And comment this function call bellow, otherwise you will get an error:
  // updateCartTotalPrice()
}

    As a last note, don't create functions inside event handlers, create the functions in the global scope. Also, don't create event listeners inside event listeners.

    // BAD
addToCartButton.addEventListener('click', () => {
  function updateCartItemCount() {}
  function updateCartItem(cartItem) {}
  function updateCartTotalPrice() {}

  cartIcon.addEventListener('click', () => {});
});

    // GOOD
addToCartButton.addEventListener('click', () => {});

function updateCartItemCount() {}
function updateCartItem(cartItem) {}
function updateCartTotalPrice() {}

cartIcon.addEventListener('click', () => {});

    I think you will still face some issues after tweaking the code using my advice, especially with the cart. Please don't take my advice the wrong way, I'm only trying to help you out. I hope this will help you a bit in your journey, keep on coding!

    Florian

    Marked as helpful
View more comments