Skip to content

kairosity/mp2-tunnel-focus

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

270 Commits
assets
assets
 
 
404.html
404.html
 
 
404.md
404.md
 
 
README.md
README.md
 
 
index.html
index.html
 
 
testing.md
testing.md
 
 

Repository files navigation

Tunnel Focus: Time Your Tasks

Code Institute Milestone Project 2: Interactive Front-End Development

Tunnel Focus is a browser based task manager with a difference. A key methodology of agile development is breaking large projects up into smaller tasks as a way to get things done efficiently.

For many people focusing on a task "until it's done" is not the most efficient way to complete it, as your mind can wander and concentration can lag. Focusing in small bursts and maintaining intense focus for small periods of time, punctuated by regular breaks can yield massive benefits in terms of work efficiency.

This web application has been conceptualised and designed around that premise: small bursts of productivity which added together result in successfully completed tasks and projects. Tunnel Focus works as a simple task manager, except that it also keeps track of how long a user works on a particular task. As such, it can be used to help with and encourage an agile approach to development or any other area that requires task management.

It combines a stopwatch timer with two pomodoro timers, one for 15 minutes and one for 25 minutes. It was specifically designed to only accommodate these two time segments because they have been studied and shown to be the most effective time periods for bursts of focus.

View the Live Website Here

Table Of Contents

UX

User Stories

The application is targeted at any user who requires a task manager for any purpose. It is particularly useful for anyone working on a large project with a lot of working parts.

First Time User Stories

As a first time user:

  • I want to be able to easily and clearly understand the purpose of this web application.
  • I want to be able to quickly and easily understand how to navigate the application.
  • I want the application to be visually appealing and have a clean interface that is easy to view.

As a user:

  • I want to be able to add tasks to a list.

  • I want to be able to edit a task.

  • I want to be able to check off tasks when they are completed.

  • I want to be able to delete a task.

  • I want to be able to start the focus timer when I start working on a particular task.

  • I want to be able to pause the focus timer if I take a break.

  • I want to be able to reset the focus timer for that particular segment of time, if for whatever reason I don't actually focus on work.

  • I want to be able to start a countdown timer for work on a particular task.

  • I want to be able to select whether the countdown timer runs for 15 or 25 minutes.

  • When the countdown timer ends, I want to be alerted with an audio alarm or a visual display.

  • I want to have the option of turning off the audio alarm and relying on just a visual indication that the countdown is over.

  • As a user, I want to be able to start an open-ended timer for longer sessions working on a particular task.

  • I want to be alerted after every 30 minutes working with the open-ended timer.

  • If I forget that the open-ended timer is running, I want to be able to delete that segment of time and not have it added to the total time spent focused on that task.

  • I want to know how much time I have spent on each task today.

  • I want to know how much time I have spent on each task overall.

  • I want to know how much time I have spent focused and working today.

  • I would like to see this information displayed in pleasing and easy to comprehend charts and visuals.

  • I would like to see a list of what tasks I completed today.

Returning User Stories

As a returning user:

  • I want my tasks to be stored and recalled when I navigate to the webpage.
  • I want all the specifics associated with the tasks to be loaded correctly and accurately.

Accessibility User Stories

  • As a user who is hard of hearing, I want there to be a visual display when the countdown timer ends.
  • As a user who is colourblind, I want the colours used to employ sufficient contrast so that any visual cues are apparent to me.
  • As a user who is physically impaired I want to be able to use the keyboard to navigate and fully interact with the application.
  • As a user who uses screen reader technology I want my screen reader to be able to access all the controls and elements of the page and describe them to be correctly.

Strategy

Project Goals

  • Create a time based task manager for project development
  • Create a simple product that can be used in the browser and with local storage.
  • Create a product that is intuitive and useful for anyone working on a particular set of tasks.
  • Create a product that is scalable and has potential to develop further into a fully blown application with database storage.
  • Create an application that has clean lines and is minimal in design.
  • Bright toned design, whites, light greys and bright and cheery accent colours.
  • Encourage the use of sprint methodology when working to complete tasks.

Target Users

The target users are people working on a series of tasks and particularly people employing a sprint methodology for task completion.

Research

I researched other task managers online and found a number that have similar functionality, but all were behind paywalls. I could not find a free and simple task manager with timer functionality. This was actually something I had also looked for before designing this application.

