NoMan2000/bearclick.js

## bearclick.js
(function bearClickerStart(global, doc) {
    // use strict is a configuration that prevents errors from javascript's older days
    'use strict';
    // This is the root container that will hold everything else
    let parent = doc.querySelector('#bear_insertion');
    parent.innerHTML = '';
    let bears = [];
    // Create five bears
    for (let i = 0; i < 5; i += 1 ) {
        bears.push('http://placebear.com/g/200/300');
    }
    // Loop over the five bears
    for (let i = 0; i < bears.length; i++) {

        let currentBear = bears[i];
        // create a parent div element which will have a span and an img as children.
        let elem = doc.createElement('div');
        let img = doc.createElement('img');
        let p = doc.createElement('p');

        img.src = currentBear;
        img.height = 200;
        img.width = 300;
        img.className = 'bear';
        img.dataset.clicks = 0;

        p.textContent = "You have not clicked the bear!";

        elem.appendChild(img);
        elem.appendChild(p);
        parent.appendChild(elem);
    }
    // Create a function to handle the click event on the bear
    let addBear = function (event) {
        let target = event.currentTarget;
        let clicks = Number(target.dataset.clicks) + 1;
        target.nextSibling.textContent = "You clicked the bear " + clicks + " number of times!";
        target.dataset.clicks = clicks;
    };
    // Select all bear classes
    let bearClass = doc.querySelectorAll('.bear');
    // Loop over each bear and add a click listener to them.
    Array.from(bearClass).forEach(function(el) {
        el.addEventListener('click', addBear, false);
    });

}(window, document));

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bear Clicker</title>
</head>
<body>
    <div id="bear_insertion">

    </div>
    <script src="bearclicker.js"></script>
</body>
</html>
	(function bearClickerStart(global, doc) {
	// use strict is a configuration that prevents errors from javascript's older days
	'use strict';
	// This is the root container that will hold everything else
	let parent = doc.querySelector('#bear_insertion');
	parent.innerHTML = '';
	let bears = [];
	// Create five bears
	for (let i = 0; i < 5; i += 1 ) {
	bears.push('http://placebear.com/g/200/300');
	}
	// Loop over the five bears
	for (let i = 0; i < bears.length; i++) {

	let currentBear = bears[i];
	// create a parent div element which will have a span and an img as children.
	let elem = doc.createElement('div');
	let img = doc.createElement('img');
	let p = doc.createElement('p');

	img.src = currentBear;
	img.height = 200;
	img.width = 300;
	img.className = 'bear';
	img.dataset.clicks = 0;

	p.textContent = "You have not clicked the bear!";

	elem.appendChild(img);
	elem.appendChild(p);
	parent.appendChild(elem);
	}
	// Create a function to handle the click event on the bear
	let addBear = function (event) {
	let target = event.currentTarget;
	let clicks = Number(target.dataset.clicks) + 1;
	target.nextSibling.textContent = "You clicked the bear " + clicks + " number of times!";
	target.dataset.clicks = clicks;
	};
	// Select all bear classes
	let bearClass = doc.querySelectorAll('.bear');
	// Loop over each bear and add a click listener to them.
	Array.from(bearClass).forEach(function(el) {
	el.addEventListener('click', addBear, false);
	});

	}(window, document));
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Bear Clicker</title>
	</head>
	<body>
	<div id="bear_insertion">

	</div>
	<script src="bearclicker.js"></script>
	</body>
	</html>