Lesson 3 Bonus

Example showing how to accomplish the bonus project for lesson 3!

HTML

<script src="https://cdn.jsdelivr.net/gh/eu81273/jsfiddle-console/console.js"></script>
<div id="target">
</div>
<input id="thestring">
Repeat: <input id="repeat" type="number" value="1">
<input id="doBold" type="checkbox"> Bold
<select id="color">
<option value="">Pick Color</option>
<option value="bluetext">Blue</option>
<option value="redtext">Red</option>
</select>
<button type="button" onclick="showString()">Click me</button>

CSS

.bluetext {
  color: blue;
}

.redtext {
  color: red;
}

JavaScript

function showString() {
   var isChecked = document.getElementById('doBold').checked
   var str = document.getElementById('thestring').value
   var target = document.getElementById('target')
   var colorval = document.getElementById('color').value
   target.className = colorval
   var result = ""
   var count = parseInt(document.getElementById('repeat').value)
   for(var i = 0; i < count; i = i + 1)
   {
   		result = result + str
   }
   if(isChecked)
   {
   		target.innerHTML = '<b>' + result + '</b>'
   }
   else
   {
   		target.innerHTML = result
   }
}