All solutions

Hi there :)

This is my alternative solution with WeatherCast theme and Weather API with css grid layout and Vanilla javascript to change the content of the pages by fetching the data from the json local file.

Happy coding ;)

Hi there :)

I had a lot of fun in this challenge and had a good opportunity to learn how to use Router v6 and Styled Components for the first time.

Also I practiced a lot with React custom hooks, initially I had some problems in the details page because React didn't update the page content because I rightly didn't set the listening on the parameter that changed.

Also I added some additional features:

• See current country weather data on detail page through other API
• See the Map of the country on the details page
• Button scroll to top after the scrool
• Button for query reset when typing on the search input
• Error page with animated svg when no results found
• LocalStorage save of the set light or dark mode theme

But...

• Despite my extensive research I still have to figure out how I can create a preload at render time while react builds the page so that the "hops" due to reset.css are not seen as soon as the app is opened.
• I also want to understand how to show an upload on the single image as it is uploaded.

Thank you for taking the time to check out my project! And Happy coding ;)

Hi there! 😀

This is my solution for the Advice Generator App. This app generates Advice and change the backgroud color when you click to the button generate.

Any feedback and advice are welcome!

Happy coding 😁

Hi there! 😀

This is my advanced solution for the Qr Code Component. This app generates Qr Code based on the url entered.

Added features:

• Light / dark mode theme switcher
• Dark color customization
• Font customization
• Qr Code DenielDen profile link default on loading
• Dynamically generating the Qr Code as you type the URL
• Dynamically update the color and background of the Qr Code
• Dynamically update the customized image of the Qr Code
• Removes the custom image of the Qr Code
• You can download the .png of the generated Qr Code

Any feedback and advice are welcome!

Happy coding 😁

Hi frontEnder :)

This is my solution with SASS module, css Grid and Vanilla javascript.

I have deepened the use of SASS focusing on splitting into modules and reusing code through mixins and variables. I got more familiar with the Mobile-first approach and with the Grid css.

Also I added Login and Sign Up modals and initially had problems with centering because using flex the modal was centered in the center of the whole page and not in the center of the visible screen, but then I fixed it using display: fixed combined with old style alignment preceding flex and grid.

BUT

In adding modals, however, I was unable to remove that tremendous positioning effect you notice when modals are opened and centered on the screen.

Open to feedback on how to fix it 😁

Thank you for taking the time to check out my project and happy coding!

Hi there :)

I had a lot of fun in this challenge and had a good opportunity to learn how to use Router v6 and Styled Components for the first time.

Also I practiced a lot with React custom hooks, initially I had some problems in the details page because React didn't update the page content because I rightly didn't set the listening on the parameter that changed.

Also I added some additional features:

• See current country weather data on detail page through other API
• See the Map of the country on the details page
• Button scroll to top after the scrool
• Button for query reset when typing on the search input
• Error page with animated svg when no results found
• LocalStorage save of the set light or dark mode theme

But...

• Despite my extensive research I still have to figure out how I can create a preload at render time while react builds the page so that the "hops" due to reset.css are not seen as soon as the app is opened.
• I also want to understand how to show an upload on the single image as it is uploaded.

Thank you for taking the time to check out my project! And Happy coding ;)

Hi frontEnder :)

This is my alternative solution with css grid layout and Vanilla javascript to change the content of the pages by fetching the data from the json local file.

Please, give me your opinion!

Thank you for taking the time to check out my project! And Happy coding ;)

Hi there :)

This challenge was to build the QR Code component, but it has become something more complex than a simple component!

Inspired by another project, I wanted to add features to this challenge using React:

• On load, it shows the default basic QR Code
• Added a form that allows the user to enter a website URL to generate a QR Code for it
• Dynamically update the QR Code as you type the URL
• Dynamically update the color and background of the QR Code based on the customization input entered by the user
• When the form is sent, the .png of the generated QR Code is downloaded

I am eager to further evolve this project and learn much more connecting a serveless database! For now I'd be happy to have some feedback ;)

Special thanks to @Remus432, he have really inspired me to create this dinamic component!

Thank you for taking the time to check out my project! And Happy coding ;)

Hi there!

This is my solution with React, but I was unable to flip the card from the center when a number changes.

Can you help me understand how to do it or do you have any advice for me?

You're very welcome!

Happy coding ;)

Hi frontEnder!

This is my solution with sass for Order summary card :) Please, give your opinion!

Happy coding ;)

Hi there!

This is my solution with sass :) Please, give your opinion!

Happy coding ;)

Hi community :)

In this challenge I used tailwindcss for the first time.

Tailwind is very convenient but sometimes in the elements that need many classes I find the html too long and confusing.

What do you think about it?