From 053d24c158c6e55888f42262d481d6bfb30e8013 Mon Sep 17 00:00:00 2001 From: Yannick Francois Date: Fri, 19 Oct 2018 12:29:12 +0200 Subject: [PATCH] =?UTF-8?q?Affiche=20un=20texte=20par=20d=C3=A9faut,=20et?= =?UTF-8?q?=20propose=20une=20popup=20pour=20saisi?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Base de fonctionnement sans javascript --- public/name_form.html | 28 ++++++++++++++++++++++++++++ public/parametres.html | 6 +++--- public/script.js | 34 +++++++++++++++++++++++++++++++--- public/style.css | 22 ++++++++++++++++++++++ 4 files changed, 84 insertions(+), 6 deletions(-) create mode 100644 public/name_form.html diff --git a/public/name_form.html b/public/name_form.html new file mode 100644 index 00000000..d3e44290 --- /dev/null +++ b/public/name_form.html @@ -0,0 +1,28 @@ + + + + + + + + Framadate + + + + + + + + + + +
+ + +

Par exemple : Stéphane ou Caroline

+
+ + + diff --git a/public/parametres.html b/public/parametres.html index 1a32a7e7..9a3996dc 100644 --- a/public/parametres.html +++ b/public/parametres.html @@ -19,17 +19,17 @@

- Je m'appelle + Je m'appelle henri et le titre de ce sondage - est . + est .

Si je devais le décrire pour les autres personnes, je dirais - + .

diff --git a/public/script.js b/public/script.js index 32f88226..022ce157 100644 --- a/public/script.js +++ b/public/script.js @@ -1,3 +1,8 @@ +'use strict' + +const $ = selector => document.querySelector(selector) +const $$ = selector => document.querySelectorAll(selector) + const debugStorage = () => { for(var i = 0; i < localStorage.length; i++) { let key = localStorage.key(i) @@ -5,7 +10,30 @@ const debugStorage = () => { } } -document.querySelectorAll('input').forEach((inputElement) => { +var nameFieldLink = $("#name").addEventListener("click", (e) => { + e.preventDefault(); + console.log("click sur le name"); + createModal("truc"); +}); + +const removeOverlay = () => { + $('body').removeChild($('.overlay')) +} + +const createModal = (text) => { + const overlay = document.createElement('div') + const popin = document.createElement('div') + + popin.innerHTML = text + popin.className = 'modal' + overlay.className = 'overlay' + overlay.appendChild(popin) + overlay.addEventListener('click', removeOverlay) + $('body').insertBefore(overlay, $('main')) +} + + +$$('input').forEach((inputElement) => { inputElement.addEventListener("change", () => { localStorage[inputElement.name] = inputElement.value }); @@ -16,10 +44,10 @@ if(document.getElementById("type_sondage")) { let typeSondage = this.options[this.selectedIndex].text; if(typeSondage == "classique") { localStorage.setItem('type_sondage', this.options[this.selectedIndex].text); - document.querySelector('#next').href = "reponses.html"; + $('#next').href = "reponses.html"; } else { localStorage.setItem('type_sondage', 'dates'); - document.querySelector('#next').href = "dates.html"; + $('#next').href = "dates.html"; } debugStorage() }) diff --git a/public/style.css b/public/style.css index c877e63a..ae14a052 100644 --- a/public/style.css +++ b/public/style.css @@ -43,3 +43,25 @@ input[type="text"], input[type="email"] { line-height:60%; } +.toggle-field { + color: blue; + cursor: pointer; + text-decoration: underline; +} + +.overlay { + background: rgba(1, 1, 1, .3); + height: 100%; + top: 0; + left: 0; + position: absolute; + width: 100%; + z-index: 5; +} +.modal { + background: #fff; + top: 10%; + left: 40%; + padding: 10px; + position: absolute; +}