Popup progress

[SunnySparks]

👨🏾‍💻 Current Progress:

• The layout for the popup is created, it has basic coloring and layout.
• In addition to that, it has now the recipe name, the tags, ingredients, and cooking process inside the HTML list, ready to be formatted.
• The Like function and counter are still pending, they will be completed in the next pull request.

[ramiaquista]

Awesome Job 💯 @SunnySparks

You have done an incredible job on this piece of code because it's DRY, clean, and very simple to understand.

Keep coding in the same way you are doing amazing things! 😄

[ramiaquista]

Hi @SunnySparks, I have some ideas about styling - UI - UX that probably would be nice if we implement: ♻️

• First: I would recommend resizing this img and make it smaller because the idea of the pop-up window is to let the user read some data about the recipe quickly and with more facility so it's not good at all if he has to scroll a lot to read what they want. I would recommend putting a medium/small image just to introduce into the recipe.

• Second: I would recommend putting the pop-up window on top of all the content. To avoid problems like in the img below. I would recommend you trying to use the z-index property to manage layers inside the page.

You are doing an amazing job so continue coding like this. 😄

[ramiaquista]

Status: Changes Required ♻️

You have done an incredible job so far man @SunnySparks, but the are some weak points that probably could be improved with some changes.

• The most important change I would recommend to do, is to set a timeout to refresh the page automatically every time the user adds a new comment pressing the btn, so then he can see it without refreshing the page manually. Ex:

  addComentBtn.addEventListener('click', async () => { await yourFunction(); }).then( setTimeout(() => { document.location.reload(); }, 1500), ); )

• Don't forget to fix the errors that the linter's provide to you in order to pass all the test and be merged with out problems. ( IMPORTANT )

  • [OPTIONAL] I would recommend making the img smaller the title bigger with another font-weight and probably in italic. Also adding border-radius: 0.5rem; to the img and the container would be a great idea. There are some points of the styling - UI/UX that can be improved.

You are on the right way, keep coding and enjoying the travel 😄

[ramiaquista]

Status: Approved 🎉

Congratulations @SunnySparks, you've been doing an amazing job so far and polished your code properly for the app to work. Keep it up and happy coding 😄

[SunnySparks]

👨🏾‍💻 Current Progress:

In these past commits, I have:

• Added an async function to the button that adds comments to the website
• Included a closing button for the popup that closes it
• Changed the general layout of the popup so it doesn't overflow with the homepage
• fixed the linters errors and adapted the popUp() function to work with the selected recipe and not a static one