First project on Frontend Mentor
Yesterday I was still at home with a cold and since I „can't“ work from home - to my incomprehension and for reasons I don't know - I did the first challenge at Frontend Mentor.
The current topic in the retraining programme is C# and I find it really upset me that I had to fall ill just then. I watched an introduction to C# on YouTube on Monday. But because my memory on my home laptop is already fuller than I'd like, I haven't installed Visual Studio to try anything out myself.
Back to the topic of Frontend Mentor: I thought that since I want to go into frontend, I might as well use my time for that. Actually, I want to learn and practice more JavaScript, which - as described in yesterday's post - is not part of the introductory challenges on Frontend Mentor. That is why I'm spicing up the challenges for myself by just including some JavaScript anyway. I also try to incorporate and practise accessibility aspects. I have already completed the first project - a QR code component.
^ My version of the QR-code component
🔗 Live demo
📂 Repository
What I have learnt from the project
JavaScript and the Clipboard API
- I learnt how to use the
navigator.clipboard.writeText()to copy text to the clipboard when the user clicks on a button. - I also used Event Listener in JavaScript to bind a function to an HTML element (e.g. a button). This was a good and necessary refresher and exercise.
Accessibility
- I familiarised myself with the
aria-liveattribute to make content accessible to screen readers without disturbing users. - I used ARIA roles to improve the user experience for people with disabilities.
Interactive elements and user feedback
- I have included visual feedback for users once the link has been copied.
----------
>>> Music: -
>>> Mood: sick
----------