A short announcement
One note on future Weekly UI posts: often times outside life gets in the way of scheduled series, especially when they have daily elements, like this one. As the summer kicks off, there will be some weeks where I will be busy and/or out of town, and unable to dedicate my full attention to Weekly UI posts as I want to; I will try to recognize those weeks ahead of time and plan on not posting a challenge for such a week.
Do not fret! That doesn't mean that this series is going anywhere, but just that I want weekly challenges to be consistent with what you all have come to expect. If you want to stay as informed as possible, follow the WeeklyUI tag on its tag page and give me a follow; this way, you will get notifications when I post challenges.
Welcome to Week 2, Day 7 of my Weekly UI challenge! Week 2 will focus on a search bar UI component; each day throughout this following week, I will pick one subelement of the design to implement. For day seven, our goal is to…
Tweak, refactor, and/or fix your code
Today is all about you and your design/code perfectionism. Did you want to change your component API to be more flexible? Did you mean to tweak spacing on Day 5 but didn't have time? Perhaps you needed more time to research how to fix a few more a11y issues before you get that perfect score on Day 6. We all have to get sleep, spend time with friends and family, and have other things pop up that may affect your workflow; today is your day to finish strong and get everything up to spec as you see fit.
I will be updating my dropdown list items to be focusable via the arrow keys and improving form submission behavior. As always, you can check out my coded implementation on my Github pages site for this project.
Please add your repos and/or images of your designs in the comments for inspiration! I would love to see what you all created throughout the week.
Happy fixing! 🎉
Week 2 Calendar
- (Sunday 4/15) Design component ✅
- Input field ✅
- Submit button ✅
- Integrate autocomplete functionality ✅
- Past search term indicators ✅
- 100% a11y score ✅
- Tweaks, refactors, fixes 🎯
Top comments (0)