We Keep Coding

How to add multiple events to the same date as opposed to just one event per day?

The code I have only allows me to add one event in the calendar for each day; I need to be able to add multiple events for each day.
The events are coded in the JS page and they are linked to the input boxes and buttons on the HTML page. A for each loop would probably solve my issue but I am running into difficulty forming one
Thank you
Below is my javascript code:
let nav = 0;
let clicked = null;
let events = localStorage.getItem('events') ? JSON.parse(localStorage.getItem('events')) : [];
const calendar = document.getElementById('calendar');
const newEventModal = document.getElementById('newEventModal');
const deleteEventModal = document.getElementById('deleteEventModal');
const backDrop = document.getElementById('modalBackDrop');
const eventTitleInput = document.getElementById('eventTitleInput');
const weekdays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
function openModal(date) {
clicked = date;
const eventForDay = events.find(e => e.date === clicked);
if (eventForDay) {
document.getElementById('eventText').innerText = eventForDay.title;
deleteEventModal.style.display = 'block';
} else {
newEventModal.style.display = 'block';
}
backDrop.style.display = 'block';
}
function load() {
const dt = new Date();
if (nav !== 0) {
dt.setMonth(new Date().getMonth() + nav);
}
const day = dt.getDate();
const month = dt.getMonth();
const year = dt.getFullYear();
const firstDayOfMonth = new Date(year, month, 1);
const daysInMonth = new Date(year, month + 1, 0).getDate();
const dateString = firstDayOfMonth.toLocaleDateString('en-us', {
weekday: 'long',
year: 'numeric',
month: 'numeric',
day: 'numeric',
});
const paddingDays = weekdays.indexOf(dateString.split(', ')[0]);
document.getElementById('monthDisplay').innerText =
`${dt.toLocaleDateString('en-us', { month: 'long' })} ${year}`;
calendar.innerHTML = '';
for(let i = 1; i <= paddingDays + daysInMonth; i++) {
const daySquare = document.createElement('div');
daySquare.classList.add('day');
const dayString = `${month + 1}/${i - paddingDays}/${year}`;
if (i > paddingDays) {
daySquare.innerText = i - paddingDays;
const eventForDay = events.find(e => e.date === dayString);
if (i - paddingDays === day && nav === 0) {
daySquare.id = 'currentDay';
}
if (eventForDay) {
const eventDiv = document.createElement('div');
eventDiv.classList.add('event');
eventDiv.innerText = eventForDay.title;
daySquare.appendChild(eventDiv);
}
daySquare.addEventListener('click', () => openModal(dayString));
} else {
daySquare.classList.add('padding');
}
calendar.appendChild(daySquare);
}
}
function closeModal() {
eventTitleInput.classList.remove('error');
newEventModal.style.display = 'none';
deleteEventModal.style.display = 'none';
backDrop.style.display = 'none';
eventTitleInput.value = '';
clicked = null;
load();
}
function saveEvent() {
if (eventTitleInput.value) {
eventTitleInput.classList.remove('error');
events.push({
date: clicked,
title: eventTitleInput.value,
});
localStorage.setItem('events', JSON.stringify(events));
closeModal();
} else {
eventTitleInput.classList.add('error');
}
}
function deleteEvent() {
events = events.filter(e => e.date !== clicked);
localStorage.setItem('events', JSON.stringify(events));
closeModal();
}
function initButtons() {
document.getElementById('nextButton').addEventListener('click', () => {
nav++;
load();
});
document.getElementById('backButton').addEventListener('click', () => {
nav--;
load();
});
document.getElementById('saveButton').addEventListener('click', saveEvent);
document.getElementById('cancelButton').addEventListener('click', closeModal);
document.getElementById('deleteButton').addEventListener('click', deleteEvent);
document.getElementById('closeButton').addEventListener('click', closeModal);
}
initButtons();
load();
***Below is my HTML code***
<div class="services">
<div class="row">
<div id="container">
<div id="header">
<div id="monthDisplay"></div>
<div>
<button id="backButton">Back</button>
<button id="nextButton">Next</button>
</div>
</div>
<div id="weekdays">
<div>Sunday</div>
<div>Monday</div>
<div>Tuesday</div>
<div>Wednesday</div>
<div>Thursday</div>
<div>Friday</div>
<div>Saturday</div>
</div>
<div id="calendar"></div>
</div>
<div id="newEventModal">
<h2>Add Task</h2>
<input id="eventTitleInput"/>
<button id="saveButton">Save</button>
<button id="cancelButton">Cancel</button>
</div>
<div id="deleteEventModal">
<h2>Event</h2>
<p id="eventText"></p>
<button id="deleteButton">Delete</button>
<button id="closeButton">Close</button>
</div>
<div id="modalBackDrop"></div>
</div>
</div>

