Javascript States

Javascript State Function

Here is the fundamental of making a toggle or state function:

States are commonly achieved by using booleans, because its litteraly the easiest way to do this.

CSS States with Local Storage

By using the above example of the toggle button, you can now add CSS and local storage to it, so it actually has meaning:

This is a background toggler - a typical function used in some websites to change theme for aesthetic purposes. Some are also meant for your eye health. The "localStorage" function is used all the time for these togglers, so you don't have to turn back on/off your preferred state everytime you go to the page.

Multistate Functions

A toggle function don't need to have only 2 states, it can have multiple. For instance, here is a tab indicator, that tells you what page are you currently on:

By using "data-tab" and "querySelectorAll", you can take all the elements with same class and make each one a state toggler. Each button toggles one state.

Item Selected State

On ecommerce or question websites, this function is widely used when you can select more items than one if needed:

Its more common in store sites, where you can mark down what are you going to buy for example. That way you can complete your purchase all at once, instead of buying every item individually.

Font Size State Management

Though browsers like Microsoft Edge and Chrome already have the font size change system, you can create your own shortcut-like version, so people don't have to go to the browser settings:

This is a really rare method used in websites and you could be one of them to use it. This system is nothing inventional, but it does save little bit of time.