update SkillfactoryCoding#8 changed value input

Author: cookieru

bjs/08_if_else/index.html

@@ -19,7 +19,7 @@
                 <div class="card-body">
                     <div class="row no-gutters">
                         <div class="col">
-                            <h3 class="card-title m-0"><span id="answerField">Вы загадали число 5?</span></h3>
+                            <h3 class="card-title m-0"><span id="answerField"></span></h3>
                         </div>
                     </div>
                 </div>
@@ -37,7 +37,51 @@ <h3 class="card-title m-0"><span id="answerField">Вы загадали числ
         </div>
     </div>
 </div>
-<script src="script.js"></script>
+
+<div class="modal fade" id="modalInputValues" tabindex="-1" role="dialog">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">Введите значений для игры</h5>
+        </div>
+        <div class="modal-body">
+            <form>
+                <label for="minValueInput">Минимальное значение</label>
+                <input type="text" class="form-control" id="minValueInput" placeholder="0">
+                <label for="maxValueInput">Максимальное значение</label>
+                <input type="text" class="form-control" id="maxValueInput" placeholder="100">
+            </form>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-primary" data-dismiss="modal">Играть!</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="modal fade" id="modalStartAlert" tabindex="-1" role="dialog">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5>
+            
+          </h5>
+          <button type="button" class="close" data-dismiss="modal">
+            <span>&times;</span>
+          </button>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-primary" data-dismiss="modal">ОК</button>
+        </div>
+      </div>
+    </div>
+  </div>
+  
+  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
+  <script src="script.js"></script>
+
 <footer>
     <a href="https://ru.freepik.com/free-vector/acrylic-brush-stroke-textured-background-vector_4034280.htm#query=background%20sletch&position=20&from_view=search&track=ais&uuid=6235070a-3c1b-4096-b294-fc5e57f75730%22" target="_blank">Изображение от rawpixel.com</a> на Freepik
 </footer>

bjs/08_if_else/script.js

@@ -25,16 +25,20 @@ const successAnswerPhrases = [
 //UI links
 const orderNumberField = document.querySelector('#orderNumberField');
 const answerField = document.querySelector('#answerField');
+const modalInputValues = $('#modalInputValues');
+const minValueField = document.querySelector('#minValueInput');
+const maxValueField = document.querySelector('#maxValueInput');
+const modalStartAlert = $('#modalStartAlert');
+const modalStartAlertText = document.querySelector("#modalStartAlert h5");
 
 //vars
 let minValue, maxValue, answerNumber, orderNumber;
 let gameRun;
 
 function Start()
 {
-    //Заменить методы window на что-нибудь из bootstrap (20 баллов)
-    minValue = parseInt(prompt('Минимальное знание числа для игры','0')) || 0;
-    maxValue = parseInt(prompt('Максимальное знание числа для игры','100')) || 100;
+    minValue = parseInt(minValueField.value) || 0;
+    maxValue = parseInt(maxValueField.value) || 100;
 
     if (minValue > maxValue)
     {
@@ -44,17 +48,17 @@ function Start()
     }
 
     minValue = minValue < -999 ? -999 : minValue;
-    maxValue = maxValue > 999 ? 999 : maxValue;
-    
-
-    alert(`Загадайте любое целое число от ${minValue} до ${maxValue}, а я его угадаю`);
+    maxValue = maxValue > 999 ? 999 : maxValue;    
 
     answerNumber  = Math.floor((minValue + maxValue) / 2);
     orderNumber = 1;
     gameRun = true;
 
     orderNumberField.innerText = orderNumber++;
     answerField.innerText = `${nextAnswerPhrases[0]} ${IntToText(answerNumber)}?`;
+
+    modalStartAlertText.innerText = `Загадайте любое целое число от ${minValue} до ${maxValue}, а я его угадаю`;
+    modalStartAlert.modal("show");    
 }
 
 function IntToText(n)
@@ -108,12 +112,12 @@ function IntToText(n)
     return (result.length < maxLength) ? result : n;
 }
 
-Start();
+modalInputValues.on('hidden.bs.modal', Start);
 
 // Рестарт программы
 document.querySelector('#btnRetry').addEventListener('click', function () {
-    Start();
-})
+    modalInputValues.modal("show");
+});
 
 // Кнопка больше
 document.querySelector('#btnOver').addEventListener('click', function () {
@@ -142,7 +146,7 @@ document.querySelector('#btnOver').addEventListener('click', function () {
             answerField.innerText = `${nextAnswerPhrases[phraseRandom]} ${IntToText(answerNumber)}?`;
         }
     }
-})
+});
 
 // Кнопка меньше
 document.querySelector('#btnLess').addEventListener('click', function () {
@@ -163,7 +167,7 @@ document.querySelector('#btnLess').addEventListener('click', function () {
             answerField.innerText = `${nextAnswerPhrases[phraseRandom]} ${IntToText(answerNumber)}?`;
         }
     }
-})
+});
 
 // Кнопка Верно!
 document.querySelector('#btnEqual').addEventListener('click', function () {
@@ -173,4 +177,6 @@ document.querySelector('#btnEqual').addEventListener('click', function () {
 
         gameRun = false;
     }
-})
+});
+
+modalInputValues.modal("show");

bjs/08_if_else/style.css

@@ -1,5 +1,5 @@
 .game-card {
-    height: 100vh;
+    height: 95vh;
 }
 
 body