Skip to content

Instantly share code, notes, and snippets.

@cba85

cba85/app.js

Created September 11, 2024 08:32
Show Gist options
  • Save cba85/d4b0004e9b9be7e70df179f50267dc78 to your computer and use it in GitHub Desktop.
Save cba85/d4b0004e9b9be7e70df179f50267dc78 to your computer and use it in GitHub Desktop.
Download ZIP
IPI Toulouse - 2024-2025 - IJVS010
Raw
app.js
// getElement(s)By*
//const title = document.getElementById("title");
const title = document.getElementsByTagName("h1");
console.log(title[0]);
const subsubtitles = document.getElementsByTagName("h3");
console.log(subsubtitles);
const subsubtitle2 = document.getElementById("subsubtitle2")
console.log(subsubtitle2);
const alerts = document.getElementsByClassName("alert");
console.log(alerts);
// querySelector*
const t = document.querySelector("h1");
console.log(t);
const sst = document.querySelectorAll("h3");
console.log(sst);
const titleElement = document.querySelector("#title");
console.log(titleElement);
const a = document.querySelectorAll(".alert");
console.log(a);
// Creer un élement HTML
const buttonElement = document.createElement("button");
console.log(buttonElement);
titleElement.prepend(buttonElement);
const titleText = titleElement.textContent;
console.log(titleText);
setTimeout(function () {
//titleElement.textContent = "<strong>Le titre</strong>";
titleElement.innerHTML = "<div style='color: yellow'>Le titre</div>";
}, 1000);
titleElement.style.color = "green";
titleElement.style.textAlign = "center";
console.log(titleElement.id);
titleElement.classList.add("alert");
titleElement.classList.remove("alert");
Raw
events.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 src="events.js" defer></script>
</head>
<body>
<h1>Events</h1>
<div>
<button id="more">Read more...</button>
</div>
<div class="content" style="display: none;">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quae placeat delectus totam! Repellat nobis natus tenetur necessitatibus atque ea, dolorum illum ut facere laudantium veniam magnam eveniet soluta sapiente repellendus!</p>
</div>
<br>
<button onclick="launch()">Click me</button>
</body>
</html>
Raw
events.js
function launch() {
console.log('launch');
}
// const contentElement = document.querySelector(".content");
const buttonElement = document.querySelector("#more");
buttonElement.addEventListener("click", function () {
console.log("click");
const contentElement = document.querySelector(".content");
contentElement.style.display = "block";
});
Raw
form.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 src="form.js" defer></script>
</head>
<body>
<h1>Forms</h1>
<form>
<label for="name">Name</label>
<input type="text" id="name" placeholder="Enter your name">
<button type="submit">Submit</button>
</form>
<div>You currently enter: <span id="realtime"></span></div>
<div id="results" style="display: none;">Bonjour <span id="display"></span></div>
</body>
</html>
Raw
form.js
const form = document.querySelector("form");
form.addEventListener("input", function (event) {
event.preventDefault();
document.querySelector("#realtime").textContent = form.name.value;
});
form.addEventListener("submit", function (event) {
event.preventDefault();
//const name = document.querySelector("#name").value;
const name = form.name.value;
document.querySelector("#display").textContent = name;
const results = document.querySelector("#results");
results.style.display = "block";
form.name.value = "";
document.querySelector("#realtime").textContent = "";
});
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 src="app.js" defer></script>
<style>
.alert {
background-color: red;
color: white;
padding: 1em;
text-align: center;
margin: 1em 0;
}
</style>
</head>
<body>
<h1 id="title">Title</h1>
<h2>Subtitle</h2>
<form action="" method="POST">
<label for="email">Email</label>
<input type="email" name="email" id="email">
<button type="submit">Submit</button>
</form>
<div class="alert">Alert</div>
<div>
<h3 id="subsubtitle1">Sub sub title</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores similique magni iusto quibusdam cum ut distinctio beatae, eaque adipisci sed vero reiciendis, impedit aspernatur et exercitationem rerum perspiciatis tempore officiis.</p>
<h3 id="subsubtitle2">Sub sub title</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores similique magni iusto quibusdam cum ut distinctio beatae, eaque adipisci sed vero reiciendis, impedit aspernatur et exercitationem rerum perspiciatis tempore officiis.</p>
<h3 id="subsubtitle3">Sub sub title</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores similique magni iusto quibusdam cum ut distinctio beatae, eaque adipisci sed vero reiciendis, impedit aspernatur et exercitationem rerum perspiciatis tempore officiis.</p>
</div>
<div class="alert">Alert</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita, deleniti quis delectus odio, sed omnis quidem facere recusandae alias consectetur enim. Culpa pariatur, quae quis natus vero commodi incidunt sapiente.</p>
</body>
</html>
Raw
notification.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 src="notification.js" defer></script>
<style>
body {
color: #333;
margin: 0 auto;
max-width: 42em;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.notification {
border: 1px solid #333;
border-radius: 0.5em;
text-align: center;
font-weight: bold;
margin: 1em 0;
padding: 1em;
box-shadow: 1px 1px 1px #ccc;
}
</style>
</head>
<body>
<h1 id="title">Notification</h1>
<!-- <div class="notification">Notification</div> -->
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum quo voluptatibus at a necessitatibus perspiciatis, eveniet praesentium, quam magnam alias neque sint consequatur doloremque excepturi repellendus inventore. Eum, in nesciunt.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id assumenda magni, ratione exercitationem quae quis quod accusamus et aperiam voluptatum! Sint cumque ullam sequi minima deserunt accusamus aut esse id.</p>
</body>
</html>
Raw
notification.js
// Créer l'élement HTML
const notificationElement = document.createElement("div");
// Quick solution
//const notificationHtml = `<div class="notification">Notification</div>`;
// Mettre le texte de la notification
notificationElement.textContent = "Notification";
// Ajouter la classe "notification" à l'élement
notificationElement.classList.add("notification");
// Se positionner sur le body, ou sur le h1...
const titleElement = document.querySelector("#title");
// Ajouter l'element HTML "notification" créé en js dans le DOM
setTimeout(function () {
titleElement.after(notificationElement);
setTimeout(function () {
notificationElement.remove();
}, 1000);
}, 400);
Raw
quit.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 src="quit.js" defer></script>
<style>
body {
margin: 0 auto;
max-width: 42em;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
padding: 1em;
}
img {
max-width: 100%;
}
</style>
</head>
<body>
<h1>Confirm leaving</h1>
<p><a href="https://tiktok.com">Tiktok</a></p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eum voluptates sit omnis modi dignissimos commodi recusandae, neque nulla nobis libero. <a href="https://www.ipi-ecoles.com/category/campus/toulouse/">IPI Toulouse</a> Nisi obcaecati vel perspiciatis cupiditate, ad consectetur temporibus facilis beatae.</p>
<div>Salut les TSTN2 2024-2025 <a href="https://www.instagram.com">Instagram</a></div>
</body>
</html>
Raw
quit.js
const linkElements = document.querySelectorAll("a");
for (const linkElement of linkElements) {
linkElement.addEventListener("click", function (e) {
const confirmation = confirm("Are you sure to leave this page?");
if (!confirmation) {
return e.preventDefault();
}
});
}
Raw
todolist.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>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
<script src="todolist.js" defer></script>
<style>
.error {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Todolist</h1>
<form>
<label for="task">Task</label>
<input type="text" id="task">
<button type="submit">Add</button>
</form>
<p class="error" style="display: none;"></p>
<ul id="tasks"></ul>
</body>
</html>
Raw
todolist.js
const tasks = ["task 1", "task 2", "task 3"];
// Récuperer la liste ul (via l'id)
const list = document.querySelector("#tasks");
function createTask(value) {
// Créer un element li
const li = document.createElement("li");
// Mettre la valeur de task dans le text de li
li.textContent = value;
// Ajouter la tâche dans l'élément liste ul
list.appendChild(li);
}
for (const task of tasks) {
createTask(task);
}
// Récupérer l'élement "form"
const formElement = document.querySelector("form");
// Récupérer l'élement "div.error"
const errorElement = document.querySelector(".error");
// Créer un évènement "submit" sur le formulaire
formElement.addEventListener("submit", function (event) {
event.preventDefault();
// Récupérer la valeur de l'input du formulaire
const value = formElement.task.value;
// Vérifier si l'input est vide
if (!value.trim()) {
errorElement.textContent = "Please enter a task";
errorElement.style.display = "block";
formElement.task.value = "";
return false;
}
// Cacher le message d'erreur
errorElement.style.display = "none";
// Ajouter la tâche à la liste (tableau)
tasks.unshift(value);
// Créer la tâche (comme lors du chargement de la page => function)
createTask(value);
// Vider l'input
formElement.task.value = "";
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment