Note: The showcase of the event lister was supposed to be a video, but due to the file being too large, I had to settle for an image.

PURPOSE:

The application's main purpose is to showcase my current abilities (my capabilities during the time this project was commited). However, you can use my application for simple tasks such as knowing what time of the day it is, what the current date is, and placing an event/occasion of your liking (like birthdays) on specific dates.

FILES USED:

img/  
  arrow.png  
  cover.png  
  daysky.jpg  
  nightsky.avif  
  nightsky2.jpg  
index.html  
style.css  
main.js

MAJOR FUNCTIONS:

The application has a BUILT-IN CALENDAR on the left side of the page that automatically highlights the current date of the current month in strong colors, then the other dates of the current month in a lighter color. The dates of inactive months, however, are highlighted in gray circles. You can traverse through the months using the arrows on the navigation, which are right on top of the calendar itself.

Meanwhile, at the right side of the page is an EVENT LISTER. At the very top of the event-lister is the current day of the week as well as the current date in text form. Below that is the actual lists of events, where the elements are displayed via a container. When there's a certain number of elements, the list provides a scrollbar. You can ENTER AN EVENT using the form at the very bottom of the event lister.

FILES

1. img

   This is the image folder. It contains the images used in both the background of the event lister and the navigation arrows. The other files [nightsky, nightsky2, daysky] could be used as alternatives to the current cover image.

2. index.html

   This is the main page of the web-application. It has 3 meta tags:
   • Sets the charset to UTF-8
   • Sets the webpage to fit in mobile devices by setting the viewport to the device-width and a fixed initial-scale of 1
   • Renders the internet explorer to IE-8(standard view)
   It has 2 main parts:

   • The Calendar

     This is the part of the webpage where the actual calendar is in place. In its header is the current year, current time, as well as the navigation arrows which the user can use to traverse through previous and proceeding months. In its body are the dates of the current month.

   • The Event Lister

     The smaller part of the webpage where the user can set events for himself/herself. In its header is the current date, as well as the day of the week. In its body are the lists of events which provides a scrollbar should the elements overflow. Finally, at the very bottom of the page is a form that the user can use to set events for himself/herself. Once filled, the event shows up in the body as mentioned. When an invalid month (or date of the month) is inputted by the user, main.js has a function that flashes an error message at the top of the form in order to notify the user that his/her input is invalid.

3. styles.css

   This is the file where the styles of the webpage are stored. The primary color is turquoise and the secondary color is a pale version of cyan. I used grid to stylize the main body as well as the body of the calendar where the dates are since it was easier that way. Meanwhile, I used flexbox to stylize the inner parts of my main tags since the flexbox is known for its simplistic yet effective element formatting. I used media queries [1068px, 768px] in order to make the page responsive. If the page shrinks, the UI will go from a horizontal format to a vertical format.

4. main.js

   The language used for the backend part of the web-app is Javascript. I mostly used the Date module to retrieve data, and since most of the data provided are formatted in indexes, I created my own month list where I acquired the necessary strings to validate the month that the user provided. Then for the days, I merely used the very last date of the selected month and used it as a limit. If the user inputs a date that was above the given dates (e.g. January 32), then the input is rejected and an error flashes at the top of the form. Finally, the description, which is relatively uneventful. The user is free to type anything he/she wants there, but they must provide something. If any of the fields [month, date, description] is empty, then the input will be rejected and an error flashes at the top of the form.

DEPENDENCIES:

I used plain HTML, CSS, and Javascript. No external modules were used.

BUILD AND DEPLOY INSTRUCTIONS:

To build the application on your browser, simply download all the files in the repository. Then, open "index.html" on a browser.

VISIT SITE

CHANGE HISTORY