Untitled

avatar
unknown
html
3 years ago
6.2 kB
15
Indexable
<!DOCTYPE html>
<html>
    <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    

    <style>

    </style>
    </head>

    <body>
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
            <div class="container px-5">
                <a class="navbar-brand" href="#!"><b style="color:red;">ATK BINDINGS</b></a>
                
                    </ul>
                </div>
         
        </nav>
        <!-- Header-->
        <header class="bg-dark py-5">
            <div class="container px-5">
                <div class="row d-flex justify-content-center"style="margin:0px;">
                    <div class="col-lg-6">
                        <div class="text-center my-5">
                            <h1 class="display-5 fw-bolder text-white mb-2">CALCOLA</h1>
                            <p class="lead text-white-50 mb-4"> app progettata da : ATK BINDINGS</p>
                            <div class="d-grid gap-3 d-sm-flex justify-content-sm-center">
                     
      
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>


        <div class="container-main">
            <br>
            <br>




         
              <div class="col-auto">
                <label for="inputNumero" class="col-form-label">INSERISCI LUNGHEZZA SUOLA IN (mm) </label>
              </div>
              <div class="col-auto">
                <input type="text" id="numero" class="form-control" aria-describedby="numero in (mm)" style="width:20%;">
              </div>
             
            </div>

            <div class="col-auto">
              <label for="inputNumero" class="col-form-label">SELEZIONA LA TUA ESPERIENZA</label>
            <select class="form-select mt-4"  id="capacita" aria-label="Default select example">
              <option selected> seleziona la tua esperienza</option>
              <option value="-1">Principiante / molto prudente</option>
              <option value="0">Principiante / Cauto</option>
              <option value="1">Intermedio / amatore</option>
              <option value="2">Avanzato / aggressivo</option>
              <option value="3">Esperto / aggressivo fuori pista</option>


            </select>
</div>


<div class="col-auto">
  <label for="inputNumero" class="col-form-label" >SELEZIONA PESO </label>
  <select class="form-select mt-4"  id="peso" onChange="peso()" aria-label="Default select example">
    <option selected> seleziona il tuo peso </option>
    <option value="1">10-13kg/22-29lbs</option>
    <option value="2">14-17kg/30-38lbs</option>
    <option value="3">18-21kg/39-47lbs</option>
    <option value="4">22-25kg/48/56lbs</option>
    <option value="5">26-30kg/57-66lbs</option>
    <option value="6">31-35kg/67-78lbs</option>
    <option value="7">36-41kg/79-91lbs</option>
    <option value="8">42-48kg/92-107lbs</option>
    <option value="9">49-57kg/108-125lbs</option>
    <option value="10">58-66kg/126-147lbs</option>
    <option value="11">67-78/148-174lbs</option>
    <option value="12">79-94kg/175-209lbs</option>
    <option value="13">95+kg/210+lbs</option>




  </select>
</div>

<div class="col-auto">
  <label for="inputNumero" class="col-form-label">SELEZIONA ATLTEZZA </label>
  <select class="form-select mt-4" onChange="altezza() "id="altezza" aria-label="Default select example">
    <option selected> seleziona la tua altezza</option>
    <option value="8">90-148 cm / 2'11"-4'10"</option>
    <option value="9">149-157 cm / 4'11"-5'1"</option>
    <option value="10">158-166 cm / 5'2"-5'5"</option>
    <option value="11">167-178 cm / 5'6"-5'10"</option>
    <option value="12">179-194 cm / 5'11"-6'4"</option>
    <option value="13">195+ cm / 6'5"+</option>

  </select>
</div>

<div class="col-auto">
  <label for="inputNumero" class="col-form-label">SELEZIONA ETA' </label>
  <select class="form-select mt-4"  id="eta" aria-label="Default select example">
    <option selected> seleziona la tua eta'</option>
    <option value="-1">2-9 anni</option>
    <option value="0">10-49 anni</option>
    <option value="-1">50+ anni</option>
  </select>
  <br><br>
<button type="button" class="btn btn-primary btn-lg" onclick="minore()">Calcola</button>
</div>

<input type="text" id="valuepeso" >
<input type="text" id="valuealtezza">
<input type="text" id="valueminore">

            </div>
<br><br><br><br><br><br><br><br>
      

           <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
           <script>


function peso(){

 
  var select = document.getElementById('peso');
				var option = select.options[select.selectedIndex];

				document.getElementById('valuepeso').value = option.value;
			


}


function altezza(){

 
var select = document.getElementById('altezza');
      option2= select.options[select.selectedIndex];

      document.getElementById('valuealtezza').value = option2.value;
    


}

function minore(){

 var p = valuepeso.value;
 var a =valuealtezza.value;

      if(p<a){
        document.getElementById('valueminore').value = p.value;

      }
 else
      document.getElementById('valueminore').value = a.value;
  
}




           </script>
           </html>
Editor is loading...