Skip to main content

​
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:
ActivityBackground ColorCSS VariableDefined At
WorkOrange--orange: hsl(15, 100%, 70%)styles.css:312-314
PlayBlue--blue: hsl(195, 74%, 62%)styles.css:316-318
StudyPink--pink: hsl(348, 100%, 68%)styles.css:327-329
ExerciseGreen--green: hsl(145, 58%, 55%)styles.css:336-338
SocialPurple--purple-700: hsl(264, 64%, 52%)styles.css:345-347
Self CareYellow--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.
1

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
      }
    }
  }
]
2

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.
3

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;
}
4

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 */
}
5

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');
6

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.
7

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;
}
8

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;
}
9

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.
10

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:
ActivitySuggested ColorHSL Value
ReadingTealhsl(180, 60%, 65%)
CookingRed-Orangehsl(20, 80%, 60%)
GamingDeep Purplehsl(270, 70%, 55%)
MusicMagentahsl(320, 75%, 60%)
TravelSky Bluehsl(210, 70%, 60%)
WritingIndigohsl(240, 60%, 60%)

​
Removing an Activity

To remove an activity:
1

Remove from data.json

Delete the entire activity object from the array.
2

Remove HTML section

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

Remove CSS styles

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

Update app.js

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

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