โปรแกรมคำนวณเวลาสอน

0

 

โปรแกรมคำนวณเวลาสอน 


 

Code

<html lang="en">
<head>
    <meta charset="utf-8"></meta>
    <title>โปรแกรมคำนวณเวลาสอน</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
@import url('https://fonts.googleapis.com/css2?family=Itim&family=K2D&display=swap');
@charset "UTF-8";
body {
  background-color: #1a8fb4;
  font-family: 'K2D', sans-serif;
  font-size: 1.5rem;
}
.owl {
  margin: auto;
  width: 211px;
  height: 108px;
  background-image: url("https://dash.readme.io/img/owl-login.png");
  position: relative;
}
.owl .hand {
  width: 34px;
  height: 34px;
  border-radius: 40px;
  background-color: #472d20;
  transform: scaleY(0.6);
  position: absolute;
  left: 14px;
  bottom: -8px;
  transition: 0.3s ease-out;
}
.owl .hand.password {
  transform: translateX(42px) translateY(-15px) scale(0.7);
}
.owl .hand.hand-r {
  left: 170px;
}
.owl .hand.hand-r.password {
  transform: translateX(-42px) translateY(-15px) scale(0.7);
}
.owl .arms {
  position: absolute;
  top: 58px;
  height: 41px;
  width: 100%;
  overflow: hidden;
}
.owl .arms .arm {
  width: 40px;
  height: 65px;
  background-image: url("https://dash.readme.io/img/owl-login-arm.png");
  position: absolute;
  left: 20px;
  top: 40px;
  transition: 0.3s ease-out;
}
.owl .arms .arm.password {
  transform: translateX(40px) translateY(-40px);
}
.owl .arms .arm.arm-r {
  left: 158px;
  transform: scaleX(-1);
}
.owl .arms .arm.arm-r.password {
  transform: translateX(-40px) translateY(-40px) scaleX(-1);
}
.form {
  margin: auto;
  margin-top: -9px;
  padding: 30px;
  background-color: #fff;
  width: 390px;
  border-radius: 5px;
}
.form .control {
  margin-bottom: 10px;
  position: relative;
}
label {
  position: absolute;
  font-size: 1.5rem;
  color: rgba(0,0,0,0.3);
}
input {
  border-radius: 4px;
  border: 1px solid #ccc;
  font-size: 1.5rem;
}
    </style>
</head>
<body translate="no">
<div class="mt-4">
  <div class="owl">
  <div class="hand"></div>
  <div class="hand hand-r"></div>
  <div class="arms">
    <div class="arm"></div>
    <div class="arm arm-r"></div>
  </div>
</div>
  <div class="form text-center">
<h3>โปรแกรมคำนวณเวลาสอน</h3>
<form id="myForm">
<div class="row row g-3 mt-3 mb-3 justify-content-center">
   <div class="col-auto text-center align-items-center">
     <div class="input-group">
        <div class="input-group-text" style="width: 200px;">จำนวนคาบสอนต่อสัปดาห์</div>
        <input class="form-control" id="period" name="period" placeholder="คาบ" type="text" />
     </div>
   </div>
</div>
 
<div class="row  mb-3 g-3 justify-content-center">
   <div class="col-auto align-items-center">
      <div class="input-group">
        <div class="input-group-text" style="width: 200px;">จำนวนนาทีต่อคาบ</div>
        <input class="form-control" id="minute" name="minute" placeholder="นาที" type="text" />
      </div>
   </div>
</div>
<div class="row g-3  mb-3 justify-content-center">
   <div class="col-auto">
  <button class="btn btn-primary" id="submit" onclick="calculate()" style="display: block;" type="submit">Submit</button>
  <button class="btn btn-warning" id="reset" onclick="reload()" style="display: none;" type="reset">Reset</button>
     </div>
</div>
</form>
<div class="alert alert-warning text-center mt-4" id="myH1" style="display: none;"><span id="x"></span></div>
</div> 

    </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script id="rendered-js">
        $('input[type="text"]').on('focus', () => {
            $('*').addClass('password');
        }).on('focusout', () => {
             $('*').removeClass('password');
          });

function calculate() {
    event.preventDefault();
    var period  = document.getElementById("period").value;
                    var minute   = document.getElementById("minute").value;
                    var total = parseInt(period*minute);
                    var hours = parseInt(total/60)
                    var mins = total%60
                    document.getElementById("x").innerHTML= "เวลาสอนทั้งหมดของคุณ<br> "+hours+" ชั่วโมง "+mins+" นาที";
                    document.getElementById("myH1").style.display = "block";
document.getElementById("submit").style.display = "none";
document.getElementById("reset").style.display = "block";
        }
        
        function reload() {
document.getElementById("submit").style.display = "block";
document.getElementById("reset").style.display = "none";
document.getElementById("myH1").style.display = "none";
}
  </script>
    </body>
</html>


ที่มาครูสมชายคัดมาจาก: {getButton} $text={อ้างอิงที่มา} $icon={link} $color={red}
Tags:
แสดงความคิดเห็น (0)
ใหม่กว่า เก่ากว่า