CO₂ Clock - Real-Time Carbon Tracker

A visual, interactive, and educational simulation of our planet's rising CO₂ levels.
Built to make climate data simple, accessible, and impactful — for learners, educators, and environmental advocates alike. 🌱

About

CO₂ Clock is a comprehensive web application designed to raise awareness about atmospheric carbon dioxide levels and their impact on climate change. The platform provides simulated real-time CO₂ tracking, interactive visualizations of global emissions data, and educational content about climate science and solutions.

This project aims to make climate data accessible and understandable for everyone, from students and educators to policymakers and environmental advocates. By presenting complex climate information in an engaging, visual format, CO₂ Clock encourages users to understand the urgency of climate action and explore practical solutions for reducing carbon emissions.

The website features a complete user journey including a homepage with live CO₂ counter animation, comprehensive emissions dashboard with 70 countries, educational articles, project information, contact functionality, and a user-friendly thank you page for form submissions.

Project Overview

Page	File	Description	Key Features
🏠 Home	`index.html`	Displays live CO₂ counter and climate facts.	Animated CO₂ ppm counter, real-time updates, scroll indicator
📊 Dashboard	`dash_board.html`	Data visualization of global emissions.	Chart.js graphs, search, filter, sort by 70 countries
📚 Articles	`articles.html`	Educational content hub.	Climate science articles, CO₂ trends, earth systems
ℹ️ About	`about.html`	Project purpose and background.	Mission, data sources, climate impact
✉️ Contact	`contact.html`	User inquiry form integration.	FormSubmit powered, validation, instant submission
✅ Thank You	`thank-you.html`	Confirmation after form submit.	Success message, navigation back to site

How It Works

Data Methodology

CO₂ Simulation Engine

The CO₂ Counter uses a mathematical model based on real atmospheric data to simulate continuous CO₂ rise:

Weekly Baseline Data:

const weeklyCO2 = [428.5, 428.6, 428.7, 428.8, 428.92357];

Calculation Method:

Week 1: 428.5 ppm
Week 2: 428.6 ppm (+0.1)
Week 3: 428.7 ppm (+0.1)
Week 4: 428.8 ppm (+0.1)
Week 5: 428.92357 ppm (+0.12357)
Total rise over 4 weeks: 0.42357 ppm

Per-Second Rise Calculation:

Weekly Rise = (428.92357 - 428.5) / 4 weeks = 0.1059 ppm/week
Daily Rise = 0.1059 / 7 days = 0.01513 ppm/day
Hourly Rise = 0.01513 / 24 hours = 0.000630 ppm/hour
Per-Second Rise = 0.000630 / 3600 seconds = 0.000000175 ppm/second

Real-Time Implementation:

const first = weeklyCO2[0];           // 428.5
const last = weeklyCO2[weeklyCO2.length - 1];  // 428.92357
const weeks = weeklyCO2.length - 1;   // 4 weeks
const weeklyRise = (last - first) / weeks;
const dailyRise = weeklyRise / 7;
const secRise = dailyRise / (24 * 60 * 60);

let currentCO2 = last;  // Start at 428.92357

// Update every 500ms with natural variation
setInterval(() => {
  const noise = Math.random() * 0.0000001;
  currentCO2 += secRise + noise;
  updateCO2Display(currentCO2);
}, 500);

Update Frequency: Every 500ms (twice per second) Starting Value: 428.92357 ppm Display Precision: 6 decimal places Variation: Random noise (±0.0000001) to simulate natural atmospheric fluctuations Purpose: Educational simulation showing continuous CO₂ growth without requiring live API data

Counter Animation System

The CO₂ display uses a custom vanilla JavaScript digit-stack animation (NOT Odometer.js):

How It Works:

Counter value is converted to string: 428.92357 → "428923570"
Each digit is placed in a <div class="digit"> container
When a digit changes, a two-layer stack is created:
- Old digit positioned at translateY(0)
- New digit positioned at translateY(-1.2em)
CSS transition smoothly moves the stack upward
After animation completes, stack resets to show new value

Code Implementation:

function updateCO2Display(value) {
  const digits = value.toFixed(6).replace(".", "").padStart(9, "0");
  const digitDivs = document.querySelectorAll(".co2-number .digit");

  for (let i = 0; i < digitDivs.length; i++) {
    let stack = digitDivs[i].querySelector(".digit-stack");
    const newDigit = digits[i];
    
    if (!stack) {
      // Create initial digit stack
      stack = document.createElement("span");
      stack.className = "digit-stack";
      stack.setAttribute("data-current", newDigit);
      stack.innerHTML = `<span>${newDigit}</span><span>${newDigit}</span>`;
      digitDivs[i].appendChild(stack);
      continue;
    }

    const oldDigit = stack.getAttribute("data-current");
    if (oldDigit !== newDigit) {
      // Animate digit change
      stack.innerHTML = `<span>${oldDigit}</span><span>${newDigit}</span>`;
      stack.style.transform = "translateY(0)";
      
      setTimeout(() => {
        stack.style.transform = "translateY(-1.2em)";
      }, 10);

      setTimeout(() => {
        stack.innerHTML = `<span>${newDigit}</span><span>${newDigit}</span>`;
        stack.style.transition = "none";
        stack.style.transform = "translateY(0)";
        void stack.offsetWidth;  // Trigger reflow
        stack.style.transition = "";
      }, 410);
    }
  }
}

Result: Smooth, animated digit transitions showing realistic CO₂ climb

Emissions Dataset

Static Data Source: 70 countries with comprehensive emissions metrics

Data Structure:

{
  rank: 1,
  country: "China",
  code: "cn",
  total: 11470,           // Million metric tons (Mt)
  percent: 30.9,          // % of global emissions
  perCapita: 8.05,        // Tons per person
  trend: "up"             // "up", "down", or "steady"
}

Complete Dataset (Top 20 shown, all 70 included):

