@khushi0433
Latest solutions
recipe-page-main
#sass/scss#angularSubmitted 12 months agoI’m struggling with implementing accessibility, particularly in correctly using ARIA tags. I’d appreciate guidance on how to properly apply them to ensure my project is accessible to all users.
Latest comments
- @mariokreitz
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 ;)
Marked as helpful - @cole319@mariokreitz
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 - P@emawid@mariokreitz
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?
- @Harri254@mariokreitz
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.
- @Sunvic567@mariokreitz
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 - @LFMachuca@mariokreitz
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
