arne/lingo
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Added some more styling

Browse Source
This commit is contained in:
Arne van Iterson 2019-11-28 10:08:03 +01:00
parent 13f1642d56
commit 5d52b799bb
5 changed files with 81 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
css/index.css
View File

@ -1,4 +1,17 @@
span.letter { body {
font-family: 'Open Sans', sans-serif;
text-align: center;
}
body input {
height: 20px;
}
body button {
height: 28px;
}
body span.letter {
font-family: 'Ubuntu', sans-serif; font-family: 'Ubuntu', sans-serif;
height: 30px; height: 30px;
width: 30px; width: 30px;
@ -8,28 +21,28 @@ span.letter {
color: white; color: white;
} }
span.letter.red { body span.letter.red {
background: #ed3746; background: #ed3746;
background: -webkit-gradient(linear, left top, left bottom, from(#ed3746), to(#ed1a2d)); background: -webkit-gradient(linear, left top, left bottom, from(#ed3746), to(#ed1a2d));
background: linear-gradient(to bottom, #ed3746 0%, #ed1a2d 100%); background: linear-gradient(to bottom, #ed3746 0%, #ed1a2d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed3746', endColorstr='#ed1a2d',GradientType=0 ); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed3746', endColorstr='#ed1a2d',GradientType=0 );
} }
span.letter.orange { body span.letter.orange {
background: #d6b855; background: #d6b855;
background: -webkit-gradient(linear, left top, left bottom, from(#d6b855), to(#d6a400)); background: -webkit-gradient(linear, left top, left bottom, from(#d6b855), to(#d6a400));
background: linear-gradient(to bottom, #d6b855 0%, #d6a400 100%); background: linear-gradient(to bottom, #d6b855 0%, #d6a400 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6b855', endColorstr='#d6a400',GradientType=0 ); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6b855', endColorstr='#d6a400',GradientType=0 );
} }
span.letter.blue { body span.letter.blue {
background: #4094dc; background: #4094dc;
background: -webkit-gradient(linear, left top, left bottom, from(#4094dc), to(#0466c7)); background: -webkit-gradient(linear, left top, left bottom, from(#4094dc), to(#0466c7));
background: linear-gradient(to bottom, #4094dc 0%, #0466c7 100%); background: linear-gradient(to bottom, #4094dc 0%, #0466c7 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4094dc', endColorstr='#0466c7',GradientType=0 ); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4094dc', endColorstr='#0466c7',GradientType=0 );
} }
span.letter.grey { body span.letter.grey {
background: #838383; background: #838383;
background: -webkit-gradient(linear, left top, left bottom, from(#838383), to(#545454)); background: -webkit-gradient(linear, left top, left bottom, from(#838383), to(#545454));
background: linear-gradient(to bottom, #838383 0%, #545454 100%); background: linear-gradient(to bottom, #838383 0%, #545454 100%);

2
css/index.css.map
View File

@ -1,6 +1,6 @@
{ {
"version": 3, "version": 3,
"mappings": "AAAA,AAAA,IAAI,AAAA,OAAO,CAAC;EACR,WAAW,EAAE,oBAAoB;EACjC,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,IAAI;EACX,OAAO,EAAE,YAAY;EACrB,UAAU,EAAE,MAAM;EAClB,SAAS,EAAE,IAAI;EACf,KAAK,EAAE,KAAK;CA6Bf;;AApCD,AAQI,IARA,AAAA,OAAO,AAQN,IAAI,CAAC;EACF,UAAU,EAAE,OAAO;EACnB,UAAU,EAAE,mDAAoD;EAChE,UAAU,EAAE,sDAAsD;EAClE,UAAU,EAAE,oDAAoD;EAChE,MAAM,EAAE,2GAA2G;CACtH;;AAdL,AAeI,IAfA,AAAA,OAAO,AAeN,OAAO,CAAC;EACL,UAAU,EAAE,OAAO;EACnB,UAAU,EAAE,mDAAoD;EAChE,UAAU,EAAE,sDAAsD;EAClE,UAAU,EAAE,oDAAoD;EAChE,MAAM,EAAE,2GAA2G;CACtH;;AArBL,AAsBI,IAtBA,AAAA,OAAO,AAsBN,KAAK,CAAC;EACH,UAAU,EAAE,OAAO;EACnB,UAAU,EAAE,mDAAoD;EAChE,UAAU,EAAE,sDAAsD;EAClE,UAAU,EAAE,oDAAoD;EAChE,MAAM,EAAE,2GAA2G;CACtH;;AA5BL,AA6BI,IA7BA,AAAA,OAAO,AA6BN,KAAK,CAAC;EACH,UAAU,EAAE,OAAO;EACnB,UAAU,EAAE,mDAAoD;EAChE,UAAU,EAAE,sDAAsD;EAClE,UAAU,EAAE,oDAAoD;EAChE,MAAM,EAAE,2GAA2G;CACtH", "mappings": "AAAA,AAAA,IAAI,CAAC;EACD,WAAW,EAAE,uBAAuB;EACpC,UAAU,EAAE,MAAM;CA4CrB;;AA9CD,AAGI,IAHA,CAGA,KAAK,CAAC;EACF,MAAM,EAAE,IAAI;CACf;;AALL,AAMI,IANA,CAMA,MAAM,CAAC;EACH,MAAM,EAAE,IAAI;CACf;;AARL,AASI,IATA,CASA,IAAI,AAAA,OAAO,CAAC;EACR,WAAW,EAAE,oBAAoB;EACjC,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,IAAI;EACX,OAAO,EAAE,YAAY;EACrB,UAAU,EAAE,MAAM;EAClB,SAAS,EAAE,IAAI;EACf,KAAK,EAAE,KAAK;CA6Bf;;AA7CL,AAiBQ,IAjBJ,CASA,IAAI,AAAA,OAAO,AAQN,IAAI,CAAC;EACF,UAAU,EAAE,OAAO;EACnB,UAAU,EAAE,mDAAoD;EAChE,UAAU,EAAE,sDAAsD;EAClE,UAAU,EAAE,oDAAoD;EAChE,MAAM,EAAE,2GAA2G;CACtH;;AAvBT,AAwBQ,IAxBJ,CASA,IAAI,AAAA,OAAO,AAeN,OAAO,CAAC;EACL,UAAU,EAAE,OAAO;EACnB,UAAU,EAAE,mDAAoD;EAChE,UAAU,EAAE,sDAAsD;EAClE,UAAU,EAAE,oDAAoD;EAChE,MAAM,EAAE,2GAA2G;CACtH;;AA9BT,AA+BQ,IA/BJ,CASA,IAAI,AAAA,OAAO,AAsBN,KAAK,CAAC;EACH,UAAU,EAAE,OAAO;EACnB,UAAU,EAAE,mDAAoD;EAChE,UAAU,EAAE,sDAAsD;EAClE,UAAU,EAAE,oDAAoD;EAChE,MAAM,EAAE,2GAA2G;CACtH;;AArCT,AAsCQ,IAtCJ,CASA,IAAI,AAAA,OAAO,AA6BN,KAAK,CAAC;EACH,UAAU,EAAE,OAAO;EACnB,UAAU,EAAE,mDAAoD;EAChE,UAAU,EAAE,sDAAsD;EAClE,UAAU,EAAE,oDAAoD;EAChE,MAAM,EAAE,2GAA2G;CACtH",
"sources": [ "sources": [
"index.scss" "index.scss"
], ],

76
css/index.scss
View File

@ -1,37 +1,47 @@
span.letter { body {
font-family: 'Ubuntu', sans-serif; font-family: 'Open Sans', sans-serif;
height: 30px;
width: 30px;
display: inline-block;
text-align: center; text-align: center;
font-size: 25px; input {
color: white; height: 20px;
&.red {
background: #ed3746;
background: -moz-linear-gradient(top, #ed3746 0%, #ed1a2d 100%);
background: -webkit-linear-gradient(top, #ed3746 0%,#ed1a2d 100%);
background: linear-gradient(to bottom, #ed3746 0%,#ed1a2d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed3746', endColorstr='#ed1a2d',GradientType=0 );
} }
&.orange { button {
background: #d6b855; height: 28px;
background: -moz-linear-gradient(top, #d6b855 0%, #d6a400 100%);
background: -webkit-linear-gradient(top, #d6b855 0%,#d6a400 100%);
background: linear-gradient(to bottom, #d6b855 0%,#d6a400 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6b855', endColorstr='#d6a400',GradientType=0 );
} }
&.blue { span.letter {
background: #4094dc; font-family: 'Ubuntu', sans-serif;
background: -moz-linear-gradient(top, #4094dc 0%, #0466c7 100%); height: 30px;
background: -webkit-linear-gradient(top, #4094dc 0%,#0466c7 100%); width: 30px;
background: linear-gradient(to bottom, #4094dc 0%,#0466c7 100%); display: inline-block;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4094dc', endColorstr='#0466c7',GradientType=0 ); text-align: center;
font-size: 25px;
color: white;
&.red {
background: #ed3746;
background: -moz-linear-gradient(top, #ed3746 0%, #ed1a2d 100%);
background: -webkit-linear-gradient(top, #ed3746 0%,#ed1a2d 100%);
background: linear-gradient(to bottom, #ed3746 0%,#ed1a2d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed3746', endColorstr='#ed1a2d',GradientType=0 );
}
&.orange {
background: #d6b855;
background: -moz-linear-gradient(top, #d6b855 0%, #d6a400 100%);
background: -webkit-linear-gradient(top, #d6b855 0%,#d6a400 100%);
background: linear-gradient(to bottom, #d6b855 0%,#d6a400 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6b855', endColorstr='#d6a400',GradientType=0 );
}
&.blue {
background: #4094dc;
background: -moz-linear-gradient(top, #4094dc 0%, #0466c7 100%);
background: -webkit-linear-gradient(top, #4094dc 0%,#0466c7 100%);
background: linear-gradient(to bottom, #4094dc 0%,#0466c7 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4094dc', endColorstr='#0466c7',GradientType=0 );
}
&.grey {
background: #838383;
background: -moz-linear-gradient(top, #838383 0%, #545454 100%);
background: -webkit-linear-gradient(top, #838383 0%,#545454 100%);
background: linear-gradient(to bottom, #838383 0%,#545454 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#838383', endColorstr='#545454',GradientType=0 );
}
} }
&.grey { }
background: #838383;
background: -moz-linear-gradient(top, #838383 0%, #545454 100%);
background: -webkit-linear-gradient(top, #838383 0%,#545454 100%);
background: linear-gradient(to bottom, #838383 0%,#545454 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#838383', endColorstr='#545454',GradientType=0 );
}
}

22
index.html
View File

@ -9,7 +9,7 @@
<title>Lingo</title> <title>Lingo</title>
</head> </head>
<body> <body>
<div> <div class="formContainer box">
<form id="submitForm"> <form id="submitForm">
<input type="text" id="wordInput" autocomplete="off" placeholder="Submit word"> <input type="text" id="wordInput" autocomplete="off" placeholder="Submit word">
<button type="submit">Versturen</button> <button type="submit">Versturen</button>
@ -18,20 +18,22 @@
<form id="guessForm" style="display: none;"> <form id="guessForm" style="display: none;">
<input type="text" id="wordInput" autocomplete="off" placeholder="Guess word"> <input type="text" id="wordInput" autocomplete="off" placeholder="Guess word">
<button type="submit">Versturen</button> <button type="submit">Versturen</button>
<button id="giveUp">Opgeven</button>
</form> </form>
<button id="restart">Opnieuw beginnen</button>
<button id="giveUp">Opgeven</button> <button id="restart" style="display: none;">Opnieuw beginnen</button>
</div> </div>
<span id="letterCount"></span><br> <div class="contentContainer box">
<span id="word"></span><br> <span id="letterCount"></span><br>
<span id="word"></span><br>
<div> <div>
<span id="guesses"></span><br> <span id="guesses"></span><br>
</div>
<span id="result"></span>
</div> </div>
<span id="result"></span>
<script src="./js/index.js"></script> <script src="./js/index.js"></script>
</body> </body>
</html> </html>

11
js/index.js
View File

@ -49,7 +49,7 @@ function checkWord(guessArray, wordArray) {
submitForm.addEventListener('submit', function(event) { submitForm.addEventListener('submit', function(event) {
event.preventDefault(); event.preventDefault();
word = submitForm.children[0].value; word = submitForm.children[0].value;
if (word.split('').length > 0) { if (word.split('').length > 1) {
word = word.toUpperCase(); word = word.toUpperCase();
wordArray = word.split(''); wordArray = word.split('');
resultElement.innerHTML = ''; resultElement.innerHTML = '';
@ -113,6 +113,7 @@ guessForm.addEventListener('submit', function(event) {
audio.allCorrect.play(); audio.allCorrect.play();
resultElement.innerHTML = "JP: Gefeliciteerd, u heeft gewonnen"; resultElement.innerHTML = "JP: Gefeliciteerd, u heeft gewonnen";
guessForm.style.display = 'none'; guessForm.style.display = 'none';
document.getElementById('restart').style.display = 'inline-block';
} }
} }
showLetter(); showLetter();
@ -123,10 +124,12 @@ guessForm.addEventListener('submit', function(event) {
} }
}); });
document.getElementById('giveUp').addEventListener('click', function () { document.getElementById('giveUp').addEventListener('click', function (event) {
event.preventDefault();
audio.giveUp.play(); audio.giveUp.play();
}); });
document.getElementById('restart').addEventListener('click', function () { document.getElementById('restart').addEventListener('click', function (event) {
location.reload(); event.preventDefault();
location.reload();
}); });