SHARE
TWEET

Untitled

a guest Dec 12th, 2019 79 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. function init() {
  2.   initCalendarUI();
  3. }
  4.  
  5. function initCalendarUI() {
  6.   initHeader();
  7.   initNavBar();
  8.   initNavEventListeners();
  9.   initCalendarSection();
  10.     initActivitySection();
  11. }
  12.   const appWrapper = document.createElement('div');                // create div element
  13.   appWrapper.className = ('container');                            // give div elemnet a classname of 'appWrapper'
  14.  
  15.   document.body.appendChild(appWrapper);                           // add wrapper element to body
  16.  
  17. /**
  18. * @desc creates a header element
  19. */
  20. function initHeader() {
  21.   const header = document.createElement('header');             // create header element
  22.   header.className = ('header');                               // give header elemnet a classname of 'header'
  23.   header.innerHTML = '<p>Calendar application 2000</p>';       // create p tag inside header elemnt
  24.  
  25.   appWrapper.appendChild(header);                              // add header elemnt to body
  26. }
  27.  
  28. /**
  29.  * @desc creates a section element for the Calendar page
  30.  */
  31. function initCalendarSection() {                                                                    // create section element
  32.     const calendarSection = document.createElement('section');
  33.     calendarSection.id = ('calendar');                                    // give section elemnet an className of 'new-activity'
  34.     calendarSection.innerHTML = '<p>Calendar</p>';                        // create p tag inside Section elemnt
  35.  
  36.   appWrapper.appendChild(calendarSection);                              // add Section elemnt to body
  37. }
  38.  
  39. /**
  40.  * @desc creates a section element for the Activity page
  41.  */
  42. function initActivitySection() {
  43.   const activitySection = document.createElement('section');              // create Section element
  44.   activitySection.id = ('new-activity');                                // give Section elemnet an classname of 'calendar'
  45.   activitySection.innerHTML = '<p>New activity</p>';                    // create h1 tag inside Section elemnt
  46.  
  47.   appWrapper.appendChild(activitySection);                              // add Section elemnt to body
  48. }
  49.  
  50. /**
  51.  * @desc creates navbar elements.
  52.  */
  53. function initNavBar() {
  54.   const navBar = document.createElement('nav');                              // create nav element
  55.   navBar.className = ('nav-bar');                                            // give nav element a classname of 'nav-bar'
  56.   navBar.innerHTML = `
  57.   <a href="#">New activity</a>
  58.   <a href="#">Calendar</a>`
  59.  
  60.   appWrapper.appendChild(navBar);                                            // add nav element to body
  61. }
  62.  
  63. /**
  64.  * @desc Event listeners for nav-links.
  65.  */
  66. function initNavEventListeners() {
  67.   const navBarATags = document.getElementsByTagName('a');
  68.  
  69.   navBarATags[0].addEventListener('click', hideCalendar);
  70.   navBarATags[1].addEventListener('click', hideNewActivity);
  71. }
  72.  
  73. /**
  74.  * @desc hides calendar content and shows New Activity page
  75. */
  76. function hideCalendar(){
  77.   document.getElementById('new-activity').style.display = 'grid';
  78.   document.getElementById('calendar').style.display = 'none';
  79. }
  80.  
  81. /**
  82.  * @desc hides New activity content and shows Calendar page
  83. */
  84. function hideNewActivity(){
  85.   document.getElementById('new-activity').style.display = 'none';
  86.   document.getElementById('calendar').style.display = 'grid';
  87. }
  88.  
  89. const weekWrapper = document.createElement('div');                
  90. weekWrapper.className = ('week-container');                      
  91. document.body.appendChild(weekWrapper);                                                    
  92.  
  93.  
  94. /**
  95.  * @desc    create UI to week days
  96.  */
  97. function daysFunc() {
  98.     const days = document.createElement('div');
  99.     days.className = ('days');
  100.     weekWrapper.appendChild(days);
  101. }
  102.  
  103. let nameDays = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
  104.  
  105.  
  106. for (let i = 0; i < nameDays.length; i++) {     // for loops for the days func
  107.     daysFunc();
  108. }
  109.  
  110. document.addEventListener('DOMContentLoaded', init);
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top