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

Code

<head>

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

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

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

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

$('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>

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

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

Code

Guru Chian

ฟอร์มรายชื่อติดต่อ