Skip to content

Instantly share code, notes, and snippets.

@oertz

oertz/index.html

Last active March 14, 2017 17:27
Show Gist options
  • Save oertz/164a883774727e34fd9190e6abf84bd2 to your computer and use it in GitHub Desktop.
Save oertz/164a883774727e34fd9190e6abf84bd2 to your computer and use it in GitHub Desktop.
Download ZIP
Basics of DOM API by examples
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Basics of DOM API by examples</title>
<!-- Add here the link to Bootstrap -->
<link rel="stylesheet" href="bootstrap-lib/css/bootstrap.min.css">
<link rel="stylesheet" href="css/mystyles.css">
<script type="text/javascript">
document.onreadystatechange = function () {
if (document.readyState === "complete") {
alertOnComplete();
enableAlignmentButtons();
// en exercice :
enableLogin();
}
}
function alertOnComplete() {
content = {
alertText: "The document and all sub-resources have finished loading. The state 'complete' indicates that the load event is about to fire. ",
alertLink: "https://developer.mozilla.org/fr/docs/Web/API/Document/readyState"
}
var newDiv = document.createElement("div");
newDiv.setAttribute("class", "alert alert-warning");
var newText = document.createTextNode(content.alertText);
newDiv.appendChild(newText);
var newLink = document.createElement("a");
newLink.setAttribute("href", content.alertLink);
var newLinkText = document.createTextNode("More info ...");
newLink.appendChild(newLinkText);
newDiv.appendChild(newLink);
var mainContainer = document.getElementsByClassName("container").item(1);
mainContainer.insertBefore(newDiv, mainContainer.firstChild);
}
function enableAlignmentButtons() {
var buttons = document.getElementsByTagName("button");
for (var i = 0; i < buttons.length; i++) {
if (buttons.item(i).childNodes[0].nodeName === "SPAN") {
buttons.item(i).addEventListener("click", alignAllText);
}
}
}
function alignAllText(e) {
var childNode = e.currentTarget.childNodes[0];
var glyphClass = childNode.getAttribute("class");
var align = String(glyphClass).substring(26, String(glyphClass).length);
var ps = document.getElementsByTagName("p");
for (var i = 0; i < ps.length; i++) {
ps.item(i).classList.remove("text-left", "text-center", "text-right");
ps.item(i).classList.add("text-" + align);
}
}
function enableLogin() {
var loginButton = document.getElementById("loginApp");
loginButton.addEventListener("click", loginApplication);
}
function loginApplication(e) {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var newTr = document.createElement("tr");
var td1 = document.createElement("td");
td1.appendChild(document.createTextNode("###"));
newTr.appendChild(td1);
var td2 = document.createElement("td");
td2.appendChild(document.createTextNode(username));
newTr.appendChild(td2);
var td3 = document.createElement("td");
td3.appendChild(document.createTextNode(password));
newTr.appendChild(td3);
var td4 = document.createElement("td");
td4.appendChild(document.createTextNode("###"));
newTr.appendChild(td4);
document.getElementsByTagName("tbody").item(0).appendChild(newTr);
}
</script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class='container'>
<a class="navbar-brand">Bootstrap Initiation</a>
<ul class="nav navbar-nav">
<li><a href="compare.html">Compare</a></li>
</ul>
<a class="btn btn-link navbar-btn navbar-right" href="#">Go to top</a>
</div>
</nav>
<main class="container">
<h2>Lists</h2>
<div class="list-group">
<a class="list-group-item list-group-item-success">
<h4 class="list-group-item-heading">James T. Kirk</h4>
<p class="list-group-item-text">Beam me up, Scotty!</p>
</a>
<a class="list-group-item list-group-item-info">
<h4 class="list-group-item-heading">Jean-Luc Picard</h4>
<p class="list-group-item-text">Make it so, Number One.</p>
</a>
<a class="list-group-item list-group-item-danger">
<h4 class="list-group-item-heading">Borg Queen</h4>
<p class="list-group-item-text">You will be assimilated. Resistance is futile.</p>
</a>
</div>
<div class="list-group">
<a class="list-group-item" href="https://en.wikipedia.org/wiki/Star_Trek:_The_Original_Series" target="blank">The Original Series <span class="badge">3</span></a>
<a class="list-group-item">The Next Generation <span class="badge">7</span></a>
<a class="list-group-item">Deep Space Nine <span class="badge">7</span></a>
<a class="list-group-item">Voyager <span class="badge">7</span></a>
<a class="list-group-item">Enterprise <span class="badge">4</span></a>
<a class="list-group-item">Discovery <span class="badge"></span></a>
</div>
<h2>Color classes</h2>
<p class="text-primary">This text uses the primary color scheme.</p>
<p class="text-success">This text uses the success color scheme.</p>
<p class="bg-warning">This paragraph has a warning colored background.</p>
<p class="bg-info">This paragraph has an info colored background.</p>
<p class="bg-danger text-danger">Full danger!</p>
<h2>Forms</h2>
<form>
<div class="form-group">
<label for="username">Username</label>
<input type="text" name="username" id="username" class="form-control">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" name="password" id="password" class="form-control">
</div>
<input type="button" name="send" id="loginApp" value="Login" class="btn btn-success">
</form>
<form class="form-inline">
<div class="form-group">
<label for="username">Username</label>
<input type="text" name="username" id="username" class="form-control">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" name="password" id="password" class="form-control">
</div>
<input type="submit" name="send" class="btn btn-success">
</form>
<h2>Icons</h2>
<div>
<button class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button>
</div>
<h2>Buttons</h2>
<div>
<a href="#" class="btn btn-default btn-lg">Link</a>
<button class="btn btn-info">Button</button>
<input type="submit" value='Input Submit' class="btn btn-success btn-sm">
<input type="button" value='Input Button' class="btn btn-danger btn-xs">
</div>
<h2>Tables</h2>
<table class="table table-striped table-bordered table-hover">
<thead>
<th>#</th>
<th>First name</th>
<th>Last name</th>
<th>Starship</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Jean-Luc</td>
<td>Picard</td>
<td>Enterprise D</td>
</tr>
<tr>
<td>2</td>
<td>Benjamin</td>
<td>Sisko</td>
<td>Defiant</td>
</tr>
<tr>
<td>3</td>
<td>Kathryn</td>
<td>Janeway</td>
<td>Voyager</td>
</tr>
</tbody>
</table>
</main>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment