function init() {
  initCalendarUI();
  initNewActivityUI();
}

function initCalendarUI() {
  initHeader();
  initNavBar();
  initNavEventListeners();
  initCalendarSection();
  initActivitySection();
}

function initNewActivityUI() {
  initForm();
  initFormActivity();
  initFormDate();
  initFormButton();
}

  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() {
  const calendarSection = document.createElement('section');              // create section element
  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 = 'initial';
  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 = 'initial';
}

//--------------------New Activity Form-----------------------

/**
 * @desc Creates form element for activity and date input,label.. with the id activity-form
 */

  function initForm() {
    const activityForm = document.createElement('form');
    activityForm.setAttribute('id', 'activity-form');

    document.getElementById('new-activity').appendChild(activityForm);
  }

  /**
   * @desc creates Activity input and label for with id activity-input
   */

  function initFormActivity() {
    const activityInput = document.createElement('input');
    activityInput.name = 'activity-input';
    activityInput.type = 'text';
    activityInput.placeholder = 'Write your Activity';

    const activityInputLabel = document.createElement('label')
    activityInputLabel.htmlFor = 'activity-input'
    activityInputLabel.textContent = 'Activity';

    document.getElementById('activity-form').appendChild(activityInputLabel);
    document.getElementById('activity-form').appendChild(activityInput);

  }

  /**
   * @desc creates Date input and label for with id date-input
   */

  function initFormDate() {
    const dateInput = document.createElement('input');
    dateInput.name = 'date-input';
    dateInput.type = 'date'

    const dateInputLabel = document.createElement('label');
    dateInputLabel.htmlFor = 'date-input';
    dateInputLabel.textContent = 'Date';

    document.getElementById('activity-form').appendChild(dateInputLabel);
    document.getElementById('activity-form').appendChild(dateInput);
  }

  /**
   * @desc creates Submit button element for activity-form, with id activity-form-submitbtn
   */

  function initFormButton() {
    const submitButton = document.createElement('button');
    submitButton.innerText = 'Post Activity';
    submitButton.id = 'activity-form-submitbtn'
    document.getElementById('activity-form').appendChild(submitButton);
    submitButton.addEventListener('click', createActivityObject);
  }


document.addEventListener('DOMContentLoaded', init);


//---------------------activity object------------------------

/**
 * @desc creates a new activity object from new activity form inputs
 * @param event e - the passed event from addEventListener
*/
function createActivityObject(e){

  // prevent defalt button behavior (submit) to not lose user input due to reload of page
  e.preventDefault();

  // create an object and store inputs in it
  let newActivity = {
    name: document.getElementsByName('activity-input')[0].value,
    date: document.getElementsByName('date-input')[0].value
  }

  // reset the form
  document.getElementById('activity-form').reset();

  // just to cofirm if eerything is working - delete when no need
  console.log(newActivity);
  displayActivity(newActivity);
}

//-----------------Display Activity------------------

/**
 * @desc Creates two h4 elements, takes values passed down by createActivityObj function and appends these elements as 'Activity' & 'Date'
 * @param activity takes variable 'newActivity' from createActivityObject function and passes it as argument to use in displayActivity
 */

function displayActivity(activity) {
  console.log(activity);
  let activityName = document.createElement('h4')
  let activityDate = document.createElement('h4')
  activityName.textContent = 'Activity: ' + activity.name;
  activityDate.textContent = 'Date: ' + activity.date;

  document.getElementById('calendar').appendChild(activityName);
  document.getElementById('calendar').appendChild(activityDate);
}