View the live project here.

This website has been created in order to complete the 2nd milestone project of the code institute fullstack diploma. This is a todo list with simple feature for day-to-day activities, excluding longer term goals such as weekly, monthly, etc with local storage to ensure tracking along the day.

• User stories

  • First Time Visitor Goals

    1. As a First Time Visitor, I want to easily understand the main purpose of the application and learn more about the organisation and feature.
    2. As a First Time Visitor, I want to be see a visually compellent design.

  • Returning Visitor Goals

    1. As a Returning Visitor, I want to find back the information I entered
    2. As a Returning Visitor, I want to find a way to filter between ongoing and completed activities.

  • Frequent User Goals

    1. As a Frequent User, I want to check to be able to refresh all the items added at once.

• Design

  • Colour Scheme

    • The main colours used are purple and white to have a high contrast, low eyes strain application.

  • Typography

    • The Poppins font is the main font used throughout the whole website with Sans Serif as the fallback font in case for any reason the font isn't being imported into the site correctly. Poppins is a simple font that is appealing for this purpose.

  • Imagery

    • No images were used for this project to keep the simple and neutral effect desired.

• Wireframes

  • Home Page Wireframe. Due to time contraints, the project was adaptated to conserve the minimum features, removing the weekly and monthly tracking and the second filtre by date.

• Responsive on all device sizes

• Interactive elements

• Add items

• Filter items by All, Completed, uncompleted

• Complete items

• Trash items

• Refresh all items

• HTML5
• CSS3
• JAVASCRIPT

1. Bootstrap 4.4.1:
   • Bootstrap was used to assist with the responsiveness and styling of the website.
2. Hover.css:
   • Hover.css was used on the Font Awesome icons to add the color and rotation transition while being hovered over.
3. Google Fonts:
   • Google fonts were used to import the 'Poppins' font into the style.css file which is used on all pages throughout the project.
4. Font Awesome:
   • Font Awesome was used on all pages throughout the website to add icons for aesthetic and UX purposes.
5. Git
   • Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
6. GitHub:
   • GitHub is used to store the projects code after being pushed from Git.

The W3C Markup Validator and W3C CSS Validator Services were used to validate every page of the project to ensure there were no syntax errors in the project.

• W3C Markup Validator - No error
• W3C CSS Validator - No error
• JShint validator - No error, 27 warnings

• First Time Visitor Goals

  1. As a First Time Visitor, I want to easily understand the main purpose of the application and learn more about the organisation and feature.

     1. Upon entering the website, the user is invited to add an item with the placeholder
     2. When hovering into the + button next to the add item, their is a visual clue that indicate to the visitor the function to add an item is by clicking this button 3. Once the first item is added, the 2 buttons next to the item have the same visual to create consistancy to the user 4. When the user complete a task, the opacity is reduce and the text is barred

  2. As a First Time Visitor, I want to be see a visually compellent design and animations.

     1. The design is left simple without image in the background and a simple gradient with cold colours to ease strain on the eyes
     2. The different actionnable item has the color of the end gradient to keep consistency for the user 3. Each actionable item has an hover effect and transition a. Transition of height and width when deleting item b. Transition of delay when completing an item c. Rotation of the refresh button on hover d. Color transition when hovering other items e. Change of pointer when hovering over items

• Returning Visitor Goals

  1. As a Returning Visitor, I want to find back the information I entered

     1. With local storage implemented, items are saved so that user will keep the items previously entered without the need to sign in

  2. As a Returning Visitor, I want to find a way to filter between ongoing and completed activities.

     1. The filter option allows the visitor to show all items, completed , or uncompleted ones
     

• Frequent User Goals

  1. As a Frequent User, I want to check to be able to refresh all the items added at once.

     1. The refresh item on top right corner allows the user to remove all items at once

• The Website was tested on Google Chrome, Internet Explorer, Microsoft Edge and Safari browsers.
• The website was viewed on a variety of devices such as Desktop, Laptop, iPhone7, iPhone 8 & iPhoneX.
• A large amount of testing was done to ensure that all functions were working correctly.
• Friends and family members were asked to review the site and documentation to point out any bugs and/or user experience issues.

• On Internet Explorer Browsers, the site is not functional
• When the item contains several lines, the icons are not aligned middle
• When clicking on the List element, having unkown error in the console.
• When deleted a todo element, having an error in the console.

The project was deployed to GitHub Pages using the following steps...

1. Log in to GitHub and locate the GitHub Repository
2. At the top of the Repository (not top of page), locate the "Settings" Button on the menu.
3. Scroll down the Settings page until you locate the "GitHub Pages" Section.
4. Under "Source", click the dropdown called "None" and select "Master Branch".
5. The page will automatically refresh.
6. Scroll back down through the page to locate the now published site in the "GitHub Pages" section.

By forking the GitHub Repository we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original repository by using the following steps...

1. Log in to GitHub and locate the GitHub Repository
2. At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
3. You should now have a copy of the original repository in your GitHub account.

1. Log in to GitHub and locate the GitHub Repository
2. Under the repository name, click "Clone or download".
3. To clone the repository using HTTPS, under "Clone with HTTPS", copy the link.
4. Open Git Bash
5. Change the current working directory to the location where you want the cloned directory to be made.
6. Type git clone, and then paste the URL you copied in Step 3.

$ git clone https://github.com/Nosjazz/todo_list-milestone2

7. Press Enter. Your local clone will be created.

$ git clone https://github.com/Nosjazz/todo_list-milestone2
> Cloning into `CI-Clone`...
> remote: Counting objects: 10, done.
> remote: Compressing objects: 100% (8/8), done.
> remove: Total 10 (delta 1), reused 10 (delta 1)
> Unpacking objects: 100% (10/10), done.

Click Here to retrieve pictures for some of the buttons and more detailed explanations of the above process.

• Tutorial 1 : Main Javascript features were based upon this Tutorial
• Tutorial 2 : Additional features and CSS were based upon this Tutorial

• All content was written by the developer.

• My Mentor for continuous helpful feedback.

• Tutor support at Code Institute for their support.