I would like this assignment to be done using html and JavaScript, and I wanted
ID: 3576383 • Letter: I
Question
I would like this assignment to be done using html and JavaScript, and I wanted it to work on mobile phones if possible Thank you very much This is a login system for time clock, I want the user to enter the r ID and PIN numbers by clicking on the buttons or by using the keyboard or touch screen for mobile 1. They will have to create a PIN number, the user will have his ID provided 2. Then they will login by using the ID and the PIN number 3. The Clear button will clear the entries 4. the Submit will take the user to a new window, see page 2) Close will close the form Enter your ID# Enter your PIN Clear SubmitExplanation / Answer
<html>
<div class="
<form action="demo_form" method="get">
Enter Your ID#: <input type="text" name="ID" id="ids"><br>
Enter Your PIN#: <input type="text" name="PIN" id="pin"><br>
<button type="button" id="clear_id" class="btn btn-success">Clear</button>
<button type="button" id="id_details" class="btn btn-success"><a href="Timer.html>Submit</a></button></p> <p></form></p> <p></div></p> <p><script></p> <p><br/> $(document).ready(function ()<br/> {<br/> $('#clear_id').click(function () {<br/> $("#ids").val('');
$("#pin").val('');
});
$("#id_details").on("click" function(){
var id=$("ids").val().trim();
var pin=$("pin").val().trim();
$.ajax({
data: {
id: id,
pin: pin
},
url: "/validate.php",
type: "GET",
success: function (data) {
if(data=="success")
{
window.location.href="Timer.html";
}
else alert("please inter valid Id and Pin");
});
</script>
</html>
//Next Page Timer.html
<html>
<body>
<div class="input-group">
<button type="button" id="Start_shift" class="btn btn-success">Start Shift</button>
<button type="button" id="Break_id" class="btn btn-success">Break out</button>
<button type="button" id="Break_in" class="btn btn-success">Break In</button>
<button type="button" id="End" class="btn btn-success">end Shift</button>
<p id="syndata"> HH:MM </p>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/ext-core/3.1.0/ext-core.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
var start_time;
var total_time;
var braek_time;
var break_in;
$('#Start_shift').click(function () {
start_time= new Date();
alert(start_time);
});
$('#Break_id').click(function () {
braek_time = new Date();
alert(braek_time);
});
$('#Break_in').click(function () {
total_time = (braek_time.getTime() - start_time.getTime()) / 1000;
alert(start_time);
alert(braek_time);
alert(total_time);
start_time= new Date();
});
$('#End').click(function () {
var start_end= new Date();
var total_time1 = (start_end.getTime() - start_time.getTime()) / 1000;
total_time=total_time1+total_time;
var hh=total_time/3600;
var mm=total_time/60;
$("#syndata").html('<p class="bg-danger text-center">"+hh+":"+mm+"</p>');
$("#syndata").show();
});
});
</script>
</html>