Skip to content

Instantly share code, notes, and snippets.

@bouklis

bouklis/index.html

Forked from anonymous/index.html
Created May 8, 2016 12:23
Show Gist options
  • Save bouklis/bdcf4944f6acc4ed9a569c2adade7033 to your computer and use it in GitHub Desktop.
Save bouklis/bdcf4944f6acc4ed9a569c2adade7033 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/hewaxa
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,300&subset=greek,latin' rel='stylesheet' type='text/css'>
<style id="jsbin-css">
* {
font-family: 'Open Sans', sans-serif;
}
h3 {
font-weight: 600;
}
.time-box {
background: yellow;
max-width: 400px;
padding: 10px;
border: 1px solid lightgray;
margin: 0 auto 5px;
text-align:center;
}
.currentTime {
background: lightgreen;
}
.videoTime {
background: lime;
}
input[type="number"],
input[type="text"]{
font-size: 15px;
width: 35px;
text-align: center;
outline: none;
margin-bottom: 5px;
}
input.year {
width: 47px;
}
#mainButton {
background: tomato;
color: white;
font-size: 15px;
min-width: 150px;
height: 40px;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.07em;
outline: none;
padding: 0 30px;
display: block;
margin: 0 auto 5px;
}
</style>
</head>
<body>
<div class="time-box currentTime">
<h3>Πραγματική ώρα (Τώρα)</h3>
<span>Ημερομηνία</span>
<input type="number" id="currentDate" min="1" max="31">
<span>-</span>
<input type="number" id="currentMonth" min="1" max="12">
<span>-</span>
<input type="number" class="year" id="currentYear" min="2000" max="2100">
<br>
<span>Ώρα</span>
<input type="number" name="hours" id="currentHours" min="0" max="23">
<span>:</span>
<input type="number" id="currentMinutes" min="0" max="59">
<!-- <span>:</span>
<input type="number" id="currentSeconds" min="0" max="59"> -->
<br>
<button id="btn">Current Time</button>
</div>
<div class="time-box videoTime">
<h3>Ώρα Βίντεο (Τώρα)</h3>
<span>Ημερομηνία</span>
<input type="number" id="videoDate" min="1" max="31">
<span>-</span>
<input type="number" id="videoMonth" min="1" max="12">
<span>-</span>
<input type="number" class="year" id="videoYear" min="2000" max="2100">
<br>
<span>Ώρα</span>
<input type="number" name="hours" id="videoHours" min="0" max="23">
<span>:</span>
<input type="number" id="videoMinutes" min="0" max="59">
<span>:</span>
<input type="number" id="videoSeconds" min="0" max="59">
<br>
</div>
<div class="time-box currentTime">
<h3>Ζητούμενη Πραγμ. Ώρα</h3>
<span>Ημερομηνία</span>
<input type="number" id="requestedDate" min="1" max="31" maxlength="2">
<span>-</span>
<input type="number" id="requestedMonth" min="1" max="12">
<span>-</span>
<input type="number" class="year" id="requestedYear" min="2000" max="2100">
<br>
<span>Ώρα</span>
<input type="number" name="hours" id="requestedHours" min="0" max="23">
<span>:</span>
<input type="number" id="requestedMinutes" min="0" max="59" >
<span>:</span>
<input type="number" id="requestedSeconds" min="0" max="59">
</div>
<button id="mainButton">Υπολογισμος</button>
<div class="time-box" id="requestedVideoTime">
<p id="resultDate"></p>
<p id="resultTime"></p>
</div>
<script id="jsbin-javascript">
//======================
// VARIABLES
//======================
//Current date variables
var d = new Date();
var year = d.getFullYear();
var month = d.getMonth() + 1;
var date = d.getDate();
var hours = d.getHours();
var minutes = d.getMinutes();
// var seconds = d.getSeconds();
//Video Variables
var videoStringTime, videoTimeInMs, difference;
//Current time in mls
var now = Date.now();
//Current Time fields
var currentHours = document.getElementById('currentHours');
var currentMimutes = document.getElementById('currentMinutes');
// var currentSeconds = document.getElementById('currentSeconds');
var currentDate = document.getElementById('currentDate');
var currentMonth = document.getElementById('currentMonth');
var currentYear = document.getElementById('currentYear');
// Video fields
var videoDate = document.getElementById('videoDate');
var videoMonth = document.getElementById('videoMonth');
var videoYear = document.getElementById('videoYear');
var videoHours = document.getElementById('videoHours');
var videoMinutes = document.getElementById('videoMinutes');
var videoSeconds = document.getElementById('videoSeconds');
//Video fields values
var videoDateVal = videoDate.value;
var videoMonthVal = videoMonth.value;
var videoYearVal = videoYear.value;
var videoHoursVal = videoHours.value;
var videoMinutesVal = videoMinutes.value;
var videoSecondsVal = videoSeconds.value;
//Video preset only date-month-year fields
videoYear.value = year.toString();
videoMonth.value = month.toString();
videoDate.value = date.toString();
if (videoDate.value < 10) {
videoDate.value = "0" + videoDate.value;
}
//Requested REAL time
var requestedStringTime, requestedTimeInMs;
// Requested fields
var requestedDate = document.getElementById('requestedDate');
var requestedMonth = document.getElementById('requestedMonth');
var requestedYear = document.getElementById('requestedYear');
var requestedHours = document.getElementById('requestedHours');
var requestedMinutes = document.getElementById('requestedMinutes');
// var requestedSeconds = document.getElementById('requestedSeconds');
//Requested REAL time fields values
var requestedDateVal = requestedDate.value;
var requestedMonthVal = requestedMonth.value;
var requestedYearVal = requestedYear.value;
var requestedHoursVal = requestedHours.value;
var requestedMinutesVal = requestedMinutes.value;
// var requestedSecondsVal = requestedSeconds.value;
//Requested preset only date-month-year fields
requestedYear.value = year.toString();
requestedMonth.value = month.toString();
requestedDate.value = date.toString();
//Main button
var mainButton = document.getElementById("mainButton");
//******************************
//======================
// FUNCTIONS
//======================
// Set current time into the fields
function currentTime() {
currentHours.value = hours.toString();
currentMimutes.value = minutes.toString();
// currentSeconds.value = seconds.toString();
currentDate.value = date.toString();
currentMonth.value = month.toString();
currentYear.value = year.toString();
}
// Reset current time
function resetCurrentTime(){
currentHours.value = "";
currentMimutes.value = "";
// currentSeconds.value = "";
currentDate.value = "";
currentMonth.value = "";
currentYear.value = "";
}
//======================
// Events
//======================
//****** Prevent fields from typing inappropriate chars *******
videoDate.oninput = function() {
if (videoDate.value.length > 2 ) {
videoDate.value = videoHours.value.slice(0,2);
}
if (videoDate.value > 31) {
videoDate.value = 31;
}
};
videoMonth.oninput = function() {
if (videoMonth.value.length > 2 ) {
videoMonth.value = videoMonth.value.slice(0,2);
}
if (videoMonth.value > 12) {
videoMonth.value = 12;
}
};
videoYear.oninput = function() {
if (videoYear.value.length > 4 ) {
videoYear.value = videoYear.value.slice(0,4);
}
if (videoYear.value > 2100) {
videoYear.value = 2016;
}
};
videoHours.oninput = function() {
if (videoHours.value.length > 2 ) {
videoHours.value = videoHours.value.slice(0,2);
}
if (videoHours.value > 23) {
videoHours.value = 23;
}
};
videoMinutes.oninput = function() {
if (videoMinutes.value.length > 2 ) {
videoMinutes.value = videoMinutes.value.slice(0,2);
}
if (videoMinutes.value > 59) {
videoMinutes.value = 59;
}
};
videoSeconds.oninput = function() {
if (videoSeconds.value.length > 2 ) {
videoSeconds.value = videoSeconds.value.slice(0,2);
}
if (videoSeconds.value > 59) {
videoSeconds.value = 59;
}
};
requestedHours.oninput = function() {
if (requestedHours.value.length > 2 ) {
requestedHours.value = requestedHours.value.slice(0,2);
}
if (requestedHours.value > 23) {
requestedHours.value = 23;
}
};
requestedMinutes.oninput = function() {
if (requestedMinutes.value.length > 2 ) {
requestedMinutes.value = requestedMinutes.value.slice(0,2);
}
if (requestedMinutes.value > 59) {
requestedMinutes.value = 59;
}
};
requestedSeconds.oninput = function() {
if (requestedSeconds.value.length > 2 ) {
requestedSeconds.value = requestedSeconds.value.slice(0,2);
}
if (requestedSeconds.value > 59) {
requestedSeconds.value = 59;
}
};
requestedDate.oninput = function() {
if (requestedDate.value.length > 2 ) {
requestedDate.value = requestedHours.value.slice(0,2);
}
if (requestedDate.value > 31) {
requestedDate.value = 31;
}
};
requestedMonth.oninput = function() {
if (requestedMonth.value.length > 2 ) {
requestedMonth.value = requestedMonth.value.slice(0,2);
}
if (requestedMonth.value > 12) {
requestedMonth.value = 12;
}
};
requestedYear.oninput = function() {
if (requestedYear.value.length > 4 ) {
requestedYear.value = requestedYear.value.slice(0,4);
}
if (requestedYear.value > 2100) {
requestedYear.value = 2016;
}
};
//On click mainButton
//****************************************
mainButton.onclick = function(){
videoDateVal = document.getElementById('videoDate').value;
if (videoDate > 31) {
videoDate = 31;
console.log("Wrong answer " + videoDate);
}
videoMonthVal = document.getElementById('videoMonth').value;
videoYearVal = document.getElementById('videoYear').value;
videoHoursVal = document.getElementById('videoHours').value;
videoMinutesVal = document.getElementById('videoMinutes').value;
videoSecondsVal = document.getElementById('videoSeconds').value;
//Convert video time to milliseconds
videoTimeInMs = Date.parse(videoYearVal.toString() + "/" + videoMonthVal.toString() + "/" + videoDateVal.toString() + " " + videoHoursVal.toString() + ":" + videoMinutesVal.toString() + ":" +videoSecondsVal.toString());
//testing date
var insertedDate = new Date(videoTimeInMs);
console.log("videoTime " + insertedDate.toString());
difference = now - videoTimeInMs;
console.log("diafora se mls " + difference );
requestedDateVal = document.getElementById('requestedDate').value;
if (requestedDate > 31) {
requestedDate = 31;
console.log("Wrong answer " + videoDate);
}
requestedMonthVal = document.getElementById('requestedMonth').value;
requestedYearVal = document.getElementById('requestedYear').value;
requestedHoursVal = document.getElementById('requestedHours').value;
requestedMinutesVal = document.getElementById('requestedMinutes').value;
requestedSecondsVal = document.getElementById('requestedSeconds').value;
//Convert requested time to milliseconds
//The addition of 1000 to fill the gap of milliseconds
requestedTimeInMs = Date.parse(requestedYearVal + "/" + requestedMonthVal + "/" + requestedDateVal + " " + requestedHoursVal + ":" + requestedMinutesVal + ":" + requestedSecondsVal) + 1000;
//Creating the requested time object
var requestedStringDate = new Date(requestedTimeInMs);
console.log("ReqTime is " + requestedStringDate.toString());
var requestedVideoTimeInMs = requestedTimeInMs - difference;
//Creating the requested VIDEO time object
var requestedVideoStringDate = new Date(requestedVideoTimeInMs);
console.log("ReqVideoTime is " + requestedVideoStringDate.toString());
var requestedVideoHours = requestedVideoStringDate.getHours();
if (requestedVideoHours < 10) {
requestedVideoHours = "0" + requestedVideoHours;
}
var requestedVideoMinutes = requestedVideoStringDate.getMinutes();
if (requestedVideoMinutes < 10) {
requestedVideoMinutes = "0" + requestedVideoMinutes;
}
var requestedVideoSeconds = requestedVideoStringDate.getSeconds();
var requestedVideoDate = requestedVideoStringDate.getDate();
var requestedVideoMonth = requestedVideoStringDate.getMonth() + 1;
var requestedVideoYear = requestedVideoStringDate.getFullYear();
var resultTime = document.getElementById("resultTime");
var resultDate = document.getElementById("resultDate");
// resultPar.innerHTML = requestedVideoStringDate.toString().slice(3,21);
resultTime.innerHTML = requestedVideoHours.toString() + " : " + requestedVideoMinutes.toString();
resultDate.innerHTML = requestedVideoDate.toString() + " - " + requestedVideoMonth.toString() + " - " + requestedVideoYear.toString();
};
currentTime();
var btn = document.getElementById("btn");
btn.onclick = function() {
console.log("hello");
resetCurrentTime();
currentTime();
};
</script>
<script id="jsbin-source-css" type="text/css">* {
font-family: 'Open Sans', sans-serif;
}
h3 {
font-weight: 600;
}
.time-box {
background: yellow;
max-width: 400px;
padding: 10px;
border: 1px solid lightgray;
margin: 0 auto 5px;
text-align:center;
}
.currentTime {
background: lightgreen;
}
.videoTime {
background: lime;
}
input[type="number"],
input[type="text"]{
font-size: 15px;
width: 35px;
text-align: center;
outline: none;
margin-bottom: 5px;
}
input.year {
width: 47px;
}
#mainButton {
background: tomato;
color: white;
font-size: 15px;
min-width: 150px;
height: 40px;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.07em;
outline: none;
padding: 0 30px;
display: block;
margin: 0 auto 5px;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">//======================
// VARIABLES
//======================
//Current date variables
var d = new Date();
var year = d.getFullYear();
var month = d.getMonth() + 1;
var date = d.getDate();
var hours = d.getHours();
var minutes = d.getMinutes();
// var seconds = d.getSeconds();
//Video Variables
var videoStringTime, videoTimeInMs, difference;
//Current time in mls
var now = Date.now();
//Current Time fields
var currentHours = document.getElementById('currentHours');
var currentMimutes = document.getElementById('currentMinutes');
// var currentSeconds = document.getElementById('currentSeconds');
var currentDate = document.getElementById('currentDate');
var currentMonth = document.getElementById('currentMonth');
var currentYear = document.getElementById('currentYear');
// Video fields
var videoDate = document.getElementById('videoDate');
var videoMonth = document.getElementById('videoMonth');
var videoYear = document.getElementById('videoYear');
var videoHours = document.getElementById('videoHours');
var videoMinutes = document.getElementById('videoMinutes');
var videoSeconds = document.getElementById('videoSeconds');
//Video fields values
var videoDateVal = videoDate.value;
var videoMonthVal = videoMonth.value;
var videoYearVal = videoYear.value;
var videoHoursVal = videoHours.value;
var videoMinutesVal = videoMinutes.value;
var videoSecondsVal = videoSeconds.value;
//Video preset only date-month-year fields
videoYear.value = year.toString();
videoMonth.value = month.toString();
videoDate.value = date.toString();
if (videoDate.value < 10) {
videoDate.value = "0" + videoDate.value;
}
//Requested REAL time
var requestedStringTime, requestedTimeInMs;
// Requested fields
var requestedDate = document.getElementById('requestedDate');
var requestedMonth = document.getElementById('requestedMonth');
var requestedYear = document.getElementById('requestedYear');
var requestedHours = document.getElementById('requestedHours');
var requestedMinutes = document.getElementById('requestedMinutes');
// var requestedSeconds = document.getElementById('requestedSeconds');
//Requested REAL time fields values
var requestedDateVal = requestedDate.value;
var requestedMonthVal = requestedMonth.value;
var requestedYearVal = requestedYear.value;
var requestedHoursVal = requestedHours.value;
var requestedMinutesVal = requestedMinutes.value;
// var requestedSecondsVal = requestedSeconds.value;
//Requested preset only date-month-year fields
requestedYear.value = year.toString();
requestedMonth.value = month.toString();
requestedDate.value = date.toString();
//Main button
var mainButton = document.getElementById("mainButton");
//******************************
//======================
// FUNCTIONS
//======================
// Set current time into the fields
function currentTime() {
currentHours.value = hours.toString();
currentMimutes.value = minutes.toString();
// currentSeconds.value = seconds.toString();
currentDate.value = date.toString();
currentMonth.value = month.toString();
currentYear.value = year.toString();
}
// Reset current time
function resetCurrentTime(){
currentHours.value = "";
currentMimutes.value = "";
// currentSeconds.value = "";
currentDate.value = "";
currentMonth.value = "";
currentYear.value = "";
}
//======================
// Events
//======================
//****** Prevent fields from typing inappropriate chars *******
videoDate.oninput = function() {
if (videoDate.value.length > 2 ) {
videoDate.value = videoHours.value.slice(0,2);
}
if (videoDate.value > 31) {
videoDate.value = 31;
}
};
videoMonth.oninput = function() {
if (videoMonth.value.length > 2 ) {
videoMonth.value = videoMonth.value.slice(0,2);
}
if (videoMonth.value > 12) {
videoMonth.value = 12;
}
};
videoYear.oninput = function() {
if (videoYear.value.length > 4 ) {
videoYear.value = videoYear.value.slice(0,4);
}
if (videoYear.value > 2100) {
videoYear.value = 2016;
}
};
videoHours.oninput = function() {
if (videoHours.value.length > 2 ) {
videoHours.value = videoHours.value.slice(0,2);
}
if (videoHours.value > 23) {
videoHours.value = 23;
}
};
videoMinutes.oninput = function() {
if (videoMinutes.value.length > 2 ) {
videoMinutes.value = videoMinutes.value.slice(0,2);
}
if (videoMinutes.value > 59) {
videoMinutes.value = 59;
}
};
videoSeconds.oninput = function() {
if (videoSeconds.value.length > 2 ) {
videoSeconds.value = videoSeconds.value.slice(0,2);
}
if (videoSeconds.value > 59) {
videoSeconds.value = 59;
}
};
requestedHours.oninput = function() {
if (requestedHours.value.length > 2 ) {
requestedHours.value = requestedHours.value.slice(0,2);
}
if (requestedHours.value > 23) {
requestedHours.value = 23;
}
};
requestedMinutes.oninput = function() {
if (requestedMinutes.value.length > 2 ) {
requestedMinutes.value = requestedMinutes.value.slice(0,2);
}
if (requestedMinutes.value > 59) {
requestedMinutes.value = 59;
}
};
requestedSeconds.oninput = function() {
if (requestedSeconds.value.length > 2 ) {
requestedSeconds.value = requestedSeconds.value.slice(0,2);
}
if (requestedSeconds.value > 59) {
requestedSeconds.value = 59;
}
};
requestedDate.oninput = function() {
if (requestedDate.value.length > 2 ) {
requestedDate.value = requestedHours.value.slice(0,2);
}
if (requestedDate.value > 31) {
requestedDate.value = 31;
}
};
requestedMonth.oninput = function() {
if (requestedMonth.value.length > 2 ) {
requestedMonth.value = requestedMonth.value.slice(0,2);
}
if (requestedMonth.value > 12) {
requestedMonth.value = 12;
}
};
requestedYear.oninput = function() {
if (requestedYear.value.length > 4 ) {
requestedYear.value = requestedYear.value.slice(0,4);
}
if (requestedYear.value > 2100) {
requestedYear.value = 2016;
}
};
//On click mainButton
//****************************************
mainButton.onclick = function(){
videoDateVal = document.getElementById('videoDate').value;
if (videoDate > 31) {
videoDate = 31;
console.log("Wrong answer " + videoDate);
}
videoMonthVal = document.getElementById('videoMonth').value;
videoYearVal = document.getElementById('videoYear').value;
videoHoursVal = document.getElementById('videoHours').value;
videoMinutesVal = document.getElementById('videoMinutes').value;
videoSecondsVal = document.getElementById('videoSeconds').value;
//Convert video time to milliseconds
videoTimeInMs = Date.parse(videoYearVal.toString() + "/" + videoMonthVal.toString() + "/" + videoDateVal.toString() + " " + videoHoursVal.toString() + ":" + videoMinutesVal.toString() + ":" +videoSecondsVal.toString());
//testing date
var insertedDate = new Date(videoTimeInMs);
console.log("videoTime " + insertedDate.toString());
difference = now - videoTimeInMs;
console.log("diafora se mls " + difference );
requestedDateVal = document.getElementById('requestedDate').value;
if (requestedDate > 31) {
requestedDate = 31;
console.log("Wrong answer " + videoDate);
}
requestedMonthVal = document.getElementById('requestedMonth').value;
requestedYearVal = document.getElementById('requestedYear').value;
requestedHoursVal = document.getElementById('requestedHours').value;
requestedMinutesVal = document.getElementById('requestedMinutes').value;
requestedSecondsVal = document.getElementById('requestedSeconds').value;
//Convert requested time to milliseconds
//The addition of 1000 to fill the gap of milliseconds
requestedTimeInMs = Date.parse(requestedYearVal + "/" + requestedMonthVal + "/" + requestedDateVal + " " + requestedHoursVal + ":" + requestedMinutesVal + ":" + requestedSecondsVal) + 1000;
//Creating the requested time object
var requestedStringDate = new Date(requestedTimeInMs);
console.log("ReqTime is " + requestedStringDate.toString());
var requestedVideoTimeInMs = requestedTimeInMs - difference;
//Creating the requested VIDEO time object
var requestedVideoStringDate = new Date(requestedVideoTimeInMs);
console.log("ReqVideoTime is " + requestedVideoStringDate.toString());
var requestedVideoHours = requestedVideoStringDate.getHours();
if (requestedVideoHours < 10) {
requestedVideoHours = "0" + requestedVideoHours;
}
var requestedVideoMinutes = requestedVideoStringDate.getMinutes();
if (requestedVideoMinutes < 10) {
requestedVideoMinutes = "0" + requestedVideoMinutes;
}
var requestedVideoSeconds = requestedVideoStringDate.getSeconds();
var requestedVideoDate = requestedVideoStringDate.getDate();
var requestedVideoMonth = requestedVideoStringDate.getMonth() + 1;
var requestedVideoYear = requestedVideoStringDate.getFullYear();
var resultTime = document.getElementById("resultTime");
var resultDate = document.getElementById("resultDate");
// resultPar.innerHTML = requestedVideoStringDate.toString().slice(3,21);
resultTime.innerHTML = requestedVideoHours.toString() + " : " + requestedVideoMinutes.toString();
resultDate.innerHTML = requestedVideoDate.toString() + " - " + requestedVideoMonth.toString() + " - " + requestedVideoYear.toString();
};
currentTime();
var btn = document.getElementById("btn");
btn.onclick = function() {
console.log("hello");
resetCurrentTime();
currentTime();
};
</script></body>
</html>
Raw
jsbin.hewaxa.css
* {
font-family: 'Open Sans', sans-serif;
}
h3 {
font-weight: 600;
}
.time-box {
background: yellow;
max-width: 400px;
padding: 10px;
border: 1px solid lightgray;
margin: 0 auto 5px;
text-align:center;
}
.currentTime {
background: lightgreen;
}
.videoTime {
background: lime;
}
input[type="number"],
input[type="text"]{
font-size: 15px;
width: 35px;
text-align: center;
outline: none;
margin-bottom: 5px;
}
input.year {
width: 47px;
}
#mainButton {
background: tomato;
color: white;
font-size: 15px;
min-width: 150px;
height: 40px;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.07em;
outline: none;
padding: 0 30px;
display: block;
margin: 0 auto 5px;
}
Raw
jsbin.hewaxa.js
//======================
// VARIABLES
//======================
//Current date variables
var d = new Date();
var year = d.getFullYear();
var month = d.getMonth() + 1;
var date = d.getDate();
var hours = d.getHours();
var minutes = d.getMinutes();
// var seconds = d.getSeconds();
//Video Variables
var videoStringTime, videoTimeInMs, difference;
//Current time in mls
var now = Date.now();
//Current Time fields
var currentHours = document.getElementById('currentHours');
var currentMimutes = document.getElementById('currentMinutes');
// var currentSeconds = document.getElementById('currentSeconds');
var currentDate = document.getElementById('currentDate');
var currentMonth = document.getElementById('currentMonth');
var currentYear = document.getElementById('currentYear');
// Video fields
var videoDate = document.getElementById('videoDate');
var videoMonth = document.getElementById('videoMonth');
var videoYear = document.getElementById('videoYear');
var videoHours = document.getElementById('videoHours');
var videoMinutes = document.getElementById('videoMinutes');
var videoSeconds = document.getElementById('videoSeconds');
//Video fields values
var videoDateVal = videoDate.value;
var videoMonthVal = videoMonth.value;
var videoYearVal = videoYear.value;
var videoHoursVal = videoHours.value;
var videoMinutesVal = videoMinutes.value;
var videoSecondsVal = videoSeconds.value;
//Video preset only date-month-year fields
videoYear.value = year.toString();
videoMonth.value = month.toString();
videoDate.value = date.toString();
if (videoDate.value < 10) {
videoDate.value = "0" + videoDate.value;
}
//Requested REAL time
var requestedStringTime, requestedTimeInMs;
// Requested fields
var requestedDate = document.getElementById('requestedDate');
var requestedMonth = document.getElementById('requestedMonth');
var requestedYear = document.getElementById('requestedYear');
var requestedHours = document.getElementById('requestedHours');
var requestedMinutes = document.getElementById('requestedMinutes');
// var requestedSeconds = document.getElementById('requestedSeconds');
//Requested REAL time fields values
var requestedDateVal = requestedDate.value;
var requestedMonthVal = requestedMonth.value;
var requestedYearVal = requestedYear.value;
var requestedHoursVal = requestedHours.value;
var requestedMinutesVal = requestedMinutes.value;
// var requestedSecondsVal = requestedSeconds.value;
//Requested preset only date-month-year fields
requestedYear.value = year.toString();
requestedMonth.value = month.toString();
requestedDate.value = date.toString();
//Main button
var mainButton = document.getElementById("mainButton");
//******************************
//======================
// FUNCTIONS
//======================
// Set current time into the fields
function currentTime() {
currentHours.value = hours.toString();
currentMimutes.value = minutes.toString();
// currentSeconds.value = seconds.toString();
currentDate.value = date.toString();
currentMonth.value = month.toString();
currentYear.value = year.toString();
}
// Reset current time
function resetCurrentTime(){
currentHours.value = "";
currentMimutes.value = "";
// currentSeconds.value = "";
currentDate.value = "";
currentMonth.value = "";
currentYear.value = "";
}
//======================
// Events
//======================
//****** Prevent fields from typing inappropriate chars *******
videoDate.oninput = function() {
if (videoDate.value.length > 2 ) {
videoDate.value = videoHours.value.slice(0,2);
}
if (videoDate.value > 31) {
videoDate.value = 31;
}
};
videoMonth.oninput = function() {
if (videoMonth.value.length > 2 ) {
videoMonth.value = videoMonth.value.slice(0,2);
}
if (videoMonth.value > 12) {
videoMonth.value = 12;
}
};
videoYear.oninput = function() {
if (videoYear.value.length > 4 ) {
videoYear.value = videoYear.value.slice(0,4);
}
if (videoYear.value > 2100) {
videoYear.value = 2016;
}
};
videoHours.oninput = function() {
if (videoHours.value.length > 2 ) {
videoHours.value = videoHours.value.slice(0,2);
}
if (videoHours.value > 23) {
videoHours.value = 23;
}
};
videoMinutes.oninput = function() {
if (videoMinutes.value.length > 2 ) {
videoMinutes.value = videoMinutes.value.slice(0,2);
}
if (videoMinutes.value > 59) {
videoMinutes.value = 59;
}
};
videoSeconds.oninput = function() {
if (videoSeconds.value.length > 2 ) {
videoSeconds.value = videoSeconds.value.slice(0,2);
}
if (videoSeconds.value > 59) {
videoSeconds.value = 59;
}
};
requestedHours.oninput = function() {
if (requestedHours.value.length > 2 ) {
requestedHours.value = requestedHours.value.slice(0,2);
}
if (requestedHours.value > 23) {
requestedHours.value = 23;
}
};
requestedMinutes.oninput = function() {
if (requestedMinutes.value.length > 2 ) {
requestedMinutes.value = requestedMinutes.value.slice(0,2);
}
if (requestedMinutes.value > 59) {
requestedMinutes.value = 59;
}
};
requestedSeconds.oninput = function() {
if (requestedSeconds.value.length > 2 ) {
requestedSeconds.value = requestedSeconds.value.slice(0,2);
}
if (requestedSeconds.value > 59) {
requestedSeconds.value = 59;
}
};
requestedDate.oninput = function() {
if (requestedDate.value.length > 2 ) {
requestedDate.value = requestedHours.value.slice(0,2);
}
if (requestedDate.value > 31) {
requestedDate.value = 31;
}
};
requestedMonth.oninput = function() {
if (requestedMonth.value.length > 2 ) {
requestedMonth.value = requestedMonth.value.slice(0,2);
}
if (requestedMonth.value > 12) {
requestedMonth.value = 12;
}
};
requestedYear.oninput = function() {
if (requestedYear.value.length > 4 ) {
requestedYear.value = requestedYear.value.slice(0,4);
}
if (requestedYear.value > 2100) {
requestedYear.value = 2016;
}
};
//On click mainButton
//****************************************
mainButton.onclick = function(){
videoDateVal = document.getElementById('videoDate').value;
if (videoDate > 31) {
videoDate = 31;
console.log("Wrong answer " + videoDate);
}
videoMonthVal = document.getElementById('videoMonth').value;
videoYearVal = document.getElementById('videoYear').value;
videoHoursVal = document.getElementById('videoHours').value;
videoMinutesVal = document.getElementById('videoMinutes').value;
videoSecondsVal = document.getElementById('videoSeconds').value;
//Convert video time to milliseconds
videoTimeInMs = Date.parse(videoYearVal.toString() + "/" + videoMonthVal.toString() + "/" + videoDateVal.toString() + " " + videoHoursVal.toString() + ":" + videoMinutesVal.toString() + ":" +videoSecondsVal.toString());
//testing date
var insertedDate = new Date(videoTimeInMs);
console.log("videoTime " + insertedDate.toString());
difference = now - videoTimeInMs;
console.log("diafora se mls " + difference );
requestedDateVal = document.getElementById('requestedDate').value;
if (requestedDate > 31) {
requestedDate = 31;
console.log("Wrong answer " + videoDate);
}
requestedMonthVal = document.getElementById('requestedMonth').value;
requestedYearVal = document.getElementById('requestedYear').value;
requestedHoursVal = document.getElementById('requestedHours').value;
requestedMinutesVal = document.getElementById('requestedMinutes').value;
requestedSecondsVal = document.getElementById('requestedSeconds').value;
//Convert requested time to milliseconds
//The addition of 1000 to fill the gap of milliseconds
requestedTimeInMs = Date.parse(requestedYearVal + "/" + requestedMonthVal + "/" + requestedDateVal + " " + requestedHoursVal + ":" + requestedMinutesVal + ":" + requestedSecondsVal) + 1000;
//Creating the requested time object
var requestedStringDate = new Date(requestedTimeInMs);
console.log("ReqTime is " + requestedStringDate.toString());
var requestedVideoTimeInMs = requestedTimeInMs - difference;
//Creating the requested VIDEO time object
var requestedVideoStringDate = new Date(requestedVideoTimeInMs);
console.log("ReqVideoTime is " + requestedVideoStringDate.toString());
var requestedVideoHours = requestedVideoStringDate.getHours();
if (requestedVideoHours < 10) {
requestedVideoHours = "0" + requestedVideoHours;
}
var requestedVideoMinutes = requestedVideoStringDate.getMinutes();
if (requestedVideoMinutes < 10) {
requestedVideoMinutes = "0" + requestedVideoMinutes;
}
var requestedVideoSeconds = requestedVideoStringDate.getSeconds();
var requestedVideoDate = requestedVideoStringDate.getDate();
var requestedVideoMonth = requestedVideoStringDate.getMonth() + 1;
var requestedVideoYear = requestedVideoStringDate.getFullYear();
var resultTime = document.getElementById("resultTime");
var resultDate = document.getElementById("resultDate");
// resultPar.innerHTML = requestedVideoStringDate.toString().slice(3,21);
resultTime.innerHTML = requestedVideoHours.toString() + " : " + requestedVideoMinutes.toString();
resultDate.innerHTML = requestedVideoDate.toString() + " - " + requestedVideoMonth.toString() + " - " + requestedVideoYear.toString();
};
currentTime();
var btn = document.getElementById("btn");
btn.onclick = function() {
console.log("hello");
resetCurrentTime();
currentTime();
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment