1. Make a button that when clicked will console log (or alert, whatever) the amount of times it was clicked.
2. Make a button that when it is hovered (onmouseover) event, will move to a different place in the screen (you can juggle between 2 fixed places). This means you will change the element's style.
3a. Add a textarea + a status text element. each time some content is entered to the text area, the status
text element (can be div, p, anything u want) will show how many characters the user typed.
0
3b. Add another status area, saying how many words he typed
Words typed:
Colored squares
a. Add an 1 button (labeled "blue") and one container. When clicking the button, a square blue div (20px by 20px) should go into the container. Add a bit margin. you can make the squares "display:inline-block" so they can fit the container horizontally.
b. Add another button, labeled "red". One clicking on it, a red square will be added to the same container
c .Add A third button, labeled "custom", that asks the user for a color (via prompt) and adds a box with this color.
d. Make it so that each 5 seconds, an orange box will be added to the container. (using setInterval)
Basic Gallery
a. add an input, a container (div) and a button (labeled "add image'). When the button is clicked, the url of the image is added to the container. Make a wrapper (another div) for the container, with a subtitle of something like "Image sources:"
b. Add an image to your document (). Change the source of the image to the last url the user entered via the input and button. Each time a new url is added, it'll be added to the list and the image will switch to it.
c. Make it so that clicking on an item in the url list will change the image to the url clicked.
This involves adding event handled in runtime, meaning that you add event listeners after each list item is added. This is done via the "addEventHandler" function on an element. Example - https://jsbin.com/nixija/edit?html,css,js,output
Rendering from saved data preparation
a. Add a container (ol tag). Write a function, called "renderList" that receives an array of strings, and for each item in the array it'll render an li tag to the container.
Rendered List
For example, calling "renderList( ["Milk", "Bread", "Water"]) will render this:
Milk
Bread
Water
into the container. Test this function by calling it with different array from your code.
b. add a button, that when clicked will ask the user for a list of things. You will split the string by commas (using .split(',')) and call the renderList function with the output. For example, if the user enters "Gabi, Itay, Adam", then a list with the 3 names will be rendered