Skip to content

Commit bf5e244

Browse files
mikeumusmikeumus
committed
Adding self closure and use strict.
1 parent 8ea986a commit bf5e244

File tree

4 files changed

+187
-162
lines changed

4 files changed

+187
-162
lines changed

‎.gitignore

+6-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,6 @@
1-
.c9/
1+
.c9/
2+
index.html
3+
javascript-tests.js
4+
react-example/
5+
sandbox.html
6+
sandbox.js

‎calendar.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,11 @@
2020

2121
<h1>Vanilla JavaScript Calendar</h1>
2222

23+
<hr>
24+
2325
<!-- Target element to render calendar inside: -->
2426
<div id="calendarThis"> </div>
2527

26-
<hr>
27-
2828
<div class="container">
2929
<h3>How To Use:</h3>
3030
<pre>

‎calendar.js

+178-159
Original file line numberDiff line numberDiff line change
@@ -1,166 +1,185 @@
11
/* Vanilla JS Calendar */
2+
(function(){
3+
4+
"use strict";
25

36
var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
47
var dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
58

69
document.addEventListener("DOMContentLoaded", function(event){
7-
8-
var theDate = new Date();
9-
10-
var DateObject = function DateObject(theDate) {
11-
this.theDay = theDate.getDate();
12-
this.dayName = dayNames[theDate.getDay()];
13-
this.theMonth = monthNames[theDate.getMonth()];
14-
this.theYear = theDate.getFullYear();
15-
this.daysInMonth = new Date(theDate.getFullYear(), theDate.getMonth()+1, 0).getDate();
16-
this.firstDayOfMonth = dayNames[new Date(theDate.getFullYear(), theDate.getMonth(), 1).getDay()];
17-
};
18-
19-
var currentDate = new DateObject(theDate);
20-
21-
function renderCalendar(targetElem){
22-
23-
// Custom function to make new elements easier:
24-
function addElem(elementType, elemClass, appendTarget){
25-
appendTarget.innerHTML += "<"+elementType+" class="+elemClass+"> </"+elementType+">";
26-
}
27-
28-
currentDate = new DateObject(theDate);
29-
30-
var renderTarget = document.getElementById(targetElem);
31-
renderTarget.remove();
32-
renderTarget = document.createElement("div");
33-
renderTarget.id = targetElem;
34-
document.getElementsByTagName('body')[0].appendChild(renderTarget);
35-
36-
// Monday, dayView
37-
addElem("div", "day-view", renderTarget);
38-
var dayView = document.querySelector('.day-view');
39-
var dayNameElem = document.createElement("div");
40-
dayNameElem.className = "day-header";
41-
var dayNameNode = document.createTextNode(currentDate.dayName);
42-
dayNameElem.appendChild(dayNameNode);
43-
dayView.appendChild(dayNameElem);
44-
// 21st, dayNumber
45-
addElem("div", "day-number", dayView);
46-
var dayNumber = document.querySelector('.day-number');
47-
var dayNumNode = document.createTextNode(currentDate.theDay);
48-
dayNumber.appendChild(dayNumNode);
49-
dayView.appendChild(dayNumber);
50-
51-
addElem("div", "month-view", renderTarget);
52-
var monthView = document.querySelector('.month-view');
10+
11+
var theDate = new Date();
12+
13+
var DateObject = function DateObject(theDate) {
14+
this.theDay = theDate.getDate();
15+
this.dayName = dayNames[theDate.getDay()];
16+
this.theMonth = monthNames[theDate.getMonth()];
17+
this.theYear = theDate.getFullYear();
18+
this.daysInMonth = new Date(theDate.getFullYear(), theDate.getMonth()+1, 0).getDate();
19+
this.firstDayOfMonth = dayNames[new Date(theDate.getFullYear(), theDate.getMonth(), 1).getDay()];
20+
};
21+
22+
var currentDate = new DateObject(theDate);
23+
24+
function renderCalendar(targetElem){
25+
26+
// Broken Custom function to make new elements easier:
27+
// Goal was to create the DOM variable from the function.
28+
/*
29+
var addElem = function(elemVar, appendTarget, elementType, elemClass){
30+
// Better performance, less safe with adding new elements with `innerHTML`
31+
window[elemVar] = document.createElement(elementType);
32+
window[elemVar].className = elemClass;
33+
appendTarget.appendChild(window[elemVar]);
34+
};
35+
36+
// addElem(dayView, renderTarget, "div", "day-view");
37+
*/
38+
39+
// Custom function to make new elements easier:
40+
function addElem(elementType, elemClass, appendTarget){
41+
appendTarget.innerHTML += "<"+elementType+" class="+elemClass+"> </"+elementType+">";
42+
}
43+
44+
currentDate = new DateObject(theDate);
45+
46+
// Refreshing Calendar
47+
var renderTarget = document.getElementById(targetElem);
48+
renderTarget.remove();
49+
renderTarget = document.createElement("div");
50+
renderTarget.id = targetElem;
51+
document.getElementsByTagName('body')[0].appendChild(renderTarget);
52+
53+
// Monday, dayView
54+
addElem("div", "day-view", renderTarget);
55+
var dayView = document.querySelector('.day-view');
56+
var dayNameElem = document.createElement("div"); // i.e.: Wednesday
57+
dayNameElem.className = "day-header";
58+
var dayNameNode = document.createTextNode(currentDate.dayName);
59+
dayNameElem.appendChild(dayNameNode);
60+
dayView.appendChild(dayNameElem);
61+
// 21st, dayNumber
62+
addElem("time", "day-number", dayView);
63+
var dayNumber = document.querySelector('.day-number');
64+
var dayNumNode = document.createTextNode(currentDate.theDay);
65+
dayNumber.appendChild(dayNumNode);
66+
dayView.appendChild(dayNumber);
67+
68+
addElem("div", "month-view", renderTarget);
69+
var monthView = document.querySelector('.month-view');
70+
71+
var prevMonthSpan = document.createElement("SPAN");
72+
prevMonthSpan.addEventListener('click', function(){
73+
goToMonth(currentDate, false); // Go To Previous Month
74+
});
75+
prevMonthSpan.classList.add('arrow', 'float-left', 'prev-arrow');
76+
var backArrow = document.createTextNode("<");
77+
prevMonthSpan.appendChild(backArrow);
78+
79+
var nextMonthSpan = document.createElement("SPAN");
80+
nextMonthSpan.addEventListener('click', function(){
81+
goToMonth(currentDate, true); // Go To Next Month
82+
});
83+
nextMonthSpan.classList.add('arrow', 'float-right', 'next-arrow');
84+
var nextArrow = document.createTextNode(">");
85+
nextMonthSpan.appendChild(nextArrow);
86+
87+
document.onkeydown = function() {
88+
switch (window.event.keyCode) {
89+
case 37: //Left key
90+
goToMonth(currentDate, false);
91+
break;
92+
case 39: //Right key
93+
goToMonth(currentDate, true);
94+
break;
95+
}
96+
};
97+
98+
var monthSpan = document.createElement("SPAN");
99+
monthSpan.className = "month-header";
100+
var monthOf = document.createTextNode(
101+
currentDate.theMonth +" "+ currentDate.theYear
102+
);
103+
104+
monthSpan.appendChild(prevMonthSpan);
105+
monthSpan.appendChild(monthOf);
106+
monthSpan.appendChild(nextMonthSpan);
107+
monthView.appendChild(monthSpan);
108+
109+
for(i=0; i < dayNames.length; i++){
110+
var dayOfWeek = document.createElement('div');
111+
dayOfWeek.className = "day-of-week";
112+
var charOfDay = document.createTextNode(dayNames[i].charAt(0));
113+
dayOfWeek.appendChild(charOfDay);
114+
monthView.appendChild(dayOfWeek);
115+
}
116+
117+
// renderTarget.appendChild(document.createElement("ul"));
118+
var calendarList = document.createElement("ul");
119+
for(i = 0; i < currentDate.daysInMonth; i++){
120+
var calendarCell = document.createElement("li");
121+
var calCellTime = document.createElement("time");
122+
calendarList.appendChild(calendarCell);
123+
calendarCell.id = 'day_'+(i+1);
124+
var dayDataDate = new Date(theDate.getFullYear(), theDate.getMonth(), (i+1));
125+
calCellTime.setAttribute('datetime', dayDataDate.toISOString());
126+
calCellTime.setAttribute('data-dayofweek', dayNames[dayDataDate.getDay()]);
127+
128+
calendarCell.className = "calendar-cell";
129+
if(i === currentDate.theDay-1){
130+
calendarCell.className = "today";
131+
}
132+
var dayOfMonth = document.createTextNode(i+1);
133+
calCellTime.appendChild(dayOfMonth);
134+
calendarCell.appendChild(calCellTime);
135+
monthView.appendChild(calendarList);
136+
137+
} // daysInMonth for loop ends
138+
139+
var dayOne = document.getElementById('day_1');
140+
if (currentDate.firstDayOfMonth == "Monday"){
141+
dayOne.style.marginLeft = "49px";
142+
} else if (currentDate.firstDayOfMonth == "Tuesday"){
143+
dayOne.style.marginLeft = "98px";
144+
} else if (currentDate.firstDayOfMonth == "Wednesday"){
145+
dayOne.style.marginLeft = "147px";
146+
} else if (currentDate.firstDayOfMonth == "Thursday"){
147+
dayOne.style.marginLeft = "196px";
148+
} else if (currentDate.firstDayOfMonth == "Friday"){
149+
dayOne.style.marginLeft = "245px";
150+
} else if (currentDate.firstDayOfMonth == "Saturday"){
151+
dayOne.style.marginLeft = "304px";
152+
}
153+
154+
var dayHeader = document.getElementsByClassName('day-header');
155+
var dayNumNode = document.getElementsByClassName('day-number');
156+
var updateDay = function(){
157+
var thisCellTime = this.querySelector('time');
158+
dayHeader[0].textContent = thisCellTime.getAttribute('data-dayofweek');
159+
160+
dayNumNode[0].textContent = this.textContent;
161+
162+
}
163+
164+
var calCells = document.getElementsByClassName('calendar-cell');
165+
for(i = 0; i < calCells.length; i++){
166+
calCells[i].addEventListener('click', updateDay, false);
167+
}
168+
169+
} // renderCalener function ends
170+
171+
// console.log(new DateObject(theDate));
172+
renderCalendar("calendarThis");
173+
174+
function goToMonth(currentDate, direction) {
175+
if (direction == false){
176+
theDate = new Date(theDate.getFullYear(), theDate.getMonth()-1, 1);
177+
} else{
178+
theDate = new Date(theDate.getFullYear(), theDate.getMonth()+1, 1);
179+
}
180+
return renderCalendar("calendarThis");
181+
}
182+
183+
}); // DOMContentLoaded event listener ends
53184

54-
var prevMonthSpan = document.createElement("SPAN");
55-
prevMonthSpan.addEventListener('click', function(){
56-
goToMonth(currentDate, false); // Go To Previous Month
57-
});
58-
prevMonthSpan.classList.add('arrow', 'float-left', 'prev-arrow');
59-
var backArrow = document.createTextNode("<");
60-
prevMonthSpan.appendChild(backArrow);
61-
62-
var nextMonthSpan = document.createElement("SPAN");
63-
nextMonthSpan.addEventListener('click', function(){
64-
goToMonth(currentDate, true); // Go To Next Month
65-
});
66-
nextMonthSpan.classList.add('arrow', 'float-right', 'next-arrow');
67-
var nextArrow = document.createTextNode(">");
68-
nextMonthSpan.appendChild(nextArrow);
69-
70-
document.onkeydown = function() {
71-
switch (window.event.keyCode) {
72-
case 37: //Left key
73-
goToMonth(currentDate, false);
74-
break;
75-
case 39: //Right key
76-
goToMonth(currentDate, true);
77-
break;
78-
}
79-
};
80-
81-
var monthSpan = document.createElement("SPAN");
82-
monthSpan.className = "month-header";
83-
var monthOf = document.createTextNode(
84-
currentDate.theMonth +" "+ currentDate.theYear
85-
);
86-
87-
monthSpan.appendChild(prevMonthSpan);
88-
monthSpan.appendChild(monthOf);
89-
monthSpan.appendChild(nextMonthSpan);
90-
monthView.appendChild(monthSpan);
91-
92-
for(i=0; i < dayNames.length; i++){
93-
var dayOfWeek = document.createElement('div');
94-
dayOfWeek.className = "day-of-week";
95-
var charOfDay = document.createTextNode(dayNames[i].charAt(0));
96-
dayOfWeek.appendChild(charOfDay);
97-
monthView.appendChild(dayOfWeek);
98-
}
99-
100-
// renderTarget.appendChild(document.createElement("ul"));
101-
var calendarList = document.createElement("ul");
102-
for(i = 0; i < currentDate.daysInMonth; i++){
103-
var calendarCell = document.createElement("li");
104-
var calCellTime = document.createElement("time");
105-
calendarList.appendChild(calendarCell);
106-
calendarCell.id = 'day_'+(i+1);
107-
var dayDataDate = new Date(theDate.getFullYear(), theDate.getMonth(), (i+1));
108-
calCellTime.setAttribute('datetime', dayDataDate.toISOString());
109-
calCellTime.setAttribute('data-dayofweek', dayNames[dayDataDate.getDay()]);
110-
111-
calendarCell.className = "calendar-cell";
112-
if(i === currentDate.theDay-1){
113-
calendarCell.className = "today";
114-
}
115-
var dayOfMonth = document.createTextNode(i+1);
116-
calCellTime.appendChild(dayOfMonth);
117-
calendarCell.appendChild(calCellTime);
118-
monthView.appendChild(calendarList);
119-
120-
} // daysInMonth for loop ends
121-
122-
var dayOne = document.getElementById('day_1');
123-
if (currentDate.firstDayOfMonth == "Monday"){
124-
dayOne.style.marginLeft = "49px";
125-
} else if (currentDate.firstDayOfMonth == "Tuesday"){
126-
dayOne.style.marginLeft = "98px";
127-
} else if (currentDate.firstDayOfMonth == "Wednesday"){
128-
dayOne.style.marginLeft = "147px";
129-
} else if (currentDate.firstDayOfMonth == "Thursday"){
130-
dayOne.style.marginLeft = "196px";
131-
} else if (currentDate.firstDayOfMonth == "Friday"){
132-
dayOne.style.marginLeft = "245px";
133-
} else if (currentDate.firstDayOfMonth == "Saturday"){
134-
dayOne.style.marginLeft = "304px";
135-
}
136-
137-
var dayHeader = document.getElementsByClassName('day-header');
138-
var dayNumNode = document.getElementsByClassName('day-number');
139-
var updateDay = function(){
140-
var thisCellTime = this.querySelector('time');
141-
dayHeader[0].textContent = thisCellTime.getAttribute('data-dayofweek');
142-
143-
dayNumNode[0].textContent = this.textContent;
144-
145-
}
146-
147-
var calCells = document.getElementsByClassName('calendar-cell');
148-
for(i = 0; i < calCells.length; i++){
149-
calCells[i].addEventListener('click', updateDay, false);
150-
}
151-
152-
} // renderCalener function ends
153-
154-
// console.log(new DateObject(theDate));
155-
renderCalendar("calendarThis");
156-
157-
function goToMonth(currentDate, direction) {
158-
if (direction == false){
159-
theDate = new Date(theDate.getFullYear(), theDate.getMonth()-1, 1);
160-
} else{
161-
theDate = new Date(theDate.getFullYear(), theDate.getMonth()+1, 1);
162-
}
163-
return renderCalendar("calendarThis");
164-
}
165-
166-
}); // DOMContentLoaded event listener ends
185+
})(); // self closure ends

‎style.css

+1
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,7 @@ hr{
6666
background: #fff;
6767
}
6868
.day-number{
69+
display:block;
6970
margin: 10% auto;
7071
font-size: 144px;
7172
background: #fff;

0 commit comments

Comments
 (0)