/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>HW-WK-5</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.3/lodash.js"></script>
<style id="jsbin-css">
.colorboxes {
  margin: 10px;
  border: solid  1px;
}
.innerbox{
  height: 20px;
  width: 20px;
  display:inline-block;
  border: inset yellow 1px ;
}
</style>
</head>
<body>
  <div>
<h1>Event listener refreshers</h1>
<p>
1. Make a button that when clicked will console log (or alert, whatever) the amount of times it was clicked.
</p>
  <button onclick="logclick()">console.log clicks</button>
<p>
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.
</p>
  <button id='moveButton' onmouseover='mover(moveButton)'>hover to move</button>
<p>
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.
</p>
  <input id="form3a" type="text" onkeyup="counter()"><span id='chara'>0</span>
<p>
3b. Add another status area, saying how many words he typed
</p>
  <span>Words typed: <span id='words'></span></span>
  </div>
  <div>
<h1>Colored squares</h1>
<p>
  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.
 </p>
  <button id='blues' onclick="addbox('blueboxes','blue')">blue</button>
<div class="colorboxes" id='blueboxes'></div>
  <p>b. Add another button, labeled "red". One clicking on it, a red square will be added to the same container</p>
    <button id='reds' onclick="addbox('redboxes','red')">red</button>
    <div class='colorboxes' id='redboxes'></div>
    <p>
c .Add A third button, labeled "custom", that asks the user for a color (via prompt) and adds a box with this color.</p>
    <button id='customs' onclick="custom()">custom</button>
    <div class='colorboxes' id='customboxes'></div>
    <p>
d. Make it so that each 5 seconds, an orange box will be added to the container. (using setInterval)</p>
    <button id='oranges' onclick="oranger()">orange</button>
    <div class='colorboxes' id='orangeboxes'></div>
</div>
  <div>
<h1>Basic Gallery</h1>
<p></p>
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:"
</p>
  <input type="text" id="imageSRC"/>
  <button onclick="Imgur()">add image</button>
  <div id="addImageHere"></div>
  <p>
  b.  Add an image to your document (<img/>). 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.
</p>
  <img id="changeImg" src="" width="50%"/>
  <p>
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
</p><p>
</div>
  <div>
<h1>Rendering from saved data preparation</h1>
<p>
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.
</p>
    <ol id="buildList">
      <h1>Rendered List</h1>
    </ol>
    <p>
For example, calling "renderList( ["Milk", "Bread", "Water"]) will render this:
<ul><li>Milk</li><li>Bread</li><li>Water</li></ul> into the container. Test this function by calling it with different array from your code.
</p><p>
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
  </p>
  <button onclick="promptList()">enter things to list</button>
</div>
<script id="jsbin-javascript">
var clicks = 0;
function logclick(){
  clicks++;
  console.log(`clicked ${clicks} times`);
}


function mover(obj){
  var x_pos = _.random(1,300);
  var y_pos = _.random(1,300);
  obj.style.position = "absolute";
  obj.style.left = x_pos+'px';
  obj.style.top = y_pos+'px';
}

function counter(){
  var formContents = document.getElementById('form3a');
  function charCounter(){
    return formContents.value.length;}
  document.getElementById('chara').innerText = charCounter()+' Characters';
  function wordCounter(){
    var words = _.words(formContents.value);
    return words.length;
  };
  document.getElementById('words').innerText = wordCounter();
}
/*
var cbuts = document.getElementsByClassName('cbut');
_.forEach(cbuts,function(cbut){cbut.addEventListener('click',addbox('blues','blue'));}
*/
function custom(){
  var c = prompt('custom color pls');
  console.log(c);
  addbox('customboxes',c);
}
function addbox(divv,color){
  //console.log('did',divv,color);
  var nd = document.createElement('div');
  nd.setAttribute('class','innerbox');
  nd.setAttribute('style',`background-color: ${color}`);
  document.getElementById(divv).appendChild(nd);
}
function oranger(){
  setInterval(function(){addbox('orangeboxes','orange');},5000);
}
function Imgur(){
  var url = document.getElementById('imageSRC').value;
  var txt = document.createElement('button');
  txt.innerText = url;
  txt.addEventListener('click', function () {
    updateImg(url);
  });  document.getElementById('addImageHere').appendChild(txt);
  var lineBreak = document.createElement('br');
document.getElementById('addImageHere').appendChild(lineBreak);
  updateImg(url);you
}
function updateImg(url){
  document.getElementById('changeImg').setAttribute('src',url);
}
function renderList(arr){
  function addLi(val){
    var li = document.createElement('li');
    li.innerText = val;
    document.getElementById('buildList').appendChild(li);
  }
  _.forEach(arr,function(value){addLi(value);})
}
function promptList(){
    var list = window.prompt("enter a list of things separated by commas");
    list = _.split(list,',');
    renderList(list);
}
</script>


