diff --git a/README.md b/README.md
new file mode 100644
index 0000000..7ac2401
--- /dev/null
+++ b/README.md
@@ -0,0 +1,24 @@
+# Guess The Number Game
+
+In This Game player must guess a secret number between 1 and 20. For each wrong guess, the score is decreased by 1 and a message is displayed indicating whether the guessed number is high or low. When the player reaches a score of 0 he loses the game. Clicking the "Again" button starts a new game.
+
+### Technologies Used
+
+~ HTML 5
+~ Cascading Styling Sheet (CSS)
+~ JavaScript
+
+### Key Learnings
+
+~ Implementation of Again Button
+~ Store Highscore into local Storage of User's Device
+~ Implemented Responsive Design
+
+### Limitations
+
+~ There is no levels introduced untill this point
+~ Used icons may be disappear in offline mode
+
+### Note
+
+Please feel free to play the game and share your thoughts .
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..1479f45
--- /dev/null
+++ b/index.html
@@ -0,0 +1,53 @@
+
+
+
+ Guess The Number !
+
+
+
+
+
Guess The Number !
+
+
+
+ 0
+
+
+ 10
+
+
+
+
+
+
+
+
+
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..7471ffa
--- /dev/null
+++ b/script.js
@@ -0,0 +1,78 @@
+'use strict';
+
+// Elements :
+const userGuess = document.querySelector('.inp');
+const answerEl = document.querySelector('.ans');
+const messageEl = document.querySelector('.msg');
+const inpBoxEl = document.querySelector('.container');
+const scoreEl = document.querySelector('.score');
+const highscoreEl = document.querySelector('.highscore');
+
+// Buttons :
+const enter = document.querySelector('.inp--btn');
+const again = document.querySelector('.btn--again');
+
+// Variables :
+let Guess = Math.floor(Math.random() * 20 + 1);
+let score = 10;
+let highscore = localStorage.getItem('Highscore')
+ ? +localStorage.getItem('Highscore')
+ : 0;
+
+console.log(Guess, highscore);
+highscoreEl.textContent = highscore;
+
+// Game Logic :
+enter.addEventListener('click', function (e) {
+ e.preventDefault();
+ const endGame = function () {
+ enter.setAttribute('disabled', '');
+ userGuess.setAttribute('disabled', '');
+ enter.style.opacity = 0.5;
+ userGuess.style.opacity = 0.5;
+
+ messageEl.style.color = 'var(--color-light)';
+ answerEl.textContent = Guess;
+ };
+
+ if (!+userGuess.value) {
+ messageEl.textContent = 'Please Enter a Number !';
+ } else if (+userGuess.value !== Guess) {
+ messageEl.textContent =
+ +userGuess.value > Guess ? 'Guess Low Number' : 'Guess High Number';
+ score--;
+ scoreEl.textContent = score;
+ } else {
+ messageEl.textContent = 'You Win !';
+ messageEl.parentElement.style.background = 'lightgreen';
+ scoreEl.textContent = score;
+ if (score > highscore) {
+ highscore = score;
+ highscoreEl.textContent = highscore;
+ localStorage.setItem('Highscore', highscore);
+ }
+ endGame();
+ }
+ if (score <= 0) {
+ messageEl.innerHTML = `You Lost, Correct Answer Was ';
+ userGuess.value = ' ';
+ score = 10;
+ scoreEl.textContent = score;
+
+ enter.removeAttribute('disabled');
+ userGuess.removeAttribute('disabled');
+ enter.style.opacity = 1;
+ userGuess.style.opacity = 1;
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..16a79d8
--- /dev/null
+++ b/style.css
@@ -0,0 +1,274 @@
+:root {
+ --color-light: #f5f5f5;
+ --color-primary: #48cfcb;
+ --color-primary-dark: #229799;
+ --color-dark: #424242;
+ --color-shadow: #3339;
+}
+
+*,
+*::after,
+*::before {
+ margin: 0;
+ padding: 0;
+ box-sizing: inherit;
+}
+
+html {
+ /* font-size: 10px; */
+ font-size: 62.5%;
+}
+
+body {
+ height: 100dvh;
+ width: 100dvw;
+ box-sizing: border-box;
+ font-family: Poppins;
+ background: linear-gradient(
+ to right bottom,
+ var(--color-light),
+ var(--color-primary),
+ var(--color-primary-dark),
+ var(--color-dark)
+ );
+ position: relative;
+}
+
+.center {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+}
+
+.container {
+ border-radius: 0.5rem;
+ background: #fff1;
+ padding: 0.5rem;
+ display: grid;
+ width: 60% auto;
+ height: auto;
+ box-shadow: 2rem 2rem 10rem var(--color-shadow);
+}
+
+.container__title {
+ width: 100%;
+ height: auto;
+
+ text-align: center;
+ padding: 1rem;
+ color: var(--color-dark);
+ font-size: 5rem;
+ font-weight: 600;
+ border-bottom: 3px solid var(--color-dark);
+}
+
+.container__content--Ans {
+ grid-area: ans;
+
+ width: 20rem;
+ height: 20rem;
+ margin: 0 auto;
+ border-radius: 0.2rem;
+ position: relative;
+
+ background: linear-gradient(
+ to left top,
+ var(--color-primary),
+ var(--color-primary-dark)
+ );
+ box-shadow: 0.5rem 0.5rem 1rem var(--color-primary-dark);
+}
+
+.ans {
+ color: var(--color-light);
+ font-size: 4rem;
+}
+
+.container__content--msg {
+ grid-area: msg;
+
+ background: var(--color-light);
+ border-radius: 0.2rem;
+ margin: 1rem auto 0 auto;
+ width: 70%;
+ height: auto;
+ padding: 1rem;
+}
+
+.msg {
+ text-align: center;
+ color: var(--color-dark);
+ font-size: 1.8rem;
+ font-weight: 400;
+}
+
+.inp--ans {
+ grid-area: input;
+ height: 5rem;
+ outline: none;
+ border: none;
+ border-radius: 0.2rem;
+ background: var(--color-primary);
+ color: var(--color-dark);
+ text-align: center;
+ font-weight: 500;
+ font-size: 2rem;
+ border-bottom: 3px solid transparent;
+ box-shadow: 0 0 2rem var(--color-shadow);
+
+ transition: all 0.2s ease-in-out;
+}
+
+.inp--ans:focus {
+ border-bottom: 3px solid var(--color-light);
+}
+
+.inp--ans::-webkit-inner-spin-button {
+ display: none;
+}
+
+.inp--btn {
+ grid-area: button;
+ border: none;
+ border-radius: 0.2rem;
+ background: var(--color-primary);
+ font-size: 2rem;
+ font-family: inherit;
+ color: var(--color-dark);
+ font-weight: 500;
+ cursor: pointer;
+ box-shadow: 0 0rem 2rem var(--color-shadow);
+ transition: all 0.2s ease-in;
+}
+
+.inp--btn:hover {
+ transform: translateY(-0.2rem);
+ box-shadow: 0 1rem 3rem var(--color-shadow);
+}
+
+.inp--btn:active {
+ transform: translateY(-0.1rem);
+ box-shadow: 0 1rem 2rem var(--color-shadow);
+}
+
+.container__content--inp {
+ grid-area: inp;
+
+ margin: 1rem auto 0 auto;
+ width: 70%;
+ height: auto;
+ display: grid;
+ grid-template-areas: 'input input button';
+ column-gap: 1rem;
+}
+
+.container__content {
+ padding: 1rem;
+ width: 100%;
+ display: grid;
+ grid-template-areas:
+ 'ans'
+ 'msg'
+ 'inp';
+}
+
+.container__result {
+ width: 100%;
+ height: auto;
+ background: linear-gradient(
+ 135deg,
+ var(--color-light) 60%,
+ var(--color-shadow) 30%,
+ var(--color-primary-dark)
+ );
+ border-radius: 0.3rem;
+ margin-top: 2rem;
+ align-content: center;
+ padding: 1rem 2rem;
+ position: relative;
+}
+
+.container__result p {
+ color: var(--color-dark);
+ font-size: 2rem;
+ margin: 1rem 0;
+ font-weight: 600;
+}
+
+.container__result p span {
+ color: var(--color-primary);
+}
+
+.icon {
+ color: var(--color-primary-dark);
+ padding-right: 0.5rem;
+}
+
+.btn--again {
+ position: absolute;
+ right: 15%;
+ top: 40%;
+ transform: scale(3);
+ color: var(--color-light);
+ opacity: 6;
+ filter: drop-shadow(0 0 0.5rem var(--color-primary));
+ cursor: pointer;
+ transition: all 0.2s ease-in-out;
+}
+
+.btn--again:hover,
+.btn--again:focus,
+.btn--again:active {
+ color: var(--color-primary);
+}
+
+@media screen and (max-width: 700px) {
+ .container {
+ width: 80%;
+ }
+ .container__content--inp {
+ row-gap: 1rem;
+ grid-template-areas:
+ 'input'
+ 'button';
+ }
+ .inp--btn {
+ height: 5rem;
+ }
+}
+@media screen and (max-width: 800px) {
+ .container {
+ width: 75%;
+ }
+}
+@media screen and (max-width: 1000px) {
+ .container {
+ width: 70%;
+ }
+}
+
+@media screen and (max-height: 700px) {
+ html {
+ font-size: 41.6%;
+ }
+}
+@media screen and (max-width: 450px) {
+ html {
+ font-size: 41.6%;
+ }
+}
+@media screen and (max-height: 450px) {
+ html {
+ font-size: 31.25%;
+ }
+}
+@media screen and (max-height: 300px) {
+ html {
+ font-size: 20.8%;
+ }
+}
+
+.uparr {
+ padding-left: 0.5rem;
+}