Slider value adding to date

I am producing a slider that adds to a date using pure JavaScript. I need the slider to be able to add the value of the element to the date.
For example, if the value of the slider is 24, I need to add 24 days onto the date.
I have tried adding onto the getDate() function, but all that does is add it together if its a string. I then tried to use parseInt() to make the value of the slider into an integer but then it makes the day into an integer when I add the value to the days.
var sliderDate = document.getElementById('dateSlider');
var outputDate = document.getElementById('dateOutput');
var today = new Date();
var sliderAdded = today;
var day = sliderAdded.getDay();
var month = sliderAdded.getMonth();
var date = sliderAdded.getDate() + sliderDate.value;
var daysOfWeek = [
"N/A",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
"Sunday"
];
var nameOfMonths = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
];
var sliderDateValue = sliderDate.value;
//connection between slider and input textbox
outputDate.value = sliderDate.value;
sliderDate.oninput = function() {
outputDate.value = this.value;
};
outputDate.oninput = function() {
sliderDate.value = this.value;
};
function dateBoundries() {
if (outputDate.value > 35) {
outputDate.value = 35;
} else if (outputDate.value < 0) {
outputDate.value = 0;
} else {}
}
if (date == 1 || date == 21 || date == 31) {
suffix = "st ";
} else if (date == 2 || date == 22) {
suffix = "nd ";
} else if (date == 3 || date == 23) {
suffix = "rd ";
} else {
suffix = "th ";
}
document.getElementById('dateTest').innerHTML =
daysOfWeek[day] +
" " +
date +
suffix +
" " +
nameOfMonths[month] +
" " +
today.getFullYear();
<h1>
<span id="dateTest"></span>
<input type="textbox" id="dateOutput" onfocusout="dateBoundries()"><br>
<input type="range" min="1" max="35" value="1" class="slider" id="dateSlider">
<br>
</h1>

var sliderDate = document.getElementById('dateSlider');
var outputDate = document.getElementById('dateOutput');
var daysOfWeek = [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday"
];
var nameOfMonths = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
];
var sliderDateValue = sliderDate.value;
//connection between slider and input textbox
outputDate.value = sliderDate.value;
sliderDate.oninput = function() {
var today = new Date();
today.setDate(today.getDate() + Number(this.value));
outputDate.value = this.value;
formattedDate(today)
};
outputDate.oninput = function() {
var today = new Date();
today.setDate(today.getDate() + Number(this.value));
sliderDate.value = this.value;
formattedDate(today)
};
function dateBoundries() {
if (outputDate.value > 35) {
outputDate.value = 35;
} else if (outputDate.value < 0) {
outputDate.value = 0;
} else {}
}
function formattedDate(dateN) {
var date = dateN.getDate()
if (date == 1 || date == 21 || date == 31) {
suffix = "st ";
} else if (date == 2 || date == 22) {
suffix = "nd ";
} else if (date == 3 || date == 23) {
suffix = "rd ";
} else {
suffix = "th ";
}
document.getElementById('dateTest').innerHTML =
daysOfWeek[dateN.getDay()] +
" " +
date +
suffix +
" " +
nameOfMonths[dateN.getMonth()] +
" " +
dateN.getFullYear();
}
formattedDate(new Date());
</h1> <span id="dateTest"></span>
<input type="textbox" id="dateOutput" onfocusout="dateBoundries()"><br>
<input type="range" min="0" max="35" value="1" class="slider" id="dateSlider">
<br>
By your question, I have tried inserting the logic. Please do let me know if satisfies. In your code there was an error in calculating days remember week starts from sunday.

