Proud and I admit it : I'm falling in love with the elegance of JavaScript.
What challenges did you encounter, and how did you overcome them?I have to check versions of chart.js and I have some improvements to make later.
What specific areas of your project would you like help with?Any comments are welcome, as usual.
Great 👏
Could you also make it dynamic? For instance, it should highlight the current day (e.g., if today is Monday, it highlights Monday in blue). It's not a big deal, but it will help refresh your understanding of JavaScript's Date concept.
Good luck
Great job 👏
You could also practice toggling prices without using javascript by CSS like this:
.card .basic::after{
content: '19.99';
}
.card .professional::after{
content: '24.99';
}
.card .master::after{
content: '39.99' ;
}
main:has(.toggle-input:checked) .card .basic::after {
content: '199.99'
}
main:has(.toggle-input:checked) .card .professional::after{
content: '249.99';
}
main:has(.toggle-input:checked) .card .master::after{
content: '399.99';
}
Good luck
Sass/scss FlexBox and grid Position reltive and absolute and playing with alignement and pay attention to some little details yes ...It was beneficial and fun to take on this challenge. Any feedback Please...
I'm proud of finishing the project.
What challenges did you encounter, and how did you overcome them?I found it challenging to figure out how to make custom input work without a button. I decided to create a button for custom input for an easy user experience.
What specific areas of your project would you like help with?Anything that you feel can be improved upon.
I'm proud of completing another challenge and I want to further improve my knowledge and clean code techniques.
What challenges did you encounter, and how did you overcome them?Responsiveness continues to be my challenge, but the more I practice, the more I learn.
What specific areas of your project would you like help with?Any part of the code. My intention is to improve.
Hello There
Your project is fantastic.
To enhance it even more, consider using an unordered list (<ul>) instead of a <div> for displaying a list of links. This is more semantically correct, improves accessibility, makes the content easier to maintain and style, and provides more flexibility.
Here's an example of how you might adjust your code:
<ul class="links"> <li><a href="#">GitHub</a></li> <li><a href="#">Frontend Mentor</a></li> <li><a href="#">LinkedIn</a></li> <li><a href="#">Twitter</a></li> <li><a href="#">Instagram</a></li> </ul>
I have a lot of problems with Angular's testing suites, I can't figure out for the life of me how to setup tests properly, it seems that it breaks on the fetch() statement to the rest api, and I have no clue how to fix it, so I did the only reasonable thing: delete all test files.
Functionality and Usability: The tip calculator efficiently calculates tip amounts and totals per person, making it a useful tool for users. The clear layout and intuitive design enhance the user experience.
Data Validation: Using zod for schema validation ensures that the inputs are correct, which strengthens the reliability of the application. This is particularly important in applications that handle numerical data.
Responsive Design: Utilizing Tailwind CSS allows for the creation of a responsive design that works well on both mobile and desktop devices. You can be proud of having designed an accessible and visually appealing interface.
State Management: You have effectively managed state with React hooks, demonstrating a good understanding of the lifecycle and state management in React.
Mobile First approach, Acessibility, grid, variables...
This was a long but fun challenge. Added a small on hover animation. While writing this, probably i should give the body a max-width but that will affect especially the background image. I will consider it next time.
What specific areas of your project would you like help with?Any feedback is appreciated but i would especially like to get feedback about accesibility, semantics and grid.
I love coding but it can be overwhelming with the the options available. Frameworks, libraries and components no doubt make coding more efficient and less time consuming, I often wonder since most of the tools available use the base of HTML, CSS and JavaScript could a page be made with using just those three and still be efficient. I've discovered you can do it (efficiently even). Of course, there isn't much content and for the most part the page is made up of lists and paragraphs which made it easy to stick with the basics (expect for using sass/scss - which I cannot live without).
What challenges did you encounter, and how did you overcome them?I didn't encounter too much of a challenge building the page. For me, it was a great way to review the basics. That being said, it would be great to rework the challenge this time allowing the user to enter their own recipe and at the very least save for future use.
What specific areas of your project would you like help with?I am open to any advice regarding my solution. Would love to hear the communities thoughts in general.
Great Job
I think you put same link for both Repo and preview site
proud that:
The challenge was quite simple and enjoyable. The main challenge was placing the elements correctly but using flex made everything easier and smoother.
What specific areas of your project would you like help with?Actually I am wondering about this part : See hover and focus states for all interactive elements on the page. which elements should be with hover and focus states? I think I missed that part
Hello there 👋
Your project fantastic
What is the difference between the hover and focus and when to use them:
:hover is used to change the appearance of buttons, links, or any interactive element to indicate that they are clickable or interactive and
:focus is used to style form inputs, links, or buttons to indicate that they are currently active or ready for user input.
:hover is triggered by a pointing device hovering over an element.
:focus is triggered when an element receives focus, typically through keyboard navigation or clicking.
:hover is primarily used for visual feedback on interactive elements like buttons and links.
:focus is crucial for accessibility, helping users navigate forms and interactive elements using the keyboard.
Device Compatibility:
:hover is not applicable on touch devices unless the user taps the element, which may not always be intuitive.
:focus is essential for keyboard navigation and is widely supported across devices.
I am proud of my experience during the challenge and how I handled the initial loading of the advice generator app by adding a skeleton loader. I am also glad that I was able to address the user stories for the challenge.
Looking ahead, I would like to write cleaner code, speed up my workflow, and make my work perform better and be more accessible.
What challenges did you encounter, and how did you overcome them?I did not face any major troubles in completing the challenge, as I was able to check off the user stories for the challenge, and also stayed on time.
Note: Once the design comparison is adjusted, this line will be removed.
What specific areas of your project would you like help with?I would appreciate some feedback and code review on the overall challenge.
Great, I checked all your code, very clean and readable, awesome.
However, I couldn't figure out how you implemented the skeleton. There was no mention of the skeleton in the JavaScript code, and I didn't see any functionality to toggle it or interact with it when data is fetched.
