Vücut kitle endeksi frontend

ObsidianH22 · Sep 24, 2023 · 254c11a · 254c11a
1 parent 8e514b1
commit 254c11a
Show file tree

Hide file tree

Showing 2 changed files with 106 additions and 5 deletions.
diff --git a/js/tutorials.js b/js/tutorials.js
@@ -1013,7 +1013,6 @@ let userJqueryKey =() => {
         // ENTER a basıldı 
        // if(userButton.ctrlKey){} //ctrl basılarak mı tıklanmış
 
-
         if(userButton.keyCode==13){ // her karakterin sayısı var ! enter için 13 
            // alert("ENTER a bastınız.")
             console.log("ENTER a bastınız.");
@@ -1024,10 +1023,38 @@ let userJqueryKey =() => {
     }); // end document ready
 }; // end userJqueryKey
 
-userJqueryKey()
+//userJqueryKey()
 
 ////////////////////////////////////////////////////////
-// VKI
+
+
+// VKI (Vücut Kitle İndeksi)
+// Kullanıcıdan alınan Kilo ve Boy verileri formda inputtan alınır
+// Formül: Kilo / ((Boy)/100)^2
+// Eğer Formül sonucu  
+// 18 < X    çıkarsa  Düşük Kilolu (Doktora Gidiniz) 
+// 18 <= X < 24 çıkarsa Normal Kilolu, 
+// 24 <= X < 29 çıkarsa fazla kilolu
+// 29 <= X < 32 çıkarsa Obez
+// X >= 32 çıkarsa Aşırı Obez Kilolu (Doktora gidiniz)
+
+// VKI butonu olsun. bu butona bastığımızda (modal) form açılsın. 
+// input : kilo
+// input : boy
+// submit buton
+// Not: kilo, boy, formül sonucu, localstorage olarak saklansın. 
+
+
+
+
+
+
+
+
+
+
+
+
 // KDV hesaplaması: JS
 // jquery ajax GET/POST
 // Login Validation

diff --git a/tutorials.html b/tutorials.html
@@ -19,6 +19,69 @@
 
 <body class="container">
   <h3 class="text-center text-primary display-4">JavaScript</h3>
+
+  <!-- Modal trigger button -->
+  <button type="button" class="btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#vkiId">
+    VKI
+  </button>
+
+  <!-- Modal Body -->
+  <!-- if you want to close by clicking outside the modal, delete the last endpoint:data-bs-backdrop and data-bs-keyboard -->
+  <div class="modal fade" id="vkiId" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false" role="dialog" aria-labelledby="modalTitleId" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered modal-lg" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title  text-center display-4" >VKI</h5>
+
+
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Kapat"></button>
+        </div>
+        <div class="modal-body">
+          <form action="" method="get" autocomplete="on">
+            <div class="container">
+              <div class="row">
+
+                <div class="col-md-2">Kilo</div>
+                <div class="col-md-10 mb-3">
+                  <div class="form-group">
+                    <input id="weight_id" type="text" class="form-control" placeholder="Kilo" autofocus required>
+                  </div>
+                </div>
+
+                <div class="col-md-2">Boy</div>
+                <div class="col-md-10 mb-3">
+                  <div class="form-group">
+                    <input id="height_id" type="text" class="form-control" placeholder="Boy" autofocus required>
+                  </div>
+                </div>
+
+                <div class="col-md-2"></div>
+                <div class="col-md-10 mb-3">
+                  <div class="form-group">
+                    <input type="reset" class="btn btn-danger" value="Temizle">
+                <button type="submit" class="btn btn-primary" >VKI Hesapla</button>
+                  </div>
+                </div>
+
+
+              </div>
+            </div>
+          </form>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Kapat</button>
+          <button type="button" class="btn btn-primary">Save</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+
+  <!-- Optional: Place to the bottom of scripts -->
+  <script>
+    const myModal = new bootstrap.Modal(document.getElementById('vkiId'), options)
+
+  </script>
 <!--
  <button class="btn btn-primary" onclick="eventFunction()">onclick</button>
   <button class="btn btn-primary" ondblclick="eventFunction()">ondblclick</button>
@@ -33,6 +96,8 @@ <h3 class="text-center text-primary display-4">JavaScript</h3>
   <button class="btn btn-danger" onkeyup="eventFunction()">onkeyup</button> 
 
 -->
+
+<!-- 
    <p id="parag_id" style="text-align: justify;">Lorem recusandae harum, provident maiores repellat doloremque! Dolorum
     iure soluta ipsum delectus magni neque, eveniet aut officiis id aperiam aliquid voluptatibus est suscipit aliquam!
   </p>
@@ -45,7 +110,7 @@ <h3 class="text-center text-primary display-4">JavaScript</h3>
   <button class="btn btn-warning" onclick="domData2()">Dom Click</button>
   <br><br>
   <button class="btn btn-success" onclick="outSite()">Out Site</button> 
-
+-->
   <hr>
   <hr>
 
@@ -65,10 +130,12 @@ <h3 class="text-center text-primary display-4">JavaScript</h3>
 
 <!-- JQuery example -->
 
+<!-- 
 <p>Hello</p>
 <a href="#">Click to hide me too</a>
 <p>Here is another paragraph</p><br>
  
+-->
 
 <script>
   $( "p" ).hide();
@@ -82,11 +149,12 @@ <h3 class="text-center text-primary display-4">JavaScript</h3>
 
 
 <!-- JQuery other example -->
+<!-- 
 <p>paragraf 2</p>
 <span>data-1</span><br>
 <span>data-2</span><br>
 <span>data-3</span><br>
-
+-->
 
 <script>
   $( "span" ).on( "click", function( event ) {
@@ -99,11 +167,15 @@ <h3 class="text-center text-primary display-4">JavaScript</h3>
 
 
 <!-- JQuery other example -->
+
+<!-- 
   <div id="clickme">
     Click here
   </div>
   <img id="book" src="./img/header.jpg" alt="" width="100" height="123">
 
+-->
+
 <script>
   // With the element initially shown, we can hide it slowly:
 $( "#clickme" ).on( "click", function() {
@@ -116,11 +188,13 @@ <h3 class="text-center text-primary display-4">JavaScript</h3>
 <hr>
 <!-- JQuery other example -->
 
+<!-- 
 <p id="parag-1">paragraf 1</p>
 <a>data-1</a><br>
 <a>data-2</a><br>
 <a>data-3</a><br>
 
+-->
 <script>
   $( "a" ).on( "click", function( event ) {
     event.preventDefault();