Rank	Country	Total (Mt)	% Global	Per Capita (t)	Trend
1	China	11,470	30.9%	8.05	↑
2	United States	5,000	13.5%	15.24	↓
3	India	2,800	7.6%	2.05	↑
4	Russia	1,600	4.3%	11.20	→
5	Japan	1,150	3.1%	9.13	↓
6	Iran	800	2.2%	9.50	↑
7	Germany	700	1.9%	8.40	↓
8	South Korea	680	1.8%	13.18	→
9	Saudi Arabia	630	1.7%	18.05	↑
10	Indonesia	620	1.7%	2.30	↑
...	...	...	...	...	...
70	Qatar	70	0.19%	35.60	↑

Data Sources:

World Population Review (primary emissions data)
Global Carbon Atlas (carbon accounting)
NOAA Global Monitoring Laboratory (historical baseline)
IPCC Reports (climate context)
NASA Climate Research (verification)

Data Storage: All 70 countries embedded in assets/JS/script.js Update Method: Manual updates to JavaScript array when new data becomes available Live API: None - all data is static and pre-compiled Offline Support: Works completely offline; no external data dependencies

Charts and Visualizations

Library: Chart.js (Version 3+)

Three Visualization Modes:

1. Total Emissions (Default)

Metric: Million metric tons (Mt) of CO₂
Color: Teal (#40c4c8 with 80% opacity)
Top 20 Countries: Bar chart sorted by total emissions
Shows: China dominates with 11,470 Mt (~31% of global total)

2. Per Capita Emissions

Metric: Metric tons per person
Color: Yellow (#f9ed69 with 80% opacity)
Reveals: Qatar leads at 35.60 t/person (despite lower total)
Context: Shows individual consumption impact vs. national totals

3. Percentage of Global Emissions

Metric: % of world's total CO₂
Color: Red (#ff2e63 with 80% opacity)
Distribution: Top 20 countries represent ~84% of global emissions
Insight: Highly concentrated among major industrialized nations

Interactive Features:

Hover Tooltips: Shows country name + detailed metrics
Responsive Design: Adapts to all screen sizes
Real-time Updates: Chart re-renders instantly on data changes
Dark Theme: Dark background (#1e1e1e) with light text (#eeeeee)

Chart Rendering Code:

function updateChart(type = "total") {
  const chartCanvas = document.getElementById("co2Chart");
  const ctx = chartCanvas.getContext("2d");
  const top20 = emissionsData.slice(0, 20);

  let label, data, backgroundColor;

  switch (type) {
    case "total":
      label = "Total CO₂ Emissions (Mt)";
      data = top20.map(item => item.total);
      backgroundColor = "rgba(64, 196, 200, 0.8)";
      break;
    case "perCapita":
      label = "Per Capita CO₂ Emissions (t)";
      data = top20.map(item => item.perCapita);
      backgroundColor = "rgba(249, 237, 105, 0.8)";
      break;
    case "percent":
      label = "% of Global CO₂ Emissions";
      data = top20.map(item => item.percent);
      backgroundColor = "rgba(255, 46, 99, 0.8)";
      break;
  }

  if (chartInstance) {
    chartInstance.destroy();
  }

  chartInstance = new Chart(ctx, {
    type: "bar",
    data: {
      labels: top20.map(item => item.country),
      datasets: [{
        label: label,
        data: data,
        backgroundColor: backgroundColor,
        borderColor: "rgba(255,255,255,0.2)",
        borderWidth: 1,
      }],
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        legend: { display: false },
        tooltip: {
          backgroundColor: 'rgba(30, 30, 30, 0.9)',
          titleColor: '#eeeeee',
          bodyColor: '#eeeeee',
          borderColor: '#555555',
          borderWidth: 1,
        },
      },
      scales: {
        y: {
          beginAtZero: true,
          ticks: {
            color: '#eeeeee',
            callback: (value) => type === "percent" ? value + "%" : value.toLocaleString(),
          },
          grid: { color: 'rgba(238, 238, 238, 0.1)' },
        },
        x: {
          ticks: { color: '#eeeeee' },
          grid: { display: false },
        },
      },
    },
  });
}

Data Processing:

Extracts top 20 emitters from full 70-country dataset
Dynamically calculates appropriate data based on view mode
Applies color coding by impact severity
Includes country flags via FlagCDN API

Note: This is an educational project using compiled historical data, not live API feeds.

JavaScript Logic & Execution Flow

The CO₂ Clock's interactivity is powered entirely by vanilla JavaScript with external libraries loaded via CDN. A single assets/JS/script.js file (approximately 500+ lines) handles all functionality for all pages.

Logical Flow Overview

graph TD;
    A[👋 User opens site] --> B[⚙️ script.js loads from CDN];
    B --> C{Which page?};
    C -->|index.html| D[📈 Initialize CO₂ counter];
    C -->|dash_board.html| E[📊 Load 70 countries data];
    C -->|Other pages| F[✅ Page loads normally];
    D --> G[🎬 Start digit animation];
    G --> H[⏱️ Update every 500ms];
    H --> I[🧮 Add secRise + noise];
    I --> J[💫 Animate digits];
    J --> H;
    E --> K[🎨 Render Chart.js];
    K --> L[🔍 Setup search functionality];
    L --> M[📑 Setup table sorting];
    M --> N[🖱️ User interactions];
    N --> O{User action?};
    O -->|Search| P[🔎 Filter countries];
    O -->|Sort| Q[↕️ Sort by column];
    O -->|Chart view| R[📈 Switch chart type];
    P --> S[💡 Update table instantly];
    Q --> S;
    R --> T[💡 Update chart instantly];
    S --> N;
    T --> N;

Every user action triggers visual or numerical feedback, ensuring a continuous learning experience.

Core Logic Breakdown

1. Page Load & Initialization

When script.js loads, it runs on DOMContentLoaded:

document.addEventListener("DOMContentLoaded", () => {
  // Check if CO₂ counter elements exist
  const co2Display = document.querySelector(".co2-number");
  if (co2Display) {
    // Initialize counter for homepage
    updateCO2Display(currentCO2);
    
    // Start counter updates
    setInterval(() => {
      const noise = Math.random() * 0.0000001;
      currentCO2 += secRise + noise;
      updateCO2Display(currentCO2);
    }, 500);
  }

  // Check if dashboard elements exist
  const countryTable = document.getElementById("countryTable");
  if (countryTable) {
    // Initialize dashboard for dashboard page
    renderTable(emissionsData);
    updateChart();
    
    // Setup search
    const searchInput = document.getElementById("countrySearch");
    searchInput.addEventListener("input", updateTable);
    
    // Setup sorting
    document.querySelectorAll(".sortable").forEach((header) => {
      header.addEventListener("click", () => {
        // Handle sorting logic
      });
    });
  }
});

Key Feature: Conditional logic checks if elements exist before running functionality. This allows one script to serve multiple pages safely.

Result: Fast initialization with minimal overhead

2. CO₂ Counter Simulation

Initializes with baseline: currentCO2 = 428.92357 ppm
Calculates rise per second from weekly data
Updates display every 500ms
Adds random variation to simulate natural fluctuations

const weeklyCO2 = [428.5, 428.6, 428.7, 428.8, 428.92357];
const first = weeklyCO2[0];
const last = weeklyCO2[weeklyCO2.length - 1];
const weeks = weeklyCO2.length - 1;
const weeklyRise = (last - first) / weeks;
const dailyRise = weeklyRise / 7;
const secRise = dailyRise / (24 * 60 * 60);

// secRise ≈ 0.000000175 ppm/second
// Over 500ms: +0.0000000875 ppm per update
// Over 1 hour: +0.00063 ppm
// Over 24 hours: +0.015 ppm

Result: Realistic, observable CO₂ climb showing continuous atmospheric change

3. Dashboard Data Loading

Emissions data is embedded as JavaScript object array:

const emissionsData = [
  { rank: 1, country: "China", code: "cn", total: 11470, percent: 30.9, perCapita: 8.05, trend: "up" },
  { rank: 2, country: "United States", code: "us", total: 5000, percent: 13.5, perCapita: 15.24, trend: "down" },
  // ... 68 more countries
  { rank: 70, country: "Qatar", code: "qa", total: 70, percent: 0.19, perCapita: 35.60, trend: "up" }
];

On dashboard load, all 70 countries are immediately available in memory.

Result: Instant access to data with no loading delays

4. Table Rendering

function renderTable(data) {
  const tableBody = document.getElementById("countryTable");
  tableBody.innerHTML = "";
  
  data.forEach((item) => {
    const row = document.createElement("tr");
    row.innerHTML = `
      <td>${item.rank}</td>
      <td>
        <img src="https://flagcdn.com/w20/${item.code}.png" 
             class="country-flag" 
             alt="${item.country} flag">
        ${item.country}
      </td>
      <td>${item.total.toLocaleString()} Mt</td>
      <td>${item.percent}%</td>
      <td>${item.perCapita} t</td>
      <td>${getTrendIcon(item.trend)} ${getTrendText(item.trend)}</td>
      <td>${createStatusBar(item.percent)}</td>
    `;
    tableBody.appendChild(row);
  });
}

Features:

Dynamically generates rows for each country
Loads country flags from FlagCDN
Creates status bars with visual indicators
Shows trend direction (up/down/steady)

Result: Full interactive table with 70 countries ready to explore

5. Search Functionality

function updateTable() {
  const searchInput = document.getElementById("countrySearch");
  const searchTerm = searchInput.value.toLowerCase();
  
  const filteredData = emissionsData.filter((item) =>
    item.country.toLowerCase().includes(searchTerm)
  );

  renderTable(filteredData);
}

Real-Time Search:

Filters 70 countries instantly as user types
Case-insensitive matching
No page reload required
Updates table immediately

Result: Users can find any country in <100ms

6. Sorting Functionality

function updateTable() {
  // ... filtering code ...
  
  filteredData.sort((a, b) => {
    const valA = a[currentSortColumn];
    const valB = b[currentSortColumn];

    if (typeof valA === "string") {
      return currentSortDirection === "asc" 
        ? valA.localeCompare(valB) 
        : valB.localeCompare(valA);
    }
    
    return currentSortDirection === "asc" 
      ? valA - valB 
      : valB - valA;
  });

  renderTable(filteredData);
}

Sortable Columns:

Rank (numeric)
Country (alphabetic)
Total Emissions (numeric)
Global % (numeric)
Per Capita (numeric)
Trend (custom)

Result: Click any column header to sort ascending/descending

7. Chart Updates

function updateChart(type = "total") {
  // Destroy previous chart if exists
  if (chartInstance) {
    chartInstance.destroy();
  }

  // Get top 20 countries
  const top20 = emissionsData.slice(0, 20);

  // Prepare data based on view type
  let label, data, backgroundColor;
  switch (type) {
    case "total":
      label = "Total CO₂ Emissions (Mt)";
      data = top20.map(item => item.total);
      backgroundColor = "rgba(64, 196, 200, 0.8)";
      break;
    // ... other cases
  }

  // Create new Chart.js instance
  chartInstance = new Chart(ctx, {
    // Chart configuration
  });
}

Three View Modes: Click buttons to instantly switch between total, per capita, and percentage views

Result: Instant chart regeneration with new data

8. User Interactions Summary

All interactions happen without page reload:

Action	Trigger	Result
Type in search	Input event	Table filters instantly
Click column	Click event	Table re-sorts in chosen direction
Click chart button	Click event	Chart re-renders with new data
Scroll page	Scroll event	Navbar transparency changes

Result: Fully interactive web app with real-time feedback

Overall Execution Flow

[User visits index.html or dash_board.html]
       ↓
[Browser loads HTML + CSS + script.js from CDN]
       ↓
[script.js initializes based on page]
       ↓
[If homepage]
├─ Counter starts at 428.92357 ppm
├─ Updates every 500ms
└─ Shows live CO₂ climb

[If dashboard page]
├─ Loads all 70 countries into memory
├─ Renders full table with sorting/search
├─ Creates Chart.js visualization
└─ Waits for user interaction

[User interacts: search/sort/chart view]
       ↓
[JavaScript functions filter/process data]
       ↓
[DOM updates instantly with new results]
       ↓
[Real-time feedback in browser]
       ↓
[No server calls, no API requests, fully client-side]

⚡ Everything happens live in the browser — no backend or API calls — making the experience fast, visual, and educational.

Project Architecture

The CO₂ Clock is designed like a living ecosystem — every layer plays a role in transforming data into awareness.
It follows a fully client-side architecture, where all logic, visuals, and interactivity run inside the browser.
No server, no database — just clean, optimized front-end engineering.

System Blueprint

┌───────────────────────────────────────────────┐
│ 🌍 User Interface (6 HTML Pages)              │
│ index, dashboard, articles, about, contact    │
├────────────────────────────┬──────────────────┤
│ 🎨 Styling Layer │ 📊 Data Layer             │
│ (CSS / Bootstrap 5.3.6) │ (Static JS Arrays) │
├────────────┬──────────────────────────────────┤
│ 📈 Visualization Layer – Chart.js + Custom JS │
│ (Data sorting, chart rendering, animations)   │        
├────────────┴──────────────────────────────────┤
│ ⚙️ Interaction Layer – Single script.js File  │
│ (CO₂ counter, search, sort, chart switching)  │
└───────────────────────────────────────────────┘

File Interaction Overview

flowchart LR
    %% Pages (UI)
    A["index.html<br/>Home Page"]:::page
    B["dash_board.html<br/>Emissions Dashboard"]:::page
    C["articles.html<br/>Education Hub"]:::page
    D["about.html<br/>Project Info"]:::page
    E["contact.html<br/>Contact Form"]:::page
    F["thank-you.html<br/>Form Success"]:::page

    %% CSS
    S["assets/CSS/style.css<br/>Unified Styling"]:::asset

    %% JavaScript
    JS["assets/JS/script.js<br/>All Logic"]:::js

    %% External Libraries (CDN)
    BOOT["Bootstrap 5.3.6<br/>Grid & Components"]:::ext
    FA["Font Awesome<br/>Icons"]:::ext
    CHART["Chart.js<br/>Bar Charts"]:::ext
    FONTS["Google Fonts<br/>Typography"]:::ext
    FLAGCDN["FlagCDN<br/>Country Flags"]:::ext

    %% Relationships
    A --> S
    B --> S
    C --> S
    D --> S
    E --> S
    F --> S

    A --> JS
    B --> JS
    C --> JS
    D --> JS
    E --> JS
    F --> JS

    S --> BOOT
    S --> FONTS

    JS --> CHART
    JS --> FA
    JS --> FLAGCDN

    A --> BOOT
    B --> BOOT
    C --> BOOT
    D --> BOOT
    E --> BOOT
    F --> BOOT

    E --> |Submits via| FORMSUBMIT["FormSubmit<br/>Form Service"]:::ext

    classDef page fill:#0b3b4f,stroke:#0b3b4f,color:#fff,rx:6,ry:6
    classDef asset fill:#2d3a46,stroke:#2d3a46,color:#fff,rx:6,ry:6
    classDef js fill:#d4a574,stroke:#d4a574,color:#000,rx:6,ry:6
    classDef ext fill:#495867,stroke:#495867,color:#fff,rx:6,ry:6,stroke-dasharray:4 2
    classDef formsubmit fill:#6bcb77,stroke:#6bcb77,color:#fff,rx:6,ry:6

Flow Explanation

🏠 index.html → Home page with live CO₂ counter using inline HTML and script.js
📊 dash_board.html → Dashboard with all 70 countries, search, sort, Chart.js visualization
📚 articles.html → Educational content with climate science articles
ℹ️ about.html → Project methodology and background information
✉️ contact.html → Contact form submitted via FormSubmit service
✅ thank-you.html → Confirmation page after successful form submission

External Dependencies (via CDN):

Bootstrap 5.3.6 - Grid system, components, responsive design
Font Awesome 6 - Icons for all pages
Chart.js - Interactive bar charts on dashboard
Google Fonts - Barlow Condensed, Gugi typography
FlagCDN - 20×20 pixel country flags for dashboard
FormSubmit - Email form handling on contact page

All interactivity runs entirely in-browser — there is no separate backend, no Node.js server, no database. The single script.js file contains all JavaScript logic (500+ lines) and serves all pages safely through conditional DOM element checks.

Layer-by-Layer Breakdown

1️⃣ User Interface (HTML Pages)

The heart of the experience — clean, semantic, and purpose-driven.

Six semantic HTML pages with proper structure:

index.html → Main entry point with hero section, CO₂ counter display, climate facts panel, discovery cards for educational content
dash_board.html → Interactive dashboard with search bar, sortable table of 70 countries, Chart.js visualization, three view modes
articles.html → Static educational articles covering CO₂ trends, climate data analysis, earth system science, climate solutions
about.html → Project background, mission statement, data methodology explanation, impact information
contact.html → Contact form with name, email, message fields, FormSubmit integration
thank-you.html → Success confirmation with navigation back to site

Each page loads shared CSS stylesheet and single JavaScript file, ensuring consistency and maintainability.

2️⃣ Styling Layer (CSS + Bootstrap 5.3.6)

The visual personality of the project.

Location: assets/CSS/style.css (custom stylesheet)

Unified dark-mode design with teal accents (#00e6d2)
Built on Bootstrap 5.3.6 grid system for responsive layout
Smooth transitions (0.3s ease) and hover feedback
Accessibility-ready with high contrast and readable typography
Custom animations for digit counter and scroll indicators
Mobile-first approach, scales to 4K displays

Design Features:

Dark background: #222831 (deep charcoal)
Secondary background: #393e46 (medium gray for cards)
Accent color: #00e6d2 (bright teal for emphasis)
Text color: #eeeeee (light gray for readability)
Status colors: Success #6bcb77, Warning #f9ed69, Danger #ff2e63

💡 Goal: Modern, cinematic UI that communicates urgency with elegance.

3️⃣ Data Layer (Static JavaScript Arrays)

The educational "brain" — all emissions and CO₂ data are stored locally.

CO₂ Weekly Baseline:

const weeklyCO2 = [428.5, 428.6, 428.7, 428.8, 428.92357];

Emissions Data - 70 Countries:

const emissionsData = [
  { rank: 1, country: "China", code: "cn", total: 11470, percent: 30.9, perCapita: 8.05, trend: "up" },
  { rank: 2, country: "United States", code: "us", total: 5000, percent: 13.5, perCapita: 15.24, trend: "down" },
  // ... 68 more countries
];

Data Sourced From:

World Population Review (primary emissions data)
NOAA Global Monitoring Laboratory (CO₂ baseline)
Global Carbon Atlas (carbon accounting)
IPCC Reports (climate context)
NASA Climate Research (verification)

Storage: All 70 countries embedded directly in assets/JS/script.js File Size: ~40 KB (includes all logic + data) Load Time: <500ms for complete page load Works Offline: Yes - no external data dependencies Update Method: Manual updates to JavaScript array when new data becomes available

Idea: Transparent, open data that helps users learn by exploring.

4️⃣ Visualization Layer (Chart.js + Custom Logic)

Converts static numbers into interactive graphics.

Technology: Chart.js Version 3+

Chart Types:

Uses bar charts for clear emissions comparison
Supports three view modes for different perspectives
Responsive design adapts to all screen sizes

Custom Color Scheme:

Total Emissions: Teal #40c4c8 - represents data/technology
Per Capita: Yellow #f9ed69 - represents individual impact
Percentage: Red #ff2e63 - represents urgency/danger

Interactive Features:

Hover tooltips showing detailed country information
Click buttons to switch between view modes
Chart re-renders instantly on data changes
Dark background with light text for readability
Tooltip background: rgba(30, 30, 30, 0.9)
Grid lines: rgba(238, 238, 238, 0.1) (subtle)

Data Visualization:

Shows top 20 emitters from 70-country dataset
Automatically scales axis based on data range
Formats numbers with thousands separators
Includes legend with clear labeling

Purpose: Turn climate data into visual stories that engage curiosity.

5️⃣ Interaction Layer (Single script.js File)

The "motion engine" of the project — all user interactions happen here.

File Location: assets/JS/script.js (~500+ lines)

Core Functions:

updateCO2Display(value) - Animates digit transitions
renderTable(data) - Renders emissions table
updateTable() - Filters and sorts table
updateChart(type) - Renders Chart.js visualization
getTrendIcon(trend) - Returns trend indicators
createStatusBar(percent) - Creates visual impact bars

Event Listeners:

// Counter updates every 500ms
setInterval(() => {
  currentCO2 += secRise + noise;
  updateCO2Display(currentCO2);
}, 500);

// Search input filters in real-time
searchInput.addEventListener("input", updateTable);

// Column headers enable sorting
document.querySelectorAll(".sortable").forEach((header) => {
  header.addEventListener("click", updateTable);
});

// Chart buttons switch visualization modes
document.querySelectorAll("[data-chart-type]").forEach((button) => {
  button.addEventListener("click", () => updateChart(button.dataset.chartType));
});

Performance Optimizations:

Single script file reduces HTTP requests
Conditional DOM checks prevent errors on different pages
No external API calls - all data is local
Chart.js instance reuse prevents memory leaks
Debounced search and sort operations

Result: A fully interactive, immersive data experience with zero server dependency.

Data Flow Logic

[User opens index.html]
        ↓
[Browser requests: HTML + CSS + JS from GitHub Pages]
        ↓
[script.js initializes and checks for CO₂ counter elements]
        ↓
[If homepage: Start CO₂ counter animation every 500ms]
        ↓
[Display continuously updates: 428.92357 → 428.92358 → 428.92359...]
        ↓
[User clicks Dashboard link]
        ↓
[dash_board.html loads with same script.js]
        ↓
[script.js detects dashboard elements and initializes]
        ↓
[All 70 countries load into memory]
        ↓
[Chart.js renders bar chart of top 20 countries]
        ↓
[Table renders with all 70 countries]
        ↓
[User interacts: search/sort/chart view]
        ↓
[JavaScript functions filter and process data instantly]
        ↓
[DOM updates with new results (no page reload)]
        ↓
[Real-time feedback in browser]

Design Philosophy

Principle	Description
🌿 Simplicity	Built entirely with HTML, CSS, and JS — no frameworks or dependencies.
🔍 Transparency	All data visible in-code for learning and research.
💡 Interactivity	Visual storytelling through dynamic updates and motion.
⚡ Performance	Fast load times, minimal dependencies, optimized assets.
♿ Accessibility	WCAG-friendly design with high contrast and keyboard support.
🌎 Education-First	Built to teach climate data, not just display it.

In essence, the CO₂ Clock architecture transforms static data into a visual experience — where every number, color, and animation tells the story of our planet's atmosphere in real time.

Folder Structure

📦 co2clock
├── 📜 index.html #              🌍 Home page with CO₂ counter
├── 📜 dash_board.html #         📊 Dashboard with 70 countries
├── 📜 articles.html #           📚 Educational articles
├── 📜 about.html #              ℹ️ Project information
├── 📜 contact.html #            ✉️ Contact form
├── 📜 thank-you.html #          ✅ Form success page
├── 📁 assets/
│   ├── 📁 CSS/
│   │   └── 📄 style.css #       🎨 Unified stylesheet
│   ├── 📁 JS/
│   │   └── 📄 script.js #       ⚙️ All JavaScript logic (500+ lines)
│   ├── 📁 images/
│   │   ├── mockup.webp
│   │   ├── co2-display.gif
│   │   ├── dashboard.webp
│   │   ├── navigation.webp
│   │   ├── charts.webp
│   │   ├── world-map.webp
│   │   └── climate-facts.webp
│   └── 📁 articles/
│       ├── co2-trends.html
│       ├── climate-data-analysis.html
│       ├── earth-system-science.html
│       └── climate-solutions.html
└── 📜 README.md #               📖 This documentation

Features

Real-Time CO₂ Tracker

Animated digit counter showing current atmospheric CO₂ concentration
Starting at 428.92357 ppm based on NOAA atmospheric measurements
Updates every 500ms to show continuous rise
Custom animation using digit-stack technique with CSS transitions
Random variation (±0.0000001) to simulate natural atmospheric fluctuations
Smooth visual feedback as users watch CO₂ climb in real-time
Educational baseline showing ongoing emissions trends without live API data

Interactive Navigation

Fixed navbar at top with CO₂ Clock branding
Responsive design with Bootstrap 5.3.6 grid
Mobile hamburger menu for smaller screens
Active page indicators highlighting current location
Smooth scroll transitions between sections
Dark theme with teal accent color
Accessible navigation with proper ARIA labels

Global Emissions Dashboard

Complete dataset of 70 countries with comprehensive emissions metrics
Interactive search bar to filter countries in real-time
Sortable table by rank, country, total, percent, per capita, trend
Country flags displayed next to names via FlagCDN
Status indicators showing impact level (low, moderate, high, critical)
Trend arrows showing direction of emissions (up, down, steady)
Top 20 visualization with Chart.js bar chart
Multiple view modes (total, per capita, percentage)
Responsive data table with pagination information
Fast filtering - search across 70 countries in <100ms

Climate Impact Facts

CO₂ Levels at Record Highs - Atmospheric CO₂ concentrations are higher than at any point in the last 800,000 years
Global Temperatures Rising - The planet's average surface temperature has risen by 1.1°C since the late 19th century
Oceans Absorbing Heat - Oceans have absorbed over 90% of the excess heat trapped by greenhouse gases
Deforestation Impact - Forests absorb CO₂, but deforestation contributes significantly to emissions
Educational card design with icons for visual learning
Learn More button linking to detailed articles

Interactive Charts and Visualizations

Dynamic bar charts powered by Chart.js
Three view modes:
- Total Emissions (Mt) - teal colored
- Per Capita (t/person) - yellow colored
- Percentage of Global (%) - red colored
Top 20 countries displayed in each chart
Hover tooltips showing detailed information
Responsive layout adapts to all screen sizes
Dark theme with light text for readability
Instant switching between view modes
Automatic axis scaling based on data range

Search & Filter Functionality

Real-time search as user types
Case-insensitive country matching
Instant results <100ms response time
Displayed count showing filtered vs. total countries
Clear results button to reset search

Advanced Sorting

Click column headers to enable sorting
Toggle ascending/descending by clicking again
Visual indicators showing sort direction (↑ ↓)
Sort by any column: Rank, Country, Total, %, Per Capita, Trend
Maintains search filters while sorting

Educational Articles Hub

Curated climate science articles covering key topics
CO₂ Trends Analysis - historical data and projections
Climate Data Analysis - advanced interpretation techniques
Earth System Science - interconnected systems explanation
Climate Solutions - actionable steps and success stories
Discovery cards with images and navigation links
Mobile-friendly layout

Contact and Engagement

Contact form with name, email, message fields
Form validation for proper input
FormSubmit integration - emails go directly to developer
No backend required - everything client-side
Instant confirmation redirects to thank you page
Social media links - Facebook, Instagram, X (Twitter), Discord
GitHub integration - link to repository

Thank You Page

Form submission confirmation with success message
Friendly eco-themed design matching site aesthetic
Navigation options to return to home or explore articles
Consistent branding maintaining climate awareness theme
User-friendly layout with clear next steps

Responsive Design

Mobile-first approach ensuring great experience on all devices
Flexible layouts that adapt from 320px (mobile) to 2560px (4K)
Touch-friendly interfaces for mobile users
Optimized images in WebP format for fast loading
Fast loading times optimized for various connection speeds
Performance optimization maintaining 90+ Lighthouse scores

User Experience (UX)

User Stories

First Time Visitor Goals

I want to understand current atmospheric CO₂ levels and their significance
I want to learn about global carbon emissions by country
I want to access reliable, up-to-date climate data in an easy-to-understand format
I want to discover practical solutions for addressing climate change
I want to understand how climate change affects me personally

Returning Visitor Goals

I want to track changes in atmospheric CO₂ levels over time
I want to compare emissions data between different countries
I want to access new educational articles about climate science
I want to share specific data visualizations with others
I want to contact the developer with questions or feedback

Frequent User Goals

I want to monitor the latest climate data and trends
I want to access new educational content about climate solutions
I want to use the interactive dashboard for research or presentations
I want to cite this data in academic work or reports

Design

Color Scheme

Purpose	Color Code	Description
Primary Background	`#222831`	Deep dark charcoal used across all pages for a sleek, modern dark theme.
Secondary Background	`#393e46`	Medium gray for cards, dashboards, and section containers.
Accent Color	`#00e6d2`	Bright teal highlight for buttons, links, and data counters — represents clean energy and innovation.
Border Color	`#393e46`	Used for subtle dividers and element outlines to maintain structure without visual clutter.
Primary Text	`#eeeeee`	Light gray used for body text and headings to ensure strong readability on dark backgrounds.
🟢 Success	`#6bcb77`	Indicates positive trends or sustainable outcomes.
🟡 Warning	`#f9ed69`	Highlights cautionary or neutral data points.
🔴 Danger	`#ff2e63`	Used for critical alerts or negative environmental indicators.

Visual Identity:

The dark base represents the current climate crisis
Teal accents symbolize clean energy and innovation
Green/yellow indicators show positive progress
Red accents emphasize urgency and danger
Overall balance between urgency and optimism

Typography

Primary Font: "Lora", "Barlow Condensed", system-ui, sans-serif
- Combines elegance (Lora serif) with modern readability (Barlow Condensed sans-serif)
- Used for headings and body text across all pages
Numerical Display: "Courier New", "Barlow", Monaco, Consolas, monospace
- Monospace font for CO₂ counter creates digital, technical aesthetic
- Used for emission statistics and numerical data
Readability Enhancements:
- Increased letter spacing: 0.7px
- Line height: 1.6 for comfortable reading
- Font smoothing enabled for crisp rendering
- Contrast ratio meets WCAG AA standards

Imagery & Visual Identity

Hero Section: Background video of forest fire smoke representing climate emergency, overlaid with teal gradient
Dashboard: Transparent card backgrounds with blur effects creating futuristic "data visualization" environment
About Section: Polluted city image with green overlay representing both pollution and hope for restoration
Charts: Interactive Chart.js visuals styled with project color palette for consistency
Country Flags: 20×20px flags from FlagCDN for quick country identification
Icons: Font Awesome 6 icons throughout for unified, accessible iconography

Layout & Responsiveness

Framework: Bootstrap 5.3.6 for responsive grid and consistent spacing
Approach: Mobile-first design, scaling fluidly from 320px to 2560px+
Core Layout Techniques:
- CSS Grid for complex layouts
- Flexbox for component alignment
- Smooth transitions (0.3s ease) for all interactive elements
- Rounded corners (8px) and layered shadows for depth
Breakpoints:
- Mobile: 320px - 576px
- Tablet: 577px - 992px
- Desktop: 993px - 1200px
- Large: 1201px+
Section Themes:
- .theme-dark → Primary dark sections
- .theme-light → Light contrast bands for visual balance
Accessibility:
- High contrast text (WCAG AA compliant)
- Keyboard-navigable components
- Clear hierarchy optimized for screen readers
- Proper heading structure (h1 → h2 → h3)
- ARIA labels on interactive elements
- Focus indicators visible on all buttons

Design Summary

CO₂ Clock blends data visualization with environmental storytelling — a dark futuristic interface symbolizing current climate challenges, contrasted by bright teal elements representing hope, innovation, and progress. The design makes complex climate data accessible and emotionally engaging, encouraging action while remaining scientifically accurate.

Technologies Used

Languages

HTML5 - Semantic markup for structure and accessibility
CSS3 - Advanced styling with custom properties and responsive design
JavaScript ES6+ - Interactive functionality and data visualization

Frameworks & Libraries (Via CDN)

Bootstrap 5.3.6 - Responsive framework for rapid development
Chart.js 3+ - Interactive bar charts and data visualizations
Font Awesome 6 - Professional iconography (1700+ icons)
Google Fonts - Typography (Barlow Condensed, Gugi, Lora)

External Services

GitHub Pages - Free static site hosting
FormSubmit - Contact form email delivery
FlagCDN - Country flag images (20×20px)
jsDelivr & cdnjs - CDN for library distribution

Development Tools

Git - Version control
VS Code - Code editor
GitHub - Repository hosting
Chrome DevTools - Debugging and performance testing

Data Sources

NOAA Global Monitoring Laboratory - CO₂ baseline measurements
World Population Review - Emissions statistics
Global Carbon Atlas - Carbon accounting data
IPCC Reports - Climate science research
NASA Climate Research - Data verification

Testing

Website Performance Metrics

Lighthouse Audit Results:

Performance: 90+ (Fast loading, optimized resources)
Accessibility: 90+ (Screen reader friendly, keyboard navigation)
SEO: 90+ (Search engine optimized)
Best Practices: 90+ (Security, modern web standards)

Validator Testing

HTML

✅ All pages pass W3C HTML Validator with zero errors
✅ Semantic HTML5 elements used throughout
✅ ARIA labels implemented for screen reader compatibility
✅ Proper heading hierarchy (h1 > h2 > h3)
✅ Alt text on all images

CSS

✅ CSS passes W3C CSS Validator with zero errors
✅ Modern CSS features (Grid, Flexbox, custom properties)
✅ Responsive design tested across multiple breakpoints
✅ No deprecated properties

JavaScript

✅ Code passes JSHint validation with zero critical issues
✅ ES6+ features used appropriately
✅ Data arrays properly structured
✅ No console errors

Performance Testing

Lighthouse Performance Score: 90+ on all pages
PageSpeed Insights: Optimized for both mobile and desktop
Image Optimization: WebP format reduces file sizes by 30-40%
Code Minification: CSS and JS optimized for production
First Contentful Paint: <1.5 seconds
Time to Interactive: <3 seconds
Cumulative Layout Shift: <0.1

Accessibility Testing

✅ WAVE Evaluator: No errors detected
✅ Lighthouse Accessibility Score: 90+ on all pages
✅ Keyboard Navigation: All interactive elements accessible via Tab key
✅ Screen Reader Compatibility: Tested with NVDA and VoiceOver
✅ Color Contrast: WCAG AA compliant (4.5:1 minimum)
✅ Focus Indicators: Visible on all buttons and links

Browser Compatibility

Chrome (latest) ✅ Fully supported
Firefox (latest) ✅ Fully supported
Safari (latest) ✅ Fully supported
Edge (latest) ✅ Fully supported
Mobile Safari (iOS 12+) ✅ Fully supported
Chrome Mobile (Android 8+) ✅ Fully supported

Device Testing

Desktop (1920×1080) ✅ Fully tested
Laptop (1366×768) ✅ Fully tested
Tablet (768×1024) ✅ Fully tested
Mobile (375×667) ✅ Fully tested
Large Displays (2560×1440) ✅ Fully tested

User Testing

✅ Navigation flow - Users easily find information across all pages
✅ Data interpretation - Charts and visualizations are intuitive
✅ Form submission - Contact form works reliably
✅ Mobile experience - Touch interfaces feel natural
✅ Page transitions - Smooth navigation between all pages
✅ Search functionality - Filters work instantly and accurately
✅ Sorting functionality - Column headers sort correctly
✅ Chart switching - View mode changes work smoothly

Known Issues & Limitations

Chart animations may reduce on older devices (IE11) for performance
Video background fallback to static image on very slow connections
Some older browsers (IE11) require polyfills for modern JavaScript
FlagCDN service outage would prevent country flags from loading

Deployment

GitHub Pages Deployment

The site is deployed using GitHub Pages for free static hosting.

Deployment Process:

Navigate to GitHub repository Settings
Scroll to Pages section in left sidebar
Under Source, select Deploy from a branch
Choose main branch and / (root) folder
Click Save
GitHub automatically builds and deploys the site
Site becomes available at: https://boneyphilip.github.io/co2clock/

Deployment Benefits:

✅ Free hosting (no cost)
✅ Automatic HTTPS (secure)
✅ Custom domain support
✅ Version control integration
✅ Zero configuration needed

Local Development

To run the project locally:

# Clone the repository
git clone https://github.com/boneyphilip/co2clock.git

# Navigate to project directory
cd co2clock

# Option 1: Open with Live Server (VS Code extension)
# Right-click index.html → "Open with Live Server"

# Option 2: Use Python's built-in server
python -m http.server 8000
# Then visit: http://localhost:8000

# Option 3: Use Node's simple server
npx http-server
# Then visit: http://localhost:8080

# Project structure:
# - index.html (homepage with CO₂ tracker)
# - dash_board.html (emissions dashboard)
# - articles.html (educational content hub)
# - about.html (project information)
# - contact.html (contact form)
# - thank-you.html (form submission confirmation)
# - assets/CSS/style.css (unified stylesheet)
# - assets/JS/script.js (all JavaScript logic)
# - assets/images/* (optimized media)

Requirements:

A modern web browser (Chrome, Firefox, Safari, Edge)
No build process required
No npm packages needed
No backend server required
All code is pure HTML/CSS/JavaScript

Environment Variables

✅ No environment variables required
✅ All data is stored locally in JavaScript files
✅ No external API keys needed
✅ No database connections
✅ FormSubmit handles contact emails automatically

Credits

Content

Baseline CO₂ data - Inspired by NOAA Global Monitoring Laboratory measurements
Emissions statistics - Compiled from World Population Review and Global Carbon Atlas
Scientific information - IPCC reports and NASA climate research
Educational content - Various peer-reviewed climate science papers
Country data - Manually researched and compiled into JavaScript arrays

Code

Chart.js integration - Official Chart.js documentation and examples
Bootstrap components - Bootstrap 5.3.6 documentation
Responsive design patterns - CSS Grid and Flexbox best practices
Accessibility features - WCAG 2.1 guidelines and standards

Media

Hero background video - Climate and emissions visualization
Climate images - Unsplash and Pexels (credited in alt text)
Icons - Font Awesome 6.0+ icon library
Country flags - FlagCDN for country flag images
Fonts - Google Fonts (Barlow Condensed, Gugi, Lora)

Inspiration

NASA Climate Change - Data visualization approaches
Climate.gov - Educational content structure
Carbon Brief - Scientific communication style
Our World in Data - Interactive chart designs
Wired Magazine - Climate journalism inspiration

Special Thanks

Code Institute - Project structure and best practices
Climate science community - For making data publicly available
Open source contributors - Chart.js, Bootstrap, Font Awesome libraries
Environmental educators - For inspiration on making climate data accessible

Future Enhancements

Real-time API integration - Connect to actual NOAA monitoring stations for live data
Historical data timeline - Interactive CO₂ trends spanning centuries
Personal carbon calculator - Help users understand their individual impact
Regional data breakdown - State/province level emissions data
Multilingual support - Translate content for global accessibility
Data export features - Allow users to download datasets (CSV, JSON)
User accounts - Save preferences and track learning progress
Mobile app - Native iOS and Android applications
Advanced analytics - Trend analysis and predictions
Community features - User forums and discussion boards
Emissions reduction tracker - Track personal or organizational efforts
Gamification - Points, badges, and leaderboards for engagement

Contact

Developer: Boney Philip

Email: boneyphilip@ymail.com

GitHub: @boneyphilip

Repository: https://github.com/boneyphilip/co2clock

Live Site: https://boneyphilip.github.io/co2clock/

Social Media:

Facebook: CO₂ Clock
Instagram: @co2clock
X (Twitter): @co2clock
Discord: Climate Community

License

This project is open source and available for educational and non-commercial use.

Contributing

Contributions are welcome! If you'd like to contribute:

Fork the repository
Create a feature branch (git checkout -b feature/YourFeature)
Commit your changes (git commit -m 'Add YourFeature')
Push to the branch (git push origin feature/YourFeature)
Open a Pull Request

Built with 🌱 for climate awareness and action

Last Updated: 2025
Version: 1.0.0
Status: Active Development

Name		Name	Last commit message	Last commit date
Latest commit History 77 Commits
assets		assets
.nojekyll		.nojekyll
README.md		README.md
about.html		about.html
articles.html		articles.html
contact.html		contact.html
dash_board.html		dash_board.html
index.html		index.html
thank-you.html		thank-you.html

Folders and files

Latest commit

History

Repository files navigation