quiz-app

revengemiroz · May 26, 2020 · e474b7c · e474b7c
1 parent 81884cb
commit e474b7c
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 8 deletions.
diff --git a/quiz-app/css/index.css b/quiz-app/css/index.css
@@ -23,7 +23,7 @@ body{
     flex-wrap: wrap;
     flex-direction: column;
     padding: 2.5em 2em 2em 2em;
-
+    margin: 0 2em 0 2em;
     background-color: #ffffff;
     border-radius: 10px;
     box-shadow: 7px 7px 15px rgba(55, 84, 170, 0.15),
@@ -59,6 +59,8 @@ body{
     margin-bottom: 2em;
 }
 
+
+
 .question{
     text-align: center;
     font-size: 2rem;
@@ -146,4 +148,8 @@ button:hover{
 p{
     text-align: center;
     font-size: 3rem;
+}
+
+small{
+    margin-top: 2em;
 }
diff --git a/quiz-app/index.html b/quiz-app/index.html
@@ -20,9 +20,10 @@
         <div class="answerContainer">
 
         </div>
-        <p class='hiddenAnswer'></p>
     </div>
     <button class="pass">Pass</button>
+    <p class='hiddenAnswer'></p>
+
 </body>
 <script src="index.js"></script>
 

diff --git a/quiz-app/index.js b/quiz-app/index.js
@@ -59,7 +59,8 @@ passbtn.addEventListener('click', () => {
     }
     else {
         container.innerHTML = `
-        <p>All Question are Completed</>
+        <p>All Question are Completed</p>
+        <button onclick='location.reload()'>Restart</button>
         `
         passbtn.style.display = 'none'
     }
@@ -108,7 +109,8 @@ function checkAnswer(clickedanswer, data) {
         }
         else {
             container.innerHTML = `
-            <p>All question are completed</>
+            <p>All question are completed</p>
+            <button onclick='location.reload()'>Restart</button>
             `
             passbtn.style.display = 'none'
         }
@@ -128,9 +130,14 @@ window.onload = () => {
     question.innerHTML = `
     <div class='amount'>
     <label>Enter the amount of question that you want to answer</label>
-    <input type='text' class='input' maxlength='2' onkeydown='enter(this)' placeholder='Enter the amount'></>
-    <small>press enter </small>
-    <div>
+    
+    <div class='Container'>
+        <input type='text' class='input' maxlength='2' onkeydown='enter(this)' placeholder='Enter the amount'>
+        <button onclick='getClick()'>Get</button>
+    </div>
+    
+    <small>please enter </small>
+    </div>
     `
 
     passbtn.style.display = 'none'
@@ -140,7 +147,7 @@ window.onload = () => {
 
 
 function enter(e) {
-    if (event.key === 'Enter') {
+    if (event.key === 'Enter' || e.clicked == true) {
         if ((e.value > 0 && e.value <= 50)) {
 
             getAPI(e.value)
@@ -158,6 +165,23 @@ function enter(e) {
 
 }
 
+function getClick() {
+    const inputs = document.querySelector('.input')
+    if ((inputs.value > 0 && inputs.value <= 50)) {
+
+        getAPI(inputs.value)
+        inputno.push(inputs.value)
+        setTimeout(function () {
+            updateUI(a[0][count])
+            passbtn.style.display = 'block'
+        }, 1000);
+
+    }
+    else {
+        alert(`Invalid format (must be between 1 and 50)`)
+    }
+}
+
 //stack overflow to randomize an array
 function shuffle(array) {
     var currentIndex = array.length, temporaryValue, randomIndex;