correction erreur input si pas de pseudo sur aide_ami et attente avant de pouvoir faire défiler

This commit is contained in:
Florian Ehr 2020-12-15 16:48:30 +01:00
parent 196add2314
commit 118152bfc9
6 changed files with 30 additions and 18 deletions

View file

@ -112,16 +112,11 @@ body {
margin: 0.1vh 0 0.1vh 0; margin: 0.1vh 0 0.1vh 0;
} }
#inputBox {
display: flex;
flex-direction: column;
align-items: center;
}
#friendInput{ #friendInput{
font-family:'Special Elite',cursive; font-family:'Special Elite',cursive;
font-size:1.5vw; font-size:1.5vw;
border-radius:1vw; border-radius:1vw;
height:2.5vh;
width: 15vw; width: 15vw;
padding:0.5vw 0.7vw 0.3vw 0.7vw; padding:0.5vw 0.7vw 0.3vw 0.7vw;
} }

View file

@ -4,6 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>INSAïde</title> <title>INSAïde</title>
<link rel="shortcut icon" href="../Images/Logo.png" type="image/png">
<link rel="stylesheet" href="../CSS/aide_ami.css"> <link rel="stylesheet" href="../CSS/aide_ami.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">
@ -24,7 +25,7 @@
<p id="firstText">La photo est.. correcte. Au moins vous n'avez pas oublié de retirer le flash !</p> <p id="firstText">La photo est.. correcte. Au moins vous n'avez pas oublié de retirer le flash !</p>
<p class="textWillAppear">Vous avez passé une nuit mouvementée par des questionnements incessants</p> <p class="textWillAppear">Vous avez passé une nuit mouvementée par des questionnements incessants</p>
<p class="textWillAppear">En même temps, c'est compréhensible vu ce que vous venez de vivre. <span>On dirait que l'aventure n'est pas finie pour autant...</span></p> <p class="textWillAppear">En même temps, c'est compréhensible vu ce que vous venez de vivre. <span>On dirait que l'aventure n'est pas finie pour autant...</span></p>
<p class="textWillAppear">Le lendemain, vous vous hâtez vers votre plus fidèle ami <span id="inputBox"><input id="friendInput" type="text"/><span></span></span> pour tout lui expliquer.</p> <p class="textWillAppear">Le lendemain, vous vous hâtez vers votre plus fidèle ami <span id="inputBox"><input id="friendInput" type="text" placeholder=""/><span id="errorMsg"></span></span> pour tout lui expliquer.</p>
<div id="arrowBlock"> <div id="arrowBlock">
<p id="space">Press enter</p> <p id="space">Press enter</p>
<img id="arrow" src="../Images/Lecture.png" alt="Texte suivant"/> <img id="arrow" src="../Images/Lecture.png" alt="Texte suivant"/>

View file

@ -4,6 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>INSAïde</title> <title>INSAïde</title>
<link rel="shortcut icon" href="../Images/Logo.png" type="image/png">
<link rel="stylesheet" href="../CSS/couloir.css"> <link rel="stylesheet" href="../CSS/couloir.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">

View file

@ -4,6 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>INSAïde</title> <title>INSAïde</title>
<link rel="shortcut icon" href="../Images/Logo.png" type="image/png">
<link rel="stylesheet" href="../CSS/couloir_ami.css"> <link rel="stylesheet" href="../CSS/couloir_ami.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">

View file

@ -55,12 +55,24 @@ function handleButtonClicked(event) {
button.click(); button.click();
} else { } else {
button.removeAttribute('href'); button.removeAttribute('href');
errorMsg.innerHTML = "Entrez un pseudo !"; button.removeEventListener("click", handleButtonClicked);
errorMsg.style.cssText = "color: #BF0909; font-size: 2vh"; let repeater = setInterval(() => {
friendInput.setAttribute("placeholder", "");
setTimeout(() => {
friendInput.setAttribute("placeholder", "Et votre ami ?");
}, 100);
}, 200);
setTimeout(() => {
clearInterval(repeater);
button.addEventListener("click", handleButtonClicked);
}, 1000);
} }
} }
//------------------ Gestion events ------------------// //------------------ Gestion events ------------------//
document.addEventListener("keypress", makeNextTextAppear); setTimeout(() => {
document.addEventListener("keypress", makeNextTextAppear);
}, 2000);
friendInput.addEventListener("input", handleInputChange); friendInput.addEventListener("input", handleInputChange);
button.addEventListener("click", handleButtonClicked); button.addEventListener("click", handleButtonClicked);

View file

@ -42,5 +42,7 @@ function handleDisplayEye(){
//listeners //listeners
boisson.addEventListener("change",handleSelectChange) boisson.addEventListener("change",handleSelectChange)
document.addEventListener("keypress",handleDisplayText) setInterval(() => {
document.addEventListener("keypress",handleDisplayText)
}, 1000);
safeButton.addEventListener("click",handleDisplayEye) safeButton.addEventListener("click",handleDisplayEye)