<h1>
<span id="dateTest"></span>
<input type="textbox" id="dateOutput" onfocusout="dateBoundries()"><br>
<input type="range" min="1" max="35" value="1" class="slider" id="dateSlider" onchange="dateOutput.value = parseInt(dateOutput.value) + parseInt(dateSlider.value);"><br>
</h1>

Show any Month/Year Javascript Calendar

I am trying to code a calendar using HTML and JavaScript that allows the user to choose any month in a given year to look at. I set up an HMTL form that has a drop down list to choose the month and an input box to enter the desired year. There are also buttons coded to toggle between the month and year, along with showing the current month. All of that is working, and I was able to get the calendar to show up as well for the current month.
What I am struggling with is getting the calendar display to change when I hit the toggle buttons or when I choose a desired month/year and hit the display button. I'm not sure what to do to get my calendar to work the way it is supposed to.
HTML
<!DOCTYPE html>
<html>
<head>
<script src = "CalendarFunction.js"></script>
<link href="Calendartest.css" rel="stylesheet"/>
</head>
<body onLoad = "CreateCalendar()">
<form name = "DateControl" id = "DateControl" onSubmit = "return false;" method = "post">
<!--Select the month and year to be shown -->
<select name = "Month" id = "month" onChange = "ChooseDate()">
<option value="January" id="January">January</option>
<option value="February" id="February">February</option>
<option value="March" id="March">March</option>
<option value="April" id="April">April</option>
<option value="May" id="May">May</option>
<option value="June" id="June">June</option>
<option value="July" id="July" >July</option>
<option value="August" id="August">August</option>
<option value="September" id="September">September</option>
<option value="October" id="October" >October</option>
<option value="November" id="November">November</option>
<option value="December" id="December">December</option>
</select>
<input name = "Year" type = "text" maxlength = "4">
<!-- Show Calendar -->
<input type = "button" name = "create" value = "Show" onClick = "ChooseDate()">
</TD>
</TR>
<!--Toggle between the months of the year -->
<input type = "button" name = "previousYear" value = "<Year" onClick = "PreviousYear()">
<input type = "button" name = "previousMonth" value = "<Month" onClick = "PreviousMonth()">
<input type = "button" name = "current" value = "Current" onClick = "SetDate()">
<input type = "button" name = "nextYear" value = ">Year" onClick = "NextYear()">
<input type = "button" name = "nextMonth" value = ">Month"onClick = "NextMonth()" >
</form>
<div id = "calendar"></div>
</body>
</html>
JS
function SetDate() {
var now = new Date();
var day = now.getDate();
var month = now.getMonth();
var year = now.getFullYear();
this.focusDay = day;
document.DateControl.Month.selectedIndex = month;
document.DateControl.Year.value = year;
displayCalendar(month, year);
}
function isFourDigitYear(year) {
if (year.length != 4) {
alert("Sorry, the year must be four-digits in length.");
document.DateControl.Year.select();
document.DateControl.Year.focus();
} else {
return true;
}
}
function ChooseDate() {
var year = document.DateControl.Year.value;
if (isFourDigitYear(year)) {
var day = 0;
var month = document.DateControl.Month.selectedIndex;
displayCalendar(month, year);
}
}
function PreviousYear() {
var year = document.DateControl.Year.value;
if (isFourDigitYear(year)) {
var day = 0;
var month = document.DateControl.Month.selectedIndex;
year--;
document.DateControl.Year.value = year;
displayCalendar(month, year);
}
}
function PreviousMonth() {
var year = document.DateControl.Year.value;
if (isFourDigitYear(year)) {
var day = 0;
var month = document.DateControl.Month.selectedIndex;
if (month == 0) {
month = 11;
if (year > 1000) {
year--;
document.DateControl.Year.value = year;
}
} else {
month--;
}
document.DateControl.Month.selectedIndex = month;
displayCalendar(month, year);
}
}
function NextMonth() {
var year = document.DateControl.Year.value;
if (isFourDigitYear(year)) {
var day = 0;
var month = document.DateControl.Month.selectedIndex;
if (month == 11) {
month = 0;
year++;
document.DateControl.Year.value = year;
} else {
month++;
}
document.DateControl.Month.selectedIndex = month;
displayCalendar(month, year);
}
}
function NextYear() {
var year = document.DateControl.Year.value;
if (isFourDigitYear(year)) {
var day = 0;
var month = document.DateControl.Month.selectedIndex;
year++;
document.DateControl.Year.value = year;
displayCalendar(month, year);
}
}
function CreateCalendar() {
var htmlContent = "";
var FebNumberOfDays = "";
var counter = 1;
var now = new Date();
var day = now.getDate();
var month = now.getMonth();
var year = now.getFullYear();
var nextMonth = month + 1;
var prevMonth = month - 1;
if (month == 1) {
if ((year % 100 != 0) && (year % 4 == 0) || (year % 400 == 0)) {
FebNumberOfDays = 29;
} else {
FebNumberOfDays = 28;
}
}
var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var dayPerMonth = ["31", "" + FebNumberOfDays + "", "31", "30", "31", "30", "31", "31", "30", "31", "30", "31"];
var nextDate = new Date(nextMonth + ' 1 ,' + year);
var weekdays = nextDate.getDay();
var weekdays2 = weekdays;
var numOfDays = dayPerMonth[month];
while (weekdays > 0) {
htmlContent += "<td class='monthPre'></td>";
weekdays--;
}
while (counter <= numOfDays) {
if (weekdays2 > 6) {
weekdays2 = 0;
htmlContent += "</tr><tr>";
}
if (counter == day) {
htmlContent += "<td class='dayNow'>" + counter + "</td>";
} else {
htmlContent += "<td class='monthNow'>" + counter + "</td>";
}
weekdays2++;
counter++;
}
var calendarBody = "<table class='calendar'> <tr class='monthNow'><th colspan='7'>" +
monthNames[month] + " " + year + "</th></tr>";
calendarBody += "<tr class='dayNames'> <td>Sun</td> <td>Mon</td> <td>Tues</td>" +
"<td>Wed</td> <td>Thurs</td> <td>Fri</td> <td>Sat</td> </tr>";
calendarBody += "<tr>";
calendarBody += htmlContent;
calendarBody += "</tr></table>";
document.getElementById("calendar").innerHTML = calendarBody;
}
CSS
.monthPre{
color: gray;
text-align: center;
}
.monthNow{
color: blue;
text-align: center;
}
.dayNow{
border: 2px solid black;
color: #FF0;
text-align: center;
}
.calendar td{
htmlContent: 2px;
border: 2px solid black;
width: 140px;
height: 140px;
}
.monthNow th{
background-color: #000000;
color: #FFFFFF;
text-align: center;
}
.dayNames{
background: #0FF000;
color: #FFFFFF;
text-align: center;
}

How to get month in previous year?

I try to get the previous month according to current month. But the problem occurs when "year" is not 2017.
So how can I get the month of the previous year?. The code below will describe what I want, if anybody know how to get it please tell me the method. Thank you :)
var month = new Array();
month[0] = "January";
month[1] = "February";
month[2] = "March";
month[3] = "April";
month[4] = "May";
month[5] = "June";
month[6] = "July";
month[7] = "August";
month[8] = "September";
month[9] = "October";
month[10] = "November";
month[11] = "December";
var cur_month = new Date();
var cur_month_now = month[cur_month.getMonth()];
var pre_month_1 = month[cur_month.getMonth()-1];
var pre_month_2 = month[cur_month.getMonth()-2];
var pre_month_3 = month[cur_month.getMonth()-3];
var pre_month_4 = month[cur_month.getMonth()-4];
var pre_month_5 = month[cur_month.getMonth()-5];
document.getElementById("cur_month").innerHTML = cur_month_now;
document.getElementById("pre_month_1").innerHTML = pre_month_1;
document.getElementById("pre_month_2").innerHTML = pre_month_2;
document.getElementById("pre_month_3").innerHTML = pre_month_3;
document.getElementById("pre_month_4").innerHTML = pre_month_4;
document.getElementById("pre_month_5").innerHTML = pre_month_5;
<div class="dropdown">
<button class="btn btn-danger dropdown-toggle" type="button" data-toggle="dropdown">Select Month
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>

You are getting this undefined because month[-1] and month[-2] are undefined
You need to actually do date manipulation in a date object rather than just getting date from index.
Use this method to get last month date
function getPrevMonth(date) {
date.setMonth(date.getMonth() - 1);
return date;
}
invoke this method as many times as you need.
Demo
function getPrevMonth(date) {
date.setMonth(date.getMonth() - 1);
return date;
}
var month = new Array();
month[0] = "January";
month[1] = "February";
month[2] = "March";
month[3] = "April";
month[4] = "May";
month[5] = "June";
month[6] = "July";
month[7] = "August";
month[8] = "September";
month[9] = "October";
month[10] = "November";
month[11] = "December";
var cur_month = new Date();
var cur_month_now = month[cur_month.getMonth()];
var pre_month_1 = month[getPrevMonth(cur_month).getMonth()];
var pre_month_2 = month[getPrevMonth(cur_month).getMonth()];
var pre_month_3 = month[getPrevMonth(cur_month).getMonth()];
var pre_month_4 = month[getPrevMonth(cur_month).getMonth()];
var pre_month_5 = month[getPrevMonth(cur_month).getMonth()];
document.getElementById("cur_month").innerHTML = cur_month_now;
document.getElementById("pre_month_1").innerHTML = pre_month_1;
document.getElementById("pre_month_2").innerHTML = pre_month_2;
document.getElementById("pre_month_3").innerHTML = pre_month_3;
document.getElementById("pre_month_4").innerHTML = pre_month_4;
document.getElementById("pre_month_5").innerHTML = pre_month_5;
<div class="dropdown">
<button class="btn btn-danger dropdown-toggle" type="button" data-toggle="dropdown">Select Month
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>

Let Date do the wrap-around for you. There are also a couple of improvements we can make to the code, see comments:
// Array initializers are cleaner and less typing
var month = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
];
var dt = new Date();
var cur_month_now = month[dt.getMonth()];
dt.setMonth(dt.getMonth() - 1); // Date handles wrapping to previous year
var pre_month_1 = month[dt.getMonth()];
dt.setMonth(dt.getMonth() - 1);
var pre_month_2 = month[dt.getMonth()];
dt.setMonth(dt.getMonth() - 1);
var pre_month_3 = month[dt.getMonth()];
dt.setMonth(dt.getMonth() - 1);
var pre_month_4 = month[dt.getMonth()];
dt.setMonth(dt.getMonth() - 1);
var pre_month_5 = month[dt.getMonth()];
document.getElementById("cur_month").innerHTML = cur_month_now;
document.getElementById("pre_month_1").innerHTML = pre_month_1;
document.getElementById("pre_month_2").innerHTML = pre_month_2;
document.getElementById("pre_month_3").innerHTML = pre_month_3;
document.getElementById("pre_month_4").innerHTML = pre_month_4;
document.getElementById("pre_month_5").innerHTML = pre_month_5;
<div class="dropdown">
<button class="btn btn-danger dropdown-toggle" type="button" data-toggle="dropdown">Select Month
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>

Nothing really new, but for smaller js code …
function getPrevMonth(date, m) {
date.setMonth(date.getMonth() - m);
return date;
}
//no need for such array
locale = "en-us";//or e.g. navigator.languages[0]
var d = new Date();
for (var i=0; i<6; i++){
//also worth trying: create element instead of writing to exiting ones only: https://www.w3schools.com/jsref/met_document_createelement.asp
document.getElementById("pre_month_"+i).innerHTML = getPrevMonth(d,1).toLocaleString(locale, { month: "long" });
}
<div class="dropdown">
<button class="btn btn-danger dropdown-toggle" type="button" data-toggle="dropdown">Select Month
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>

