lafrite/2022-2023
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Feat(NSI): exercice de lecture d'évènements
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Bertrand Benjamin
2023-03-04 17:52:58 +01:00
parent 50a708b158
commit 8282f2ad6e
7 changed files with 181 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
1NSI/08_Interaction_web/codes/2E_compteur.html Normal file
View File

@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Compteur de clics </title>
<meta charset="utf-8">
<script>
let compteur = 0;
function suivant(){
compteur = compteur + 1;
let v = document.getElementById("valeur");
if (compteur <= 1) {
v.innerHTML = compteur + " clic";
}
else {
v.innerHTML = compteur + " clics";
}
}
function reinitialiser(){
compteur = 0;
let v = document.getElementById("valeur");
v.innerHTML = compteur + " clic";
}
</script>
</head>
<body>
<h1>Compteur de clics en Javascript </h1>
<button onclick="suivant();">Clic !</button>
<br>
<span id="valeur">0</span>
<br>
<button onclick="reinitialiser();">Réinitialiser !</button>
</body>
</html>

34
1NSI/08_Interaction_web/codes/popup/2E_popup.css Normal file
View File

@@ -0,0 +1,34 @@
section {
background-color: #f1f1f1;
padding: 20px;
margin: 20px 0;
border: 1px solid black;
}
section h2 {
margin-top: 0;
}
section .close {
float: right;
}
section a {
text-decoration: none;
color: black;
}
#popup {
position: fixed;
top: 10%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
background-color: red;
border: 1px solid black;
z-index: 9999;
}
.hidden {
display: none;
}

37
1NSI/08_Interaction_web/codes/popup/2E_popup.html Normal file
View File

@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html>
<head>
<title>Exemple de liens avec popup</title>
<link rel="stylesheet" type="text/css" href="./2E_popup.css">
</head>
<body>
<h1>Venez voir mes super articles</h1>
<section id="section1">
<h2>Article 1
<a href="#" id="close-section1" class="close">X</a>
</h2>
<p>Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.</p>
</section>
<section id="section2">
<h2>Article 2
<a href="#" id="close-section2" class="close">X</a>
</h2>
<p>Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.</p>
</section>
<section id="section3">
<h2>Article 3
<a href="#" id="close-section3" class="close">X</a>
</h2>
<p>Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.</p>
</section>
<div id="popup" class="hidden">
<p>Cette section est maintenant fermée.</p>
<a href="#" id="close-popup">OK</a>
</div>
<script src="./2E_popup.js"></script>
</body>
</html>

46
1NSI/08_Interaction_web/codes/popup/2E_popup.js Normal file
View File

@@ -0,0 +1,46 @@
const popup = document.getElementById('popup');
function closeSection1 () {
let section = document.getElementById('section1');
section.style.display = "none";
popup.classList.remove('hidden');
}
document.getElementById("close-section1").addEventListener('click', closeSection1)
function closeSection2 () {
let section = document.getElementById('section2');
popup.classList.remove('hidden');
let p = document.createElement('p')
p.innerHTML = "Je disparais pas!"
section.appendChild(p)
}
document.getElementById("close-section2").addEventListener('click', closeSection2)
let compteur = 0
function closeSection3 () {
let popup = document.getElementById('popup');
let section = document.getElementById('section3');
if (compteur > 2) {
section.style.display = "none";
popup.classList.remove('hidden');
} else {
compteur = compteur + 1;
popup.classList.remove('hidden');
let p = document.createElement('p')
p.innerHTML = "Restez! Je vous fait une promo de 10%!"
section.appendChild(p)
}
}
document.getElementById("close-section3").addEventListener('click', closeSection3)
const closePopupLink = document.getElementById('close-popup');
closePopupLink.addEventListener('click', (event) => {
event.preventDefault();
popup.classList.add('hidden');
});