diff --git a/broadcast_timer/clock.js b/broadcast_timer/clock.js new file mode 100755 index 0000000..07ad007 --- /dev/null +++ b/broadcast_timer/clock.js @@ -0,0 +1,52 @@ +var d = new Date(); + +function clock_cal_date() { + var r = d.getFullYear() + "/" + d.getMonth() + "/" + d.getDate(); + return r +} + +function clock_date() { + +// A regular clock + + var hour = d.getHours(); + var minute = d.getMinutes(); + var second = d.getSeconds(); + + if (hour < 10 && hour >= 0) { + hour = ('0' + hour); + } + + if (minute < 10 && minute >= 0) { + minute = ('0' + minute); + } + + if (second < 10 && second >= 0) { + second = ('0' + second); + } + + var r = hour + ":" + minute + ":" + second; + return r; +} + +function clock_dateUTC() { +// Same for UTC + var hourUTC = d.getUTCHours(); + var minuteUTC = d.getUTCMinutes(); + var secondUTC = d.getUTCSeconds(); + + if (hourUTC < 10) { + hourUTC = ('0' + hourUTC); + } + + if (minuteUTC < 10) { + minuteUTC = ('0' + minuteUTC); + } + + if (secondUTC < 10) { + secondUTC = ('0' + secondUTC); + } + + var r = hourUTC + ":" + minuteUTC + ":" + secondUTC; + return r +} diff --git a/broadcast_timer/events.js b/broadcast_timer/events.js new file mode 100644 index 0000000..b34b8ee --- /dev/null +++ b/broadcast_timer/events.js @@ -0,0 +1,23 @@ +var events = [ + { + "date": "May 23, 2019 16:00:00", + "subject": "start", + "notes": "" + }, + { + "date": "May 24, 2019 15:00:00", + "subject": "Example 1", + "notes": "EXMAMPLE 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Consectetur purus ut faucibus pulvinar elementum. Pellentesque habitant morbi tristique senectus et. Amet risus nullam eget felis. Semper auctor neque vitae tempus quam pellentesque nec nam aliquam." + }, + { + "date": "May 24, 2019 15:33:00", + "subject": "Example 2", + "notes": "EXAMPLE 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Consectetur purus ut faucibus pulvinar elementum. Pellentesque habitant morbi tristique senectus et. Amet risus nullam eget felis. Semper auctor neque vitae tempus quam pellentesque nec nam aliquam." + }, + { + "date": "May 24, 2020 15:33:00", + "subject": "END", + "notes": "" + } + +] diff --git a/broadcast_timer/index.html b/broadcast_timer/index.html new file mode 100644 index 0000000..7f18b7c --- /dev/null +++ b/broadcast_timer/index.html @@ -0,0 +1,188 @@ + + + Countdown Timer + + + + +
+
+ + + +
DateCurrent TZUTC
+
+ +
+
+
+ +
+
+ + + +
+ +
+

Notes

+
+
+ + + + +
+ +
+ + + +
+ +
+
+
+ + + + + + + + + + diff --git a/broadcast_timer/style.css b/broadcast_timer/style.css new file mode 100644 index 0000000..3dd5b5f --- /dev/null +++ b/broadcast_timer/style.css @@ -0,0 +1,80 @@ +body { background-color: #333; color: #fff;} +th { color: #FFF; font-size: 28px; } +table { border-collapse: collapse; } +table, th, td { border: 0px solid #999; padding: 0px; padding-top: 0px; padding-bottom: 0px; } + +.grid-container { + display: grid; + grid-template-areas: + 'clock main main main main main' + 'events main main main main main' + 'events main main main main main'; + grid-gap: 3px; + padding: 4px; +} + +.grid-main { + grid-area: main; +} + +.grid-clock { + grid-area: clock; + border: 1px solid #AAA; +} + +.grid-events { + grid-area: events; +} + +.main { + background-color: #222; + position: center; +/* margin: auto; */ +} + +.mainClock { + text-align: center; + font-size: 20px; + border: 1px solid #999; + padding: 15px; + padding-top: 5px; + padding-bottom: 5px; +} + +.events { +/* border: 1px solid #DDD; */ + padding: 2px; + padding-right: 10px; +} + +.events-current { + background-color: #666; +/* border: 1px solid #DDD; */ + padding: 2px; + padding-right: 10px; +} + +th.events { + text-align: left; +} + +table.events { + width: 100%; +} + +.countdown { text-align: right; font-size: 60px; } +.warn { color: yellow; } +.over { color: red; } +.green { color: lime; } +#now { color: #FFF; font-size: 20px; } +#utc_now { color: #FFF; font-size: 20px; } +.debug { background-color: #000; color: lime; border: 2px; border-color: lime; } +.notes { background-color: #000; color: #AAA; width: 100%; min-height: 400px;} +.notesTitle { background-color: #000; color: #AAA; width: 100%; font-size: 20px;} + +.right { text-align: right; border: 0px;} +.left { text-align: left; border: 0px; } +.nav { border: 0px; width: 100%; padding:0px; } +.upNext { color: #fff; font-size: 45px; } + + diff --git a/broadcast_timer/timerMath.js b/broadcast_timer/timerMath.js new file mode 100755 index 0000000..89a5198 --- /dev/null +++ b/broadcast_timer/timerMath.js @@ -0,0 +1,77 @@ + +var countDownDate; +var now, distance; +var days, hours, minutes, seconds; +var style = "green"; // reset style +var r; +aLen = events.length; + +function countdown(targetDate) { + + countDownDate = new Date(targetDate).getTime(); + now = new Date().getTime(); + distance = countDownDate - now; + + + days = Math.floor(distance / (1000 * 60 * 60 * 24)); + hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); + minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); + seconds = Math.floor((distance % (1000 * 60)) / 1000); + + +// Day or Days? + if (days > 0) { + if (days == 1){ + days = (days + ' Day '); + } else { + days = (days + ' Days '); + } + } else { + days = ''; + } + +// set style for countdown based on remaining time + style = "green"; // reset style + + if (days < 1 && hours < 1) { + //console.log(`in days and hours if statment`) + //console.log(`days = ${days} , hours = ${hours} , minutes = ${minutes}`) + if (minutes < 0) { + style = 'over'; + } else if (minutes < 15) { + style = 'warn'; + } else { + style = 'green'; + } + } + + //console.log(`Style = ${style}`) + +// pad single digits with a '0' prefix +// when time is out, start counting up by inverting + if (hours < 0) { + hours = (-hours); + } + if (hours < 10 && hours >= 0) { + hours = ('0' + hours); + } + + if (minutes < 0) { + minutes = (-minutes); + } + if (minutes < 10 && minutes >= 0) { + minutes = ('0' + minutes); + } + + if (seconds < 0) { + seconds = (-seconds); + } + if (seconds < 10 && seconds >= 0) { + seconds = ('0' + seconds); + } + + var r = "
" + days + hours + ":" + minutes + ":" + seconds + "
"; + + return r; +} +