tykayn/funky-framadate-front
1
1
Fork 1
mirror of https://framagit.org/framasoft/framadate/funky-framadate-front.git synced 2023-08-25 13:53:14 +02:00
Code Issues Projects Releases Wiki Activity

Usage du localStorage

Browse Source 
Une fonction  permet d'afficher le contenu

Tous les valeurs des champs  sont stocké en local
This commit is contained in:
Yannick Francois 2018-10-08 23:49:04 +02:00
parent 0f6abfa7b9
commit affb5500e7
3 changed files with 79 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
public/index.html
View File

@ -1,41 +1,40 @@
<!doctype html> <!DOCTYPE html>
<html lang="fr"> <html lang="fr">
<head>
<meta charset="utf-8">
<meta name="referrer" content="same-origin">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<head> <title>Framadate</title>
<meta charset="utf-8">
<meta name="referrer" content="same-origin">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Framadate</title> <meta name="description" content=" ">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content=" "> <link crossorigin="anonymous" rel="stylesheet" href="https://rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap-reboot.css">
<meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="style.css">
</head>
<link crossorigin="anonymous" rel="stylesheet" href="https://rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap-reboot.css"> <body>
<link rel="stylesheet" href="style.css">
</head>
<body> <section>
<h1>Créer un sondage</h1>
<section> <p>Framadate est un service en ligne permettant de planifier un rendez-vous ou prendre des décisions rapidement et
<h1>Créer un sondage</h1>
<p>Framadate est un service en ligne permettant de planifier un rendez-vous ou prendre des décisions rapidement et
simplement</p> simplement</p>
<a href="parametres.html" class="btn">C'est parti</a> <a href="parametres.html" class="btn" id="startButton">C'est parti</a>
</section> </section>
<section> <section>
<h1>Où sont mes sondages ?</h1> <h1>Où sont mes sondages ?</h1>
<form> <form>
<label for="email">Je cherche les sondages qui correspondent au mail</label> <label for="email">Je cherche les sondages qui correspondent au mail</label>
<input type="email" name="email" id="email"> <input type="email" name="email" id="email">
<input type="submit" value="Retrouver mes sondages"> <input type="submit" value="Retrouver mes sondages">
</form> </form>
</section> </section>
</body>
<script src="script.js"></script> <script src="script.js"></script>
</body>
</html> </html>

52
public/parametres.html
View File

@ -1,46 +1,44 @@
<!doctype html> <!DOCTYPE html>
<html lang="fr"> <html lang="fr">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="referrer" content="same-origin"> <meta name="referrer" content="same-origin">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Framadate</title> <title>Framadate</title>
<meta name="description" content=" "> <meta name="description" content=" ">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link crossorigin="anonymous" rel="stylesheet" href="https://rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap-reboot.css"> <link crossorigin="anonymous" rel="stylesheet" href="https://rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap-reboot.css">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<section> <section>
<p> <p>
Je m'appelle Je m'appelle <input name="nom">
<input name="nom" data-group="record" />
et le titre de ce sondage et le titre de ce sondage
<select id="type_sondage" data-group="record"> <select id="type_sondage">
<option>classique</option> <option>classique</option>
<option>special dates</option> <option>special dates</option>
</select> </select>
est est <input name="titre">.
<input name="titre" data-group="record"/>. </p>
</p> <p>
<p>
Si je devais le décrire pour les autres personnes, je dirais Si je devais le décrire pour les autres personnes, je dirais
<textarea></textarea> <textarea></textarea>
</p> </p>
</section> </section>
<nav> <nav>
<a href="reponses.html" class="btn" id="next">Continuer</a> <a href="reponses.html" class="btn" id="next">Continuer</a>
</nav> </nav>
</body>
<script src="script.js"></script> <script src="script.js"></script>
</body>
</html> </html>

43
public/script.js
View File

@ -1,21 +1,34 @@
window.onload = () => { const debugStorage = () => {
if(localStorage.getItem('type_sondage') == null) { for(var i = 0; i < localStorage.length; i++) {
localStorage.setItem('type_sondage', 'classique'); let key = localStorage.key(i)
console.debug(key, " = ", localStorage[key])
} }
}
console.debug(localStorage) document.querySelectorAll('input').forEach((inputElement) => {
inputElement.addEventListener("change", () => {
localStorage[inputElement.name] = inputElement.value
});
});
let typeSondageElement = document.querySelectorAll("*[data-group='record']") if(document.getElementById("type_sondage")) {
typeSondageElement.forEach((currentElement) => { type_sondage.addEventListener('change', function() {
currentElement.addEventListener('change', function() { let typeSondage = this.options[this.selectedIndex].text;
const selectedType = this.options[this.selectedIndex].text; if(typeSondage == "classique") {
localStorage.setItem('type_sondage', type_sondage); localStorage.setItem('type_sondage', this.options[this.selectedIndex].text);
if(selectedType == "classique") { document.querySelector('#next').href = "reponses.html";
document.querySelector('#next').href = "reponses.html"; } else {
} else { localStorage.setItem('type_sondage', 'dates');
document.querySelector('#next').href = "dates.html"; document.querySelector('#next').href = "dates.html";
} }
}) debugStorage()
})
}
if(document.getElementById("startButton")) {
startButton.addEventListener('click', function () {
localStorage.clear()
localStorage.setItem('type_sondage', 'classique');
}); });
} }