conversionTools/Angle_Conversion/angleconversions.html

<!-- 
    Contributor Details:
    Name: mrunalvilas 
    mail:mrunalvilas@gmail.com
    GitHub profile link : https://github.com/mrunalvilas  
 -->
<html>
  <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="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="icon" type="image/ico" href="../../favicon.ico" />
    <title>Angle Conversion</title>
    <link rel="stylesheet" href="angleconversion.css" />
    <link
      href="https://fonts.googleapis.com/css2?family=Varela&display=swap"
      rel="stylesheet"
    />
    <script src="angleconversion.js"></script>
  </head>
  <body
    style="
      background-color: rgba(173, 216, 230, 0.3);
      font-family: 'Multi', sans-serif;
    "
  >
         <!--  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  -->
    <section
      class="hero-section overflow-hidden py-3 mb-3 text-center text-md-left text-light"
    >
      <div class="container-xl">
        <div class="row">
          <div class="col-0">
            <div class="hero-section__graphic position-relative m-auto">
              <svg
                class="hero-section__icon"
                height="569pt"
                viewBox="0 0 569 569.54905"
                width="569pt"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M 240, 230
                          a 25,25 0 1,1 50,0
                          a 25,25 0 1,1 -50,0"
                />
                <path
                  d="m396.3125 187.144531-208.902344 208.90325-13.429687-13.429687 208.90625-208.902310zm0 0"
                />
                <path
                  d="M 290, 330
                            a 25,25 0 1,1 50,0
                            a 25,25 0 1,1 -50,0"
                />
              </svg>
            </div>
          </div>
          <div class="col align-self-center text-center">
            <h1 class="text-white mb-2">Angle Conversion Tool</h1>
            <p class="lead mb-4 text-white">
              This is a Handy Tool to convert Angles from Degrees to Radians and
              Back.
            </p>
          </div>
        </div>
      </div>
    </section>
    <section style="align-items: center; margin: 5%; justify-content: center">
      <div class="align-items-center align-self-center text-center ct1">
        <div class="row justify-content-center">
          <div class="col-md-6 col-lg-4 col-xl-3">
            <div class="card bg-light mb-3 mx-auto" style="max-width: 18rem">
              <div
                class="card-header"
                style="background-color: rgb(166, 168, 168)"
              >
                <i class="fa fa-angle-right mr-1"></i>
                <b>Degree to Radians</b>
              </div>
              <div class="card-body">
                <p>
                  <input
                    id="inputDegree"
                    type="number"
                    placeholder="Degree"
                    oninput="degangleConverter(this.value)"
                    onchange="degangleConverter(this.value)"
                  />
                </p>
                <p class="answer">
                  In Radians: <span id="outputRadian"></span>
                </p>
              </div>
            </div>
          </div>
          <div class="col-md-6 col-lg-4 col-xl-3">
            <div class="card bg-light mb-3 mx-auto" style="max-width: 18rem">
              <div
                class="card-header"
                style="background-color: rgb(166, 168, 168)"
              >
                <i class="fa fa-angle-right mr-1"></i>
                <b>Radians to Degree</b>
              </div>
              <div class="card-body">
                <p>
                  <input
                    id="inputRadian"
                    type="number"
                    placeholder="Radian"
                    oninput="radangleConverter(this.value)"
                    onchange="radangleConverter(this.value)"
                  />
                </p>
                <p class="answer">
                  In Degrees: <span id="outputDegree"></span>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!--  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 codeezzi</p>
          <p class="m-0">
            Page Created by
            <a href="https://github.com/mrunalvilas" target="_blank"
              >Mrunal Padalkar</a
            >
          </p>
        </div>
        <div class="col-md-6 text-md-right">
          <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>
    <!--  Footer End  -->
    <!--JS Functions-->

    <!---->
        <!-- 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>