From 8cede4db624691be3cd0c5fdf09fed1f0191358a Mon Sep 17 00:00:00 2001 From: bamarty Date: Sat, 5 Dec 2020 15:07:49 +0100 Subject: [PATCH] Pseduo on menu --- CSS/menu.css | 56 +++++++++++++++++++++++++++++++++++++++++++--- HTML/menu.html | 7 ++++++ JAVASCRIPT/menu.js | 35 +++++++++++++++++++++++++++++ 3 files changed, 95 insertions(+), 3 deletions(-) create mode 100644 JAVASCRIPT/menu.js diff --git a/CSS/menu.css b/CSS/menu.css index c9bb1cb..fcfd82d 100644 --- a/CSS/menu.css +++ b/CSS/menu.css @@ -63,7 +63,7 @@ main{ main section article span span { opacity:0; - animation: fade-text 1s forwards; + animation: fade-text 0.2s forwards; font-size:3vw; margin-right:-0.2vw; } @@ -116,10 +116,60 @@ main{ padding:0.3vw 1vw 0vw 0.5vw; } + #buttonBlock{ + height:4vw; + } + + #button { + margin-top:2vw; + display:flex; + justify-content: center; + align-items: center; + background-image: linear-gradient( #5EE283, #057B26); + border-radius: 4vw; + box-shadow: -0.2vw 0.2vw 0.2vw rgba(255, 255, 255, 0.7); + padding:0.8vw 0.8vw 0.5vw 0.8vw; + opacity:0; + animation:fade-text 1s forwards; + animation-delay:6s; + cursor: pointer; + } + + #buttonTxt { + text-decoration:none; + margin:0; + color : black; + text-align: center; + font-size:2vw; + } + + #button:hover { + border: 0.2vw solid #FFFFFF; + box-sizing: border-box; + border-radius: 4vw; + + } + + #button:active { + background-image: linear-gradient( #057B26, #5EE283); + } + + #errorTxt{ + font-size:1.5vw; + color:#A30909; + } + footer{ - flex:1; + flex:0.5; display:flex; flex-direction: column; justify-content:flex-end; align-items: center; -} \ No newline at end of file + font-size:1vw; +} + + #names{ + margin : 0; + } + + \ No newline at end of file diff --git a/HTML/menu.html b/HTML/menu.html index 388e7f7..142eff8 100644 --- a/HTML/menu.html +++ b/HTML/menu.html @@ -7,6 +7,7 @@ +
@@ -29,6 +30,12 @@

Pour commencer l'aventure, veuillez renseigner votre identité

Entrez votre pseudo

+

+
+
+ Go ! +
+
diff --git a/JAVASCRIPT/menu.js b/JAVASCRIPT/menu.js new file mode 100644 index 0000000..a9b0bd6 --- /dev/null +++ b/JAVASCRIPT/menu.js @@ -0,0 +1,35 @@ +// select elements +let pseudoInput = document.getElementById("pseudoInput") +let errorTxt = document.getElementById("errorTxt") +let button = document.getElementById("button") +let pseudo = "" + +//functions + +function initPseudoInput(){ + console.log(pseudo); + pseudoInput.value = "" + console.log(pseudo); +} + +function handleNavigation(){ + console.log(pseudo); + if (pseudo){ + button.childNodes[1].setAttribute("href","etrange_decouverte.html") + localStorage.setItem("pseudo",pseudo); + } else { + button.childNodes[1].removeAttribute("href") + errorTxt.innerText = "Veuillez rentrer un pseudo svp" + } +} + +function handlePseudoChange(event){ + pseudo = event.target.value; + console.log(pseudo); +} + +initPseudoInput(); + +// event listeners +pseudoInput.addEventListener("change",handlePseudoChange) +button.addEventListener("click",handleNavigation) \ No newline at end of file