Skip to content

Commit 401c97d

Browse files
yumeangelicayumeangelica
authored
Merge pull request #9 from yumeangelica/fix/2026-modernization
Modernize UI: sync portfolio palette, remove Bootstrap, fix dead code…
2 parents 5988551 + bd54c8b commit 401c97d

5 files changed

Lines changed: 386 additions & 578 deletions

File tree

‎README.md‎

Lines changed: 40 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,59 @@
11
# Global Population Charts
22

3-
Originally developed in 2021, this application has been **modernized in 2025** to showcase contemporary web development practices while maintaining its core vanilla JavaScript foundation. The app visualizes global population data through interactive charts, allowing users to explore demographic trends for any country using World Bank data.
3+
A vanilla JavaScript application that visualizes global population data through interactive charts, using World Bank API data. Zero framework dependencies — only Chart.js for visualization.
4+
5+
Originally developed in 2021, modernized in 2024–2026 with portfolio-synced design, accessibility support, and responsive layout.
46

57
## Features
68

7-
- **Country Code Input**: Enter any three-letter country code (ISO 3166-1 alpha-3)
8-
- **Comprehensive Indicators**: Choose from 34 demographic indicators including:
9-
- Population totals and growth rates
10-
- Age distribution and dependency ratios
11-
- Birth and death rates, fertility rates
12-
- Life expectancy and mortality rates
13-
- Urban and rural population data
14-
- Population density and survival rates
15-
- **Interactive Charts**: Beautiful, responsive charts powered by Chart.js with custom styling
16-
- **Accessibility First**: WCAG 2.1 AA compliant with screen reader support and keyboard navigation
17-
- **Responsive Design**: Optimized for all devices from mobile to desktop
18-
- **Modern UI**: Clean, professional design with a cohesive pink color palette
19-
- **Real-time Data**: Fetches latest demographic data from the World Bank API
9+
- **Country Code Input** — enter any three-letter ISO 3166-1 alpha-3 code
10+
- **34 Demographic Indicators** — population totals, growth rates, age distribution, dependency ratios, birth/death rates, fertility, life expectancy, mortality, urban/rural data, density, survival rates
11+
- **Interactive Charts** — responsive bar charts powered by Chart.js with custom portfolio-themed colors
12+
- **Input Validation** — 3-letter code validation with error feedback
13+
- **Loading States** — button state changes during API fetch
14+
- **Accessibility** — ARIA labels, keyboard navigation (Enter to submit), screen reader announcements
15+
- **Responsive Design** — mobile-first layout from 480px to desktop
2016

2117
## Technologies
2218

23-
- **Vanilla JavaScript** - Core functionality and API integration
24-
- **CSS3** - Modern styling with CSS variables and animations
25-
- **HTML5** - Semantic markup with accessibility features
26-
- **Bootstrap 5.3.7** - Responsive grid system and components
27-
- **Chart.js 4.5.0** - Interactive chart visualization
28-
- **World Bank API** - Real-time demographic data
19+
- **Vanilla JavaScript (ES6+)** — async/await, DOM manipulation, no frameworks
20+
- **HTML5** — semantic markup with ARIA attributes
21+
- **CSS3** — custom properties, Flexbox, responsive design
22+
- **Google Fonts (Inter)** — consistent typography across portfolio
23+
- **Chart.js 4.5.0** — interactive data visualization
24+
- **World Bank API** — real-time demographic data
25+
- **Zero Framework Dependencies** — no Bootstrap, no npm packages
26+
27+
## Getting Started
28+
29+
1. Open `index.html` in any modern web browser
30+
2. Enter a valid three-letter country code (e.g., `JPN`, `USA`, `FIN`)
31+
3. Select a population indicator from the dropdown
32+
4. Click "Generate Chart" or press Enter
2933

30-
## Quick Start
34+
## Project Structure
3135

32-
1. **Enter Country Code**: Input a valid three-letter country code (e.g., `JPN`, `USA`, `FIN`)
33-
2. **Select Indicator**: Choose from population metrics in the dropdown
34-
3. **Generate Chart**: Click "Generate Chart" or press Enter
35-
4. **Explore Data**: View interactive charts with hover details and responsive design
36+
```
37+
├── index.html # Main HTML document
38+
├── styles.css # All styles with CSS custom properties
39+
├── app.js # API integration, chart rendering, validation
40+
├── copyright.js # Dynamic footer copyright year
41+
├── LICENSE # CC BY-NC-SA 4.0
42+
└── README.md
43+
```
3644

37-
## 2025 Modernization Updates
45+
## Browser Support
3846

39-
- Enhanced error handling and input validation
40-
- Improved accessibility with ARIA labels and keyboard navigation
41-
- Modern responsive design with CSS Grid and Flexbox
42-
- Loading states and user feedback improvements
43-
- Security enhancements (noopener, noreferrer)
44-
- Professional color scheme and typography
45-
- Performance optimizations and code refactoring
47+
- Chrome 88+
48+
- Firefox 85+
49+
- Safari 14+
50+
- Edge 88+
51+
- Mobile: iOS Safari, Chrome Mobile, Samsung Internet
4652

