A simple log to track notes, decisions and questions for Front-End Challenges Club challenges.

Links

Challenge Info 🔗

Figma Prototype 🔗

Figma Project 🔗

Challenge Submission 🔗

Challenge Repository 🔗

Challenge Solution 🔗 (for paying subscribers only)

Notes

• I'm using Andy's CSS reset but plan to make my own at some point. 🤓
• Used the similar method to center content from Challenge 001. 💪🏼
• Found Under Engineered Toggles. 🎉
  • Created a pen where I copy & pasted the example code and poked around at it to understand what everything was doing.
  • Then recreated it in my local, but noticed some differences.
  • Discovered that pen is using content-box while my local version is using border-box via the reset. Was able to adjust the size but couldn't get the icons to display properly in the pills, so I removed the border-box reset and will see how it's implemented in the solution. Might come back and try again, this is a handy quick summary on box sizing via Piccalilli Issue 22.
    • Update: Yes, content-box is the way to go here, albeit not by removing it from the reset 🤓
  • When I was doing my final checks I discovered that my implementation did not work with a keyboard 🙃, but luckily there was a Under Engineered Toggles Too that created the same examples using a button 🙂, and my style changes from the input ported perfectly when I made a quick pen to validate 🎉
• I only put the box-shadow on the day/light mode thumb as it didn't visually register on the dark/night mode despite being included in the project (thanks for using Figma!)
• I used the focus style for hover as well, even though it wasn't indicated in the spec.
• Took a crack at using Andy's Create a user controlled dark or light mode (via Piccalilli Issue 10 , you should subscribe!), but had a hard time both absorbing the concepts and tranlating them to my implementation. I'm going to do it one as a separate exercise following the example in hopes of better absorbing the concepts. Here's a submission by @siesashes that toggles the modes. I found it conceptually helpful to look at their code!
• I included styles for a disabled state: