day-planner

Day-planner

Summary

This project is to develop a simple page where the user can add some tasks at specific hours of the day, save them, edit them or even remove them.

Deployed URL: Heroku page

Github repository: day-planner repo

Table of content

• General description
• Screenshots
• Technologies
• Development steps
• Wireframe
• Functionalities
• Links to libraries
• Further improvements possible

General description

When accessing the page, the user can see a large header with title and the current date. Underneath is a set of time blocks which represent a working day. Each time block consists of a time label on the left, a text field in the middle where the user can enter a task, two buttons on the right to save the task in the text field or remove it from the text field.

The text fields in the timeblocks are colour coded based on the current time:

• grey: for hours of the day that have already passed
• red: for the current hour
• green: for the remaining hours in the working day

The user also has access to a database to keep track of their tasks. When interacting with the page, the user can:

• save their task with the blue save button in each time block
• clear one specific task with the orange remove button in each time block
• clear the complete scheduler with the orange button “clear scheduler” above the time blocks

Screenshots

Day planner screenshot - desktop version


Day planner screenshot - mobile version


Technologies

For this project, the following technologies and libraries were used:

For public file structure:

• HTML, CSS and JS files
• Bootstrap for page styling
• Fontawesome for use of icons
• Moment.js for use of date and time stamp
• jQuery for use in writing JS functionalities

For the source file structure and database:

• Node.js with npm and the packages:
  • Express for server setup
  • mysql2 for database
  • dotenv for sensitive data control
  • nodemon for the development phase

Development steps

The following steps were followed as listed to develop this project, and are further details in the sections below:

First pass:

• have a clear understanding of the functionalities the page will offer
• set the wireframe of the project for a clear view of the required html structure
• set the files structure as per best practices and insert up to date library links
• style page with CSS/Bootstrap
• add functionality using jQuery library and interact with local storage (for persistent data)
• refactore for clean code

Second pass - addition of server and database:

• initialise the app for use with node/npm packages
• reorganise folders and files to build routes
• prepare mysql database with schema and seed files
• deploy on Heroku

Wireframe

Functionalities

The user journey is explained above in the section General description. When looking at it in terms of functions, this can be translated into the following logic:

The routes needed for interaction with the database are detailed below:

As a result, the structure of the server was built as per this illustration:

Links to libraries

For this project we used the following versions of the libraries mentioned above:

Node.js: 18.2.0
NPM: 8.9.0

NPM packages:

"dotenv": "^16.0.1",
"express": "^4.18.1",
"mysql2": "^2.3.3",
"nodemon": "^2.0.16"

Styling libraries:

Head link - Bootstrap

```html ```

Head link - Fontawesome

```html ```

Head link - Google fonts

```html ```

Body link - jQuery

```html ```

Body link - moment.js

```html ```

Styling

Styling of the page is a combination of a local CSS file and the use of some bootstrap classes:

• in CSS author file : general styling of the body, header, buttons and use of hover pseudo class, media query for mobile screen
• via bootstrap classes: flex properties of containers and alignment of items The example below shows how each element of the time block has a mixture of author classes (in blue) and bootstrap classes (in yellow) depending on the style required:

Further improvements possible

There is the option to refactor the render functions to create the time blocks and the buttons with jQuery/template strings syntax. That would potentially reduce the amount of code in those blocks.

It would also be possible to modularise the code so that the rendering functions and other utility functions live in their own module.

It would also be good to add restrictions on task length: if the string is above a certain number of characters, it alerts the user that the message is too long, and the user must edit it to be able to save it.

This site is open source. Improve this page.