Adding Activities

Overview

The Time Tracking Dashboard comes with six default activities: Work, Play, Study, Exercise, Social, and Self Care. This guide shows you how to add custom activities with complete code examples.

Default Activities

The dashboard includes these activities with predefined colors:

Activity	Background Color	CSS Variable	Defined At
Work	Orange	`--orange: hsl(15, 100%, 70%)`	styles.css:312-314
Play	Blue	`--blue: hsl(195, 74%, 62%)`	styles.css:316-318
Study	Pink	`--pink: hsl(348, 100%, 68%)`	styles.css:327-329
Exercise	Green	`--green: hsl(145, 58%, 55%)`	styles.css:336-338
Social	Purple	`--purple-700: hsl(264, 64%, 52%)`	styles.css:345-347
Self Care	Yellow	`--yellow: hsl(43, 84%, 65%)`	styles.css:354-356

Activity Card Structure

Each activity card has the same HTML structure (index.html:47-63):

<section class="activity-card activity-card--work"> 
  <img class="activity-card__picture" src="./images/icon-work.svg" alt="">

  <div class="activity-card__info">
    <div class="activity-card__top-row">
      <h2 class="text--p5-medium">Work</h2>

      <button class="activity-card__menu" aria-label="Menu">
        <img src="./images/icon-ellipsis.svg" alt="">
      </button>
    </div>

    <div class="activity-card__time">
      <p class="activity-card__hours"><span id="work-current">32</span>hrs</p>

      <p class="text--p6 text--p6--color">Last Week - <span id="work-previous">36</span>hrs</p>
    </div>
  </div>
</section>

Key Elements

Container: <section> with activity-card and activity-specific class (e.g., activity-card--work)
Icon: Background icon image positioned absolutely
Title: Activity name in <h2> with text--p5-medium class
Current hours: Span with ID {activity-name}-current
Previous hours: Span with ID {activity-name}-previous

Adding a New Activity

Let’s add a “Reading” activity as a complete example.

Add data to data.json

Add the new activity object to the JSON array. The activity should follow the existing structure (data.json:1-104):

[
  {
    "title": "Work",
    "timeframes": { ... }
  },
  {
    "title": "Play",
    "timeframes": { ... }
  },
  // ... other activities ...
  {
    "title": "Self Care",
    "timeframes": { ... }
  },
  {
    "title": "Reading",
    "timeframes": {
      "daily": {
        "current": 2,
        "previous": 1
      },
      "weekly": {
        "current": 10,
        "previous": 12
      },
      "monthly": {
        "current": 45,
        "previous": 38
      }
    }
  }
]

Add HTML markup to index.html

Add the activity card HTML after the last activity section (after line 153):

<section class="activity-card activity-card--reading"> 
  <img class="activity-card__picture activity-card__picture--reading" 
       src="./images/icon-reading.svg" alt="">

  <div class="activity-card__info">
    <div class="activity-card__top-row">
      <h2 class="text--p5-medium">Reading</h2>

      <button class="activity-card__menu" aria-label="Menu">
        <img src="./images/icon-ellipsis.svg" alt="">
      </button>
    </div>

    <div class="activity-card__time">
      <p class="activity-card__hours">
        <span id="reading-current">10</span>hrs
      </p>

      <p class="text--p6 text--p6--color">
        Last Week - <span id="reading-previous">12</span>hrs
      </p>
    </div>
  </div>
</section>

Make sure the span IDs match the pattern: {activity-name}-current and {activity-name}-previous. Use lowercase and hyphens.

Add CSS styling to styles.css

Add background color and icon positioning after the Self Care styles (after line 363):

.activity-card--reading {
  background-color: var(--blue-light);
}

.activity-card__picture--reading {
  top: -0.5rem;
  right: 2rem;
}

Define color variable in styles.css

Add the new color to the :root variables section (around line 26-49):

:root {
    --white: hsl(0, 100%, 100%);
    --black: hsl(0, 0%, 0%);
    
    /* ... existing colors ... */
    
    --blue-light: hsl(180, 60%, 65%); /* New color for Reading */
}

Add DOM selectors to app.js

Add selectors for the new activity after the existing ones (after line 28):

const readingCurrent   = document.querySelector('#reading-current');
const readingPrevious  = document.querySelector('#reading-previous');

Update dailyActivity function in app.js

Add code to update the Reading activity in the dailyActivity() function (after line 58):

function dailyActivity() {
    removeActiveClasses();
    daily.classList.add("profile-card__option--active");

    workCurrent.innerText = dashboardData[0].timeframes.daily.current;
    workPrevious.innerText = dashboardData[0].timeframes.daily.previous;
    // ... existing activities ...
    
    readingCurrent.innerText = dashboardData[6].timeframes.daily.current;
    readingPrevious.innerText = dashboardData[6].timeframes.daily.previous;
}

The array index is 6 because Reading is the 7th activity (0-indexed). Adjust based on your activity’s position in data.json.

Update weeklyActivity function in app.js

Add the same code to weeklyActivity() (after line 82):

function weeklyActivity() {
    removeActiveClasses();
    weekly.classList.add("profile-card__option--active");
    
    // ... existing activities ...
    
    readingCurrent.innerText = dashboardData[6].timeframes.weekly.current;
    readingPrevious.innerText = dashboardData[6].timeframes.weekly.previous;
}

Update monthlyActivity function in app.js

Add the same code to monthlyActivity() (after line 105):

function monthlyActivity() {
    removeActiveClasses();
    monthly.classList.add("profile-card__option--active");
    
    // ... existing activities ...
    
    readingCurrent.innerText = dashboardData[6].timeframes.monthly.current;
    readingPrevious.innerText = dashboardData[6].timeframes.monthly.previous;
}