Scope

Core theme

The basis for this application's scope, was actually to create an app I wanted to use for my own projects. I've used a variety of task managers over the years, and have always reverted to just writing lists on paper, which I still believe is a powerful method for many reasons.

However, the one functionality I always felt was lacking from your run-of-the-mill online todo list / task manager, was the ability to time tasks. The internet is replete with todo lists and pomodoro timers and I felt they are most useful when combined.

So the basic and general scope for this project is:

  • A todo list with timer functionality.

To further define both the task list functionality and features for the timer and the task manager components, I began by sketching out exactly what I would like to use and then I spoke to friends in various creative and professional industries to see what ideas they could contribute. A timer functionality is most attractive to users who work on a varied list of projects that can be broken into smaller tasks. Because I got back such a wide variety of feature requests I sketched out the feature list chart displayed below to help me decide on what to include.

Scope Feature Ideas Table

# Opportunity/Potential Feature Importance Viability Score
. TASK LIST FUNCTIONALITY & FEATURES
1. Add tasks to the task List 5 5 10
2. Edit tasks 5 5 10
3. Delete tasks 5 5 10
4. Check tasks as completed 5 5 10
5. Add multiple task lists for different categories of tasks / different projects 2 3 5
6. Add due-dates for tasks 2 4 6
7. Sync task lists to Google Calendar API 2 2 4
8. Speech to text functionality for adding tasks to lists 2 2 4
. TASK TIMER FUNCTIONALITY & FEATURES
1. Pomodoro style timer of 25 minutes 3 5 8
2. Pomodoro style timer of 15 minutes 2 5 7
3. Pomodoro style break time segments 1 3 4
4. Allow users to select their own Pomodoro time length 2 3 5
5. Stopwatch open-ended timer 4 5 9
6. Focus Reminder Beeps / Pop-up messages 2 3 5
. TASK CHARTS FUNCTIONALITY & FEATURES
1. A display showing the total time focused "today" 4 4 8
2. A display showing the total time focused overall 2 4 6
3. A Chart showing the time focused on each task "today" 4 4 8
4. A Chart showing the time focused on each task overall 3 4 7
5. A Chart showing the amount of time segments per task and their times 2 2 4
6. Weekly and monthly charts of time spent per task 2 2 4
7. A list of tasks completed today 3 5 8
8. A list of tasks completed overall 2 5 7
. OTHER FUNCTIONALITY & FEATURES
1. Randomly selected affirmations/quotes about work that appear when the timer is on 2 3 5
2. Wage calculations for users who work by the hour/time period 1 2 3
3. Display weather for the day at the top of the screen 1 3 4

Scope Final Features

The scope was eventually narrowed down to include the following from each section:

TASK LIST FUNCTIONALITY & FEATURES

  1. Add tasks to the tasklist
  2. Edit tasks
  3. Delete tasks
  4. Check tasks as completed

TASK TIMER FUNCTIONALITY & FEATURES

  1. Pomodoro style timer of 25 minutes
  2. Pomodoro style timer of 15 minutes
  3. Stopwatch open-ended timer
  4. Focus reminder beeps on the stopwatch timer after every 30 minutes.
  5. Alarms when the countdown timers finish - both audio & visual options (not in original scope plan).

TASK CHARTS FUNCTIONALITY & FEATURES

  1. A Chart showing the time focused on each task "today" (charts & displays were merged as both would have been overkill)
  2. A Chart showing the time focused on each task overall
  3. A list of tasks completed today.
  4. A list of tasks completed overall.

None of the additional functionality / features were included in the final application's scope.

I kept the scope quite tight to the basic functionality of the application and while there is scope for expansion, I like the narrow nature of the features because I think it achieves what it sets out to do cleanly and effectively.

Structure

Application Sections

The original structure for this application was to have 1 view on desktop screens and two main views on mobile, but as the application evolved through development, that changed and the mobile version was altered to fit desktop as well. So the structure across the board is based on 1 main view and multiple modal views as the user interacts with the application's features.

