bamarty/Projet_Prog_Web
2
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Pseduo on menu

Browse source
This commit is contained in:
Baptiste Marty 2020-12-05 15:07:49 +01:00
parent 2e20b02058
commit 8cede4db62
3 changed files with 95 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
CSS/menu.css
View file

@ -63,7 +63,7 @@ main{
main section article span span { main section article span span {
opacity:0; opacity:0;
animation: fade-text 1s forwards; animation: fade-text 0.2s forwards;
font-size:3vw; font-size:3vw;
margin-right:-0.2vw; margin-right:-0.2vw;
} }
@ -116,10 +116,60 @@ main{
padding:0.3vw 1vw 0vw 0.5vw; 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{ footer{
flex:1; flex:0.5;
display:flex; display:flex;
flex-direction: column; flex-direction: column;
justify-content:flex-end; justify-content:flex-end;
align-items: center; align-items: center;
font-size:1vw;
} }
#names{
margin : 0;
}

7
HTML/menu.html
View file

@ -7,6 +7,7 @@
<link rel="stylesheet" href="../CSS/menu.css"> <link rel="stylesheet" href="../CSS/menu.css">
<link rel="preconnect" href="https://fonts.gstatic.com"> <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet">
<script src="../JAVASCRIPT/menu.js" defer></script>
</head> </head>
<body> <body>
<header> <header>
@ -29,6 +30,12 @@
<p id="introTxt">Pour commencer l'aventure, veuillez renseigner votre identité</p> <p id="introTxt">Pour commencer l'aventure, veuillez renseigner votre identité</p>
<p id="pseudoTxt">Entrez votre pseudo</p> <p id="pseudoTxt">Entrez votre pseudo</p>
<input id="pseudoInput" type="text"/> <input id="pseudoInput" type="text"/>
<p id="errorTxt"></p>
<div id="buttonBlock">
<div id="button">
<a id="buttonTxt">Go !</a>
</div>
</div>
</article> </article>
</section> </section>
</main> </main>

35
JAVASCRIPT/menu.js Normal file
View file

@ -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)