diff --git a/WebDev.md b/WebDev.md index cb78c5f..ed61c73 100644 --- a/WebDev.md +++ b/WebDev.md @@ -51,5 +51,5 @@ Remember, the deadline for this week's task is June 7th, 2022, at 23:59. - +Yash Agrawal - [CSOC22-Week1](https://github.com/yash6318/CSOC22-Week1/tree/newbyyash) [Site] (https://yash6318.github.io/CSOC22-Week1/) diff --git a/easy.html b/easy.html new file mode 100644 index 0000000..d28938e --- /dev/null +++ b/easy.html @@ -0,0 +1,91 @@ + + + + + + + + + + + + + + Hangman Game-Yash Agrawal + + + + +
+
+

Hangman

+ + +
+ Please wait while the game is loading... +
+ + +
Lives left :
+ + + + + + + +
+ + +
+
+
+
+
+
+
+
+
+
+
+ +
+
+ + +
+ + +
Time Left : 300s
+ + +
Streak (of words) : 0
+ + + +
+

Incorrect Words:

+

+
+

+
+ + + + +
+ + +
+ + +
+
+ + + + diff --git a/hard.html b/hard.html new file mode 100644 index 0000000..ae38c1e --- /dev/null +++ b/hard.html @@ -0,0 +1,93 @@ + + + + + + + + + + + + + + + Hangman Game-Yash Agrawal + + + + +
+
+

Hangman

+ + +
+ Please wait while the game is loading... +
+ + +
Lives left :
+ + + + + + +
+ + +
+
+
+
+
+
+
+
+
+
+
+ +
+
+ + +
+ + +
Time Left : 180s
+ + +
Streak Count : 0
+ + +
+

Incorrect Words:

+

+
+

+
+ + + + + +
+ + +
+ + +
+
+ + + + + + diff --git a/images/hangman-bg.jpg b/images/hangman-bg.jpg new file mode 100644 index 0000000..04a974a Binary files /dev/null and b/images/hangman-bg.jpg differ diff --git a/images/hangman.png b/images/hangman.png new file mode 100644 index 0000000..ca0e2ee Binary files /dev/null and b/images/hangman.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..a65fe85 --- /dev/null +++ b/index.html @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + Hangman Game + + + +
Hangman
+
by:- Yash Agrawal
+
+
+
+ + +
+ + +
+
+ + + + + \ No newline at end of file diff --git a/leaderboard.html b/leaderboard.html new file mode 100644 index 0000000..ce592d0 --- /dev/null +++ b/leaderboard.html @@ -0,0 +1,37 @@ + + + + + + + + + + + + + Leaderboard-Hangman + + + +
+

Leaderboard

+ + + + + + + + + + + +
RankName of PlayerHighest Score
+ +
+ + + + \ No newline at end of file diff --git a/scripts/easymode.js b/scripts/easymode.js new file mode 100644 index 0000000..c78f0b7 --- /dev/null +++ b/scripts/easymode.js @@ -0,0 +1,256 @@ +const heading = document.querySelector('#heading'); +const word = document.querySelector('#word'); +const incorrect = document.querySelector('#incorrect-words'); +const wordHolder = document.querySelector('#word-holder'); +const alphabetsHolder = document.querySelector('#alphabets-holder'); +const noOfLives = document.querySelector('#no-of-lives'); +const hintBtn = document.querySelector('#hintButton') + +const randomWordGen = 'https://random-word-api.herokuapp.com/word'; +const page = document.getElementById('container'); +const streakPlace = document.querySelector('#streak-count'); +const restartGame = document.querySelector('#restart-button'); +const step1 = document.querySelector('.head'); +const step2 = document.querySelector('.body'); +const step3 = document.querySelectorAll('.step3'); +const step4 = document.querySelector('.step4'); +const step5 = document.querySelector('.step5'); + +const timeHolder = document.querySelector('#timer'); +const audio = new Audio("sounds/wrong_input.wav"); +const audioDead = new Audio("sounds/you_dead.wav"); +let streak = 0; +let lives; +let remIndex; + +let time = 300; +let hintWordIndex ; + + +for (var i = 1; i <= localStorage.length; i++) { + // accesing key for updating scores + var playerKey = localStorage.key(i); + if (playerKey === "name") { + var playerIndex = i; + } +} +const names = localStorage.key(playerIndex); +const playerName = localStorage.getItem(names); +const playerScore = localStorage.getItem(playerName); + + +restartGame.addEventListener('click', () => { + window.location.href = 'index.html'; +}) + +document.addEventListener('DOMContentLoaded', function () { + var checkbox = document.querySelector('input[type="checkbox"]'); + + checkbox.addEventListener('change', function () { + if (checkbox.checked) { + setTimeout( function (){ + window.location.href = 'hard.html'; + },400); + + + } else { + window.location.href = 'easy.html'; + + } + }); +}); + +fetch(randomWordGen).then(function (response) { + return response.json(); +}).then(function (data) { + console.log(data[0]); + + if (data[0].length <= 5) { + + lives = 5; + noOfLives.textContent = lives; + + //removing loading message on loading and showing hangman + document.getElementById('loading').classList.add("display"); + document.getElementById('hangman').classList.remove("display"); + + const capitalized = data[0].toUpperCase(); + const finalWordArr = capitalized.split(''); + const finalWordLen = data[0].length; + remIndex = finalWordLen; + + + var dispArr = []; + + + var timer = setInterval(() => { + time -= 1; + timeHolder.innerHTML = time + "s"; + if (time === 0) { + clearInterval(timer); + audioDead.play(); + page.classList.add('non-clickAble') + wordHolder.textContent = ""; + finalWordArr.forEach(alpha => { + wordHolder.textContent = wordHolder.textContent + " " + alpha + " "; + }); + heading.textContent = "Time is up! You are dead!!☠️"; + page.classList.add('non-clickAble') + restartGame.classList.remove('non-clickAble') + restartGame.classList.add('clickAble') + } + }, 1000); + + + + + for (let index = 0; index < finalWordLen; index++) { + dispArr.push('_'); + wordHolder.textContent = wordHolder.textContent + ' _ '; + } + + + + + // display all aplhabets + for (let index = 0; index < 26; index++) { + alphabetsHolder.innerHTML = alphabetsHolder.innerHTML + ''; + } + + + + const alphabetList = document.querySelectorAll('#alphabet'); + // nodelist to array + alphabetList.forEach(function (alphabet) { + alphabet.addEventListener('click', function () { + alphabet.classList.remove('btn-outline-primary'); + alphabet.classList.add('btn-primary'); + alphabet.classList.add('disabled'); + + + // find alphabet exist in word at which place + const flag = finalWordArr.indexOf(alphabet.textContent); + var index = -1; + var indArr = []; + + + if (flag > -1) { + + alphabetList.forEach(e => { + if (e.textContent == alphabet.textContent) { + e.classList.add('btn-success'); + e.classList.remove('btn-outline-primary'); + } + }); + finalWordArr.forEach(alphabets => { + index++; + if (alphabets == alphabet.textContent) { + indArr.push(index); + } + }); + index = -1; + + //updating streak + streak += indArr.length; + streakPlace.textContent = streak; + + //updating the word + indArr.forEach(num => { + dispArr[num] = alphabet.textContent; + }); + + + wordHolder.innerHTML = ""; + + dispArr.forEach(char => { + wordHolder.textContent = wordHolder.textContent + " " + char + " "; + }) + + + remIndex -= indArr.length; + + + + if (remIndex === 0) { + clearInterval(timer); + page.classList.add('non-clickAble') + heading.textContent = "You Escaped!!🧠"; + // string to int convertion + var score = parseInt(playerScore); + score += 3; + localStorage.setItem(playerName, score); + setTimeout(() => { + window.location.reload(); + },3000); + } + } + else { + // display in incorrect + audio.play(); + streak = 0; + streakPlace.textContent = streak; + if(incorrect.textContent!=='') incorrect.textContent = incorrect.textContent + " , " + alphabet.textContent; + else incorrect.textContent = incorrect.textContent + " " + alphabet.textContent; + alphabetList.forEach(e => { + if (e.textContent == alphabet.textContent) { + e.classList.add('btn-danger'); + e.classList.remove('btn-outline-primary'); + } + }); + + noOfLives.textContent = noOfLives.textContent - 1; + lives--; + if (lives === 4) { + step1.classList.remove('display'); + } + if (lives === 3) { + step2.classList.remove('display'); + } + if (lives === 2) { + step3.forEach(e => { + e.classList.remove('display'); + }) + } + if (lives === 1) { + step4.classList.remove('display'); + } + if (lives === 0) { + step5.classList.remove('display'); + audioDead.play(); + clearInterval(timer); + wordHolder.textContent = ""; + finalWordArr.forEach(alpha => { + wordHolder.textContent = wordHolder.textContent + " " + alpha + " "; + }); + page.classList.add('non-clickAble') + restartGame.classList.remove('non-clickAble') + restartGame.classList.add('clickAble') + heading.textContent = "You are dead!!☠️"; + } + } + }) + hintBtn.addEventListener('click', () => { + hintBtn.classList.add('disabled'); + for (let k = 0; k < finalWordLen; k++) { + if (dispArr[k] == '_') { + hintWordIndex=k; + break; + } + } + alphabetList.forEach(e => { + if (e.textContent == finalWordArr[hintWordIndex]) { + e.classList.remove('alphabet'); + e.classList.add('alphabet-hint'); + e.classList.remove('btn-outline-primary'); + } + }); + }) + }) + + } + else { + window.location.reload(); + + } + +}) diff --git a/scripts/first.js b/scripts/first.js new file mode 100644 index 0000000..b7a9f5e --- /dev/null +++ b/scripts/first.js @@ -0,0 +1,24 @@ +const enterButton = document.querySelector('#enter-btn') +const leaderboardButton = document.querySelector('#leaderboard-btn') + + +const inpName = document.querySelector('#input-name') +let playerName; + +enterButton.addEventListener('click', function(event) { + playerName = inpName.value; + console.log(playerName); + if (playerName === '') { + alert('Please enter valid name!!'); + event.preventDefault(); + } + else { + localStorage.setItem("name", playerName); + localStorage.setItem(playerName, '0'); + window.location.href = 'easy.html'; + } +}); + +leaderboardButton.addEventListener('click', function () { + window.location.href = 'leaderboard.html'; +}); diff --git a/scripts/hardmode.js b/scripts/hardmode.js new file mode 100644 index 0000000..e3feaae --- /dev/null +++ b/scripts/hardmode.js @@ -0,0 +1,247 @@ +const heading = document.querySelector('#heading'); +const word = document.querySelector('#word'); +const incorrect = document.querySelector('#incorrect-words'); +const wordHolder = document.querySelector('#word-holder'); +const alphabetsHolder = document.querySelector('#alphabets-holder'); +const noOfLives = document.querySelector('#no-of-lives'); +const hintBtn = document.querySelector('#hintButton') + +const randomWordGen = 'https://random-word-api.herokuapp.com/word'; +const page = document.getElementById('container'); +const streakPlace = document.querySelector('#streak-count'); +const restartGame = document.querySelector('#restart-button'); +const step1 = document.querySelector('.head'); +const step2 = document.querySelectorAll('.step2'); +const step3 = document.querySelectorAll('.step3'); + +const timeHolder = document.querySelector('#timer'); +const audio = new Audio("sounds/wrong_input.wav"); +const audioDead = new Audio("sounds/you_dead.wav"); +let streak = 0; +let lives; +let remIndex; + +let time = 180; +let hintWordIndex ; + + +for (var i = 1; i <= localStorage.length; i++) { + // accesing key for updating scores + var playerKey = localStorage.key(i); + if (playerKey === "name") { + var playerIndex = i; + } +} +const names = localStorage.key(playerIndex); +const playerName = localStorage.getItem(names); +const playerScore = localStorage.getItem(playerName); + + +restartGame.addEventListener('click', () => { + window.location.href = 'index.html'; +}) + +document.addEventListener('DOMContentLoaded', function () { + var checkbox = document.querySelector('input[type="checkbox"]'); + + checkbox.addEventListener('change', function () { + if (checkbox.checked) { + window.location.href = 'hard.html'; + } else { + setTimeout( function (){ + window.location.href = 'easy.html'; + },400); + + } + }); +}); + +fetch(randomWordGen).then(function (response) { + return response.json(); +}).then(function (data) { + console.log(data[0]); + + if (data[0].length > 5) { + + lives = 3; + noOfLives.textContent = lives; + + //removing loading message on loading + document.getElementById('loading').classList.add("display"); + document.getElementById('hangman').classList.remove("display"); + + const capitalized = data[0].toUpperCase(); + const finalWordArr = capitalized.split(''); + const finalWordLen = data[0].length; + remIndex = finalWordLen; + + var dispArr = []; + + + var timer = setInterval(() => { + time -= 1; + timeHolder.innerHTML = time + "s"; + if (time === 0) { + audioDead.play(); + clearInterval(timer); + page.classList.add('non-clickAble') + wordHolder.textContent = ""; + finalWordArr.forEach(alpha => { + wordHolder.textContent = wordHolder.textContent + " " + alpha + " "; + }); + heading.textContent = "Time is up! You are dead!!☠️"; + page.classList.add('non-clickAble') + restartGame.classList.remove('non-clickAble') + restartGame.classList.add('clickAble') + } + }, 1000); + + + + + for (let index = 0; index < finalWordLen; index++) { + dispArr.push('_'); + wordHolder.textContent = wordHolder.textContent + ' _ '; + } + + + + + // display all aplhabets + for (let index = 0; index < 26; index++) { + alphabetsHolder.innerHTML = alphabetsHolder.innerHTML + ''; + } + + + + const alphabetList = document.querySelectorAll('#alphabet'); + // nodelist to array + alphabetList.forEach(function (alphabet) { + alphabet.addEventListener('click', function () { + alphabet.classList.remove('btn-outline-primary'); + alphabet.classList.add('btn-primary'); + alphabet.classList.add('disabled'); + + + // find alphabet exist in word at which place + const flag = finalWordArr.indexOf(alphabet.textContent); + var index = -1; + var indArr = []; + + + if (flag > -1) { + + alphabetList.forEach(e => { + if (e.textContent == alphabet.textContent) { + e.classList.add('btn-success'); + e.classList.remove('btn-outline-primary'); + } + }); + finalWordArr.forEach(alphabets => { + index++; + if (alphabets == alphabet.textContent) { + indArr.push(index); + } + }); + index = -1; + + //updating streak + streak += indArr.length; + streakPlace.textContent = streak; + + //updating the word + indArr.forEach(num => { + dispArr[num] = alphabet.textContent; + }); + + + wordHolder.innerHTML = ""; + + dispArr.forEach(char => { + wordHolder.textContent = wordHolder.textContent + " " + char + " "; + }) + + + remIndex -= indArr.length; + + + + if (remIndex === 0) { + clearInterval(timer); + page.classList.add('non-clickAble') + heading.textContent = "You Escaped!!🧠"; + // string to int convertion + var score = parseInt(playerScore); + score += 5; + localStorage.setItem(playerName, score); + setTimeout(() => { + window.location.reload(); + },3000); + } + } + else { + // display in incorrect + audio.play(); + streak = 0; + streakPlace.textContent = streak; + if(incorrect.textContent!=='') incorrect.textContent = incorrect.textContent + " , " + alphabet.textContent; + else incorrect.textContent = incorrect.textContent + " " + alphabet.textContent; + alphabetList.forEach(e => { + if (e.textContent == alphabet.textContent) { + e.classList.add('btn-danger'); + e.classList.remove('btn-outline-primary'); + } + }); + + noOfLives.textContent = noOfLives.textContent - 1; + lives--; + + if (lives === 2) { + step1.classList.remove('display'); + } + if (lives === 1) { + step2.forEach(e => { + e.classList.remove('display'); + }) + } + if (lives === 0) { + step3.forEach(e => { + e.classList.remove('display'); + }) + audioDead.play(); + clearInterval(timer); + wordHolder.textContent = ""; + finalWordArr.forEach(alpha => { + wordHolder.textContent = wordHolder.textContent + " " + alpha + " "; + }); + page.classList.add('non-clickAble') + restartGame.classList.remove('non-clickAble') + restartGame.classList.add('clickAble') + heading.textContent = "You are dead!!☠️"; + } + } + }) + hintBtn.addEventListener('click', () => { + hintBtn.classList.add('disabled'); + for (let k = 0; k < finalWordLen; k++) { + if (dispArr[k] == '_') { + hintWordIndex=k; + break; + } + } + alphabetList.forEach(e => { + if (e.textContent == finalWordArr[hintWordIndex]) { + e.classList.remove('alphabet'); + e.classList.add('alphabet-hint'); + e.classList.remove('btn-outline-primary'); + } + }); + }) + }) + + } + else { + window.location.reload(); + } + +}) diff --git a/scripts/leaderboard.js b/scripts/leaderboard.js new file mode 100644 index 0000000..5bf7b81 --- /dev/null +++ b/scripts/leaderboard.js @@ -0,0 +1,56 @@ +const btn = document.getElementById("return-btn"); +btn.addEventListener("click", function () { + window.location.href = 'index.html'; +}); + + +// obtaining key value pairs +var keys = Object.keys(localStorage); +var highScoreArr = Object.values(localStorage); + + +// // find index which containes +var index = highScoreArr.indexOf(localStorage.name); + + +// bubble-sorted both keys and score arrays +for (let j = 0; j < highScoreArr.length; j++) { + + for (let k = 0; k < highScoreArr.length; k++) { + if (k != index && j != index) { + if (parseInt(highScoreArr[j]) > parseInt(highScoreArr[k])) { + [highScoreArr[j],highScoreArr[k]]=[highScoreArr[k],highScoreArr[j]]; + [keys[j],keys[k]]=[keys[k],keys[j]] + } + } + } +} + +// displaying table +for (var i = 0; i < highScoreArr.length && i < 11; i++) { + + if(i!=index){ + // creating table entities + const tr = document.createElement('tr'); + const sNo = document.createElement('th'); + sNo.scope = "row"; + const nameOfPlayer = document.createElement('td'); + const highestScore = document.createElement('td'); + + sNo.textContent = i; + nameOfPlayer.textContent = keys[i]; + highestScore.textContent = highScoreArr[i]; + + tr.appendChild(sNo); + tr.appendChild(nameOfPlayer); + tr.appendChild(highestScore); + + console.log(nameOfPlayer); + console.log(highestScore); + document.getElementById('table-body').appendChild(tr); + } else { + console.log(keys[i]); + console.log(highScoreArr[i]); + } + +} diff --git a/sounds/wrong_input.wav b/sounds/wrong_input.wav new file mode 100644 index 0000000..bb86793 Binary files /dev/null and b/sounds/wrong_input.wav differ diff --git a/sounds/you_dead.wav b/sounds/you_dead.wav new file mode 100644 index 0000000..5b8f757 Binary files /dev/null and b/sounds/you_dead.wav differ diff --git a/styles/leaderboard.css b/styles/leaderboard.css new file mode 100644 index 0000000..b40511b --- /dev/null +++ b/styles/leaderboard.css @@ -0,0 +1,54 @@ +html, body { + text-align: center; + background-image: url('../images/hangman-bg.jpg'); + height: 100%; + background-position: center; + background-repeat: no-repeat; + background-size: cover; + + font-family: 'Montserrat'; + color: white; + margin-top: 0; + margin-bottom: 0; +} +#heading { + font-family: 'Sacramento'; + font-size: 5rem; +} +.container { + padding: 10%; +} +#table-headings { + font-family: 'Arvo'; +} +.btn { + position: relative; + margin: 50px auto; + background: #021118; + background-image: -webkit-linear-gradient(top, #13242d, #120303); + background-image: -moz-linear-gradient(top, #13242d, #120303); + background-image: -ms-linear-gradient(top, #13242d, #120303); + background-image: -o-linear-gradient(top, #13242d, #120303); + background-image: linear-gradient(to bottom, #13242d, #120303); + -webkit-border-radius: 17; + -moz-border-radius: 17; + border-radius: 17px; + text-shadow: 1px 1px 3px #c4c4c4; + -webkit-box-shadow: 1px 7px 9px #c4c4c4; + -moz-box-shadow: 1px 7px 9px #c4c4c4; + box-shadow: 1px 7px 9px #c4c4c4; + color: #ffffff; + font-size: 20px; + padding: 10px 20px 10px 20px; + text-decoration: none; + } + +.btn:hover { + background: #b6b9ba; + background-image: -webkit-linear-gradient(top, #b6b9ba, #858585); + background-image: -moz-linear-gradient(top, #b6b9ba, #858585); + background-image: -ms-linear-gradient(top, #b6b9ba, #858585); + background-image: -o-linear-gradient(top, #b6b9ba, #858585); + background-image: linear-gradient(to bottom, #b6b9ba, #858585); + text-decoration: none; +} \ No newline at end of file diff --git a/styles/modes.css b/styles/modes.css new file mode 100644 index 0000000..b248bad --- /dev/null +++ b/styles/modes.css @@ -0,0 +1,301 @@ +.non-clickAble { + pointer-events: none; +} + +.clickAble { + pointer-events: all; +} + +html { + background-image: url('../images/hangman-bg.jpg'); + min-height: 100%; + background-position: center; + background-repeat: no-repeat; + background-size: cover; +} +body { + text-align: center; + background:transparent; + font-family: 'Montserrat'; + color: white; + margin-top: 0; +} + +#heading { + font-family: 'Sacramento', cursive; + font-size: 4rem; + line-height: 1.5; + font-weight: 900; + margin: 20px auto 10px; + +} + +#alphabets-holder { + width: 60%; + margin: auto; + +} +#loading { + z-index: 100; + width: 100%; + height: 100%; + background-color: rgba(192, 192, 192, 0.5); + background-image: url("https://i.stack.imgur.com/MnyxU.gif"); + font-size: 4rem; + background-repeat: no-repeat; + background-position: center; +} + +#easyBtn { + margin-right: 100px; + width: 100px; +} + +#hardBtn { + margin-right: 100px; + width: 100px; +} +#word-place { + margin: 20px auto 0px; + font-size: 2rem; +} +#word-holder { + padding: 30px; +} +#word { + margin: 1% auto 1%; + font-family: 'Montserrat-bold', sans-serif; + font-weight: 300; +} + +#hintButton { + margin-bottom: 1%; + +} +#restart-btn { + display: inline; +} + +.alphabet-hint { + height: 55px; + width: 55px; + border-radius: 5px; + align-items: center; + justify-content: center; + margin: 10px; + transition: all 1s ease; + background-image: linear-gradient(90deg, #ffbbbb, #ffe4c0); + box-shadow: 0 2px 18px 0 rgba(248, 94, 122, 0.39), 0 1px 2px 0 rgba(248, 91, 124, 0.33); +} +.timer { + font-size: 1.2rem; +} + +.alphabet { + height: 55px; + width: 55px; + border-radius: 40%; + align-items: center; + justify-content: center; + margin: 10px; + color: black; + transition: all 0.5s ease; + background-image: linear-gradient(90deg, #3eddda, #34a7b8); + box-shadow: 0 2px 18px 0 rgba(115, 250, 243, 0.39), 0 1px 2px 0 rgba(113, 247, 236, 0.33); +} +.alphabet:hover { + opacity: 0.8; +} + +.roof { + background-color:white; + + width: 10.5%; + height: 1.73%; + position: absolute; + margin: 20px auto; + right: 45%; + top: 30%; +} + +.wall { + background-color:white; + + width: 0.78%; + height: 22%; + position: absolute; + margin: 20px auto; + right: 45%; + top: 30%; + +} + +.rope { + background-color:white; + + width: 0.52%; + height: 2.31%; + position: absolute; + margin: 20px auto; + right: 50%; + top: 31%; + +} + + +.head { + background-color: white; + width: 2.6%; + height: 5.79%; + border-radius: 100%; + position: absolute; + margin: 20px auto; + right: 49%; + top: 33%; +} + +.body { + background-color: white; + width: 0.52%; + height: 12.74%; + position: absolute; + margin: 20px auto; + right: 50%; + top: 36%; + +} + +.arm-left { + background-color: white; + width: 0.52%; + height: 4.63%; + position: absolute; + margin: 20px auto; + right: 51%; + top: 38%; + transform: rotate(30deg); + +} + +.arm-right { + background-color: white; + width: 0.52%; + height: 4.63%; + position: absolute; + margin: 20px auto; + right: 49%; + top: 38%; + transform: rotate(-30deg); + + +} + +.leg-left { + background-color: white; + width: 0.52%; + height: 4.63%; + position: absolute; + margin: 20px auto; + right: 50.5%; + top: 48%; + transform: rotate(30deg); + +} + +.leg-right { + background-color: white; + width: 0.52%; + height: 4.63%; + position: absolute; + margin: 20px auto; + right: 49.5%; + top: 48%; + transform: rotate(-30deg); + +} +.incorrect-words { + color: red; +} + +.main-content { + margin-top: 250px; +} + +.display { + display: none; +} + +.lives { + position: relative; + font-size: 1.3rem; + margin: auto; + top: 50%; +} +.switch { + position: relative; + display: inline-block; + width: 60px; + height: 34px; +} + + +.switch input { + opacity: 0; + width: 0; + height: 0; + } + + +.slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #ccc; + -webkit-transition: .4s; + transition: .4s; +} + +.slider:before { + position: absolute; + content: ""; + height: 26px; + width: 26px; + left: 4px; + bottom: 4px; + background-color: white; + -webkit-transition: .4s; + transition: .4s; +} + +input:checked + .slider { + background-color: #2196F3; + } + +input:focus + .slider { + box-shadow: 0 0 1px #2196F3; +} + +input:checked + .slider:before { + -webkit-transform: translateX(26px); + -ms-transform: translateX(26px); + transform: translateX(26px); +} + +.slider.round { + border-radius: 34px; +} + +.slider.round:before { + border-radius: 50%; +} + +@media screen and (max-width: 1024px) { + .hangman { + display: none; + } + /* better not to display... */ +} + diff --git a/styles/styles.css b/styles/styles.css new file mode 100644 index 0000000..8661a1e --- /dev/null +++ b/styles/styles.css @@ -0,0 +1,76 @@ +html{ + background-image: url('../images/hangman-bg.jpg'); + min-height: 100%; + background-position: center; + background-repeat: no-repeat; + background-size: cover; +} +body{ + text-align: center; + + background: transparent; + min-height: 100%; + background-position: center; + background-repeat: no-repeat; + background-size: cover; + + font-family: 'Montserrat'; + color: white; + margin-top: 0; + margin-bottom: 0; +} +.title { + margin: 10% auto 0; + font-size: 6.9rem; + font-family: 'Sacramento'; +} +.byline { + font-size: 1.5rem; +} +#instruction { + font-size: 1.3rem; + margin-top: 0; +} +.container { + margin-top: 10%; +} +.form-control { + width: 50%; + margin: auto; + background: transparent; +} +.form-control:focus { + background: transparent; + color: white; +} +.btn { + position: relative; + margin: 10px auto; + background: #021118; + background-image: -webkit-linear-gradient(top, #13242d, #120303); + background-image: -moz-linear-gradient(top, #13242d, #120303); + background-image: -ms-linear-gradient(top, #13242d, #120303); + background-image: -o-linear-gradient(top, #13242d, #120303); + background-image: linear-gradient(to bottom, #13242d, #120303); + -webkit-border-radius: 17; + -moz-border-radius: 17; + border-radius: 17px; + text-shadow: 1px 1px 3px #c4c4c4; + -webkit-box-shadow: 1px 7px 9px #c4c4c4; + -moz-box-shadow: 1px 7px 9px #c4c4c4; + box-shadow: 1px 7px 9px #c4c4c4; + color: #ffffff; + font-size: 20px; + padding: 10px 20px 10px 20px; + text-decoration: none; + } + +.btn:hover { + background: #b6b9ba; + background-image: -webkit-linear-gradient(top, #b6b9ba, #858585); + background-image: -moz-linear-gradient(top, #b6b9ba, #858585); + background-image: -ms-linear-gradient(top, #b6b9ba, #858585); + background-image: -o-linear-gradient(top, #b6b9ba, #858585); + background-image: linear-gradient(to bottom, #b6b9ba, #858585); + text-decoration: none; +}