You could do this a bit more concise, and using modulo operator:
var month = "January,February,March,April,May,June,July,August,September,October,November,December"
.split(','),
monthNum = 12 + new Date().getMonth();
Array.from(document.querySelectorAll('.dropdown-menu a'), function (elem, i) {
elem.textContent = month[(monthNum-i)%12];
});
<div class="dropdown">
<button class="btn btn-danger dropdown-toggle" type="button" data-toggle="dropdown">Select Month
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
NB: It is better practice to use textContent instead of innerHTML, since you want to put text, not HTML.

Why does it not update on the website?

This code show time and date, but does not update it?
So it shows for example : 03:04 - but 1 min later it shows the same.
var language = window.navigator.language;
if (language.length > 2) {
language = language.split('-');
language = language[0];
}
//language = "fr"; // manually set language
if (language === "en") {
var weekday = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var month = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
} else if (language === "cz") {
var weekday = ["Neděle", "Pondělí", "Úterý", "Středa", "Čtvrtek", "Pátek", "Sobota"];
var month = ["Leden", "Únor", "Březen", "Duben", "Květen", "Červen", "Červenec", "Srpen", "Září", "Říjen", "Listopad", "Prosinec"];
} else if (language === "it") {
var weekday = ['Domenica', 'Luned&#236', 'Marted&#236', 'Mercoled&#236', 'Gioved&#236', 'Venerd&#236', 'Sabato'];
var month = ["Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno", "Luglio", "Agosto", "Settembre", "Ottobre", "Novembre", "Dicembre"];
} else if (language === "sp") {
var weekday = ["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"];
var month = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];
} else if (language === "de") {
var weekday = ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"];
var month = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Ju li", "August", "September", "Oktober", "November", "Dez ember"];
} else if (language === "fr") {
var weekday = ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"];
var month = ["Janvie", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"];
} else if (language === "zh") {
var weekday = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
var month = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', 'ä¹æœˆ', 'å月', 'å一月', 'å二月'];
} else {
var weekday = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var month = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
}
(function clock() {
"use strict";
var adjDay, twentyfour, currentTime, currentHours, currentMinutes, mnth, day, oday, year, dat;
twentyfour = false; ///set twentyfour here.
adjDay = function (day, daynum) {
var offset, doffset, left;
switch (day.length) {
case 6:
offset = "0px";
doffset = "1px";
left = "-1px";
break;
case 7:
offset = "0px";
doffset = "0px";
left = "-1px";
break;
case 8:
offset = "2px";
doffset = "0px";
left = "-4px";
break;
case 9:
offset = "3.5px";
doffset = ".1px";
left = "-6px";
break;
default:
offset = "0px";
doffset = "0px";
left = "0px";
}
if (daynum === 1) {
offset = "1px";
left = "-2px";
}
if (daynum === 5) {
doffset = "1.5px";
}
if (daynum === 6) {
left = "-4px";
offset = "2px";
doffset = ".1px";
}
document.getElementById('year').style.letterSpacing = offset;
document.getElementById('day').style.letterSpacing = doffset;
document.getElementById('dates').style.left = left;
};
currentTime = new Date();
currentHours = currentTime.getHours();
currentMinutes = currentTime.getMinutes();
currentMinutes = (currentMinutes < 10 ? "0" : "") + currentMinutes;
mnth = currentTime.getMonth();
dat = currentTime.getDate();
day = currentTime.getDay();
oday = (dat < 10 ? "0" : "") + dat;
year = currentTime.getFullYear();
if (!twentyfour) {
currentHours = (currentHours > 12) ? currentHours - 12 : currentHours;
currentHours = (currentHours === 0) ? 12 : currentHours;
}
document.getElementById('clock').innerHTML = currentHours + ":" + currentMinutes;
document.getElementById('date').innerHTML = weekday[day] + ", " + month[mnth] + " " + oday;
adjDay(weekday[day], day);
setTimeout(function () {
clock();
}, 30000);
}());