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

52
public/parametres.html
View File

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

43
public/script.js
View File

@ -1,21 +1,34 @@
window.onload = () => {
if(localStorage.getItem('type_sondage') == null) {
localStorage.setItem('type_sondage', 'classique');
const debugStorage = () => {
for(var i = 0; i < localStorage.length; i++) {
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']")
typeSondageElement.forEach((currentElement) => {
currentElement.addEventListener('change', function() {
const selectedType = this.options[this.selectedIndex].text;
localStorage.setItem('type_sondage', type_sondage);
if(selectedType == "classique") {
document.querySelector('#next').href = "reponses.html";
} else {
document.querySelector('#next').href = "dates.html";
}
})
if(document.getElementById("type_sondage")) {
type_sondage.addEventListener('change', function() {
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";
} else {
localStorage.setItem('type_sondage', 'dates');
document.querySelector('#next').href = "dates.html";
}
debugStorage()
})
}
if(document.getElementById("startButton")) {
startButton.addEventListener('click', function () {
localStorage.clear()
localStorage.setItem('type_sondage', 'classique');
});
}