diff --git a/css/index.css b/css/index.css index 9ad88e4..50fbced 100644 --- a/css/index.css +++ b/css/index.css @@ -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%); diff --git a/css/index.css.map b/css/index.css.map index 0b85537..964a6d0 100644 --- a/css/index.css.map +++ b/css/index.css.map @@ -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" ], diff --git a/css/index.scss b/css/index.scss index 40f2e98..1855c37 100644 --- a/css/index.scss +++ b/css/index.scss @@ -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 ); + 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 ); + } } - &.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 ); - } -} \ No newline at end of file +} diff --git a/index.html b/index.html index 16bd740..a6e8d3f 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,7 @@ Lingo -
+
@@ -18,20 +18,22 @@ +
- - + +
-
-
+
+
+
-
-
+
+
+
+ +
- - - \ No newline at end of file diff --git a/js/index.js b/js/index.js index a3dfdea..3433617 100644 --- a/js/index.js +++ b/js/index.js @@ -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(); }); \ No newline at end of file