Merge pull request #25 from Nefariusek/feature-issue#14

Feature issue#14

Author: Nefariusek

.gitignore

@@ -38,3 +38,4 @@ dist-ssr
 # Yarn
 .yarn
 .pnp.*
+src/score/user-score.html

src/score/user-score.js

@@ -0,0 +1,57 @@
+import './user.score.css';
+
+export function renderScorePage() {
+  renderPage();
+  scoreLocalStorage();
+  saveScoreBtn.addEventListener('click', saveHighScore);
+}
+
+function renderPage() {
+  document.querySelector('#app').innerHTML = ` 
+      <div class="container">
+        <div id="end" class="">
+          <h1 id="scoreTxt">CONGRATS! YOUR SCORE IS:</h1>
+          <h1 id="finalScore"></h1>
+          <form>
+            <input type="text" id="username" placeholder="NICK" />
+            <button type="submit" class="btn" id="saveScoreBtn" disabled>
+              SUBMIT
+            </button>
+          </form>
+          <button class="btn menuBtn" href="/">
+            MENU
+          </button>
+          <button class="btn playAgain" href="/">
+            PLAY AGAIN
+          </button>
+        </div>
+     </div>
+  `;
+}
+
+function scoreLocalStorage() {
+  const username = document.getElementById('username');
+  const saveScoreBtn = document.getElementById('saveScoreBtn');
+
+  username.addEventListener('keyup', () => {
+    saveScoreBtn.disabled = !username.value;
+  });
+}
+
+const highScores = JSON.parse(localStorage.getItem('highScores')) || [];
+const recentUserScore = '12';
+
+function saveHighScore(e) {
+  e.preventDefault();
+  const finalScore = document.getElementById('finalScore');
+  finalScore.innerText = recentUserScore;
+  const score = {
+    score: recentUserScore,
+    name: username.value,
+  };
+
+  highScores.push(score);
+  localStorage.setItem('highScores', JSON.stringify(highScores));
+
+  username.value = null;
+}

src/score/user.score.css

@@ -0,0 +1,112 @@
+:root {
+  background-color: #8ab0ab;
+  font-size: 62.5%;
+}
+
+* {
+  box-sizing: border-box;
+  font-family: Arial, Helvetica, sans-serif;
+  margin: 0;
+  padding: 0;
+  color: #333;
+}
+
+h1 {
+  font-size: 5.4rem;
+  color: whitesmoke;
+  margin-bottom: 3rem;
+}
+
+/* UTILITIES */
+
+.container {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  max-width: 80rem;
+  margin: 0 auto;
+  padding: 2rem;
+}
+
+.container > * {
+  width: 100%;
+}
+
+#scoreTxt {
+  display: flex;
+  justify-content: center;
+  font-size: 30px;
+}
+#finalScore {
+  display: flex;
+  justify-content: center;
+  font-size: 30px;
+}
+
+/* BUTTONS */
+.btn {
+  font-size: 1.8rem;
+  font-weight: 700;
+  padding: 1rem 0;
+  width: 20rem;
+  height: 6rem;
+  border: 1em;
+  border-radius: 15px;
+  text-align: center;
+  margin-bottom: 1rem;
+  text-decoration: none;
+  color: white;
+  background-color: #3e505b;
+}
+
+.btn.menuBtn {
+  width: 25rem;
+  position: absolute;
+  bottom: 100px;
+  left: 100px;
+}
+
+.btn.playAgain {
+  width: 25rem;
+  position: absolute;
+  bottom: 100px;
+  right: 100px;
+}
+
+#saveScoreBtn:hover {
+  background-color: rgba(62, 80, 91, 0.4);
+  color: #333;
+}
+
+#saveScoreBtn:active {
+  background-color: whitesmoke;
+  color: #333;
+}
+
+/* FORMS */
+form {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: space-around;
+}
+
+input {
+  margin-bottom: 1rem;
+  width: 40rem;
+  height: 6rem;
+  padding: 1.5rem;
+  font-size: 1.8rem;
+  border: none;
+  border-radius: 15px;
+  background-color: rgba(62, 80, 91, 0.4);
+}
+
+input::placeholder {
+  color: #333;
+  text-align: center;
+  font-weight: 700;
+}