UI Components
A reusable starter layout for JavaScript mini projects.
Day 01: Button Counter
Current Count: 0
Day 02: Character Count / Textarea Limit
Day 03: FAQ Accordion
The forEach() method of Array instances executes a provided function once for each array element.
The read-only classList property of the Element interface contains a live DOMTokenList collection representing the class attribute of the element. This can then be used to manipulate the class list.
The getAttribute() method of the Element interface returns the value of a specified attribute on the element.
If the given attribute does not exist, the value returned will be null.
The setAttribute() method of the Element interface sets the value of an attribute on the specified element. If the attribute already exists, the value is updated; otherwise a new attribute is added with the specified name and value.
The HTMLElement property hidden reflects the value of the element's hidden attribute.
Day 04: Modal Dialog
Day 05: Tabs Component
Overview content goes here.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Amet voluptate fugiat aut natus deleniti reiciendis, labore recusandae! Neque debitis est amet? Minima veniam deleniti amet minus repudiandae aliquid omnis delectus.
Notes content goes here.
Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet. consectetur adipisicing elit. Facilis, fugiat.
Resources content goes here.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, fugiat! Molestiae debitis quisquam nobis Lorem ipsum dolor sit amet. in repellendus iste deleniti officia cupiditate nam velit. Dignissimos corporis, unde rem odit tempore, ex modi officia dolore quia natus consequuntur.
Day 06: Toast Notification System
Day 07: Filterable List
- Button Counter
- Modal Dialog
- Accordion FAQ
- Theme Toggle
- Task List
No results found.
Day 08: Theme Toggle / Dark Mode
Day 09: Form Validation States
This is a working contact form. I respond to most messages!
Day 10: Task List
No tasks yet.
Day 11: Social Sharing Links
Click to see the social sharing links at the bottom of the page.
Day 12: GDPR Cookie Consent Banner
A banner with fixed positioning that is shown every 7 days and stored as a cookie.
Dev Tools > Application > Cookies > "cookieConsent"
Day 13: Copy to Clipboard
Day 14: Scroll Interactions
- Scroll to top button appears on scroll.
- Hide header on scroll.
Day 15: Scroll Progress Indicator
- Scroll progress indicator appears at top of page on scroll.
Day 16: Sortable Tables
| Wireless Mouse | Accessories | $29.99 | 120 |
|---|---|---|---|
| Mechanical Keyboard | Accessories | $89.99 | 45 |
| USB-C Hub | Accessories | $49.50 | 78 |
| 4K Monitor | Displays | $399.99 | 12 |
| Laptop Stand | Office | $34.25 | 64 |
| Noise Cancelling Headphones | Audio | $199.99 | 23 |
| Webcam | Video | $79.00 | 39 |
| Portable SSD 1TB | Storage | $129.99 | 56 |
| Ergonomic Chair | Office | $299.00 | 8 |
| Desk Lamp | Office | $22.50 | 91 |
Day 17: Load YouTube Videos on Click
