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;
height: 30px;
width: 30px;
@ -8,28 +21,28 @@ span.letter {
color: white;
}
span.letter.red {
body span.letter.red {
background: #ed3746;
background: -webkit-gradient(linear, left top, left bottom, from(#ed3746), to(#ed1a2d));
background: linear-gradient(to bottom, #ed3746 0%, #ed1a2d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed3746', endColorstr='#ed1a2d',GradientType=0 );
}
span.letter.orange {
body span.letter.orange {
background: #d6b855;
background: -webkit-gradient(linear, left top, left bottom, from(#d6b855), to(#d6a400));
background: linear-gradient(to bottom, #d6b855 0%, #d6a400 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6b855', endColorstr='#d6a400',GradientType=0 );
}
span.letter.blue {
body span.letter.blue {
background: #4094dc;
background: -webkit-gradient(linear, left top, left bottom, from(#4094dc), to(#0466c7));
background: linear-gradient(to bottom, #4094dc 0%, #0466c7 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4094dc', endColorstr='#0466c7',GradientType=0 );
}
span.letter.grey {
body span.letter.grey {
background: #838383;
background: -webkit-gradient(linear, left top, left bottom, from(#838383), to(#545454));
background: linear-gradient(to bottom, #838383 0%, #545454 100%);

2
css/index.css.map
View File

@ -1,6 +1,6 @@
{
"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": [
"index.scss"
],

74
css/index.scss
View File

@ -1,37 +1,47 @@
span.letter {
font-family: 'Ubuntu', sans-serif;
height: 30px;
width: 30px;
display: inline-block;
body {
font-family: 'Open Sans', sans-serif;
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 );
input {
height: 20px;
}
&.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 );
button {
height: 28px;
}
&.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 );
span.letter {
font-family: 'Ubuntu', sans-serif;
height: 30px;
width: 30px;
display: inline-block;
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 );
}
}
}

22
index.html
View File

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

11
js/index.js
View File

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