Main View:

  1. Header with Headings & a button to summon more detailed information about the application's functionality.

  2. An "add new task" input element with a plus button.

  3. The task list area.

    Incorporating the task line when a user adds a task. The task line features:

    • The total amount of time saved to that particular task.
    • A checkbox to check the task as complete.
    • The task name / description.
    • The "start stopwatch" task timer icon.
    • An ellipsis icon that opens a popover modal displaying more options.

    Those options include:

    • Edit Task: which opens a modal.
    • Delete task: which opens a mini confirmation modal.
    • 15 minute countdown / pomodoro timer.
    • 25 minute countdown / pomodoro timer.

  4. Productivity charts heading.

  5. Productivity charts / completed tasks lists.

  6. Footer Area.

This view is the same regardless of whether a user is on mobile or desktop screens. Only the styles are altered to ensure a great user experience, but the structure is identical. During the design process I realised that having two different structures for mobile & desktop could lead to confusion and a less than ideal UX.

Modal / Feature Views

  1. Timer View: A yellow overlay covers the rest of the application and the timer sits on top of it. The user can only interact with the timer when the timer is open. This is in keeping with how the application is supposed to be used. As it's all about tunnel focus, the ability to interact with other elements of the application when a specific task is being timed would not be in keeping with the ethos of the application.

  2. Edit Task View: Similar to the timer, this view is also a modal sitting on top of an overlay. A user can edit the task name and the amount of time associated with that task.

  3. Chart Views: These all really happen on the main view, however the charts themselves change depending on which chart / list is selected.

The UI structure is based on the idea of a dashboard layout, but instead of filling all the white space as is customary with dashboards, I wanted to keep the task list center stage, to re-emphasize the "Focus" aspect of the application. This strategy also ensures that the design remains clean and visually uncomplicated.

Website Flow

As I've just outlined, most of this application takes place on one main page, with modals for the timer feature and edit task. The idea is that when a user starts the timer, they will be initiating a burst of productivity that will take up their entire focus.

The flow is very much focused around the task list and the timer. The charts are a point of interest and reference, but they are scrolled down to, as they need not take center stage.

The structure here is somewhat non-linear, but it is so simple that the linear/non-linear conceptualisation is of limited use.

Interaction Design

My guiding principle when designing and then re-designing and modifying my original concept was to keep this application simple and effective at doing what it does. "As simple as possible, but no simpler."

I wanted especially to combine a minimalism of design with a minimalism and clarity of interaction, and although I did include an information modal as a fallback, I don't think it was necessary, as I believe the interaction design is clean and intuitive.

The interaction is consistent and predictable, once a user works their way through all the options once, it is easily learned and easy to remember, even for a first time user.

The only tiny aspect that I believe might need to be "learned" is that the stopwatch timer on the task line counts up and not down like the two pomodoro timers. I was aware of this small ambiguity but decided against including any greater clarification for the simple reason that once it is clicked, its function is quickly apparent. "Stopwatch" is written clearly across the top of the timer, and the user will see the time counting upwards. If they had not intended to start timing that task, they can easily cancel out of the timer by using the conventional X button in the top right hand corner.

Which brings me to another strong aspect of my interaction design, I've chosen to include small modals that confirm all the user's decisions. When a user clicks to "Save Time To Task" a modal appears that asks them to confirm that save. When they go to delete a task, they are also prompted to confirm the deletion. This both anticipates user errors and avoids the frustration of them accidentally deleting a task or exiting a timer and it enhances user trust in the application.

Within these confirmation modals I've also included specific information i.e. the task name & (for the save time function) the amount of time to be saved. This communicates and reinforces what they are doing in an elegant and detailed manner that enhances both usability, UX & trust in the application.

To further assure users and increase positive UX, I've included some subtle but fun hover effects on almost all of my buttons and icons. The task line icons and the timer icons tilt and scale up ever so slightly when hovered, the popover navigation includes a yellow background on hover and almost all of the buttons (with the exception of the information button) have an animated box shadow effect when hovered, finally the checkboxes increase in size and display a rainbow effect. These hover effects add a fun twist to the application and they work to further affirm a user's interaction decisions.

The information button was excluded from having any hover effects, because it is not an integral part of the application, and is only present as a fallback, or should a user want more detailed information.

As an aside, I initially also had the idea of including an affirmations API that would bring up inspiring work related quotes as the timer was running, but I then felt that was unneccesarily complicated and somewhat removed from the whole point of the application, which is to focus on only one thing at a time.

Information Architecture

