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

@ -111,28 +111,23 @@ body {
#text p {
margin: 0.1vh 0 0.1vh 0;
}
#inputBox {
display: flex;
flex-direction: column;
align-items: center;
}
#friendInput{
font-family:'Special Elite',cursive;
font-size:1.5vw;
border-radius:1vw;
height:2.5vh;
width: 15vw;
padding:0.5vw 0.7vw 0.3vw 0.7vw;
}
#friendInput:focus{
outline:none;
font-family:'Special Elite',cursive;
font-size:1.5vw;
border-radius:1vw;
padding:0.5vw 0.7vw 0.3vw 0.7vw;
}
#friendInput:focus{
outline:none;
font-family:'Special Elite',cursive;
font-size:1.5vw;
border-radius:1vw;
padding:0.5vw 0.7vw 0.3vw 0.7vw;
}
#arrowBlock{
display:flex;

View file

@ -4,6 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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="preconnect" href="https://fonts.gstatic.com">
<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 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">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">
<p id="space">Press enter</p>
<img id="arrow" src="../Images/Lecture.png" alt="Texte suivant"/>

View file

@ -4,6 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>INSAïde</title>
<link rel="shortcut icon" href="../Images/Logo.png" type="image/png">
<link rel="stylesheet" href="../CSS/couloir.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<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 name="viewport" content="width=device-width, initial-scale=1.0">
<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="preconnect" href="https://fonts.gstatic.com">
<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();
} else {
button.removeAttribute('href');
errorMsg.innerHTML = "Entrez un pseudo !";
errorMsg.style.cssText = "color: #BF0909; font-size: 2vh";
button.removeEventListener("click", handleButtonClicked);
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 ------------------//
document.addEventListener("keypress", makeNextTextAppear);
setTimeout(() => {
document.addEventListener("keypress", makeNextTextAppear);
}, 2000);
friendInput.addEventListener("input", handleInputChange);
button.addEventListener("click", handleButtonClicked);

View file

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