Feat(NSI): exercice de lecture d'évènements

2023-03-04 17:52:58 +01:00
parent 50a708b158
commit 8282f2ad6e
7 changed files with 181 additions and 1 deletions
--- a/1NSI/08_Interaction_web/codes/popup/2E_popup.css
+++ b/1NSI/08_Interaction_web/codes/popup/2E_popup.css
@@ -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;
+}
--- a/1NSI/08_Interaction_web/codes/popup/2E_popup.html
+++ b/1NSI/08_Interaction_web/codes/popup/2E_popup.html
@@ -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>
--- a/1NSI/08_Interaction_web/codes/popup/2E_popup.js
+++ b/1NSI/08_Interaction_web/codes/popup/2E_popup.js
@@ -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');
+});