function init() {
  initCalendarUI();
}

function initCalendarUI() {
  initHeader();
  initNavBar();
  initNavEventListeners();
  initCalendarSection();
	initActivitySection();
}
  const appWrapper = document.createElement('div');                // create div element
  appWrapper.className = ('container');                            // give div elemnet a classname of 'appWrapper'

  document.body.appendChild(appWrapper);                           // add wrapper element to body

/**
* @desc creates a header element
*/
function initHeader() {
  const header = document.createElement('header');             // create header element
  header.className = ('header');                               // give header elemnet a classname of 'header'
  header.innerHTML = '<p>Calendar application 2000</p>';       // create p tag inside header elemnt

  appWrapper.appendChild(header);                              // add header elemnt to body
}

/**
 * @desc creates a section element for the Calendar page
 */
function initCalendarSection() {             														// create section element
	const calendarSection = document.createElement('section');
	calendarSection.id = ('calendar');                                    // give section elemnet an className of 'new-activity'
	calendarSection.innerHTML = '<p>Calendar</p>';                        // create p tag inside Section elemnt

  appWrapper.appendChild(calendarSection);                              // add Section elemnt to body
}

/**
 * @desc creates a section element for the Activity page
 */
function initActivitySection() {
  const activitySection = document.createElement('section');              // create Section element
  activitySection.id = ('new-activity');                                // give Section elemnet an classname of 'calendar'
  activitySection.innerHTML = '<p>New activity</p>';                    // create h1 tag inside Section elemnt

  appWrapper.appendChild(activitySection);                              // add Section elemnt to body
}

/**
 * @desc creates navbar elements.
 */
function initNavBar() {
  const navBar = document.createElement('nav');                              // create nav element
  navBar.className = ('nav-bar');                                            // give nav element a classname of 'nav-bar'
  navBar.innerHTML = `
  <a href="#">New activity</a>
  <a href="#">Calendar</a>`

  appWrapper.appendChild(navBar);                                            // add nav element to body
}

/**
 * @desc Event listeners for nav-links.
 */
function initNavEventListeners() {
  const navBarATags = document.getElementsByTagName('a');

  navBarATags[0].addEventListener('click', hideCalendar);
  navBarATags[1].addEventListener('click', hideNewActivity);
}

/**
 * @desc hides calendar content and shows New Activity page
*/
function hideCalendar(){
  document.getElementById('new-activity').style.display = 'grid';
  document.getElementById('calendar').style.display = 'none';
}

/**
 * @desc hides New activity content and shows Calendar page
*/
function hideNewActivity(){
  document.getElementById('new-activity').style.display = 'none';
  document.getElementById('calendar').style.display = 'grid';
}

const weekWrapper = document.createElement('div');
weekWrapper.className = ('week-container');
document.body.appendChild(weekWrapper);


/**
 * @desc	create UI to week days
 */
function daysFunc() {
	const days = document.createElement('div');
	days.className = ('days');
	weekWrapper.appendChild(days);
}

let nameDays = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];


for (let i = 0; i < nameDays.length; i++) {		// for loops for the days func
	daysFunc();
}

document.addEventListener('DOMContentLoaded', init);