Design comparison
Solution retrospective
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 ;)
Community feedback
- @obriedanPosted over 2 years ago
Amazing work! What library did you use to generate the QR code?
Your form validation could use some extra information, it requests a URL, but doesn't specify that you need the protocol.
www.google.com
does not work, buthttps://www.google.com
does. πLove it either way. Super clean.
Marked as helpful1@denieldenPosted over 2 years ago@obriedan Thank you so much! I used QRCode.react
I know, but thanks for the helpful observation! I have to fix some things and I want to evolve more as soon as I have more time.
Feel free to
clone the repository
and come up with your adding features by creating your ownfeature branch
to the repository, that would be awesome ;)Happy coding!
0 - @Kamasah-DicksonPosted almost 3 years ago
Your solution is really good but I think there is supposed to be a restriction for the user to not choose same color for the QR and the card . E.g choosing red for the QR and red for the card background overlays the QR. Besides
your solution is so inspiring :)
Marked as helpful1@denieldenPosted almost 3 years ago@Kamasah-Dickson Excellent observation! I'll add checking the two fields;) Thanks
I am very pleased that my solution is stimulating :)
0 - @ViicDevPosted over 2 years ago
excellent work π€―
1 - @mohit421Posted over 2 years ago
Great, this really inspire me, this challenge at different level.
1@denieldenPosted over 2 years ago@mohit421 Thanks! I'm glad you are an inspiration π and happy coding!
0 - @nonso01Posted over 2 years ago
ooo! my gosh πππ! this is just mind blowing! great work sir
1 - @rzkyndhlstrPosted almost 3 years ago
wow!!!! so amazingπππππ
1 - @nathabonfim59Posted almost 3 years ago
Awesome! Really liked that you provided a way to download the generated QR Code.
Definitely something I'm looking forward to implementing in my own project, in a future iteration.
1@denieldenPosted almost 3 years ago@nathabonfim59 Thank you. It makes me very happy to inspire you!
Happy coding ;)
0 - @Nick-GabePosted almost 3 years ago
Im really impressed with your result, you surely took the challenge even further. ππ
1@denieldenPosted almost 3 years ago@Nick-Gabe Hi NΓcolas, Thank you! I hope it can inspire you :)
1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord