# 2.1 Lights and Buttons

Make a copy of the [application template](https://github.com/winf-hsos/impacts-of-digitalization/tree/master/template) for each of the tasks below and write the necessary code with JavaScript and HTML to solve the tasks below. Make sure you connected the [hardware kit](https://iot.datalit.de/2-internet-of-things/iot-in-our-apps/getting-started/the-iot-kit) to your computer's USB port, and you tested the correct functionality of the devices with the [Brick Viewer](https://iot.datalit.de/2-internet-of-things/iot-in-our-apps/getting-started/brick-viewer-and-daemon).

## a) Light up the LED

We start easy! When the user presses the button on the website, make the LED light up in a green color! Next, change the program, so it lights the LED in your favorite color!

Solution:

{% embed url="<https://iodi-code.datalit.de/exercises/2_internet_of_things/2_1_lights_and_buttons/a/index.html>" %}

{% embed url="<https://youtu.be/iDpyySu2c3o>" %}

## b) Make the LED blink

Now, make the LED blink red when the user presses the button on the website. Let the user enter the frequency in milliseconds. Add a button to stop the LED from blinking.

Solution:

{% embed url="<https://iodi-code.datalit.de/exercises/2_internet_of_things/2_1_lights_and_buttons/b/index.html>" %}

## c) Initialize the LEDs on startup

On startup, set the hardware button’s LED to white and turn the other LED off!

Solution:

{% embed url="<https://iodi-code.datalit.de/exercises/2_internet_of_things/2_1_lights_and_buttons/c/index.html>" %}

## d) Hardware button activates the LED

Make the LED light blue when a user presses the *hardware button*.

Solution:

{% embed url="<https://iodi-code.datalit.de/exercises/2_internet_of_things/2_1_lights_and_buttons/d/index.html>" %}

## e) Hardware button toggles the LED

Now, when the user presses the hardware button again, turn the LED light off. Basically, make the button a switch for the LED light.

Solution:

{% embed url="<https://iodi-code.datalit.de/exercises/2_internet_of_things/2_1_lights_and_buttons/e/index.html>" %}

## f) Random colors

Enhance the program from [e)](#e-hardware-button-toggles-the-led) and let the LED change randomly between the colors green, red, blue, and orange when a user presses the hardware button. (The button doesn’t turn the LED off anymore, it changes the light’s color randomly).

Solution:

{% embed url="<https://iodi-code.datalit.de/exercises/2_internet_of_things/2_1_lights_and_buttons/f/index.html>" %}

## g) Sequence of colors

Change the program from [f)](#f-random-colors) and, which each button press, change the LED's color in a defined sequence of white, yellow, green, blue, and red. The change of color should no longer be random.

Solution:

{% embed url="<https://iodi-code.datalit.de/exercises/2_internet_of_things/2_1_lights_and_buttons/g/index.html>" %}