navyasn/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

    <title>Image gallery</title>

    <link rel="stylesheet" href="style.css">

  </head>

  <body>
    <h1>Image gallery example</h1>

    <div class="full-img">
      <img class="displayed-img" src="images/pic1.jpg">
      <div class="overlay"></div>
      <button class="dark">Darken</button>
    </div>

    <div class="thumb-bar">


    </div>
    <script src="main.js"></script>
  <script id="jsbin-javascript">
const displayedImage = document.querySelector('.displayed-img');
const thumbBar = document.querySelector('.thumb-bar');

const btn = document.querySelector('button');
const overlay = document.querySelector('.overlay');

/* Looping through images */

for (let i =1; i <= 5; i++){
const newImage = document.createElement('img');
newImage.setAttribute('src', 'images/pic' + i + '.jpg');
thumbBar.appendChild(newImage);
newImage.onclick = function(e) {
		const imgSrc = e.target.getAttribute('src');
		displayImage(imgSrc);
	}
}

function displayImage(imgSrc) {
		displayedImage.setAttribute('src', imgSrc);
}

/* Wiring up the Darken/Lighten button */
btn.onclick = function() {
	const btnClass = btn.getAttribute('class');
	if (btnClass === 'dark'){
	btn.setAttribute('class', 'light');
	btn.textContent = 'Lighten';
	overlay.style.backgroundColor = 'rgba(0,0,0,0.5)';
	} else {
	btn.setAttribute('class', 'dark');
	btn.textContent = 'Darken';
	overlay.style.backgroundColor = 'rgba(0,0,0,0)';
	}
}
</script>


<script id="jsbin-source-javascript" type="text/javascript">const displayedImage = document.querySelector('.displayed-img');
const thumbBar = document.querySelector('.thumb-bar');

const btn = document.querySelector('button');
const overlay = document.querySelector('.overlay');

/* Looping through images */

for (let i =1; i <= 5; i++){
const newImage = document.createElement('img');
newImage.setAttribute('src', 'images/pic' + i + '.jpg');
thumbBar.appendChild(newImage);
newImage.onclick = function(e) {
		const imgSrc = e.target.getAttribute('src');
		displayImage(imgSrc);
	}
}

function displayImage(imgSrc) {
		displayedImage.setAttribute('src', imgSrc);
}

/* Wiring up the Darken/Lighten button */
btn.onclick = function() {
	const btnClass = btn.getAttribute('class');
	if (btnClass === 'dark'){
	btn.setAttribute('class', 'light');
	btn.textContent = 'Lighten';
	overlay.style.backgroundColor = 'rgba(0,0,0,0.5)';
	} else {
	btn.setAttribute('class', 'dark');
	btn.textContent = 'Darken';
	overlay.style.backgroundColor = 'rgba(0,0,0,0)';
	}
}</script></body>
</html>

## jsbin.teseyib.js
const displayedImage = document.querySelector('.displayed-img');
const thumbBar = document.querySelector('.thumb-bar');

const btn = document.querySelector('button');
const overlay = document.querySelector('.overlay');

/* Looping through images */

for (let i =1; i <= 5; i++){
const newImage = document.createElement('img');
newImage.setAttribute('src', 'images/pic' + i + '.jpg');
thumbBar.appendChild(newImage);
newImage.onclick = function(e) {
		const imgSrc = e.target.getAttribute('src');
		displayImage(imgSrc);
	}
}

function displayImage(imgSrc) {
		displayedImage.setAttribute('src', imgSrc);
}

/* Wiring up the Darken/Lighten button */
btn.onclick = function() {
	const btnClass = btn.getAttribute('class');
	if (btnClass === 'dark'){
	btn.setAttribute('class', 'light');
	btn.textContent = 'Lighten';
	overlay.style.backgroundColor = 'rgba(0,0,0,0.5)';
	} else {
	btn.setAttribute('class', 'dark');
	btn.textContent = 'Darken';
	overlay.style.backgroundColor = 'rgba(0,0,0,0)';
	}
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">

	<title>Image gallery</title>

	<link rel="stylesheet" href="style.css">

	</head>

	<body>
	<h1>Image gallery example</h1>

	<div class="full-img">
	<img class="displayed-img" src="images/pic1.jpg">
	<div class="overlay"></div>
	<button class="dark">Darken</button>
	</div>

	<div class="thumb-bar">


	</div>
	<script src="main.js"></script>
	<script id="jsbin-javascript">
	const displayedImage = document.querySelector('.displayed-img');
	const thumbBar = document.querySelector('.thumb-bar');

	const btn = document.querySelector('button');
	const overlay = document.querySelector('.overlay');

	/* Looping through images */

	for (let i =1; i <= 5; i++){
	const newImage = document.createElement('img');
	newImage.setAttribute('src', 'images/pic' + i + '.jpg');
	thumbBar.appendChild(newImage);
	newImage.onclick = function(e) {
	const imgSrc = e.target.getAttribute('src');
	displayImage(imgSrc);
	}
	}

	function displayImage(imgSrc) {
	displayedImage.setAttribute('src', imgSrc);
	}

	/* Wiring up the Darken/Lighten button */
	btn.onclick = function() {
	const btnClass = btn.getAttribute('class');
	if (btnClass === 'dark'){
	btn.setAttribute('class', 'light');
	btn.textContent = 'Lighten';
	overlay.style.backgroundColor = 'rgba(0,0,0,0.5)';
	} else {
	btn.setAttribute('class', 'dark');
	btn.textContent = 'Darken';
	overlay.style.backgroundColor = 'rgba(0,0,0,0)';
	}
	}
	</script>



	<script id="jsbin-source-javascript" type="text/javascript">const displayedImage = document.querySelector('.displayed-img');
	const thumbBar = document.querySelector('.thumb-bar');

	const btn = document.querySelector('button');
	const overlay = document.querySelector('.overlay');

	/* Looping through images */

	for (let i =1; i <= 5; i++){
	const newImage = document.createElement('img');
	newImage.setAttribute('src', 'images/pic' + i + '.jpg');
	thumbBar.appendChild(newImage);
	newImage.onclick = function(e) {
	const imgSrc = e.target.getAttribute('src');
	displayImage(imgSrc);
	}
	}

	function displayImage(imgSrc) {
	displayedImage.setAttribute('src', imgSrc);
	}

	/* Wiring up the Darken/Lighten button */
	btn.onclick = function() {
	const btnClass = btn.getAttribute('class');
	if (btnClass === 'dark'){
	btn.setAttribute('class', 'light');
	btn.textContent = 'Lighten';
	overlay.style.backgroundColor = 'rgba(0,0,0,0.5)';
	} else {
	btn.setAttribute('class', 'dark');
	btn.textContent = 'Darken';
	overlay.style.backgroundColor = 'rgba(0,0,0,0)';
	}
	}</script></body>
	</html>