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

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

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

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

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

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

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

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

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

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

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

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

@ -1,4 +1,13 @@
<div class="signin"> <div class="signin">
<h2>Naam: &nbsp; <input id="username" name="username" type="text" autofocus></h2> <h2>Name: &nbsp<input id="username" name="username" list="names" autofocus></h2>
<h2>Wachtwoord: &nbsp; <input id="password" name="password" type="password"></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> </div>