QR Code component (Vanilla CS + JS + Dark-Light Mode) ππ
Design comparison
Solution retrospective
πΎ Hello, Frontend Mentor coding community. This is my solution for the QR Code Component.
Making this challenge again was something really amazing for me, first because going back through my past challenges I was able to fix some issues and clean my code and then because was my first time using JS (yes I'm a newbie) π
I added some features:
- π¨ Dark and Light mode button
- πΎ Custom QR Code image
- π§ββοΈ A little bit of color customization
- π¨βπ» Custom image hover state
I'll be happy to hear any feedback and advice!
Community feedback
- @UserAhmad2001Posted over 2 years ago
Hi @Lucasπ
I'm Ahmad, A Front-end developer and One of your fansπ
I had a question for you, If you don't mind of course.
Do you get any job offers from frontendmentor?
I'm currently job-hunting, and I was wondering if frontendmentor is worth investing my time in?
Best Regards
Ahmad.
Marked as helpful4@correlucasPosted over 2 years ago@UserAhmad2001 Hello Ahmad, thanks for the kind words!
I don't get any job offer, but I'm not even searching due my lack of knowledge, currently I know only CSS and HTML LOL this means that I'm the biggest newbie here. I hope to learn Javascript the coming months to be ready for the next year π
But I think yes, the platform is for sure something worth investing time since you can showcase your frontend skills and also commutation skills with your feedback.
π
4@UserAhmad2001Posted over 2 years ago@correlucas I understand, Thanks lucas.
You really are an inspiration.
0@lawal-sherif-itunuPosted about 2 years ago@correlucas 'newbie', LOL... 'I know only CSS and HTML', LOL...
you know only those two and you included JS in this specific design... or how did you include the Dark-Light Mode and all?
0@lawal-sherif-itunuPosted about 2 years ago@correlucas This is extraordinary keep it up... Please, which tutorial did you use to learn CSS, HTML and JS... Do you have a specific one. also, your code seems to be on a straight line (the CSS). that isn't easy for reading by a newbie like me
0 - @vandermsPosted over 2 years ago
Hi, I love your solution!
The dark mode was awesome!
My only tip is you could improve the acessibility and the html semantics of your app putting the icon used for toggle inside a button tag (with an aria label describing what the button does, e.g. "toggle dark mode").
Marked as helpful3 - @sarahwyliePosted about 2 years ago
I love this, Lucas! How fun! Makes me wish I had spent more time having fun with mine, but alas I was too eager to dive into more new projects!
My only suggestion is for your <h1> line of code. It changes color, but that is behavior typical of a button or link. Perhaps change this into a link and add a cursor pointer?
Well done!
Marked as helpful0@correlucasPosted about 2 years ago@sarahwylie Hey Sarah! This was my first ever challenge and I added the hover only to customize, at that time I was not thinking about usability and UI/UX, so this was a hover that takes you nowhere hahaha, its true that I should add the pointer or make it a <a> link. Thank you for the time spent writing this feedback and keep posting amazing content here.
Have a good night =)
0 - @Haryorhorlar01Posted about 2 years ago
@correlucas, Great contributions to the challenge. I like attitudes to learning and putting it to practice. I viewed your task from a mobile and you've done a brilliant job. You reminded me of compressing my codes which I look forward to employing in my next challenge. You did well with the dark mode but I suggest you could use a filter property to change the barcode from blue to gray.
Check my contribution to the challenge for a clear picture.
https://haryorhorlar01.github.io/QR-code-component-challenge/index.html
Marked as helpful0@correlucasPosted about 2 years ago@Haryorhorlar01 thank you for the time spent writing this review π, I'll change it soon!
0 - @Nassim555Posted over 2 years ago
Hi , great solution I love your approach especially when u decided to add the dark and light mode to spice it up , one thing though it's preferred to
cursor:pointer;to show that the toggle is a clickable element.Marked as helpful0@correlucasPosted over 2 years ago@Nassim555 thank you Nassim, for this enlightening feedback, I'll for sure apply these changes. π
2 - @JasonSa19Posted about 2 years ago
I really like the approach as the dark mode is a important part of webdesign and digital design in general at the moment. Keep it rocking!
1 - @dinethlivePosted about 2 years ago
WOW Amazing and very helpful
1 - @JalilcryptoPosted about 2 years ago
This is amazing π€© this will help a lot
1 - @Nasir222222Posted about 2 years ago
Awesome, great work
1 - @CarolkiariePosted about 2 years ago
This is amazing and inspiring. I love how creatively approached the challenge!
1 - @MsarthaksharmaPosted about 2 years ago
Hi, This is fantastic. I really loved it. I will try to match with your level, though it will take a lot of time and handwork.
1@correlucasPosted about 2 years ago@Msarthaksharma it's really simple, something will be more complicated is Javascript, but you can follow this tutorial if you want the same result https://youtu.be/9LZGB3OLXNQ that was the tutorial I used in mine π
1 - @rimsahiaPosted about 2 years ago
hey lucas, congratulations but I didn't find the codeπ
1@correlucasPosted about 2 years ago@rimsahia I'll share the repository now, check it again in 5min.
1 - @johnnysedh3llloPosted over 2 years ago
this is amazing π’. i admire your level of intuition.
1 - Account deleted
Hey Lucas, congratulations You did a great job π
Let me give you some little tips for optimizing your code:
- you can use
articletag for the card container and improve the Accessibility - add
transitionto the body as well as you did with card - instead of using
pxuse relative units of measurement likerem-> read here
You did a great job of both code and design: all very clean and harmonious π
Hope this help by Travolgi
1 - you can use
- @NourWaellPosted over 2 years ago
Great job, Lucas. and nice work on this challenge ! I liked the dark mode feature especially you said you had zero knowledge in JS. Could you send me the documents you're using to develop your css skills?
1@correlucasPosted over 2 years ago@NourWaell Hello Nour, I'm not using any document, I'm just doing the FEM Challenges and doing some research when I get stuck. You can check the Kevin Powell channel's in youtube there's a lots of good content about CSS there.
About the JS for this challenge I used one tutorial, I've to study more about Js then, because I've applied the dark mode but I have no ideia what the code does hahaha
Dark mode tutorial: https://youtu.be/9LZGB3OLXNQ
1 - @jonathan401Posted over 2 years ago
Nice work on this challenge ππ. I love the dark mode feature you added π. Could you point me to any resource (preferably an article) that details how to create dark mode in CSS?
1@correlucasPosted over 2 years ago@jonathan401 Hey Majay, I read some articles, you've basically to work with variables for the colors and then create a class attributinga all dark mode changes.
I've used a YouTube tutorial since I've zero knowledge in JS that explains everything in 10min, here's the link:
https://youtu.be/9LZGB3OLXNQ
3@alexanderbonneyPosted over 2 years ago@correlucas wow. you are an inspiration
1 - @Ljr777Posted about 2 years ago
hey @Lucas, how are you today? hope you're having a great day/night thanks for always helping out, learning a lot from you I'm on a journey to make all the previous code that I have done on FEM better. Firstly I want to make the works responsive, (but I dont understand because when I inspect my first few works(especially the cards), the position of elements isnt changing as the screen size reduces, so my question is; is it only the font size I'm meant to look at in that condition?)
0@correlucasPosted about 2 years ago@Ljr777 Hey Ljr77, how are you? Sorry for the delay!
Here's a good resource to answer the question you had about inspecting elements and positioning:
https://www.youtube.com/watch?v=vHuSz4fRM880 - @exploremPosted about 2 years ago
Hi @Lucasπ
Amazing work! You are the inspiration. I will continue my studies. Someday I will write a similar code! :) I really like changing the colors on the page with the button. RuszajΔ cy siΔ obrazek teΕΌ jest Εwietny :D
0
Please log in to post a comment
Log in with GitHub
Join 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