@AndresLamarSubmitted 29 days ago
lazydroide
@lazydroideAll comments
- @lazydroidePosted 25 days ago
It works great and looks good. The handlers in the inputs in desktop view are a little annoying. You can remove them using <input type='text' inputmode='numeric' pattern='[0-9]+'> but this only validate integers. To validate float and get rid of the handler the best idea is use input type=text and then make the validation in js.
In any case, good job
0 - @f-avalosSubmitted 29 days agoWhat are you most proud of, and what would you do differently next time?
I feel satisfied with the result obtained, I have nothing I want to change for now.
What challenges did you encounter, and how did you overcome them?I had problems displaying the cards dynamically, when I changed time tracking type the script file would freeze, to fix this I used the document.createDocumentFragment() method, i.e. I generated an html element and inserted the cards, once Once that was done, I inserted said content only once, instead of entering new content each time a card was created.
@lazydroidePosted 28 days agoi like the animation it's a cool detail, and everything works and looks perfect. I don't see any problem in your js, maybe did you do it in a little bit "overcomplicated" way?. You could achieve the same result create the card-container in your index.html and then using innerHtml in your js to update its content: to remove the cards: card-container.innerHtml = ''; to insert each card: card-container.innerHtml += ´html code of the card`;
in any case, good job.
1 - @Hossein-H-ISubmitted 29 days ago@lazydroidePosted 29 days ago
I like your solution, using a custom "thankspage" seems to make everything simpler and cleaner. Good job.
0 - @IzykGitSubmitted 3 months ago@lazydroidePosted about 1 month ago
The layout looks good but the position of the context/modal menu or whatever they want call it it's not correct. The issue can be fixed using as relative reference not the button but the 'social-share' container. You can apply the size of the relative container to the context menu in small screen sizes and then make it visible by clicking the button.
0 - @AmneisaOBSubmitted about 1 month ago
- @thiagorodriguezdevSubmitted about 1 month agoWhat challenges did you encounter, and how did you overcome them?
Meu maior desafio foi nos cards, tentei usar grid mas nao obtive exito, consegui deixar igual o Figma usando flexbox
What specific areas of your project would you like help with?Gostaria de ajuda nos cards se tem algum jeito melhor de desenvolver
@lazydroidePosted about 1 month agoPretty good solution, you use semantic html, variables, mobile first, etc. Two small details to improve, your karma and calculator cards are in wrong position, and the colored part of the cards is not a border-top (they have no curvature). You can make them straights with a linear-gradient.
In any case, great job.
0 - @louahabi79Submitted about 1 month ago@lazydroidePosted about 1 month ago
Looks the same but smaller. You should use semantic HTML instead of divs, it would improve your code in a very easy way and since you use classes in your CSS code it would not be a problem for you.
0 - @Salima-LaidiSubmitted about 1 month ago@lazydroidePosted about 1 month ago
Looks good. To add something, your code would be easily improved by using semantic html instead of "divs". So the div “recipe-page” would be the main and the divs “preparation-time”, “ingredients”, “instructions”... would be sections. That makes the browser's job easier. It would also allow you to simplify your css code, for example in the media query using the selector “section” to apply the code that you repeat in five classes.
In any case, nice work.
0 - @cyber-mSubmitted about 1 month ago@lazydroidePosted about 1 month ago
I love your solution. I like how in CSS you define elements inside other elements and how you define variables based on the value of another variable. It makes the code easy to read and easy to maintain.
0 - @MufthSubmitted about 1 month ago@lazydroidePosted about 1 month ago
Hi Mufth. Pretty good although using flex to center the card on the screen would have made your life simpler than using position absolute
Best regards.
0 - @Prime127Submitted about 1 month agoWhat are you most proud of, and what would you do differently next time?
What I'm most proud of in this project is how effectively I applied Flexbox to center the QR code component and create a clean, responsive design. It was rewarding to see the layout adapt smoothly across different screen sizes while maintaining its visual integrity. If I were to approach this challenge again, I would focus more on improving accessibility, such as implementing ARIA labels and ensuring a better color contrast ratio for users with visual impairments. I would also explore using CSS Grid to see how it compares with Flexbox in terms of layout flexibility and responsiveness.
What challenges did you encounter, and how did you overcome them?One of the main challenges I encountered was getting the QR code component perfectly centered on the page across different screen sizes. Initially, the layout would shift slightly depending on the viewport dimensions, causing it to look unbalanced, especially on mobile devices. To overcome this, I applied Flexbox to the container and used justify-content and align-items properties to center the content both vertically and horizontally. I also added min-height: 100vh to ensure the container took up the full height of the viewport, which resolved the issue of shifting content. Another challenge was maintaining a clean, minimal design while ensuring readability and good contrast between text and background colors. I tweaked the font size and color choices, referring to accessibility guidelines, until I found a balance that worked well for both design and usability.
What specific areas of your project would you like help with?I would like help with the following specific areas of my project: Accessibility Enhancements: I want to improve the accessibility of the project, such as implementing ARIA roles and ensuring the color contrast ratios are optimal for all users, especially those with visual impairments. Responsive Design: While the layout works well on most devices, I'd appreciate guidance on refining the mobile responsiveness, particularly on very small screens, to make sure the design scales perfectly. Code Optimization: I’d like feedback on how I can refactor my CSS to be more efficient and maintainable. Specifically, I’m curious if there are better ways to handle layout and spacing across different screen sizes without duplicating code. Design Consistency: Suggestions on improving the visual design of the QR code component, particularly balancing the whitespace, would be helpful. I’m aiming for a clean, modern look, but I feel it could be refined further.
Any tips or resources on these aspects would be greatly appreciated!
@lazydroidePosted about 1 month agoHi Prime127, i'm going to try to review your challenge although I don't think I have knowledge enough to advise anybody XD. Improving accessibility: Instead use "divs" use semantic html (main, article, section, etc). A good way to make the CSS code more efficient and maintainable is using variables especially in more complex projects. Also putting your CSS code in a separate file would be useful. And finally the dimensions are a little off, didn't you use the figma file with the design information? Also you used Arial instead Outfit typography. Reviewing your project make me realize how many things I have done wrong in mine. Best regards.
Marked as helpful0
