Created
July 6, 2020 11:44
-
-
Save ivanteoh/d4d91e2485e2970f24862c6a8fe0bd68 to your computer and use it in GitHub Desktop.
Javascript: 101 Week 5 Track 2
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE HTML> | |
<html lang="en"> | |
<head> | |
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> | |
<title>JavaScript 101</title> | |
<script type="text/javascript"> | |
function load() | |
{ | |
function forEach(array, action) { | |
var i; | |
for (i = 0; i < array.length; i++) { | |
action(array[i]); | |
} | |
} | |
function escapeHTML(text) { | |
var replacements = [["&", "&"], ["\"", """], | |
["<", "<"], [">", ">"]]; | |
forEach(replacements, function(replace) { | |
while (text.indexOf(replace[0]) != -1) { | |
text = text.replace(replace[0], replace[1]); | |
} | |
}); | |
return text; | |
} | |
function isTextNode(node) { | |
return node.nodeType == 3; | |
} | |
function map(func, array) { | |
var result = []; | |
forEach(array, function (element) { | |
result.push(func(element)); | |
}); | |
return result; | |
} | |
var first = true; | |
function asHTML(node) { | |
if (first) { | |
node.innerHTML = node.innerHTML.replace( | |
/\B\s\B|[\n\r\t]/g,''); | |
first = false; | |
} | |
if (isTextNode(node)) | |
return escapeHTML(node.nodeValue); | |
else if (node.childNodes.length == 0) | |
return "<" + node.nodeName + "/>"; | |
else | |
return "<" + node.nodeName + ">" + | |
map(asHTML, node.childNodes).join("") + | |
"</" + node.nodeName + ">"; | |
} | |
console.log(asHTML(document.body)); | |
} | |
</script> | |
</head> | |
<body onload="load()"> | |
<h1>This is a header!</h1> | |
<p id="excitingText"> | |
This is a paragraph! <em>Excitement</em>! | |
</p> | |
<p> | |
This is also a paragraph, but it's not nearly as exciting as the | |
last one. | |
</p> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE HTML> | |
<html lang="en"> | |
<head> | |
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> | |
<title>JavaScript 101</title> | |
<script type="text/javascript"> | |
function load() | |
{ | |
function removeElement(node) { | |
parent = node.parentNode; | |
if (parent) { | |
parent.removeChild(node); | |
} | |
} | |
console.log(removeElement(document.body.childNodes[1])); | |
} | |
</script> | |
</head> | |
<body onload="load()"> | |
<h1>This is a header!</h1> | |
<p id="excitingText"> | |
This is a paragraph! <em>Excitement</em>! | |
</p> | |
<p> | |
This is also a paragraph, but it's not nearly as exciting as the | |
last one. | |
</p> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function registerEventHandler(node, eventType, handler) { | |
if (typeof node.attachEvent === 'function') { | |
node.attachEvent("on" + eventType, handler); | |
} else { | |
node.addEventListener(eventType, handler, false); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE HTML> | |
<html lang="en"> | |
<head> | |
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> | |
<title>JavaScript 101</title> | |
<script type="text/javascript"> | |
function createFieldset(id, parent){ | |
var element = document.createElement('fieldset'); | |
element.setAttribute('id', id); | |
parent.appendChild(element); | |
return element; | |
} | |
function createInput(id, parent){ | |
var element = document.createElement('input'); | |
element.setAttribute('id', id); | |
element.setAttribute('type', 'text'); | |
parent.appendChild(element); | |
return element; | |
} | |
function createButton(id, parent, name, funcName) { | |
var element = document.createElement('input'); | |
element.setAttribute('id', id); | |
element.setAttribute('type', 'button'); | |
element.setAttribute('value', name); | |
element.setAttribute('onclick', funcName); | |
parent.appendChild(element); | |
return element; | |
} | |
function createSpan(id, parent, text){ | |
var element = document.createElement('span'); | |
element.setAttribute('id', id); | |
var child = document.createTextNode(text); | |
element.appendChild(child); | |
parent.appendChild(element); | |
return element; | |
} | |
function adding(){ | |
var total = parseInt(document.getElementById('total').value); | |
if (total && total < 11 && total > 1) { | |
var grandTotal = 0; | |
for (var i = 0; i < total; i++) { | |
var number = document.getElementById('input' + i); | |
if (!number) { | |
continue; | |
} | |
var numberValue = parseInt(number.value); | |
if (numberValue) { | |
grandTotal += numberValue; | |
} else { | |
alert('"' + number.value + '" is not an integer'); | |
} | |
} | |
var result = createFieldset('result', document.body); | |
createSpan('span', result, grandTotal); | |
} else { | |
alert('Have you changed the total?'); | |
} | |
} | |
function submit(){ | |
var total = parseInt(document.getElementById('total').value); | |
if (total && total < 11 && total > 1) { | |
var fieldset = createFieldset('fieldsetlists', document.body); | |
for (var i = 0; i < total; i++) { | |
createInput('input' + i, fieldset); | |
} | |
createButton('addButton', fieldset, 'add', 'adding();'); | |
} else { | |
alert('Please enter a number between 2 to 10!'); | |
} | |
} | |
</script> | |
</head> | |
<body> | |
<fieldset> | |
<p>How many numbers do you want to add (max is 10)</p> | |
<input type='text' id='total' /> | |
<input type='button' value='submit' onclick='submit();'/> | |
</fieldset> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment