diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..b4f8e6a
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,4 @@
+{
+ "singleQuote": true,
+ "arrowParens": "avoid"
+}
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..b25c175
--- /dev/null
+++ b/index.html
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+
+ Guess My Number!
+
+
+
+ Guess My Number!
+ (Between 1 and 20)
+
+ ?
+
+
+
+
+ Start guessing...
+ 💯 Score: 20
+
+ 🥇 Highscore: 0
+
+
+
+
+
+
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..5e84afa
--- /dev/null
+++ b/script.js
@@ -0,0 +1,127 @@
+'use strict';
+/*
+console.log(document.querySelector('.message') .
+textContent);
+document.querySelector('.message').textContent =
+'Correct Number!';
+
+document.querySelector('.number').textContent = 13;
+document.querySelector('.score').textContent = 10;
+
+document.querySelector('.guess').value = 23;
+console.log(document.querySelector('.guess').value);
+*/
+
+let secretNumber = Math.trunc(Math.random() * 20) +
+ 1;
+let score = 20;
+let highscore = 0;
+
+const displayMessage = function(message) {
+ document.querySelector('.message').textContent =
+ message;
+}
+
+document.querySelector('.check').addEventListener
+('click', function () {
+ const guess = Number(document.querySelector(
+ '.guess').value);
+ console.log(guess, typeof guess);
+
+ //When there is no input
+ if(!guess){
+ //document.querySelector('.message').textContent =
+ //'No number!';
+ displayMessage('No number!');
+
+ //When player wins
+ } else if (guess === secretNumber) {
+ // document.querySelector('.message').textContent =
+ // 'Correct Number!';
+ displayMessage('Correct Number!');
+ document.querySelector('.number').textContent =
+ secretNumber;
+
+ document.querySelector('body').style.
+ backgroundColor = '#60b347';
+ document.querySelector('.number').style.width =
+ '30rem';
+
+ if(score > highscore) {
+ highscore = score;
+ document.querySelector('.highscore').
+ textContent = highscore;
+ }
+
+ // when guess is wrong
+ } else if(guess !== secretNumber) {
+ if (score > 1) {
+ // document.querySelector('.message').textContent =
+ // guess > secretNumber ?
+ //'Too high!':'Too low';
+
+ displayMessage( guess > secretNumber ? 'Too high!':'Too low !');
+ score--;
+ document.querySelector('.score').textContent =
+ score;
+ } else {
+ // document.querySelector('.message').textContent
+ // = 'You lost the game!';
+ displayMessage('You lost the game!')
+ document.querySelector('.score').textContent =
+ 0;
+ }
+ }
+
+ /* //When guess is too high
+ } else if (guess > secretNumber) {
+ if (score > 1) {
+ document.querySelector('.message').textContent =
+ 'Too high!';
+ score--;
+ document.querySelector('.score').textContent =
+ score;
+ } else {
+ document.querySelector('.message').textContent
+ = 'You lost the game!';
+ document.querySelector('.score').textContent =
+ 0;
+ }
+ // When guess is too low
+ } else if (guess < secretNumber) {
+ if (score > 1) {
+ document.querySelector('.message').textContent =
+ 'Too low!';
+ score--;
+ document.querySelector('.score').textContent =
+ score;
+ } else {
+ document.querySelector('.message').textContent
+ = 'You lost the game!';
+ document.querySelector('.score').textContent =
+ 0;
+ }
+} */
+
+});
+
+document.querySelector('.again').addEventListener
+('click', function(){
+ score = 20;
+ secretNumber = Math.trunc(Math.random() * 20) + 1;
+
+ // document.querySelector('.message').textContent =
+ //'Start guessing...';
+ displayMessage('Start guessing...');
+ document.querySelector('.score').textContent =
+ score;
+ document.querySelector('.number').textContent = '?';
+ document.querySelector('.guess').value = '';
+
+ document.querySelector('body').style.
+ backgroundColor = '#222';
+ document.querySelector('.number').style.width =
+ '15rem';
+
+
+});
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..dfed55a
--- /dev/null
+++ b/style.css
@@ -0,0 +1,119 @@
+@import url('https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap');
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: inherit;
+}
+
+html {
+ font-size: 62.5%;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Press Start 2P', sans-serif;
+ color: #eee;
+ background-color: #222;
+ /* background-color: #60b347; */
+}
+
+/* LAYOUT */
+header {
+ position: relative;
+ height: 35vh;
+ border-bottom: 7px solid #eee;
+}
+
+main {
+ height: 65vh;
+ color: #eee;
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+}
+
+.left {
+ width: 52rem;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.right {
+ width: 52rem;
+ font-size: 2rem;
+}
+
+/* ELEMENTS STYLE */
+h1 {
+ font-size: 4rem;
+ text-align: center;
+ position: absolute;
+ width: 100%;
+ top: 52%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+}
+
+.number {
+ background: #eee;
+ color: #333;
+ font-size: 6rem;
+ width: 15rem;
+ padding: 3rem 0rem;
+ text-align: center;
+ position: absolute;
+ bottom: 0;
+ left: 50%;
+ transform: translate(-50%, 50%);
+}
+
+.between {
+ font-size: 1.4rem;
+ position: absolute;
+ top: 2rem;
+ right: 2rem;
+}
+
+.again {
+ position: absolute;
+ top: 2rem;
+ left: 2rem;
+}
+
+.guess {
+ background: none;
+ border: 4px solid #eee;
+ font-family: inherit;
+ color: inherit;
+ font-size: 5rem;
+ padding: 2.5rem;
+ width: 25rem;
+ text-align: center;
+ display: block;
+ margin-bottom: 3rem;
+}
+
+.btn {
+ border: none;
+ background-color: #eee;
+ color: #222;
+ font-size: 2rem;
+ font-family: inherit;
+ padding: 2rem 3rem;
+ cursor: pointer;
+}
+
+.btn:hover {
+ background-color: #ccc;
+}
+
+.message {
+ margin-bottom: 8rem;
+ height: 3rem;
+}
+
+.label-score {
+ margin-bottom: 2rem;
+}