Skip to content
Commits on Source (4)
Show whitespace changes
Inline Side-by-side
exoge02/index.html 0 → 100644
View file @ 86252891
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exo GE 02</title>
<link rel="stylesheet" href="./style.css">
<script src="./index.js" defer></script>
</head>
<body>
<div id="target"></div>
<div>
<button id="red" data-color="red">Rouge</button>
<button id="yellow" data-color="yellow">Jaune</button>
<button id="green" data-color="green">Vert</button>
</div>
</body>
</html>
exoge02/index.js 0 → 100644
View file @ 86252891
const red = document.getElementById("red");
const yellow = red.nextElementSibling;
const green = yellow.nextElementSibling;
document.getElementById("target").classList.add("yellow");
document.querySelectorAll("button") // tous les boutons
.forEach(btn => btn.addEventListener("click", evt => { // ajout listener sur chaque bouton
// Récupérer la couleur dans les attributs personnalisés du bouton
// et l'affecter à la div cible
document.querySelector("#target").className = evt.target.dataset["color"];
}));
exoge02/style.css 0 → 100644
View file @ 86252891
#target {
width: 100px;
height: 100px;
}
.red {
background-color: red;
}
.yellow {
background-color: yellow;
}
.green {
background-color: green;
}
exoge03/index.html 0 → 100644
View file @ 86252891
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exo GE 03</title>
<link rel="stylesheet" href="./style.css">
<script src="./index.js" defer></script>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio nulla nostrum numquam voluptatibus obcaecati
magni est rerum repellat ut laboriosam nisi hic quia accusamus, sunt, animi adipisci asperiores eaque? Iure.</p>
<p>Aut dignissimos ducimus pariatur, quae, ab nobis recusandae earum voluptatibus saepe omnis eius doloremque
corrupti itaque deserunt optio vitae? Sequi libero consequuntur alias doloribus repellendus dolor, delectus
ullam accusantium expedita.</p>
</body>
</html>
exoge03/index.js 0 → 100644
View file @ 86252891
// Les paragraphes sont dans une flexbox, j'ai donc juste à
// changer leur order, donc jouer sur les classes CSS after et before
document.querySelectorAll("p") // sélectionne tous les paragraphes
.forEach(p => { // pour chaque paragraphe
p.addEventListener("click", evt => { // on lui ajoute un écouteur de click
const p = evt.target; // le paragraphe cliqué
// subtil : other prend la valeur du nextElementSibling
// si cet élément n'existe pas, il est undefined donc assimilé à false
// donc le OU logique (||) prend la relève et donc
// on prend la valeur de previousElementSibling
const other = p.nextElementSibling || p.previousElementSibling;
other.classList.remove("after", "before");
other.classList.add("after");
p.classList.remove("after", "before");
p.classList.add("before");
})
});
exoge03/style.css 0 → 100644
View file @ 86252891
body {
display: flex;
flex-direction: column;
}
p:first-of-type {
background-color: aquamarine;
}
p:last-of-type {
background-color: bisque;
}
.before {
order: 0;
}
.after {
order: 1;
}
exoge04/index.html 0 → 100644
View file @ 86252891
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exo GE 04</title>
<link rel="stylesheet" href="./style.css">
<script src="./index.js" defer></script>
</head>
<body>
<form action="checkForm.php" method="post">
<div>
<label for="login">Login</label>
<input type="text" id="login" name="login" data-my="">
<span class="info hide">Entrez votre login</span>
</div>
<div>
<label for="pwd">Mot de passe</label>
<input type="password" id="pwd" name="pwd" data-my="">
<span class="info hide">Entrez votre mot de passe</span>
</div>
<div>
<label for="confirm">Confirmation</label>
<input type="password" id="confirm" name="confirm" data-my="">
<span class="info hide">Confirmez votre mot de passe</span>
</div>
<div>
<input type="submit" value="Envoyer">
<input type="reset" value="Annuler">
</div>
</form>
</body>
</html>
exoge04/index.js 0 → 100644
View file @ 86252891
document.querySelectorAll("input[data-my]")
.forEach(input => {
input.addEventListener("focus", evt => {
evt.target.nextElementSibling.classList.remove("hide");
});
input.addEventListener("blur", evt => {
evt.target.nextElementSibling.classList.add("hide");
});
});
exoge04/style.css 0 → 100644
View file @ 86252891
body {
background-color: bisque;
}
div {
margin: 5px auto;
}
div:not(:last-of-type) {
display: grid;
grid-template-columns: 100px 300px 200px;
column-gap: 10px;
align-items: center;
}
div:not(:last-of-type)>*:not(:last-child) {
background-color: lightgray;
}
.info {
font-size: 80%;
font-style: italic;
}
.hide {
display: none;
}