style

echb · Jul 5, 2021 · be9641b · be9641b
1 parent e2015d9
commit be9641b
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 10 deletions.
diff --git a/index.html b/index.html
@@ -5,7 +5,7 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Document</title>
+  <title>Quiz Game</title>
   <link rel="stylesheet" href="style.css">
   <script defer src="main.js"></script>
 </head>
@@ -17,7 +17,9 @@
   </div>
   <ul class="answers">
   </ul>
-  <button class="restartGame">restart game</button>
+  <div class="box">
+    <button class="restartGame">restart game</button>
+  </div>
 </body>
 
 </html>
diff --git a/main.js b/main.js
@@ -5,20 +5,30 @@ const restartGame = document.querySelector('.restartGame')
 
 const datas = [
   {
-    question: ['color de fruta roja'],
-    answers: ['manzana', 'platano', 'pera', 'limon'],
-    trueAnswer: 'manzana'
+    question: ['red fruit'],
+    answers: ['apple', 'banana', 'pear', 'lemon'],
+    trueAnswer: 'apple'
   },
   {
-    question: ['ruedas coche'],
+    question: ['wheels number'],
     answers: [1, 2, 3, 4],
     trueAnswer: 4
   },
   {
-    question: ['cuantos ojos'],
+    question: ['eyes number'],
     answers: [1, 2, 3, 4],
     trueAnswer: 2
   },
+  {
+    question: ['speed of sound (m/s)'],
+    answers: [343, 945, 453, 628, 424, 387],
+    trueAnswer: 343
+  },
+  {
+    question: ['color of water'],
+    answers: ['white', 'green', 'blue', 'none in this list'],
+    trueAnswer: 'none in this list'
+  }
 ]
 let counter = 0
 let scoreGame = 0
@@ -58,6 +68,7 @@ function verifyAnswer(e) {
     return true
   }
 
+  scoreGame -= 10
   e.target.classList.add('alert')
   setTimeout(() => {
     e.target.classList.remove('alert')

diff --git a/style.css b/style.css
@@ -1,15 +1,26 @@
-body {
-  background-color: #03222e;
-  color: #e0e0e0;
+@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800;900&display=swap");
+* {
+	box-sizing: border-box;
+	font-family: "Nunito", sans-serif;
+}
+.question{
+  text-transform: uppercase;
+  font-size: 24px;
+  font-weight: 600;
+  text-align: center;
 }
 .answers{
   list-style: none;
   display: grid;
   grid-template-columns: repeat(2,150px);
   column-gap: 10px;
   row-gap: 10px;
+  margin: 0;
+  padding: 0;
+  justify-content: center;
 }
 .answers li{
+  border-radius: 3px;
   cursor: pointer;
   border: solid #000 1px;
   margin-bottom: 5px;
@@ -19,6 +30,7 @@ body {
   color: #000;
   text-transform: uppercase;
   font-weight: 700;
+  transition: background-color .2s ease-out;
 }
 .answers li:hover{
   background-color: #7ab38d;
@@ -31,3 +43,18 @@ body {
   color: #fff;
   border: red solid 1px;
 }
+.box{
+  margin-top: 20px;
+  display: flex;
+  justify-content: center;
+}
+.restartGame{
+  cursor: pointer;
+  font-weight: 600;
+  text-transform: uppercase;
+  background: none;
+  border: none;
+  padding: 5px 13px;
+  border-radius: 3px;
+  box-shadow: #00000040 0px 14px 28px, #00000038 0px 10px 10px;
+}