Create an icon image

Add an icon SVG or PNG image to ./images/ named icon-reading.svg (or .png). The icon should be approximately 80x80 pixels.

Test the activity

Open index.html in your browser and test:

Activity card displays correctly
Icon is visible and positioned properly
Switching between Daily, Weekly, and Monthly updates the hours
Hover effect works on the card

CSS Classes Reference

Activity Card Classes

From styles.css:259-286:

.activity-card {
  position: relative;
  overflow: hidden;
  padding-top: 4.5rem;
  border-radius: 1.5rem;
}

.activity-card__picture {
  position: absolute;
  top: -1rem;
  right: 1.5rem;
}

.activity-card__info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-100);
  position: relative;
  z-index: 1;
  padding: var(--spacing-300);
  background-color: var(--navy-900);
  border-radius: 1.5rem;
  transition: background-color .2s ease-in;
}

.activity-card__info:hover {
  background-color: var(--navy-800);
}

Typography Classes

Used in activity cards:

.text--p5-medium: Activity titles (18px, medium weight)
.text--p6: Secondary text (15px, regular weight)
.text--p6--color: Adds navy-200 color for “Last Week” text

Icon Positioning Examples

Each activity has custom icon positioning. Here are the existing patterns from styles.css: Work (default positioning):

.activity-card__picture {
  position: absolute;
  top: -1rem;
  right: 1.5rem;
}

Play (larger icon, adjusted position - styles.css:320-325):

.activity-card__picture--play {
  top: -.5rem;
  right: 2rem;
  width: 9rem;
  height: 9rem;
}

Self Care (custom size - styles.css:358-363):

.activity-card__picture--self-care {
  top: -0.8rem;
  right: 2rem;
  width: 7.2rem;
  height: 6.6rem;
}

Adjust top and right values to position your icon correctly. Use negative top values to make icons peek above the card.

JavaScript Update Pattern

Each timeframe function follows this pattern (app.js:38-106):

function timeframeActivity() {
    removeActiveClasses();
    timeframe.classList.add("profile-card__option--active");

    activityCurrent.innerText = dashboardData[index].timeframes.timeframe.current;
    activityPrevious.innerText = dashboardData[index].timeframes.timeframe.previous;
}

Key points:

Remove active class from all buttons
Add active class to current button
Update innerText of current and previous spans
Access data by array index and timeframe name

Color Palette Suggestions

Here are color suggestions for common activities:

Activity	Suggested Color	HSL Value
Reading	Teal	`hsl(180, 60%, 65%)`
Cooking	Red-Orange	`hsl(20, 80%, 60%)`
Gaming	Deep Purple	`hsl(270, 70%, 55%)`
Music	Magenta	`hsl(320, 75%, 60%)`
Travel	Sky Blue	`hsl(210, 70%, 60%)`
Writing	Indigo	`hsl(240, 60%, 60%)`

Removing an Activity

To remove an activity:

Remove from data.json

Delete the entire activity object from the array.

Remove HTML section

Delete the <section class="activity-card activity-card--{name}"> block from index.html.

Remove CSS styles

Delete the .activity-card--{name} and .activity-card__picture--{name} rules from styles.css.

Update app.js

Remove the DOM selectors and update code from all three timeframe functions.

Update array indexes

If removing an activity from the middle of the array, update all subsequent array indexes in app.js.

Removing activities from the middle of the array will change indexes. Update all array references in app.js to match the new order.

Common Issues

Activity card doesn’t appear

Check:

HTML is added to index.html inside <main class="dashboard">
CSS classes match the HTML exactly
Background color is defined in :root

Hours don’t update when switching timeframes

Check:

Span IDs in HTML match selectors in app.js
Data exists in data.json for the activity
Array index in app.js matches activity position in data.json
All three timeframe functions are updated

Icon doesn’t appear or is positioned incorrectly

Check:

Image file exists in ./images/ directory
Image path in src attribute is correct
CSS class for icon positioning is defined
Use browser DevTools to adjust top and right values

Reference

Activity card HTML structure: index.html:47-153
Activity card CSS: styles.css:259-363
Background colors: styles.css:312-356
DOM selectors: app.js:17-28
Update functions: app.js:38-106
Data structure: data.json:1-104

Get Started

Features

Implementation

Customization

Overview

Default Activities

Activity Card Structure

Key Elements

Adding a New Activity

CSS Classes Reference

Activity Card Classes

Typography Classes

Icon Positioning Examples

JavaScript Update Pattern

Color Palette Suggestions

Removing an Activity

Common Issues

Activity card doesn’t appear

Hours don’t update when switching timeframes

Icon doesn’t appear or is positioned incorrectly

Reference

Build docs developers (and LLMs) love

Get Started

Features

Implementation

Customization

Documentation Index

​Overview

​Default Activities

​Activity Card Structure

​Key Elements

​Adding a New Activity

​CSS Classes Reference

​Activity Card Classes

​Typography Classes

​Icon Positioning Examples

​JavaScript Update Pattern

​Color Palette Suggestions

​Removing an Activity

​Common Issues

​Activity card doesn’t appear

​Hours don’t update when switching timeframes

​Icon doesn’t appear or is positioned incorrectly

​Reference

Build docs developers (and LLMs) love

Overview

Default Activities

Activity Card Structure

Key Elements

Adding a New Activity

CSS Classes Reference

Activity Card Classes

Typography Classes

Icon Positioning Examples

JavaScript Update Pattern

Color Palette Suggestions

Removing an Activity

Common Issues

Activity card doesn’t appear

Hours don’t update when switching timeframes

Icon doesn’t appear or is positioned incorrectly

Reference