Skip to content

Migrate from jQuery to Vanilla JS #22

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
tarik02 wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Migrate from jQuery to Vanilla JS #22

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5077466
Use vanilla js instead of jquery
tarik02 Nov 10, 2020
ad5b692
Merge branch 'master' of https://github.com/hartator/wheniskeynote.co…
tarik02 Nov 10, 2020
7b2cdaa
Merge remote-tracking branch 'github/master' into vanilla-js
tarik02 May 14, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 39 additions & 11 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,20 +15,48 @@
<link rel="stylesheet" href="style/main.css">
</head>
<body class="counteverest">
<noscript>Please enable JavaScript in your browser and reload this page.</noscript>
<div class="container">
<div id="response">
<h1 id="dark">The next Apple keynote address / product event is:</h1>
</div>
<div class="footer">
<noscript>Please enable JavaScript in your browser and reload this page.</noscript>
<div class="container">
<div id="response">
<h1 id="dark">The next Apple keynote address / product event is:</h1>

<div id="status-active" style="display: none;">
<h2>
<a href="https://www.apple.com/apple-events/" target="_blank" id="event-name"></a>
</h2>
<h3 id="dark">In your time zone, this event will be held on:</h3>
<time id="localtime"></time>
<h4 id="dark">Time remaining:</h4>
<div id="countdown" class="countdown">
<div class="col col1 days">
<span id="days" class="ce-days time-cont"></span>
<span class="ce-days-label">Days</span>
</div>
<div class="col col2">
<span id="hours" class="ce-hours time-cont"></span>
<span class="ce-hours-label">Hours</span>
</div>
<div class="col col3">
<span id="minutes" class="ce-minutes time-cont"></span>
<span class="ce-minutes-label">Minutes</span>
</div>
<div class="col col4">
<span id="seconds" class="ce-seconds time-cont"></span>
<span class="ce-seconds-label">Seconds</span>
</div>
</div>
</div>