The structure is a sort of blend of the dashboard build with hub & spoke. The main page is a dashboard, with lists & charts and information, but when you time a task, the user opens up a modal and when they close that modal they are brought back to the main view. In any future releases I would forsee keeping the main dashboard view and any new features being added as further spokes off that main page.

Skeleton

As aforementioned the dashboard/hub & spoke hybrid build has lent itself to an application that I believe is clear and efficiently does what it sets out to do without confusing the user.

Reassuring Conventions

  • The purpose of the application is clear from the landing page, both the headings and the "Type to add a new task" input, leave no room for confusion.

  • To double-down on this clarity and as a fallback for the super uncertain user, I have also included an informational modal that is accessible by clicking on the question mark icon in the upper right hand corner of the header.

  • The page elements have been grouped together in logical segments and the most important element (the task list) takes centre stage with the charts below it and the timers open on top of it.

  • Visually the colours are bright but clean and I have limited the features to those necessary to achieve a timed task list. Keeping it simple decreases the cognitive load on the user and increases UX.

  • Thankfully font awesome includes some brilliant icons that enabled me to represent the various features using strong metaphorical concepts further simplifying and enhancing user decision-making and understanding.

Wireframes

My full Figma workspace for this project including wireframes, mockups, colour palette & typography, can be viewed here.

Alternatively here are the individual wireframes:

  1. 1st draft wireframes: pen on paper: A
  2. 1st draft wireframes: pen on paper: B
  3. Mobile Wireframes 2nd Draft
  4. Mobile Wireframes - Final Draft
  5. Tablet Wireframes - Final Draft
  6. Desktop Wireframes - Final Draft

If you choose to view them this way, please click download as the GitHub viewer can expand the smaller files to an uncomfortably large zoom ratio.

Surface

Design Considerations

I designed the application to be bright and a little bit fun, as the concept of timing your tasks sits just on the edge of gamifying productivity. So I wanted to bring a hint of that idea into the design. I've designed everything around the task list, which is front and center on all devices.

I used a recurring design theme of hard box shadows on almost all the component frame elements of the design. The modals, the task list, the headers, the chart frame and all the buttons. I liked the faux-retro look of the hard shadows, especially paired with soft 8px-15px border radiuses.

I then paired these back on mobile screens during the build process, as I felt the hard edges and borders made the site look a tad busy on smaller screens.

Colour Palette

I wanted a bright, fresh and clean somewhat retro look, using bold and happy colours. The two main accent colours are bright yellow and a light bright blue/cyan, with the remaining colours used for small details and for the different charts slices.

palette

Yellow was specifically chosen as it has been scientifically shown to increase both positivity and creative thought in humans. Psychologically it is the colour of thought and it promotes creativity with action, without inducing hunger (like red).

Typography

Headings:

For the typography I wanted a slightly unusual heading font, but nothing with too much flourish. I chose a Google Font that is not used that much: "Secular One" and I modified it by only using uppercase and by increased the letter spacing substantially, thus giving it a distinctive look.

Task List, instructions, modals, charts:

For all other fonts, I used another Google Font called Heebo, which is a clean and elegant sans-serif that worked well to stay out of the way of the colourful design. Clear enough and simple enough to present information to the user, without overpowering the look of the application.

typography

Design Mockups

Main Mockups

  1. Mobile Mockups
  2. Tablet Mockups
  3. Desktop Mockups

Component Mockups

  1. Components Mockups
  2. Mobile Timer Mockup
  3. Task List Mockup
  4. Desktop Charts Mockup
  5. Desktop Timer & List Detail Mockup
  6. Desktop Timer Mockup
  7. Manual Task Time Edit Mockup
  8. Modal Mockup
  9. Popover Mockup
  10. Select Options Mockup
  11. Typography
  12. Colour Palette

Features

1. Landing Page

The main page is the springboard for all the features, it contains the task list and the input to add new tasks, as well as the charts that track time on those tasks. It is fully responsive but that will be demonstrated further in the mobile-first responsivity section of this readme.

Landing Page Design

The main view was designed to be somewhat minimalist, yet bright and with happy pops of colour. The design and navigation centres around the task list which is easy and uncomplicated to use.

Underneath the task list the user scrolls down to the productivity charts which only show up once the user adds a task and records some time on that task.

2. Information Modal

I've included information on all the application's features as an explanatory fallback, and this modal is accessed by clicking on the question mark icon in the upper right hand corner.

