sander/trafficlight
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

rework: translate to english, change picture, remove password

Browse source
This commit is contained in:
Sander Hautvast 2020-01-17 15:46:33 +01:00
parent d512989291
commit 46d76d1d15
15 changed files with 55 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
src/public/img/disappointed-face.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 23 KiB

BIN
src/public/img/grinning-face-with-smiling-eyes.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 27 KiB

BIN
src/public/img/neutral-face.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 22 KiB

BIN
src/public/img/trafficlight-green.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 6 KiB

BIN
src/public/img/trafficlight-orange.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.8 KiB

BIN
src/public/img/trafficlight-red.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5.5 KiB

BIN
src/public/img/trafficlight.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 24 KiB

16
src/public/js/stoplicht.js → src/public/js/trafficlight.js
View file

@ -2,22 +2,16 @@ get("#happy").addEventListener('click', happy);
get('#unsure').addEventListener('click', unsure);
get('#sad').addEventListener('click', sad);
get('#username').addEventListener("keydown", event => {
console.log(event);
checkError();
if (event.which == 13) {
get('#password').focus();
event.preventDefault();
}
});
get('#password').addEventListener("keydown", event => {
checkError();
if (event.which == 13) {
if (event.which === 13) {
get('#username').focus();
event.preventDefault();
}
});
function handle(event, next) {
if (event.which == 13) {
if (event.which === 13) {
get(next).focus;
event.preventDefault();
}
@ -29,7 +23,7 @@ function happy() {
}
function unsure() {
emotion().value = "2"
emotion().value = "2";
submit();
}
@ -48,7 +42,7 @@ function submit() {
}
function checkError(){
if (getValue("#username") != '' && getValue("#password") !=''){
if (getValue("#username") !== ''){
setHtml("#errorMessage",'');
}
}

17
src/public/stylesheets/stoplicht.css → src/public/stylesheets/trafficlight.css
View file

@ -2,12 +2,27 @@ body{
font-family: Arial;
}
.emotions{
margin: 0;
padding: 0;
border: 0;
}
h1{
font-size: 80px;
text-align: center;
}
.signin{
text-align: left;
text-align: center;
}
button, img{
padding: 0;
margin-top: -2px;
margin-bottom: -2px;
border: 0;
}
button{
margin: auto;
}

15
src/views/pages/error.ejs
View file

@ -1,13 +1,16 @@
<!DOCTYPE html>
<html lang="en">
<head>
<% include ../partials/header.ejs %>
<% include ../partials/header.ejs %>
</head>
<body>
<form id="emotionsForm" method="POST" action="/submit-form">
<% include ../partials/signin.ejs %>
<p id="errorMessage" class="error">Vul je naam/wachtwoord in</p>
<% include ../partials/body.ejs %>
</form>
<div class="main">
<h1>Rate your day</h1>
<form id="emotionsForm" method="POST" action="/submit-form">
<% include ../partials/signin.ejs %>
<p id="errorMessage" class="error">Choose a name</p>
<% include ../partials/body.ejs %>
</form>
</div>
</body>
</html>

13
src/views/pages/index.ejs
View file

@ -1,12 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<% include ../partials/header.ejs %>
<% include ../partials/header.ejs %>
</head>
<body>
<form id="emotionsForm" method="POST" action="/submit-form">
<% include ../partials/signin.ejs %>
<% include ../partials/body.ejs %>
</form>
<div class="main">
<h1>Rate your day</h1>
<form id="emotionsForm" method="POST" action="/submit-form">
<% include ../partials/signin.ejs %>
<% include ../partials/body.ejs %>
</form>
</div>
</body>
</html>

2
src/views/pages/thanks.ejs
View file

@ -4,6 +4,6 @@
<% include ../partials/header.ejs %>
</head>
<body>
<h1>Dankje!</h1>
<h1>Thanks!</h1>
</body>
</html>

10
src/views/partials/body.ejs
View file

@ -1,13 +1,11 @@
<div class="emotions">
<h1>Wat is je gevoel vandaag?</h1>
<input type="hidden" id="emotion" name="emotion">
<input type="hidden" id="timestamp" name="timestamp">
<button id="happy"><img src="img/grinning-face-with-smiling-eyes.png" title="Blij!"></button>
<button id="unsure"><img src="img/neutral-face.png" title="Neutraal"></button>
<button id="sad"><img src="img/disappointed-face.png" title="Niet blij!"></button>
<p>Vul je naam en wachtwoord in en kies een emoji</p>
<button id="sad"><img src="img/trafficlight-red.png" width="255px" style="margin-left: 1px" title="Unhappy"></button>
<button id="unsure"><img src="img/trafficlight-orange.png" width="256px" title="Neutral"></button>
<button id="happy"><img src="img/trafficlight-green.png" width="256px" title="Happy"></button>
</div>
<script type="text/javascript" src="js/stoplicht.js"></script>
<script type="text/javascript" src="js/trafficlight.js"></script>

2
src/views/partials/header.ejs
View file

@ -1,2 +1,2 @@
<link rel="stylesheet" type="text/css" href="/stylesheets/stoplicht.css" />
<link rel="stylesheet" type="text/css" href="/stylesheets/trafficlight.css" />
<title>Verkeerslicht</title>

13
src/views/partials/signin.ejs
View file

@ -1,4 +1,13 @@
<div class="signin">
<h2>Naam: &nbsp; <input id="username" name="username" type="text" autofocus></h2>
<h2>Wachtwoord: &nbsp; <input id="password" name="password" type="password"></h2>
<h2>Name: &nbsp<input id="username" name="username" list="names" autofocus></h2>
<datalist id="names">
<option value="Bert"></option>
<option value="Salar"></option>
<option value="Tessa"></option>
<option value="Wouter"></option>
<option value="Pim"></option>
<option value="Kwan Win"></option>
<option value="Erwin"></option>
<option value="Sander"></option>
</datalist>
</div>