ASWM SP2015: wk1 classwork JS

banner.js

(function() {
	'use strict';

	// get references to the form fields
	var textField = document.querySelector('#text');
	var sizeField = document.querySelector('#text-size');
	var colorField = document.querySelector('#text-color');
	var bgColorField = document.querySelector('#bg-color');
	var countField = document.querySelector('#banner-count');

	// get a reference to the button
	var button = document.querySelector('#create-banners');

	// get a reference to the banner display area
	var bannerDisplay = document.querySelector('#banner-display');

	// write a function to create a banner
	var createBanner = function(props) {
		// variables used to create a banner
		var banner;
		var text;
		var bannerClass;

		// write a loop to create as many banners as specified
		for (var i = 0; i < props.count; i++) {
			// create a div to hold the banner
			banner = document.createElement('div');

			// set the CSS for the banner
			banner.setAttribute('style', 'background: ' + props.bgColor);

			// set the CSS class for text sizing

			// create a text node to hold the banner text
			text = document.createTextNode(props.text);

			// add the text node to the banner
			banner.appendChild(text);

			// add the div to the page
			bannerDisplay.appendChild(banner);
		}
	};

	// add a click listener to the button
	button.addEventListener('click', function(event) {
		event.preventDefault();

		// create an object literal to hold all the banner properties
		var bannerProps = {};

		// populate the object with data from the form fields
		bannerProps.text = textField.value;
		bannerProps.size = sizeField.value;
		bannerProps.color = colorField.value;
		bannerProps.bgColor = bgColorField.value;
		bannerProps.count = countField.value;

		// call the function to actually create the banners
		createBanner(bannerProps);
	});
})();