3. Adding a task to the list

This is the first feature the user will see on the landing page, and the most important as the task list is the basis for the rest of the features. The input to add new tasks features the direction "Type to add a new task..." underlined and followed by a + button. All of which is simple and intuitive for the user. When a task is added, the task list is created, with all attendant features.

Task Addition Special Features

  • A task can be added by clicking the + button with the mouse or by pressing enter on the keyboard.
  • The cursor will automatically go back into the input field, making it easy to add multiple tasks quickly.
  • If the user adds unnecessary white space to the beginning or end of the task, it will be automatically removed.
  • If the user fails to add a task but hits enter or clicks the plus button, they will be prompted to "Please enter a valid task".

4. Editing a task

Both the task name / description and/or the amount of time associated with focus on that task can be fully edited and changes are saved.

Task Edit Special Features

  • The time can be modified using the mouse and keyboard to enter new numbers.
  • OR it can be modified using the tab key and the up & down arrows.
  • OR it can be modified by clicking on the small arrows inside the time inputs.

5. Deleting a task

Users can choose to delete any of their tasks whether or not they are completed.

Task Deletion Special Features

  • Users are prompted to confirm that they definitely want to delete a specific task.
  • This handles user errors gracefully and stops a user from accidentally deleting a task they wanted to keep.
  • The delete task confirmation modal also includes the specific task name/description of the task to be deleted, this further wards against accidental deletion by the user.

6. Checking a task as complete

Every task on the task list has a checkbox next to its task description, allowing the user to toggle the completed status of a task on and off, as desired.

Task Completion Special Features

  • When the checkbox is hovered over with the mouse it scales up in size and turns rainbow-coloured.
  • When tasks are checked, a tick fills the checkbox and a line is drawn through the task description.

7. Navigation

Other than the stopwatch timer, the rest of the navigation options are available by clicking the ellipsis dots on a particular task.

Navigation Special Features

  • The popover is fully responsive, works well on smaller devices and has been customised to react appropriately to user interaction, both via mouse and keyboard.
  • It is also ARIA friendly, and screen reader compatible.
  • When an option is hovered over by the mouse, its background turns yellow.
  • I included a plugin called hideOnPopperBlur which was part of the tippy.js package and that ensured that only one popover could be opened at any one time, so when another element is tabbed to, the popover disappears.
  • When an option is selected via click or enter, the popover automatically disappears. This is my own plugin called 'hideOnOptionSelect', as the tippy.js code did not default to that functionality.
  • Separate from the popover, there is a "Skip tasks" link for keyboard users, the idea here is that because there are 6 tabable options per task, and there could potentially be many many tasks in a list, a keyboard user could get very frustrated if they were trying to access the charts as these come after the tasks in the tab order. The "Skip Tasks" link is invisible to mouse users, but it comes after the "Add new task" button for keyboard users. It is a very important accessibility navigation feature.

These customisations enhance the navigation UX and ensure its smooth and accessible functioning.

(More detail on both of the popover customisations can be found in the testing.md file under the dynamicPopoverNav() section).

8. Timers. Stopwatch and Countdowns

The timers all share the same modal design, but their title and functionality changes depending on what timer is selected.

Timer Special Features

  • The first text on the timer tells the user what timer they are using: 'Stopwatch', 'Countdown 15' or 'Countdown 25'.
  • Under that, the task description is displayed.
  • The stopwatch timer counts up from 0.
  • The stopwatch timer beeps once every 30 minutes to remind the user of the passage of time.
  • The countdown timers count down from 15 & 25 minutes respectively.
  • When the countdown timers get to 0, an audio alarm plays.
  • If the alarm toggle button (the bell) is muted on the stopwatch timer, the beep is not triggered every 30 minutes.
  • If the alarm toggle button is muted on the countdown timers, the audio alarm does not play, but a visual silent alarm does play when the countdown ends.
  • The countdown silent alarm phases through different colours to alert the user that the countdown is completed.
  • When the countdown is complete, the user is asked to confirm that they wish to save the full countdown time to that particular task. They can choose to save or to cancel.
  • The pause button pauses all of the timers.
  • Likewise the play button starts them again from when they were paused. For the stopwatch timer the play button continues the count up, for the countdown timers, the play button continues the count down.
  • The reset button resets the stopwatch timer to 0, and the countdown timers to 15 minutes & 25 minutes respectively.
  • If the user clicks the X button in the top right hand corner, they are prompted to confirm that they wish to exit the timer without saving the time to the task.
  • If the user clicks the "Save time to task" button, they are asked to confirm that they want to save that particular amount of time to that specific task. Both the time and task description are named explicitly in the confirmation modal.
  • If the user clicks the "Save time to task" button but does not pause the timer first, the timer will pause automatically.
  • In contrast, if the user clicks the X button, the timer keeps running in the background while the user responds to that modal.

