I liked the challenge, the handling of JSON in the request for data. I think I could do it using Bootstrap or Tailwind to practice
What challenges did you encounter, and how did you overcome them?Creating dynamic components
What specific areas of your project would you like help with?I would appreciate feedback to improve my code.
This project was hard for me but I am very proud of completing it. The most difficult part for me was trying to get the functionality of the email component to test if: A. a proper email was entered B. If not, do not directly go to the success page but instead show the email error message on the main page.
I eventually figured out that it wasn't what I was or was not missing in my code, but rather the order in which the commands were placed which was causing the issue. I always wondered why in some tutorials, some developers will place commands in a specific order but never explain why, and the reason is the same as the cascade in CSS - things have to be placed in a specific order to take effect, or else it is just bloated code and takes up space.
Having learned this lesson, I will make a conscious effort to organize my code based on what I call the "cart before the horse" concept, ensuring I am not calling elements before they are defined or using defined elements outside of their function unless defined as global.
What challenges did you encounter, and how did you overcome them?As previously mentioned, I found this exercise quite difficult. The organization of the JavaScript to ensure the use of the elements in their proper cascade was one issue, I also ran into styling issues with the email-error element and the checkmark list-icon styling. I am not too familiar with the pseudo codes outside of hover, so the use of "li:before" was a challenge to understand, but from what I gathered, the ":before" and ":after" pseudo-classes allow for developers to insert additional content to an existing element like an image or icon, allowing them to modify the appearance of the defined content -which is how I got the background if the white checkmarks to be the defined tomato color.
For the email error message, I needed to create a validation function to check the value of what the user entered into the DOM input. from there, I needed to check to see if the value contained elements that aren't normally allowed in email addresses like asterisks and dollar signs. If those elements are found, a message requesting a valid email is shown, as well as ensuring there is a clause to catch if there is no email at all and returning a request message to enter an email in the same span.
What specific areas of your project would you like help with?I appreciate anyone willing to look at my work and provide feedback. All help is welcome!
I am proud of myself that I managed to make this work. I wasn't sure I would be able to figure out how to make those links popup like that but I managed to figure out a way how to make it work.
There are multiple ways to do one thing with JS so I know that my solution might not be optimal, but I'm just happy that I managed to make it work.
What challenges did you encounter, and how did you overcome them?The two biggest challenges I encountered were to change the popup based on the screen size. And then the second problem I had was with the popup button on the desktop version, but I managed to make it work the way I wanted it to work. I wanted both buttons to be toggleable meaning that the popup will appear with on click and then disappear with another.
What specific areas of your project would you like help with?Variable naming is something I struggled with, but that goes for class naming too. So I should just learn and stick to one naming principle to be completely honest.
I'm only proud of the fact that it didn't take as long to complete this challenge as I thought.
What challenges did you encounter, and how did you overcome them?The sizing of the grid was kind of hard to get right and I don't think I ultimately managed to reproduce the exact same design as the one provided. The display of elements inside the grid was also tricky.
What specific areas of your project would you like help with?Sizing of the whole page, sizing of the grid, sizing of everything. I feel like my grid, while having a fairly similar layout to the one on the model, is visibly larger.
trying to be consistant in this journey
What challenges did you encounter, and how did you overcome them?Facing difficulty while using grid and flexbox
What specific areas of your project would you like help with?Please give feedback to my code and suggest the changes required!
Good job, maybe work a bit more on the color consistency.
using mobile first design
What challenges did you encounter, and how did you overcome them?centring the card - overcame through googling
What specific areas of your project would you like help with?Feedback on responsive design and tips to improve
Feel free to guide me :)
What challenges did you encounter, and how did you overcome them?Feel free to guide me :)
What specific areas of your project would you like help with?Feel free to guide me :)
Good job!, just need to change the recipe card's background color to white.
Workflow improving.
What challenges did you encounter, and how did you overcome them?No challenges this time.
What specific areas of your project would you like help with?Feedback is always appreciated.
Proud to complete this designing challenge.
What challenges did you encounter, and how did you overcome them?The alignment arise little bit problem but i handle them using media query for responsive.
