Javascript Mini-Projects

Introduction

JavaScript Mini-Projects is a collection of HTML/CSS/Bootstrap mini apps that I built to practise skills I learnt on the AI-Augmented Full-Stack Bootcamp course at the Code Institute. Its aim is to help site users to organise their busy lives. The aim was to build 5 of these projects in 2 weeks.

Live site: JavaScript Mini-Projects

Table of Contents

• User Experience Design
• Project Brief
• Users
  • User Stories
  • Wireframes
• Design
  • Colour Scheme
  • Typography
  • Imagery
• Website Features
  • Nav Bar
  • Hero Section
  • Bootstrap Accordions
  • Bootstrap Cards
  • Video
  • Bootstrap Carousel
  • Footer
• Responsive Design
• Future Features
• Technologies Used
• Deployment
• Testing
• Credits

Back to top

User Experience Design

Project Brief

The site user's goal is to use the different apps to stay organised.

The "business" goal is to build a series of mini apps to practise my planning, design and development skills including HTML, CSS, Bootstrap and Javascript.

Users

Potential users of the site are:

• general public user looking for something simple and easy to use to organise their busy lives

User Stories

User Stories and the associated Acceptance Criteria and Tasks were generated using Microsoft Copilot.

Here are the user stories that have been prioritised as "must have":

US1: As a site user, I want to add and delete tasks to a to-do list, so I can see everything I need to do at a glance.

US2: As a site user, I want to mark tasks as done and clear the to-do list, so that I can check my progress and clear the to-do list when all tasks are complete.

US3: As a site user, I want to add and view notes to my Note Taker app, so I can jot down thoughts for reference.

US4: As a site user, I want to add expense items to my Expense Tracker, so I can monitor my spending.

Wireframes

Back to top

Design

Colour Scheme

The aim of the project is to provide a minimalistic UI with a modern and calm palette that appeals to all ages. I took inspiration from the colours in my daughter's newly redecorated bedroom and used Coolors to derive a calm and subtle palette.

Typography

Google Fonts have been used as these are convenient to embed into the CSS file as an @import.

Website Features

Nav bar

The aim of the product is to provide users with beginner-friendly summary of anxiety and quick access to get help or resources from reputable, reliable organisations. The navigation therefore must be:

• prominent and consistent on every page
• easy to use
• lead users directly in fewer than 3 clicks to what they need.

The Bootstrap navbar has been used as it is responsive to different screen sizes, it has a dropdown to provide users with more options, and it shrinks down to a hamburger menu button on the smaller screens.

Adjustments:

• Background colour
• Dark Theme (data-bs-theme: dark) for better contrast on Navbar text

Back to top

Responsive Design

Most of the content is responsive to different screen sizes as it was built using components from the Bootstrap Library.

Back to top

Future Features

Weather app

API to essential weather data

Exchange rate checker

API to check latest conversion rates, currency convertor

Back to top

Technologies Used

Languages and Technologies

Libraries

Tools and Programs

Back to top

Deployment

The [Code Institute Template] (https://github.com/Code-Institute-Org/ci-full-template) was used to create the GitHub repository, so that the website could be developed in the correct setup of Gitpod IDE.

The GitHub Copilot extension was also installed in my local client version of MS VS Code, which was also connected with the same GitHub repository and linked to Gitpod via SSH. This allows for AI pair programming in the initial stages of development to create certain sections faster.

The process is as follows:

1. Login to your GitHub profile.
2. Go to the [Code Institute Template] (https://github.com/Code-Institute-Org/ci-full-template).
3. Click Use this template and then Create a new repository.
4. Enter the repo name and choose to create from template
5. Click Open with the Gitpod logo to open the Code Institute IDE workspace.
6. Open VS Code locally and click on Gitpod logo on the left. Click on right arrow next to the workspace you want to work on.

Once the MVP has been created in Gitpod, go to GitHub Pages to make an early deployment of the project, so that testing can be done in Dev Tools to highlight key issues that need to be resolve early on in the project.

Back to top

Testing

Validation of HTML/CSS, Lighthouse Audits, Bugs

HTML Validation

CSS Validation

Lighthouse Audit

Bugs yet to be Fixed

Back to top

Credits

Content References

Ideas for some of the projects came from the YouTube video 5 Javascript Projects to Build (For Beginners) MS Copilot was used to generate much of the content on coping strategies and online resources, which was then reviewed and edited before including into the site.

Media References

Acknowledgements

Many thanks to my three patient testers (also my husband and teenage children) for helping me test throughout development, Everyone in my WECA group who have been so helpful and supportive leading up to this project, and Code Institute tutors (Dillon, Mark and Roo) for answering my endless questions

Back to top