Day 01: Button Counter

Current Count: 0

Day 02: Character Count / Textarea Limit

0 / 250 Characters

Day 03: FAQ Accordion

The forEach() method of Array instances executes a provided function once for each array element.

MDN: Array.prototype.forEach()

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.

MDN: Element: classList property

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.

Element: getAttribute() method

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.

Element: setAttribute() method

The HTMLElement property hidden reflects the value of the element's hidden attribute.

HTMLElement: hidden property

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, consectetur adipisicing elit. Facilis, fugiat.

Resources content goes here.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, fugiat! Molestiae debitis quisquam nobis 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

Day 08: Theme Toggle + Caching Data

Day 09: Form Validation States

Day 10: Simple Task List

  • Read MDN documentation