<h2 id="status-inactive" style="display: none;">No event confirmed at this time :(</h2>
</div>
<div class="footer">
<p>Help us keep this website up to date. Add the event by making a PR on <a href="https://github.com/hartator/wheniskeynote.com">GitHub</a>
<br>Brought by <a href="https://serpapi.com">Serp Api</a>: <a href="https://serpapi.com">Google Search API</a><br>
&copy; <script>document.write(new Date().getFullYear())</script> wheniskeynote.com</p>
</div>
</div>
</div>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="js/addNewEvent.js"></script>
<script src="js/main.js"></script>
<script src="js/addNewEvent.js"></script>
<script src="js/main.js"></script>
</body>
</html>
30 changes: 16 additions & 14 deletions js/addNewEvent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,28 @@
/* --------------------------
* UPDATE UPCOMING EVENT DATE
* --------------------------
* --------------------------
*
* IMPORTANT: The date has to be in the Pacific Standard Time (PST) zone
*
*/
const
// The time zone when the event will be held. Format: time zone identifier (e.g., "PDT" or "PST")
timeZone = 'PDT',
// Format: YYYY (2020)
year = 2021,
// Format: MM (09) or M (9), both are valid
month = 04,
// Format: DD (09) or D (9), both are valid
day = 20,
// Format: 0 - 24 / 5 == 5 AM / 17 == 5 PM
hour = 10,
// Format: MM (09) or M (9), both are valid
minute = 00;
// The time zone when the event will be held. Format: time zone identifier (e.g., "PDT" or "PST")
EVENT_TIMEZONE = 'PDT',
// Format: YYYY (2020)
EVENT_YEAR = 2021,
// Format: MM (09) or M (9), both are valid
EVENT_MONTH = 04,
// Format: DD (09) or D (9), both are valid
EVENT_DAY = 20,
// Format: 0 - 24 / 5 == 5 AM / 17 == 5 PM
EVENT_HOUR = 10,
// Format: MM (09) or M (9), both are valid
EVENT_MINUTE = 00,
// Format: milliseconds
EVENT_DURATION = 2 * 60 * 60 * 1000; // 2 hours

/* --------------------------
* UPDATE UPCOMING EVENT NAME
* --------------------------
*/
const eventName = 'Spring Loaded';
const EVENT_NAME = 'Spring Loaded';
132 changes: 83 additions & 49 deletions js/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,63 +1,90 @@
let start = new Date(month + '/' + day + '/' + year + ' ' + hour + ':' + minute + ' ' + timeZone),
end = new Date(month + '/' + day + '/' + year + ' ' + (hour+2) + ':' + minute + ' ' + timeZone),
now = new Date(),
distance = start - now,
_second = 1000,
_minute = _second * 60,
_hour = _minute * 60,
_day = _hour * 24,
timer;
const DAY_NAMES = [
'Sunday',
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday',
];

const dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
eventHtml = '<h2><a href="https://www.apple.com/apple-events/" target="_blank">' + eventName + '</a></h2><h3 id="dark">In your time zone, this event will be held on:</h3><div id="localtime">' + dayNames[start.getDay()] + ', ' + monthNames[start.getMonth()] + ' ' + start.getDate() + ' at ' + ("0" + start.getHours()).slice(-2) + ':' + ("0" + start.getMinutes()).slice(-2) + '</div><h4 id="dark">Time remaining:</h4><div id="countdown" class="countdown"><div class="col col1 days"><span id="days" class="ce-days time-cont"></span><span class="ce-days-label">Days</span></div><div class="col col2"><span id="hours" class="ce-hours time-cont"></span><span class="ce-hours-label">Hours</span></div><div class="col col3"><span id="minutes" class="ce-minutes time-cont"></span><span class="ce-minutes-label">Minutes</span></div><div class="col col4"><span id="seconds" class="ce-seconds time-cont"></span><span class="ce-seconds-label">Seconds</span></div>';
const MONTH_NAMES = [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December',
];

// 7200000 = 2 hours
if (distance < -7200001) {
$('#response').append('<h2>No event confirmed at this time :(</h2>');
} else if (distance > -7200000 && distance < 0) {
$('#response').append(eventHtml);
$('#days').html('00');
$('#hours').html('00');
$('#minutes').html('00');
$('#seconds').html('00');
} else {
$('#response').append(eventHtml);
showRemaining();
timer = setInterval(showRemaining, 1000);
}
const start = new Date(`${EVENT_MONTH}/${EVENT_DAY}/${EVENT_YEAR} ${EVENT_HOUR}:${EVENT_MINUTE} ${EVENT_TIMEZONE}`);
const end = new Date(start.getTime() + EVENT_DURATION);

createCalendar(eventName, start, end);
let timer;
let now = new Date();
let distance = start - now;

function showRemaining() {
let now = new Date(),
distance = start - now;
const $statusActive = document.getElementById('status-active');
const $eventName = document.getElementById('event-name');
const $localtime = document.getElementById('localtime');
const $days = document.getElementById('days');
const $hours = document.getElementById('hours');
const $minutes = document.getElementById('minutes');
const $seconds = document.getElementById('seconds');

if (distance < 0) {
const $statusInactive = document.getElementById('status-inactive');

$eventName.innerText = EVENT_NAME;
$localtime.innerText = `${DAY_NAMES[start.getDay()]}, ${MONTH_NAMES[start.getMonth()]} ${start.getDate()} at ${`0${start.getHours()}`.slice(-2)}:${`0${start.getMinutes()}`.slice(-2)}`;
$localtime.dateTime = start.toISOString();

const updateCounter = () => {
now = new Date();
distance = start - now;

if (distance < -EVENT_DURATION) {
$statusActive.style.display = 'none';
$statusInactive.style.display = 'block';
clearInterval(timer);
return;
}
let days = Math.floor(distance / _day),
hours = Math.floor((distance % _day) / _hour),
minutes = Math.floor((distance % _hour) / _minute),
seconds = Math.floor((distance % _minute) / _second);

console.log(days / 100)
$statusActive.style.display = 'block';
$statusInactive.style.display = 'none';

if(days / 100 < 1) {
$('#days').html(("0" + days).slice(-2));
if (distance < 0) {
$days.innerText = '00';
$hours.innerText = '00';
$minutes.innerText = '00';
$seconds.innerText = '00';
setTimeout(updateCounter, (-distance / 1000) | 0);
}

const seconds = Math.floor(distance / 1000) % 60;
const minutes = Math.floor(distance / 1000 / 60) % 60;
const hours = Math.floor(distance / 1000 / 60 / 60) % 60;
const days = Math.floor(distance / 1000 / 60 / 60 / 24);

if (days > 100) {
$days.innerText = `${days}`;
} else {
$('#days').html(("0" + days).slice(-3));
$days.innerText = `0${days}`.slice(-2);
}
$('#hours').html(("0" + hours).slice(-2));
$('#minutes').html(("0" + minutes).slice(-2));
$('#seconds').html(("0" + seconds).slice(-2));
}
$hours.innerText = `0${hours}`.slice(-2);
$minutes.innerText = `0${minutes}`.slice(-2);
$seconds.innerText = `0${seconds}`.slice(-2);
};

function createCalendar(title, startDate, endDate) {
let startTime = startDate.toISOString().replace(/-|:|\.\d+/g, '');
let endTime = endDate.toISOString().replace(/-|:|\.\d+/g, '');
let href = encodeURI(
const createCalendar = (title, startDate, endDate) => {
const startTime = startDate.toISOString().replace(/-|:|\.\d+/g, '');
const endTime = endDate.toISOString().replace(/-|:|\.\d+/g, '');
const href = encodeURI(
'data:text/calendar;charset=utf8,' + [
'BEGIN:VCALENDAR',
'VERSION:2.0',
Expand All @@ -72,5 +99,12 @@ function createCalendar(title, startDate, endDate) {
'END:VCALENDAR'].join('\n')
);

$("#localtime").append('<a href="' + href + '"><img class="ics" src="./images/cal.svg" alt=""/></a>');
}
const $link = document.createElement('a');
$link.href = href;
$link.innerHTML = '<img class="ics" src="./images/cal.svg" alt="" />';
$localtime.append($link);
};

updateCounter();
timer = setInterval(updateCounter, 1000);
createCalendar(EVENT_NAME, start, end);