9. Productivity Charts

Chart Design

The charts were designed to be scrolled down to, to show a general comparison between time spent on various tasks. As the specific amount of time spent on each task can be viewed on the main task list, the charts are meant to be comparative in nature.

They are screen reader & keyboard friendly and the dropdown select options can be accessed using mouse or keyboard (space bar and down/up arrows).

Chart Substance

  1. Total Time Focused On Each Task

    • shows the total time the user has timed or logged (using the edit task option) on each task.
    • The time is recorded and stored in seconds, but displayed in long form in the format hrs, mins, secs.

  2. Total Time Focused On Each Task Today

    • shows the time recorded on each task if that time was recorded on the date that it is being viewed on, or 'today'.

  3. Tasks Completed

    • A list of all tasks checked off.

  4. Tasks Completed Today

    • A list of all tasks checked off, when the last completion tick was recorded on 'todays' date.
    • OR when a task has already been marked as completed, but then the user goes and records more time on that task 'today'. Logically, that task is then completed 'today'.

Charts Special Features

  • Hovering the mouse over any of the donut slices brings up a tooltip that shows the task description & the time spent on that task.
  • The legend truncates long and wordy task descriptions to the first 15 / 25 characters to ensure nice formatting whatever the device screen size.
  • If the user checks off a task while viewing one of the completed task lists, the page will reload in order to update that information. (This is not ideal functionality and is listed as one of the 'issues' / elements where there is room for improvement), but it does have the effect of ensuring an accurate representation of the data.
  • When you add a new task, a legend for that task is automatically created on the charts, even if there is no time recorded on that task. This aids in the comparative representation.

10. Custom 404 Page

The application has a custom 404 page in the same style as the rest of the application, with a customised message telling the user where they strayed from, and a link for them to click to get back quickly, without having to use the back button.

Mobile-first Responsivity

This site was designed with a mobile-first approach in mind. As the bulk of the application takes place on a simple one page layout, and the interactions use modals, there were only a few subtle changes between breakpoints.

Mobile xs and sm breakpoints

  • The main task list is centered in mobile and the feeling of space and minimalism is enhanced by the absence of any borders.
  • The header takes up a small amount of room.
  • Everything is easily accessible and easy to view.

  • The charts on mobile are stacked on top of the legend and they are styled so that they fit perfectly on the page.

  • The completed task lists are also centered and fit snugly on the page.

  • The timer is centered and takes up 100% of the mobile width.

  • The editTask() function is small and tidy on mobile in vertical orientation and takes up more space on landscape, but is the ideal size to edit and take in all the information.

  • The modals rise to the top of the mobile view and they sit on a darkened overlay.

Tablets and md breakpoints

  • The main task list is given a retro border on ipad & medium screens as there is sufficient space to accomodate that design choice comfortably.
  • The task list takes up a smaller % ratio on the page and more of the application is visible at once.

  • On the iPad in vertical view the charts still stack over their legend.

  • However in landscape orientation they sit side by side as below:

  • Completed tasks are listed in the chart area and are centered in their div.

Desktops lg and xl breakpoints

As illustrated below, the application on desktops and large screens has the same design and layout as on landscape medium screens, just with a little more white space and room to manoevre.

The charts and their legends sit next to each other as on medium screens and landscape orientated iPad sized devices.

If I decide to implement some of the future release ideas, I will move the layout towards a more traditional dashboard layout on larger screen widths. So for instance, the charts might share their screen real estate with other features to their left and right. But for now, I like the feeling of space and clarity and ease of access that all the features have.

The Edit task modal has more space to stretch out on larger screens as below:

And finally, on large screens, the Timer has more space around it and centres itself on the page as below:

I used the Chrome extension Responsive Viewer as I was developing, to keep checking in with how the application looked on different devices. I found this plugin somewhat more accurate than Chrome dev tools.