4753
## License
4854

4955
This project is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. See the [LICENSE](LICENSE) file for details.
5056

5157
---
5258

53-
**Created with love by [yumeangelica](https://yumeangelica.github.io) | 2021-2025**
59+
**Created with love by [yumeangelica](https://yumeangelica.github.io) | 2021–2026**

‎app.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -381,7 +381,6 @@ document.addEventListener('DOMContentLoaded', () => {
381381
elements.chartCanvas.setAttribute('aria-label', chartDescription);
382382

383383
// Show chart container with animation
384-
elements.chartContainer.style.display = 'block';
385384
elements.chartContainer.classList.add('show');
386385

387386
// Announce chart completion to screen readers
@@ -408,4 +407,4 @@ document.addEventListener('DOMContentLoaded', () => {
408407
}
409408
}, 3000);
410409
}
411-
});
410+
});

‎copyright.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
/**
22
* Display copyright information in the footer
33
* Automatically updates the copyright year to the current year
4-
* Uses optional chaining for safe DOM manipulation
54
*/
65
const showCopyRight = () => {
76
const year = new Date().getFullYear();

‎index.html‎

Lines changed: 61 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -3,113 +3,83 @@
33

44
<head>
55
<meta charset="UTF-8">
6-
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
6+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
77
<title>Global Population Charts - Interactive Data Visualization Tool</title>
88
<meta name="description"
9-
content="Create interactive population charts for any country using World Bank data. Beautiful, modern data visualization tool with accessibility features.">
10-
<meta name="keywords" content="population charts, data visualization, world bank data, interactive charts, country statistics">
9+
content="Create interactive population charts for any country using World Bank data. Modern data visualization tool with accessibility features.">
1110
<meta name="author" content="yumeangelica">
12-
<meta name="robots" content="index, follow">
13-
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet"
14-
integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr" crossorigin="anonymous">
11+
<meta name="theme-color" content="#b24d89">
12+
<link rel="icon"
13+
href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📊</text></svg>">
14+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
1515
<link rel="stylesheet" href="./styles.css">
1616
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.0/dist/chart.umd.min.js"></script>
17-
1817
<script src="./app.js" defer></script>
1918
<script src="./copyright.js" defer></script>
2019
</head>
2120

2221
<body>
23-
<div class="app-container">
24-
<main>
25-
<div class="container">
26-
<!-- Hero Section -->
27-
<section class="hero-section text-center mb-5">
28-
<div class="hero-content">
29-
<h1 class="display-4 fw-bold mb-3">Global Population Charts</h1>
30-
<p class="lead text-muted mb-4">Visualize global population data with interactive charts</p>
31-
<div class="hero-links">
32-
<a href="https://github.com/yumeangelica/global-population-charts" class="external-link" target="_blank" rel="noopener noreferrer"
33-
aria-label="View source code on GitHub (opens in new tab)">
34-
View Source Code
35-
</a>
36-
<a href="https://yumeangelica.github.io" class="external-link" target="_blank" rel="noopener noreferrer"
37-
aria-label="View portfolio website (opens in new tab)">
38-
View Portfolio
39-
</a>
40-
</div>
41-
</div>
42-
</section>
22+
<main>
23+
<h1>📊 Global Population Charts</h1>
24+
25+
<nav class="navigation-links" aria-label="External links">
26+
<a href="https://github.com/yumeangelica/global-population-charts" class="external-link" target="_blank"
27+
rel="noopener noreferrer" aria-label="View source code on GitHub (opens in new tab)">Source Code</a>
28+
<a href="https://yumeangelica.github.io" class="external-link" target="_blank" rel="noopener noreferrer"
29+
aria-label="Visit portfolio website (opens in new tab)">My Portfolio</a>
30+
</nav>
31+
32+
<p class="subtitle">Visualize global population data with interactive charts</p>
33+
34+
<!-- Input form -->
35+
<div class="form-card" role="form" aria-labelledby="formTitle">
36+
<span class="visually-hidden" id="formTitle">Population Chart Generator Form</span>
4337

44-
<!-- Main Content Section -->
45-
<section class="main-content">
46-
<div class="row justify-content-center">
47-
<div class="col-lg-8 col-xl-6">
48-
<!-- Input Form Card -->
49-
<div class="input-card mb-4" role="form" aria-labelledby="formTitle">
50-
<div class="card-body">
51-
<div class="visually-hidden" id="formTitle">Population Chart Generator Form</div>
52-
<div class="form-section mb-4">
53-
<label for="country" class="form-label">
54-
<h5 class="mb-2">Country Code</h5>
55-
<small class="text-muted" id="countryHelp">Enter three-letter country code (e.g., JPN, USA, FIN)</small>
56-
</label>
57-
<input type="text" id="country" placeholder="Country code (e.g., JPN)" maxlength="3" class="form-control form-input"
58-
aria-describedby="countryHelp" autocomplete="off" aria-required="true" aria-invalid="false">
59-
</div>
38+
<div class="form-section">
39+
<label for="country">
40+
<h4>Country Code</h4>
41+
<small id="countryHelp">Enter three-letter code (e.g., JPN, USA, FIN)</small>
42+
</label>
43+
<input type="text" id="country" placeholder="e.g., JPN" maxlength="3" class="form-input"
44+
aria-describedby="countryHelp" autocomplete="off" aria-required="true" aria-invalid="false">
45+
</div>
6046

61-
<div class="form-section mb-4">
62-
<label for="indicatorCode" class="form-label">
63-
<h5 class="mb-2">Population Indicator</h5>
64-
<small class="text-muted" id="indicatorHelp">Select the type of population data to visualize</small>
65-
</label>
66-
<select id="indicatorCode" class="form-select" aria-describedby="indicatorHelp" aria-required="true" aria-invalid="false">
67-
<option value="">Choose an indicator...</option>
68-
</select>
69-
</div>
47+
<div class="form-section">
48+
<label for="indicatorCode">
49+
<h4>Population Indicator</h4>
50+
<small id="indicatorHelp">Select the type of population data to visualize</small>
51+
</label>
52+
<select id="indicatorCode" class="form-select" aria-describedby="indicatorHelp" aria-required="true"
53+
aria-invalid="false">
54+
<option value="">Choose an indicator...</option>
55+
</select>
56+
</div>
7057

71-
<div class="form-section text-center">
72-
<button class="btn btn-primary" id="renderButton" type="button" aria-describedby="buttonHelp"
73-
aria-label="Generate population chart">
74-
<span class="btn-text">Generate Chart</span>
75-
<span class="btn-icon" aria-hidden="true">📊</span>
76-
</button>
77-
<small class="text-muted d-block mt-2" id="buttonHelp">Click to create chart or press Enter</small>
78-
</div>
79-
</div>
80-
</div>
58+
<div class="form-section form-actions">
59+
<button class="btn-primary" id="renderButton" type="button" aria-label="Generate population chart">
60+
<span class="btn-text">Generate Chart</span>
61+
<span class="btn-icon" aria-hidden="true">📊</span>
62+
</button>
63+
<small class="help-hint">Click to create chart or press Enter</small>
64+
</div>
8165

82-
<!-- Help Text -->
83-
<div class="text-center mb-4">
84-
<small class="help-text">
85-
Need help finding country codes?
86-
<a href="https://en.wikipedia.org/wiki/ISO_3166-1#Current_codes" target="_blank" rel="noopener noreferrer"
87-
aria-label="View complete country code list on Wikipedia (opens in new tab)">View complete list</a>
88-
</small>
89-
</div>
90-
</div>
91-
</div>
66+
<small class="help-text">
67+
Need help finding country codes?
68+
<a href="https://en.wikipedia.org/wiki/ISO_3166-1#Current_codes" target="_blank" rel="noopener noreferrer"
69+
aria-label="View complete country code list on Wikipedia (opens in new tab)">View complete list</a>
70+
</small>
71+
</div>
9272

93-
<!-- Chart Section -->
94-
<div class="row justify-content-center">
95-
<div class="col-12">
96-
<div class="chart-container" id="chartContainer" role="region" aria-labelledby="chartTitle">
97-
<div class="chart-header text-center mb-3">
98-
<h3 class="chart-title" id="chartTitle">Population Data Chart</h3>
99-
</div>
100-
<div class="chart-wrapper">
101-
<canvas id="myChart" role="img" aria-label="Population data chart will be displayed here after generating"></canvas>
102-
</div>
103-
</div>
104-
</div>
105-
</div>
106-
</section>
73+
<!-- Chart -->
74+
<div class="chart-container" id="chartContainer" role="region" aria-labelledby="chartTitle">
75+
<h3 class="chart-title" id="chartTitle">Population Data Chart</h3>
76+
<div class="chart-wrapper">
77+
<canvas id="myChart" role="img" aria-label="Population data chart will be displayed here after generating"></canvas>
10778
</div>
108-
</main>
109-
<footer id="copyRight" class="text-center mt-4"></footer>
110-
</div>
111-
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js"
112-
integrity="sha384-ndDqU0Gzau9qJ1lfW4pNLlhNTkCfHzAVBReH9diLlvGRem5+R9g2FzA8ZGN954O5Q" crossorigin="anonymous"></script>
79+
</div>
80+
</main>
81+
82+
<footer id="copyRight" aria-label="Copyright information"></footer>
11383
</body>
11484

11585
</html>

0 commit comments

Comments
 (0)