conversionTools/temperture/temperture.html

<!-- 
    Contributor Details:
    Name: programmerraja
    Mail id boooathis123@gmail.com
    twitter None
    github link https://www.github.com/programmerraja 
 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="theme-color" content="#6610f2" />
    <link rel="icon" type="image/ico" href="../../favicon.ico" />
    <title>Utility Website</title>
    <!--  Styles  -->
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
    />
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link rel="stylesheet" href="temperture.css" />
  </head>
  <body>
     <!--  Navbar  -->
     <nav class="site-header sticky-top py-1 text-light">
      <div class="container d-flex flex-column flex-md-row justify-content-between align-items-center" id="uNavbar">
          <a class="py-2 text-light" href="../../index.html">
              <i class="fa fa-cogs fa-2x" aria-hidden="true"></i>
          </a>

          <!--    Dynamic Navbar Elements        -->

          <div class="btn-group d-none d-md-block py-2">
              <button type="button" class="btn btn-link text-light text-decoration-none"><a href="https://backgroundgradients.com/" class="text-light">Background Gradients</a> </button>
          </div>

      </div>
  </nav>
  <!--  Navbar End  -->
    <div class="heading">
      <h3 >Temperature Conversion</h3>
    </div>
    <!-- temperture conversion tool -->
    <div class="container_wrapper">
        <div class="temp__wrapper">
            <div class="temp__container">
              <div class="value__container">
                <label for="temperture_value">Enter the temperture</label>
                <br>
                <input type="text" name="temperture_value" id="temperture_value">
                <select name="conversion_value" id="conversion_value">
                  <option value="Fahrenheit">Fahrenheit</option>
                  <option value="Celsius">Celsius</option>
                  <option value="Kelvin">Kelvin</option>
                </select>
              </div>
             
              <div class="result__container">
                 <label for="temperture_result">Result</label>
                <br>         
                <input type="text" name="temperture_result" id="temperture_result">
                <select name="conversion_result" id="conversion_result">                  
                  <option value="Celsius">Celsius</option>
                  <option value="Kelvin">Kelvin</option>
                  <option value="Fahrenheit">Fahrenheit</option>
                </select>
              </div>

              <div  class="button__container">
                <input type="button" name="Convert" value="Convert" id="convert_button">
              </div>
            </div>

        </div>
    </div>

   
    <!--  Footer  -->
    <footer class="border-top py-3 px-4">
      <div class="row align-items-center">
        <div class="col-md-6">
          <p class="m-0">Copyright &copy; 2020 K.Boopathi</p>
          <p class="m-0">
            Page Created by
            <a href="https://github.com/programmerraja" target="_blank"
              >K.Boopathi</a
            >
          </p>
        </div>
        <div class="col-md-6 text-md-right">
          <a href="contributors.html" target="_blank" class="text-dark"
            >Contributors</a
          >
          <span class="text-muted mx-2">|</span>

          <a href="#" class="text-dark">Terms of Use</a>
          <span class="text-muted mx-2">|</span>
          <a href="#" class="text-dark">Privacy Policy</a>
        </div>
      </div>
    </footer>
    <script src="temperture.js"></script>

        <!-- Global Scripts: Should load in all pages -->
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
        <script src="../../assets/config/categories.js"></script>
        <script src="../../assets/config/tools.js"></script>
        <script src="../../assets/scripts/templates.js"></script>
        <script src="../../assets/scripts/app.js"></script>
        <!-- END of Global Scripts -->
  </body>
</html>