Last active
April 24, 2023 15:17
-
-
Save Tazaf/e7286440370e1c5197999b0da2e84f9e to your computer and use it in GitHub Desktop.
MAS-RAD - Final example for "JavaScript - DOM API"
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="fr"> | |
<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>Bootstrap initiation</title> | |
<!-- Add here the link to Bootstrap --> | |
<link | |
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" | |
rel="stylesheet" | |
integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" | |
crossorigin="anonymous" | |
/> | |
<link | |
rel="stylesheet" | |
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" | |
integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" | |
crossorigin="anonymous" | |
referrerpolicy="no-referrer" | |
/> | |
<script> | |
const 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", | |
}; | |
document.onreadystatechange = () => { | |
if (document.readyState === "complete") { | |
alertOnComplete(); | |
} | |
}; | |
function alertOnComplete() { | |
const newDiv = document.createElement("div"); | |
newDiv.classList.add("alert", "alert-warning"); | |
const newText = document.createTextNode(content.alertText); | |
newDiv.appendChild(newText); | |
const mainContainer = document.querySelector("main.container"); | |
mainContainer.appendChild(newDiv); | |
} | |
function enableAlignmentButtons() { | |
const wrappingDiv = document.querySelector("#alignment-btns"); | |
const buttons = wrappingDiv.querySelectorAll("button"); | |
for (const button of buttons) { | |
button.addEventListener("click", alignAllText); | |
} | |
} | |
function alignAllText(event) { | |
const icon = event.currentTarget.childNodes[0]; | |
let alignment; | |
if (icon.classList.contains("fa-align-left")) { | |
alignment = "left"; | |
} else if (icon.classList.contains("fa-align-center")) { | |
alignment = "center"; | |
} else if (icon.classList.contains("fa-align-right")) { | |
alignment = "right"; | |
} | |
// We get all the paragraphs of the document | |
const pColl = document.querySelectorAll("p"); | |
// For each of them... | |
for (const p of pColl) { | |
// We remove any text alignment class | |
p.classList.remove("text-left", "text-center", "text-right"); | |
// We add an alignment class using the previously deduced alignment | |
p.classList.add(`text-${alignment}`); | |
} | |
} | |
</script> | |
</head> | |
<body> | |
<nav class="navbar navbar-expand navbar-dark bg-primary sticky-top"> | |
<div class="container"> | |
<span class="navbar-brand">Bootstrap Initiation</span> | |
<div class="collapse navbar-collapse"> | |
<ul class="navbar-nav"> | |
<li class="nav-item"> | |
<a href="https://google.com" class="nav-link">Google</a> | |
</li> | |
</ul> | |
</div> | |
<a class="btn btn-outline-light" href="#">Go to top</a> | |
</div> | |
</nav> | |
<main class="container"> | |
<h1>Hello, world!</h1> | |
<h2>Icons</h2> | |
<div id="alignment-btns"> | |
<button class="btn btn-light"><i class="fas fa-align-left"></i></button> | |
<button class="btn btn-light"> | |
<i class="fas fa-align-center"></i> | |
</button> | |
<button class="btn btn-light"> | |
<i class="fas fa-align-right"></i> | |
</button> | |
</div> | |
<h2>Cards</h2> | |
<div class="card text-primary bg-warning"> | |
<div class="card-header text-danger">John Doe commented on that:</div> | |
<div class="card-body bg-dark">Today, I ate an apple. It was tasty</div> | |
<div class="card-footer bg-info"> | |
<button class="btn btn-light btn-sm">Like</button> | |
</div> | |
</div> | |
<h2>Lists</h2> | |
<div class="list-group"> | |
<a | |
class="list-group-item list-group-item-action list-group-item-success" | |
> | |
<h5 class="d-flex justify-content-between"> | |
Jame T. Kirk <span class="badge text-bg-light">3</span> | |
</h5> | |
<p>Beam me up, Scotty!</p> | |
</a> | |
<a | |
class="list-group-item list-group-item-action list-group-item-info" | |
></a> | |
<a | |
class="list-group-item list-group-item-action list-group-item-danger" | |
></a> | |
</div> | |
<div class="list-group"> | |
<a | |
href="https://en.wikipedia.org/wiki/Star_Trek:_The_Original_Series" | |
class="list-group-item list-group-item-action" | |
>The Original Series <span class="badge text-bg-primary">3</span></a | |
> | |
<a href="#" class="list-group-item list-group-item-action" | |
>Next Generation <span class="badge text-bg-primary">7</span></a | |
> | |
<a href="#" class="list-group-item list-group-item-action" | |
>Deep Space Nine <span class="badge text-bg-primary">7</span></a | |
> | |
<a href="#" class="list-group-item list-group-item-action" | |
>Voyager <span class="badge text-bg-primary">7</span></a | |
> | |
<a href="#" class="list-group-item list-group-item-action" | |
>Enterprise <span class="badge text-bg-primary">4</span></a | |
> | |
<a href="#" class="list-group-item list-group-item-action" | |
>Discovery <span class="badge text-bg-primary">3</span></a | |
> | |
<a href="#" class="list-group-item list-group-item-action" | |
>Picard <span class="badge text-bg-primary">2</span></a | |
> | |
</div> | |
<h2>Forms</h2> | |
<form> | |
<div class="form-group"> | |
<label for="firstname">First name</label> | |
<input type="text" id="firstname" class="form-control" /> | |
</div> | |
<div class="form-group"> | |
<label for="lastname">Last name</label> | |
<input type="text" id="lastname" class="form-control" /> | |
</div> | |
<div class="form-check"> | |
<input | |
class="form-check-input" | |
type="checkbox" | |
value="" | |
id="defaultCheck1" | |
/> | |
<label class="form-check-label" for="defaultCheck1" | |
>Remember me</label | |
> | |
</div> | |
<div class="form-check"> | |
<input | |
class="form-check-input" | |
type="radio" | |
name="directions" | |
id="leftDirection" | |
value="left" | |
checked | |
/> | |
<label class="form-check-label" for="leftDirection">Left</label> | |
</div> | |
<div class="form-check"> | |
<input | |
class="form-check-input" | |
type="radio" | |
name="directions" | |
id="rightDirection" | |
value="right" | |
/> | |
<label class="form-check-label" for="rightDirection">Right</label> | |
</div> | |
<input type="submit" class="btn btn-success" value="Register" /> | |
</form> | |
<h2>Buttons</h2> | |
<div> | |
<a href="#" class="btn btn-default">Link</a> | |
<button class="btn btn-info btn-lg">Button</button> | |
<input type="submit" value="Input Submit" class="btn btn-success" /> | |
<input | |
type="button" | |
value="Input Button" | |
class="btn btn-outline-danger btn-sm" | |
/> | |
</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-light">Colored background and colored text</p> | |
<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