<script id="jsbin-source-css" type="text/css">.colorboxes {
  margin: 10px;
  border: solid  1px;
}
.innerbox{
  height: 20px;
  width: 20px;
  display:inline-block;
  border: inset yellow 1px ;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">var clicks = 0;
function logclick(){
  clicks++;
  console.log(`clicked ${clicks} times`);
}


function mover(obj){
  var x_pos = _.random(1,300);
  var y_pos = _.random(1,300);
  obj.style.position = "absolute";
  obj.style.left = x_pos+'px';
  obj.style.top = y_pos+'px';
}

function counter(){
  var formContents = document.getElementById('form3a');
  function charCounter(){
    return formContents.value.length;}
  document.getElementById('chara').innerText = charCounter()+' Characters';
  function wordCounter(){
    var words = _.words(formContents.value);
    return words.length;
  };
  document.getElementById('words').innerText = wordCounter();
}
/*
var cbuts = document.getElementsByClassName('cbut');
_.forEach(cbuts,function(cbut){cbut.addEventListener('click',addbox('blues','blue'));}
*/
function custom(){
  var c = prompt('custom color pls');
  console.log(c);
  addbox('customboxes',c);
}
function addbox(divv,color){
  //console.log('did',divv,color);
  var nd = document.createElement('div');
  nd.setAttribute('class','innerbox');
  nd.setAttribute('style',`background-color: ${color}`);
  document.getElementById(divv).appendChild(nd);
}
function oranger(){
  setInterval(function(){addbox('orangeboxes','orange');},5000);
}
function Imgur(){
  var url = document.getElementById('imageSRC').value;
  var txt = document.createElement('button');
  txt.innerText = url;
  txt.addEventListener('click', function () {
    updateImg(url);
  });  document.getElementById('addImageHere').appendChild(txt);
  var lineBreak = document.createElement('br');
document.getElementById('addImageHere').appendChild(lineBreak);
  updateImg(url);you
}
function updateImg(url){
  document.getElementById('changeImg').setAttribute('src',url);
}
function renderList(arr){
  function addLi(val){
    var li = document.createElement('li');
    li.innerText = val;
    document.getElementById('buildList').appendChild(li);
  }
  _.forEach(arr,function(value){addLi(value);})
}
function promptList(){
    var list = window.prompt("enter a list of things separated by commas");
    list = _.split(list,',');
    renderList(list);
}</script></body>
</html>

## jsbin.jisodo.css
.colorboxes {
  margin: 10px;
  border: solid  1px;
}
.innerbox{
  height: 20px;
  width: 20px;
  display:inline-block;
  border: inset yellow 1px ;
}

## jsbin.jisodo.js
var clicks = 0;
function logclick(){
  clicks++;
  console.log(`clicked ${clicks} times`);
}


function mover(obj){
  var x_pos = _.random(1,300);
  var y_pos = _.random(1,300);
  obj.style.position = "absolute";
  obj.style.left = x_pos+'px';
  obj.style.top = y_pos+'px';
}

function counter(){
  var formContents = document.getElementById('form3a');
  function charCounter(){
    return formContents.value.length;}
  document.getElementById('chara').innerText = charCounter()+' Characters';
  function wordCounter(){
    var words = _.words(formContents.value);
    return words.length;
  };
  document.getElementById('words').innerText = wordCounter();
}
/*
var cbuts = document.getElementsByClassName('cbut');
_.forEach(cbuts,function(cbut){cbut.addEventListener('click',addbox('blues','blue'));}
*/
function custom(){
  var c = prompt('custom color pls');
  console.log(c);
  addbox('customboxes',c);
}
function addbox(divv,color){
  //console.log('did',divv,color);
  var nd = document.createElement('div');
  nd.setAttribute('class','innerbox');
  nd.setAttribute('style',`background-color: ${color}`);
  document.getElementById(divv).appendChild(nd);
}
function oranger(){
  setInterval(function(){addbox('orangeboxes','orange');},5000);
}
function Imgur(){
  var url = document.getElementById('imageSRC').value;
  var txt = document.createElement('button');
  txt.innerText = url;
  txt.addEventListener('click', function () {
    updateImg(url);
  });  document.getElementById('addImageHere').appendChild(txt);
  var lineBreak = document.createElement('br');
document.getElementById('addImageHere').appendChild(lineBreak);
  updateImg(url);you
}
function updateImg(url){
  document.getElementById('changeImg').setAttribute('src',url);
}
function renderList(arr){
  function addLi(val){
    var li = document.createElement('li');
    li.innerText = val;
    document.getElementById('buildList').appendChild(li);
  }
  _.forEach(arr,function(value){addLi(value);})
}
function promptList(){
    var list = window.prompt("enter a list of things separated by commas");
    list = _.split(list,',');
    renderList(list);
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>HW-WK-5</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.3/lodash.js"></script>
	<style id="jsbin-css">
	.colorboxes {
	margin: 10px;
	border: solid 1px;
	}
	.innerbox{
	height: 20px;
	width: 20px;
	display:inline-block;
	border: inset yellow 1px ;
	}
	</style>
	</head>
	<body>
	<div>
	<h1>Event listener refreshers</h1>
	<p>
	1. Make a button that when clicked will console log (or alert, whatever) the amount of times it was clicked.
	</p>
	<button onclick="logclick()">console.log clicks</button>
	<p>
	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.
	</p>
	<button id='moveButton' onmouseover='mover(moveButton)'>hover to move</button>
	<p>
	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.
	</p>
	<input id="form3a" type="text" onkeyup="counter()"><span id='chara'>0</span>
	<p>
	3b. Add another status area, saying how many words he typed
	</p>
	<span>Words typed: <span id='words'></span></span>
	</div>
	<div>
	<h1>Colored squares</h1>
	<p>
	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.
	</p>
	<button id='blues' onclick="addbox('blueboxes','blue')">blue</button>
	<div class="colorboxes" id='blueboxes'></div>
	<p>b. Add another button, labeled "red". One clicking on it, a red square will be added to the same container</p>
	<button id='reds' onclick="addbox('redboxes','red')">red</button>
	<div class='colorboxes' id='redboxes'></div>
	<p>
	c .Add A third button, labeled "custom", that asks the user for a color (via prompt) and adds a box with this color.</p>
	<button id='customs' onclick="custom()">custom</button>
	<div class='colorboxes' id='customboxes'></div>
	<p>
	d. Make it so that each 5 seconds, an orange box will be added to the container. (using setInterval)</p>
	<button id='oranges' onclick="oranger()">orange</button>
	<div class='colorboxes' id='orangeboxes'></div>
	</div>
	<div>
	<h1>Basic Gallery</h1>
	<p></p>
	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:"
	</p>
	<input type="text" id="imageSRC"/>
	<button onclick="Imgur()">add image</button>
	<div id="addImageHere"></div>
	<p>
	b. Add an image to your document (<img/>). 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.
	</p>
	<img id="changeImg" src="" width="50%"/>
	<p>
	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
	</p><p>
	</div>
	<div>
	<h1>Rendering from saved data preparation</h1>
	<p>
	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.
	</p>
	<ol id="buildList">
	<h1>Rendered List</h1>
	</ol>
	<p>
	For example, calling "renderList( ["Milk", "Bread", "Water"]) will render this:
	<ul><li>Milk</li><li>Bread</li><li>Water</li></ul> into the container. Test this function by calling it with different array from your code.
	</p><p>
	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
	</p>
	<button onclick="promptList()">enter things to list</button>
	</div>
	<script id="jsbin-javascript">
	var clicks = 0;
	function logclick(){
	clicks++;
	console.log(`clicked ${clicks} times`);
	}


	function mover(obj){
	var x_pos = _.random(1,300);
	var y_pos = _.random(1,300);
	obj.style.position = "absolute";
	obj.style.left = x_pos+'px';
	obj.style.top = y_pos+'px';
	}

	function counter(){
	var formContents = document.getElementById('form3a');
	function charCounter(){
	return formContents.value.length;}
	document.getElementById('chara').innerText = charCounter()+' Characters';
	function wordCounter(){
	var words = _.words(formContents.value);
	return words.length;
	};
	document.getElementById('words').innerText = wordCounter();
	}
	/*
	var cbuts = document.getElementsByClassName('cbut');
	_.forEach(cbuts,function(cbut){cbut.addEventListener('click',addbox('blues','blue'));}
	*/
	function custom(){
	var c = prompt('custom color pls');
	console.log(c);
	addbox('customboxes',c);
	}
	function addbox(divv,color){
	//console.log('did',divv,color);
	var nd = document.createElement('div');
	nd.setAttribute('class','innerbox');
	nd.setAttribute('style',`background-color: ${color}`);
	document.getElementById(divv).appendChild(nd);
	}
	function oranger(){
	setInterval(function(){addbox('orangeboxes','orange');},5000);
	}
	function Imgur(){
	var url = document.getElementById('imageSRC').value;
	var txt = document.createElement('button');
	txt.innerText = url;
	txt.addEventListener('click', function () {
	updateImg(url);
	}); document.getElementById('addImageHere').appendChild(txt);
	var lineBreak = document.createElement('br');
	document.getElementById('addImageHere').appendChild(lineBreak);
	updateImg(url);you
	}
	function updateImg(url){
	document.getElementById('changeImg').setAttribute('src',url);
	}
	function renderList(arr){
	function addLi(val){
	var li = document.createElement('li');
	li.innerText = val;
	document.getElementById('buildList').appendChild(li);
	}
	_.forEach(arr,function(value){addLi(value);})
	}
	function promptList(){
	var list = window.prompt("enter a list of things separated by commas");
	list = _.split(list,',');
	renderList(list);
	}
	</script>


	<script id="jsbin-source-css" type="text/css">.colorboxes {
	margin: 10px;
	border: solid 1px;
	}
	.innerbox{
	height: 20px;
	width: 20px;
	display:inline-block;
	border: inset yellow 1px ;
	}</script>

	<script id="jsbin-source-javascript" type="text/javascript">var clicks = 0;
	function logclick(){
	clicks++;
	console.log(`clicked ${clicks} times`);
	}


	function mover(obj){
	var x_pos = _.random(1,300);
	var y_pos = _.random(1,300);
	obj.style.position = "absolute";
	obj.style.left = x_pos+'px';
	obj.style.top = y_pos+'px';
	}

	function counter(){
	var formContents = document.getElementById('form3a');
	function charCounter(){
	return formContents.value.length;}
	document.getElementById('chara').innerText = charCounter()+' Characters';
	function wordCounter(){
	var words = _.words(formContents.value);
	return words.length;
	};
	document.getElementById('words').innerText = wordCounter();
	}
	/*
	var cbuts = document.getElementsByClassName('cbut');
	_.forEach(cbuts,function(cbut){cbut.addEventListener('click',addbox('blues','blue'));}
	*/
	function custom(){
	var c = prompt('custom color pls');
	console.log(c);
	addbox('customboxes',c);
	}
	function addbox(divv,color){
	//console.log('did',divv,color);
	var nd = document.createElement('div');
	nd.setAttribute('class','innerbox');
	nd.setAttribute('style',`background-color: ${color}`);
	document.getElementById(divv).appendChild(nd);
	}
	function oranger(){
	setInterval(function(){addbox('orangeboxes','orange');},5000);
	}
	function Imgur(){
	var url = document.getElementById('imageSRC').value;
	var txt = document.createElement('button');
	txt.innerText = url;
	txt.addEventListener('click', function () {
	updateImg(url);
	}); document.getElementById('addImageHere').appendChild(txt);
	var lineBreak = document.createElement('br');
	document.getElementById('addImageHere').appendChild(lineBreak);
	updateImg(url);you
	}
	function updateImg(url){
	document.getElementById('changeImg').setAttribute('src',url);
	}
	function renderList(arr){
	function addLi(val){
	var li = document.createElement('li');
	li.innerText = val;
	document.getElementById('buildList').appendChild(li);
	}
	_.forEach(arr,function(value){addLi(value);})
	}
	function promptList(){
	var list = window.prompt("enter a list of things separated by commas");
	list = _.split(list,',');
	renderList(list);
	}</script></body>
	</html>