The goal of this website is to deliver an easy and appealing way to manage to do's. Add items to your to do list, move them to the doing list and eventually to the done list. It features include among other things, renamable and resizable columns and a dark mode setting. All data is stored in localstorage so will only be stored in your local browser. This project was made as a second milestone project for the Code Institute full Stack Web developer course.
- Get a short description about what ICanBan is.
- Have quick access to more information on Kaban.
- Have a clear understanding of the controls on the page.
- Have Quick access to navigation on the site.
- Quickly access my personal Kanban page without having to go trough the menu.
- Give feature suggestions for the site.
- Change the site to dark mode or light mode.
- Change the name of a column.
- Add a card to a column.
- Enter text in a new card.
- Move a card to another column.
- Expand or contract the size of a column.
- Delete a card.
- Only be presented with usefull controls in a canban item.
- Easily be able to access all columns on all screensizes and orientations.
For the colors on this website a soft red yellow and green were chosen.
-
Red : The color red is used to draw attention and inspire action. Therefore suited for our "To do" list. The user is drawn to the items on the list and inspired to take action on them.
-
Yellow : Yellow is a color that stimulates and energizes. Therefore suited for our "Doing" list. The user is stimulated and energized to complete these tasks.
-
Green : Green revitalizes and encourages ideal for the "Done" section of our page. After completing a task revitalized nad encouraged by the color green it's back to work o the next task!
source: color meaning and psycology
Font: Raleway
About:
Raleway is an elegant sans-serif typeface family. Initially designed by Matt McInerney as a single thin weight, it was expanded into a 9 weight family by Pablo Impallari and Rodrigo Fuenzalida in 2012 and iKerned by Igino Marini. A thorough review and italic was added in 2016. It is a display face and the download features both old style and lining numerals, standard and discretionary ligatures, a pretty complete set of diacritics, as well as a stylistic alternate inspired by more geometric sans-serif typefaces than its neo-grotesque inspired default character set.
- The image on the main page is a screenshot of the mycanban page, giving the user a quick view of what the canban system looks like.
- The mockup design of this site was made in Figma. U can view it here
- Responsive on all device sizes
- Collapsing hamburger menu
- Dark mode
- Introduction text
- Visual of mycanban page
- Controls section
- Email form with extensive validation
- Animated sliders
- Text field input
- Direct link to MyCanban page
- Add item to a column with autofocus
- Text field input
- Remove item with confirmation modal
- Move items to adjacent column
- Expandable and contractable columns
- Alternate layout on mobile
- Responsive display of controls
- Hidden items indication
- Database : Store all data in a database so the user can access his/her canban from any device and browser.
- Accounts : Login to a specific canban list with an account to make collaboration possible (this needs the database also).
- Adding more columns like testing or other.
- More content in items like owner, file attachments, by expanding when a user clickes an item.
- HTML5
- HTML5 was used to build the main structure and content of the page.
- CSS3
- CSS3 was used to give the html styling and layout. And to make the page responsive to differentscreen sizes.
- Javascript
- Javascript was used for the email form functionality and all website altering functions, like adding and moving items, darkmode etc. also for storing data in localstorage.
- Bootstrap 4.4.1:
- Bootstrap was used to create the responsive structure of the website.
- Google Fonts:
- Google fonts was used to import the 'Montserrat' font into the style.css file.
- Font Awesome:
- Font Awesome was used on all pages throughout the website to add the social icons.
- jQuery:
- jQuery came with Bootstrap to make the navbar responsive. Also used in various script files.
- Git
- Git was used for version control by utilizing the terminal in gitpod to regularly commit, with comments, to Git and Push to GitHub.
- GitHub:
- GitHub is used to store the projects code and assets and to fork the project for the customer.
- Figma:
- Figma was used to create the website design and prototype.
- TinyPNG
- TinyPNG was used to compress images to ensure faster load times.
- Browserstack
- To test the site on a variety of devices and browsers.
All testing can be found here.
The project was deployed to GitHub Pages using the following steps...
- Log in to GitHub
- Locate the repository.
- Go to the pages tab in the settings menu:
- Select master and save.
- View the published result. (This may take some time to show up correctly.)
- Make sure u have git installed on your device. If u haven't find out how to do that here.
- Log into GitHub.
- Locate the repository.
- Copy the link to the repository here:
- Open a terminal and enter the following command (inside the directory u want the repository to be placed):
$ git clone https://github.com/JorisPaarde/ICanBan.git
- Press Enter. Your local clone will be created.
$ git clone https://github.com/JorisPaarde/ICanBan.git
Cloning into Git …
remote: Counting objects: 25, done.
remote: Compressing objects: 100% (25/25), done.
remove: Total 25 (delta 1), reused 0 (delta 1)
Unpacking objects: 100% (25/25), done.
- your local clone is now ready.
To make a local clone of this project in Windows , follow these steps.
To set up the email service for the email form:
- Go to: EmailJS to sign up for an account.
- Add your email service by going to email services and add new service.
- Under email templates create a new template.
- Under settings , give your template an id of "contact-form", this will make sure the email service will work with this code.
- Copy your service id by clicking on your newly created email service under email services as shown here.
All the below mentioned code is also marked with comments in the code itself.
- navbar code was taken and edited from: https://getbootstrap.com/docs/4.0/components/navbar/
- modal code was taken and edited from: https://www.w3schools.com/howto/howto_css_modals.asp
- email code was taken and edited from: https://github.com/Code-Institute-Solutions/InteractiveFrontendDevelopment-Resume/blob/master/03-SendingEmailsUsingEmailJS/06-sending_emails/assets/js/sendEmail.js
- All content was written by the developer.
- All media was created by the developer.
- My Mentor for pointing me to ux issues i had to adress like asking for confirmation when deleting an item.
- My fellow students and several other mentors on Slack for their tips and moral support.
- Special thanks to Simen Daehlin (Eventyret_mentor on slack) for his tireless expanations on slack.
- The basic Readme layout by Code Institute.