Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

QR Code component (Vanilla CS + JS + Dark-Light Mode) 🌞🌚

Lucas πŸ‘Ύβ€’ 104,620

@correlucas

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View Challenge

Design Comparison

SolutionDesign

Reports

Accessibility report (0)

Our reporter did not find any issues in this project! πŸŽ‰

Lucas πŸ‘Ύβ€™s questions for the community

πŸ‘Ύ 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

Ahmad_Manaβ€’ 320

@UserAhmad2001

Posted

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 helpful

4


Lucas πŸ‘Ύβ€’ 104,620

@correlucas

Posted

@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

Ahmad_Manaβ€’ 320

@UserAhmad2001

Posted

@correlucas I understand, Thanks lucas.

You really are an inspiration.

0

Lucas πŸ‘Ύβ€’ 104,620

@correlucas

Posted

@UserAhmad2001 thank you Ahmad! πŸ‘‹

0

@lawal2000

Posted

@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

@lawal2000

Posted

@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

P
Vander Santosβ€’ 1,660

@vanderms

Posted

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 helpful

3


Lucas πŸ‘Ύβ€’ 104,620

@correlucas

Posted

@vanderms Thats right Vander, I forgot that!

0

Sarah Wylieβ€’ 50

@sarahwylie

Posted

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 helpful

0


Lucas πŸ‘Ύβ€’ 104,620

@correlucas

Posted

@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

Haryorhorlar01β€’ 30

@Haryorhorlar01

Posted

@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 helpful

0


Lucas πŸ‘Ύβ€’ 104,620

@correlucas

Posted

@Haryorhorlar01 thank you for the time spent writing this review πŸ”, I'll change it soon!

0

Nassimβ€’ 200

@Nassim555

Posted

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 helpful

0


Lucas πŸ‘Ύβ€’ 104,620

@correlucas

Posted

@Nassim555 thank you Nassim, for this enlightening feedback, I'll for sure apply these changes. πŸ‘

2

Jason Sβ€’ 30

@JasonSa19

Posted

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


Lucas πŸ‘Ύβ€’ 104,620

@correlucas

Posted

@JasonSa19 Thank you Jason!

0

Dineth Pramodyaβ€’ 40

@dinethlive

Posted

WOW Amazing and very helpful

1


Lucas πŸ‘Ύβ€’ 104,620

@correlucas

Posted

@dinethlive Thank you Dineth!

0

jalilβ€’ 10

@Jalilcrypto

Posted

This is amazing 🀩 this will help a lot

1


Lucas πŸ‘Ύβ€’ 104,620

@correlucas

Posted

@Jalilcrypto Thank you Jalil!

1

Nasir Muminβ€’ 70

@Nasir222222

Posted

Awesome, great work

1


Lucas πŸ‘Ύβ€’ 104,620

@correlucas

Posted

@Nasir222222 Thank you Nasir!

0

Carolineβ€’ 160

@Carolkiarie

Posted

This is amazing and inspiring. I love how creatively approached the challenge!

1


Lucas πŸ‘Ύβ€’ 104,620

@correlucas

Posted

@Carolkiarie Thank you Caroline!

0

Sarthak Sharmaβ€’ 50

@Msarthaksharma

Posted

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


Lucas πŸ‘Ύβ€’ 104,620

@correlucas

Posted

@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

RIM Sahiaβ€’ 80

@rimsahia

Posted

hey lucas, congratulations but I didn't find the code😐

1


Lucas πŸ‘Ύβ€’ 104,620

@correlucas

Posted

@rimsahia I'll share the repository now, check it again in 5min.

1

RIM Sahiaβ€’ 80

@rimsahia

Posted

@correlucas waiting...

1

Johnnyβ€’ 280

@johnnysedh3lllo

Posted

this is amazing 😒. i admire your level of intuition.

1


Lucas πŸ‘Ύβ€’ 104,620

@correlucas

Posted

@johnnysedh3lllo Thank you Johnny β™₯️

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 article tag for the card container and improve the Accessibility
  • add transition to the body as well as you did with card
  • instead of using px use relative units of measurement like rem -> read here

You did a great job of both code and design: all very clean and harmonious 😁

Hope this help by Travolgi

1

Nour Waelβ€’ 110

@NourWaell

Posted

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


Lucas πŸ‘Ύβ€’ 104,620

@correlucas

Posted

@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

Majayβ€’ 400

@jonathan401

Posted

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


Lucas πŸ‘Ύβ€’ 104,620

@correlucas

Posted

@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

Majayβ€’ 400

@jonathan401

Posted

@correlucas Thanks for this πŸ˜€

1

Ljr777β€’ 140

@Ljr777

Posted

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


Lucas πŸ‘Ύβ€’ 104,620

@correlucas

Posted

@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=vHuSz4fRM88

0

Dominikaβ€’ 60

@explorem

Posted

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


Lucas πŸ‘Ύβ€’ 104,620

@correlucas

Posted

@explorem DziΔ™kujΔ™ Ci =)

1

Please log in to post a comment

Log in with GitHub
Slack logo

Join our Slack community

Join over 160,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!