<script type="text/javascript">function login(){
var question = prompt("What is your name ?");
var reponse = "etienne";
var statut;
var nouveau = "yes";
// check if the name is in the database reponse
if(question === reponse){
parBis();
}else{
statut = prompt("Are you new here ?");
}
// what i write if the name is recognized
function parBis(){
document.getElementsByClassName("button_par")[0].innerHTML = "Hey " + question + ", welcome back !";
}
// what i write if the name is new or there is an error
if (question != reponse && statut === nouveau){
document.getElementsByClassName("button_par")[0].innerHTML = "Welcome " + question + ", please create an account.";
}else if(question === reponse){
parBis();
}else{
document.getElementsByClassName("button_par")[0].innerHTML = "<span>There must be an error. Try to put your name again</span>";
}
}
// logout
function logout(){
// window.location.reload(); only works with your environnement or website
document.getElementsByClassName("button_par")[0].innerHTML = "";
}
</script>
<style type="text/css">body {
display:flex;
flex-direction:column;
align-items:center;
align-content:center;
justify-content:flex-start;
height:100vh;
margin:0;
}
p{
font-family:roboto, sans-serif;
}
p.button_par{
color:#fff;
}
p.button_par span{
background:#fff;
color:#f44336;
border:1px solid #f44336;
border-radius:2px;
display:inline-block;
padding:15px;
}
button{
border:0;
border-radius:2px;
padding:15px 25px;
cursor:pointer;
box-shadow:5px 5px 14px 0px rgba(0,0,0,0.26);
font-size:20px;
margin:25px;
}
.login{
background:#8BC34A;
color:#fff;
}
.logout{
background:#f44336;
color:#fff;
}
button.login:hover{
background:#fff;
color:#8BC34A;
box-shadow:10px 10px 24px 0px rgba(0,0,0,0.26);
transform:scale(1.1);
}
button.logout:hover{
background:#fff;
color:#f44336;
box-shadow:10px 10px 24px 0px rgba(0,0,0,0.26);
transform:scale(1.1);
}
.button_zone{
background:#607D8B;
width:100%;
height:auto;
display:flex;
flex-direction:row;
align-items:center;
justify-content:center;
border-top:25px solid #455A64;
}</style>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div class="button_zone">
<button class="login" onclick="login()">Login</button>
<button class="logout" onclick="logout()">Logout</button>
<p class="button_par"></p>
</div>
<p>Click on the login button to connect</p>
</body>
</html>
mmjj () - 3 years ago - Reply 0