Accessibility

Keyboard Accessibility

I really wanted to ensure that the entire application was keyboard accessible. Every function and section of the application was coded with full keyboard functionality in mind.

1. Event Listeners

One particular roadblock I encountered when ensuring great keyboard accessibility was working out how to code behaviour based on two event listeners without having to duplicate large amounts of code.

I eventually found this code online that helped me craft that functionality, which removed a huge amount of duplication.

This got extra complex when I needed to nest two of these event arrays within each other in order to access items in the options menu popover. It eventually worked like this:

        const ellipsisArray = document.querySelectorAll('.task-options');
		ellipsisArray.forEach(function(ellipsis) {
			['click', 'keyup'].forEach(function(evt) {
				ellipsis.addEventListener(evt, function(elipEvent) {
					if ((evt === 'click') || (elipEvent.keyCode === 9)) {
                        const countdown25Button = document.querySelector('.countdown25-task-option');
                        countdown25Button.addEventListener('keyup', function(event) {
                            if (event.keyCode === 13) {
                                event.preventDefault();
                                countdown25Button.click();
                            }
                        });
						countdown25Button.addEventListener('click', function() {
                            REST OF LOGIC HERE....

While somewhat winding, this was definitely preferable to writing out the exact same logic twice, once for click events and once for keyup events.

2. Skip Tasks

Another issue I found when testing the application using only a keyboard was that it was infuriating when you had a long task list and you wanted to toggle charts, to have to tab through each individual task and all its associated options. To circumvent this issue, I included a "Skip Tasks" link that becomes visible only when the site is navigated using a keyboard.

3. Focus Highlights

I have ensured that it is obvious when the keyboard has tabbed over a particular element by making the focus & active properties stand out.

Visual Accessibility

1. Screen Readers

Although not a perfect testing application, I used the Chrome Screen Reader to get an idea of how the website would be interacted with by screen reader users. The Chrome offering is nowhere near as complete, or accurate as more professional screen readers, however it did allow me to see where my application was falling down in terms of what elements were not labelled or semantically described correctly. Wherever possible, I fixed these issues by including aria-labels & titles to elements.

I also tried to redesign many parts of the application to use buttons instead of <a> tags, as buttons are automatically described by screen readers and <a> tags are not. However, I then found that this completely stopped parts of my application working on mobile, so unfortunately in some cases, I had to step it back and return to using <a> tags, but whenever possible I have used the correct semantic elements for screen readers.

2. Zoom Ratio

I ensured that the application was accessible for users who need to increase the zoom ratio of the page. It can be viewed and used comfortably at up to 200% zoom as per web standards.

3. Colourblindness

I used Chrome's Web Disability Simulator to test the application for all kinds of colourblindness as well as for users with other vision issues. I ensured that no functionality was intrinsically tied to colour perception.

Auditory

My countdown timer features a silent alarm for users who don't want an audio alarm to ring, but this also doubles as an alarm for users with aural accessibility issues.

Cognitive

To make the application as cognitively accessible as possible, I have ensured the design is clean and effective, without over-simplifying functionality.

Bandwidth

Using a variety of web development tools (further outlined in the testing.md doc) I have ensured that the application's performance runs as fast as possible, to make it accessible to users with slow bandwidth.

Potential Features for Future Releases

  1. Connecting to a database and creating user accounts with proper storage and retrieval of data.
  2. Connect up API for Google Calendar.
  3. Add due-dates to tasks.
  4. Adding project / category functionality.
  5. Wage calculations for people who are paid per hour/ on a time basis. Very useful for freelancers who operate by time expended.
  6. Daily/weekly/monthly view of time spent working on each task/project. - Automated graphs with D3.js
  7. Speech to text functionality for adding tasks to the list and making the application more accessible.
  8. Daily task time targets. So that the user can set a time goal on a task, and then work towards reaching it.
  9. Adding a CSS circular countdown animation to the task timer, that gets smaller by the percentage of time that remains.
  10. Add a sort feature to the tasks in order to reorder them by priority.

Testing

Please click here to read all the testing documentation.

Issues and Room For Improvement

  1. I've realised over the course of building this application that the way I structured my event listeners (nestled inside object methods) was needlessly complex and led itself to some irritating bugs that needed fixes in the form of bind & unbind methods, and then eventually page reloads. I think for future projects I would separate out my classes from event listeners more definitively for this reason.

  2. To further the above point, I would also be tempted to move more towards a purely functional approach for my next project, as I believe that would make automated testing easier, as well as streamlining and uncomplicating the structure of the code.

  3. The donut chart hover effects are not keyboard friendly, and while that same information is available to view in the legend, I would ideally like every aspect of the website to be keyboard accessible.

  4. The method I used to create a custom 404 page works fine, but with the caveat that if a user types a trailing '/' after typing in the incorrect URL the custom 404 page is unstyled. Additionally, if other characters are typed after the final URL but without the original trailing / - then the default 404 page is shown. In both these instances, the user is still shown a 404 page, just a less aesthetically pleasing one.

  5. The silent alarm is useful if the user is using a mobile device to time your tasks while working on a computer or elsewhere. Then they can put their mobile down next to them and the silent alarm will grab their attention. However if they have the task timer minimised on a desktop window, the silent alarm will have no effect. One way forward would be to investigate a silent alarm that can pop out of its window somehow, although I believe many OSs actively try to prevent this because of spammy links.

Attribution

Deployment

This website was developed using GitPod in a Chrome browser and commits were pushed to a GitHub repository. This site is currently hosted on GitHub pages.

Publishing to GitHub Pages

  1. I went to the main page of my GitHub repository.
  2. I clicked on the "Settings" tab on the main horizontal tab bar.

settings

  1. I scrolled down to the "GitHub Pages" section of settings.

githubpages

  1. I selected "Branch: Master" and the "Root" Directory and then clicked "Save".

branch

  1. Site Published.

Forking the repository

To fork this project please do the following:

  1. Go to the main page of the Tunnel Focus repository.

  2. At the top right hand corner of the page find and click the "Fork" button.

  1. You have forked this repository.

Opening this project locally

To make a local clone of this project please do the following:

  1. Go to the main page of the Tunnel Focus repository.

  2. Click on the button that says "Code" with a down arrow before the text.

Clone with HTTPS

  1. To clone using HTTPS click the clipboard icon pictured next to the repo link with HTTPS selected as below:

Clone with SSH

  1. To clone using SSH click the clipboard icon pictured next to the repo link with SSH selected as below:

Clone with GitHub CLI

  1. To clone using GitHub CLI click the clipboard icon pictured next to the repo link with GitHub CLI selected as below:

  1. Open Terminal.

  2. Change your current working directory to where you want the cloned project saved.

  3. Type git clone and paste in whichever of the 3 URL choices you copied in step 3.

  4. Press enter and your repo has been cloned locally.

Clone using GitHub Desktop

  1. Go to the main page of the Tunnel Focus repository.

  2. Click on the button that says "Code" with a down arrow before the text.

  3. Click "Open with GitHub Desktop" to clone and open the repo with GitHub Desktop.

  1. Follow GitHub Desktop's prompts to complete the process.

Clone by downloading a ZIP file

  1. Go to the main page of the Tunnel Focus repository.

  2. Click on the button that says "Code" with a down arrow before the text.

  3. Click on "Download ZIP".

  1. A zip file with all the project files will be downloaded to your computer and may be opened locally using whatever code editor you choose.

Tools and Other Resources Used

1. Design

2. HTML and CSS

3. JavaScript

4. D3.js

5. Git and GitHub

6. Frameworks

  • tippy.js

    A wonderful JavaScript framework for tooltips, popovers, dropdowns & menus. Best thing since sliced bread.

7. General

Technology Used

  • HTML
  • CSS
  • JavaScript
  • D3.js
  • tippy.js
  • Git
  • GitHub
  • GitPod

Acknowledgements

Thanks to tutor Support specifically:

  • Haley who helped me crack a particularly stubborn bug in the Manual Time Edit Function and
  • Stephen who helped me extract elements of my deleteTask() function to the global space to fix an addEventListener issue.

Thanks to the Code Institute Slack Community for their resources and information.
Thank you to my Code Institute mentor Oluwafemi Medale for his invaluable insight and instruction.

About

kairosity.github.io/mp2-tunnel-focus/

Resources

Readme
Activity

Stars

1 star

Watchers

2 watching

Forks

1 fork
Report repository

Releases

No releases published

Packages

No packages published

Languages