Skip to content

Instantly share code, notes, and snippets.

@cba85

cba85/app.js

Created October 26, 2023 06:59
Show Gist options
  • Save cba85/eeb24b35c4b095b7a918a94758d70be4 to your computer and use it in GitHub Desktop.
Save cba85/eeb24b35c4b095b7a918a94758d70be4 to your computer and use it in GitHub Desktop.
Download ZIP
IPI Toulouse - TSTN2 Dev - 2023/2024 - Exercice TD
Raw
app.js
function load() {
document.querySelector(".message").textContent =
"Le texte est chargé c'est bon";
//document.querySelector(".loading").style.display = "none";
document.querySelector(".loading").remove();
document.querySelector("h1").style.backgroundColor = "yellow";
const text = document.querySelector("h1").textContent;
console.log(text);
/*
const h1 = document.getElementsByTagName("h1")[0];
const p = document.getElementsByClassName("text")[0];
const subtitle = document.getElementById("subtitle");
*/
/*
const h1 = document.querySelector("h1");
const p = document.querySelector(".text");
const subtitle = document.querySelector("#subtitle");
document.querySelector(".text").innerHTML = "<strong>IPI TOULOUSE</strong>";
document.querySelector("h1").style.backgroundColor = "yellow";
document.querySelector("h1").className = "title";
const a = document.createElement("a");
a.textContent = "Contactez-nous";
a.href = "https://ecole-ipi.com";
const div = document.querySelector("div");
div.append(a);
*/
}
const spoiler = document.querySelector("#spoiler");
function displaySpoiler() {
console.log("clicked");
document.querySelector(".displaySpoiler").style.display = "block";
}
spoiler.addEventListener("click", displaySpoiler);
setTimeout(load, 2000);
const form = document.querySelector("form");
form.name.addEventListener("input", function () {
document.querySelector(".displayName").innerHTML = form.name.value;
});
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script defer src="app.js"></script>
</head>
<body>
<p class="displayName"></p>
<form action="">
<label for="name">Name</label>
<input type="text" id="name" />
<button type="submit">Submit</button>
</form>
<h1>Arbre décisionnel</h1>
<div class="loading">Chargement en cours...</div>
<p class="message"></p>
<h2 id="subtitle">Sous titre</h2>
<h3>Sous Sous titre</h3>
<button id="spoiler">Afficher le spoiler</button>
<p class="displaySpoiler" style="display: none">
SPOILER !!! Le héros meurt à la fin !!!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum quae,
molestiae velit explicabo unde laudantium at rerum repellendus quaerat,
fuga quia soluta architecto magni? Veritatis dolorem quibusdam quam
debitis numquam.
</p>
<p class="text">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Commodi sapiente
laboriosam corrupti ad nemo quidem repellendus reiciendis non alias sed,
blanditiis pariatur quis dignissimos corporis voluptates magni? Quia,
aliquam. Saepe.
</p>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente commodi
fugiat veritatis, aspernatur totam tempora obcaecati repudiandae, dolores
modi accusantium temporibus perferendis corrupti quae tempore, pariatur
ullam cupiditate. Facilis, laboriosam.
<span> <a href="">lferpgn</a> </span>
<strong>ge,gern</strong>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment