Skip to content
OverviewSolutions
8
Comments
12

Mario Kreitz

@mariokreitzGermany290 points

Metal is not only my taste in music but also my job; Hobby baker and programmer; Passionate gamer; Dad of two sweet kittens

Latest solutions

View more solutions

Latest comments

  • Mario Kreitz•290
    @mariokreitzPosted 1 day ago

    well, while the desing is looking good so far :-D the functionality is completly missind duo to the missing import of your script.js at the bottom of you body <(^_^)>

    i did not test your code, but so far it looks okish? if you can, avoid global variables like your let billAmount = 0; let tipPercentage = 0; let numberOfPeople = 0;

    so far so good, keep going ;)

    0
  • Mario Kreitz•290
    @mariokreitzPosted 6 days ago

    alot of html code and less javascript

    the next time try to use more javascript and javascript-html-template, because your "stats__info" repeats 6 times so 6 times the same html code.

    try to google "js html template". write the html code 1 time in template literal in js and populate the data with the array map or forEach method =)

    (but interesting use of the eventListener and switch the styling)

    Marked as helpful
    0
  • Mario Kreitz•290
    @mariokreitzPosted 7 days ago

    nice html code :-D i realy like the

              <picture>
            <source srcset="assets/images/illustration-sign-up-desktop.svg" media="(min-width: 1440px)" width="400" height="593" />
            <img
            id="illustration-sign-up-mobile"
            src="assets/images/illustration-sign-up-mobile.svg"
              width="375"
              height="284"
              alt=""
            />
          </picture>

    thats very smart and i guess efficient?

    0
  • Mario Kreitz•290
    @mariokreitzPosted 5 months ago

    What I noticed: The HTML structure is missing semantic tags. Try adding elements like <header>, <main>, <footer>, <article>, etc. These will make your code more readable and help with accessibility too! Plus, it’s a good habit to get into for SEO and screen readers. 👍

    Right now, the structure is HTML-heavy, which can make things tricky to maintain. Since this challenge is focused on JavaScript, I’d suggest using JS templates or loading HTML directly via JavaScript. This will help modularize your code and make it more flexible if you need to update things later. It also brings in more JavaScript, which is the main goal here!

    For the share menu, make sure it toggles open and close with the same button click—it’s a small thing but really smooths out the user experience.

    Since this is a JS-focused challenge, go heavier on JavaScript by dynamically loading HTML templates. This will reduce hardcoded HTML and get you closer to that JS-centric approach.

    0
  • Mario Kreitz•290
    @mariokreitzPosted 8 months ago

    Hi Sunvic (@Sunvic567),

    Thanks for your work on the project! The layout is heading in the right direction, but there are a few areas that need attention:

    Colors: It looks like the color scheme doesn’t quite match the design. You might want to try using a tool like ImageColorPicker, which allows you to upload screenshots and pick out colors from them. This can help ensure your colors align with the project specifications.

    Image Size: The image appears to be too large, which affects the balance of the layout. You might want to try setting a fixed width with an auto height for the image. Additionally, using CSS properties like object-fit can help maintain the image’s aspect ratio and fit properly within its container.

    ( ͡° ͜ʖ ͡°)⌐■-■

    Overall, it seems like some of the basics are in place, but the project isn’t fully aligned with the design requirements yet. Keep practicing, and don’t hesitate to revisit the project brief to ensure everything matches up!

    Marked as helpful
    1
  • Mario Kreitz•290
    @mariokreitzPosted 8 months ago

    Hi LFMachuca (@LFMachuca),

    Wonderfully done on the "Blog Preview Card" project! You’ve nailed the design, and it looks great overall. I do have a few suggestions to make your code even better:

    Flex on Body Tag: While using display: flex on the body tag can be effective, it’s generally best to avoid it. The body tag is a global container and applying flex here can sometimes lead to unexpected behavior, especially when scaling or adding more content later on. It's usually better to use a wrapper div inside the body for flex layouts.

    Class with margin: auto: The margin: auto property is unnecessary here because the element is already centered using flexbox. Remember, margin: auto works best when the element’s container has a defined max-width and isn’t already using flexbox.

    Margin on Card Class: The margin property in the card class is also unnecessary, as it has no parent element that it can interact with. Flexbox is already handling the alignment.

    Despite these small points, your class naming is excellent, and your use of HTML tags is on point. You might want to consider replacing the h2 with an h1, especially since it’s the only heading in the card—it’s a good practice to start with h1!

    (͡° ͜ʖ ͡°)

    Overall, fantastic work. Keep up the great coding!

    Marked as helpful
    0
View more comments