Modernize UI: sync portfolio palette, remove Bootstrap, fix dead code, add Inter font, improve accessibility and responsive design

Author: yumeangelica

README.md

@@ -1,53 +1,59 @@
 # Global Population Charts
 
-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.
+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.
+
+Originally developed in 2021, modernized in 2024–2026 with portfolio-synced design, accessibility support, and responsive layout.
 
 ## Features
 
-- **Country Code Input**: Enter any three-letter country code (ISO 3166-1 alpha-3)
-- **Comprehensive Indicators**: Choose from 34 demographic indicators including:
-  - Population totals and growth rates
-  - Age distribution and dependency ratios
-  - Birth and death rates, fertility rates
-  - Life expectancy and mortality rates
-  - Urban and rural population data
-  - Population density and survival rates
-- **Interactive Charts**: Beautiful, responsive charts powered by Chart.js with custom styling
-- **Accessibility First**: WCAG 2.1 AA compliant with screen reader support and keyboard navigation
-- **Responsive Design**: Optimized for all devices from mobile to desktop
-- **Modern UI**: Clean, professional design with a cohesive pink color palette
-- **Real-time Data**: Fetches latest demographic data from the World Bank API
+- **Country Code Input** — enter any three-letter ISO 3166-1 alpha-3 code
+- **34 Demographic Indicators** — population totals, growth rates, age distribution, dependency ratios, birth/death rates, fertility, life expectancy, mortality, urban/rural data, density, survival rates
+- **Interactive Charts** — responsive bar charts powered by Chart.js with custom portfolio-themed colors
+- **Input Validation** — 3-letter code validation with error feedback
+- **Loading States** — button state changes during API fetch
+- **Accessibility** — ARIA labels, keyboard navigation (Enter to submit), screen reader announcements
+- **Responsive Design** — mobile-first layout from 480px to desktop
 
 ## Technologies
 
-- **Vanilla JavaScript** - Core functionality and API integration
-- **CSS3** - Modern styling with CSS variables and animations
-- **HTML5** - Semantic markup with accessibility features
-- **Bootstrap 5.3.7** - Responsive grid system and components
-- **Chart.js 4.5.0** - Interactive chart visualization
-- **World Bank API** - Real-time demographic data
+- **Vanilla JavaScript (ES6+)** — async/await, DOM manipulation, no frameworks
+- **HTML5** — semantic markup with ARIA attributes
+- **CSS3** — custom properties, Flexbox, responsive design
+- **Google Fonts (Inter)** — consistent typography across portfolio
+- **Chart.js 4.5.0** — interactive data visualization
+- **World Bank API** — real-time demographic data
+- **Zero Framework Dependencies** — no Bootstrap, no npm packages
+
+## Getting Started
+
+1. Open `index.html` in any modern web browser
+2. Enter a valid three-letter country code (e.g., `JPN`, `USA`, `FIN`)
+3. Select a population indicator from the dropdown
+4. Click "Generate Chart" or press Enter
 
-## Quick Start
+## Project Structure
 
-1. **Enter Country Code**: Input a valid three-letter country code (e.g., `JPN`, `USA`, `FIN`)
-2. **Select Indicator**: Choose from population metrics in the dropdown
-3. **Generate Chart**: Click "Generate Chart" or press Enter
-4. **Explore Data**: View interactive charts with hover details and responsive design
+```
+├── index.html      # Main HTML document
+├── styles.css      # All styles with CSS custom properties
+├── app.js          # API integration, chart rendering, validation
+├── copyright.js    # Dynamic footer copyright year
+├── LICENSE         # CC BY-NC-SA 4.0
+└── README.md
+```
 
-## 2025 Modernization Updates
+## Browser Support
 
-- Enhanced error handling and input validation
-- Improved accessibility with ARIA labels and keyboard navigation
-- Modern responsive design with CSS Grid and Flexbox
-- Loading states and user feedback improvements
-- Security enhancements (noopener, noreferrer)
-- Professional color scheme and typography
-- Performance optimizations and code refactoring
+- Chrome 88+
+- Firefox 85+
+- Safari 14+
+- Edge 88+
+- Mobile: iOS Safari, Chrome Mobile, Samsung Internet
 
 ## License
 
 This project is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. See the [LICENSE](LICENSE) file for details.
 
 ---
 
-**Created with love by [yumeangelica](https://yumeangelica.github.io) | 2021-2025**
+**Created with love by [yumeangelica](https://yumeangelica.github.io) | 2021–2026**

app.js

@@ -381,7 +381,6 @@ document.addEventListener('DOMContentLoaded', () => {
     elements.chartCanvas.setAttribute('aria-label', chartDescription);
 
     // Show chart container with animation
-    elements.chartContainer.style.display = 'block';
     elements.chartContainer.classList.add('show');
 
     // Announce chart completion to screen readers
@@ -408,4 +407,4 @@ document.addEventListener('DOMContentLoaded', () => {
       }
     }, 3000);
   }
-});
+});

copyright.js

@@ -1,7 +1,6 @@
 /**
  * Display copyright information in the footer
  * Automatically updates the copyright year to the current year
- * Uses optional chaining for safe DOM manipulation
  */
 const showCopyRight = () => {
   const year = new Date().getFullYear();

index.html

@@ -3,113 +3,83 @@
 
 <head>
   <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
   <title>Global Population Charts - Interactive Data Visualization Tool</title>
   <meta name="description"
-    content="Create interactive population charts for any country using World Bank data. Beautiful, modern data visualization tool with accessibility features.">
-  <meta name="keywords" content="population charts, data visualization, world bank data, interactive charts, country statistics">
+    content="Create interactive population charts for any country using World Bank data. Modern data visualization tool with accessibility features.">
   <meta name="author" content="yumeangelica">
-  <meta name="robots" content="index, follow">
-  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet"
-    integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr" crossorigin="anonymous">
+  <meta name="theme-color" content="#b24d89">
+  <link rel="icon"
+    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>">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="./styles.css">
   <script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.0/dist/chart.umd.min.js"></script>
-
   <script src="./app.js" defer></script>
   <script src="./copyright.js" defer></script>
 </head>
 
 <body>
-  <div class="app-container">
-    <main>
-      <div class="container">
-        <!-- Hero Section -->
-        <section class="hero-section text-center mb-5">
-          <div class="hero-content">
-            <h1 class="display-4 fw-bold mb-3">Global Population Charts</h1>
-            <p class="lead text-muted mb-4">Visualize global population data with interactive charts</p>
-            <div class="hero-links">
-              <a href="https://github.com/yumeangelica/global-population-charts" class="external-link" target="_blank" rel="noopener noreferrer"
-                aria-label="View source code on GitHub (opens in new tab)">
-                View Source Code
-              </a>
-              <a href="https://yumeangelica.github.io" class="external-link" target="_blank" rel="noopener noreferrer"
-                aria-label="View portfolio website (opens in new tab)">
-                View Portfolio
-              </a>
-            </div>
-          </div>
-        </section>
+  <main>
+    <h1>📊 Global Population Charts</h1>
+
+    <nav class="navigation-links" aria-label="External links">
+      <a href="https://github.com/yumeangelica/global-population-charts" class="external-link" target="_blank"
+        rel="noopener noreferrer" aria-label="View source code on GitHub (opens in new tab)">Source Code</a>
+      <a href="https://yumeangelica.github.io" class="external-link" target="_blank" rel="noopener noreferrer"
+        aria-label="Visit portfolio website (opens in new tab)">My Portfolio</a>
+    </nav>
+
+    <p class="subtitle">Visualize global population data with interactive charts</p>
+
+    <!-- Input form -->
+    <div class="form-card" role="form" aria-labelledby="formTitle">
+      <span class="visually-hidden" id="formTitle">Population Chart Generator Form</span>
 
-        <!-- Main Content Section -->
-        <section class="main-content">
-          <div class="row justify-content-center">
-            <div class="col-lg-8 col-xl-6">
-              <!-- Input Form Card -->
-              <div class="input-card mb-4" role="form" aria-labelledby="formTitle">
-                <div class="card-body">
-                  <div class="visually-hidden" id="formTitle">Population Chart Generator Form</div>
-                  <div class="form-section mb-4">
-                    <label for="country" class="form-label">
-                      <h5 class="mb-2">Country Code</h5>
-                      <small class="text-muted" id="countryHelp">Enter three-letter country code (e.g., JPN, USA, FIN)</small>
-                    </label>
-                    <input type="text" id="country" placeholder="Country code (e.g., JPN)" maxlength="3" class="form-control form-input"
-                      aria-describedby="countryHelp" autocomplete="off" aria-required="true" aria-invalid="false">
-                  </div>
+      <div class="form-section">
+        <label for="country">
+          <h4>Country Code</h4>
+          <small id="countryHelp">Enter three-letter code (e.g., JPN, USA, FIN)</small>
+        </label>
+        <input type="text" id="country" placeholder="e.g., JPN" maxlength="3" class="form-input"
+          aria-describedby="countryHelp" autocomplete="off" aria-required="true" aria-invalid="false">
+      </div>
 
-                  <div class="form-section mb-4">
-                    <label for="indicatorCode" class="form-label">
-                      <h5 class="mb-2">Population Indicator</h5>
-                      <small class="text-muted" id="indicatorHelp">Select the type of population data to visualize</small>
-                    </label>
-                    <select id="indicatorCode" class="form-select" aria-describedby="indicatorHelp" aria-required="true" aria-invalid="false">
-                      <option value="">Choose an indicator...</option>
-                    </select>
-                  </div>
+      <div class="form-section">
+        <label for="indicatorCode">
+          <h4>Population Indicator</h4>
+          <small id="indicatorHelp">Select the type of population data to visualize</small>
+        </label>
+        <select id="indicatorCode" class="form-select" aria-describedby="indicatorHelp" aria-required="true"
+          aria-invalid="false">
+          <option value="">Choose an indicator...</option>
+        </select>
+      </div>
 
-                  <div class="form-section text-center">
-                    <button class="btn btn-primary" id="renderButton" type="button" aria-describedby="buttonHelp"
-                      aria-label="Generate population chart">
-                      <span class="btn-text">Generate Chart</span>
-                      <span class="btn-icon" aria-hidden="true">📊</span>
-                    </button>
-                    <small class="text-muted d-block mt-2" id="buttonHelp">Click to create chart or press Enter</small>
-                  </div>
-                </div>
-              </div>
+      <div class="form-section form-actions">
+        <button class="btn-primary" id="renderButton" type="button" aria-label="Generate population chart">
+          <span class="btn-text">Generate Chart</span>
+          <span class="btn-icon" aria-hidden="true">📊</span>
+        </button>
+        <small class="help-hint">Click to create chart or press Enter</small>
+      </div>
 
-              <!-- Help Text -->
-              <div class="text-center mb-4">
-                <small class="help-text">
-                  Need help finding country codes?
-                  <a href="https://en.wikipedia.org/wiki/ISO_3166-1#Current_codes" target="_blank" rel="noopener noreferrer"
-                    aria-label="View complete country code list on Wikipedia (opens in new tab)">View complete list</a>
-                </small>
-              </div>
-            </div>
-          </div>
+      <small class="help-text">
+        Need help finding country codes?
+        <a href="https://en.wikipedia.org/wiki/ISO_3166-1#Current_codes" target="_blank" rel="noopener noreferrer"
+          aria-label="View complete country code list on Wikipedia (opens in new tab)">View complete list</a>
+      </small>
+    </div>
 
-          <!-- Chart Section -->
-          <div class="row justify-content-center">
-            <div class="col-12">
-              <div class="chart-container" id="chartContainer" role="region" aria-labelledby="chartTitle">
-                <div class="chart-header text-center mb-3">
-                  <h3 class="chart-title" id="chartTitle">Population Data Chart</h3>
-                </div>
-                <div class="chart-wrapper">
-                  <canvas id="myChart" role="img" aria-label="Population data chart will be displayed here after generating"></canvas>
-                </div>
-              </div>
-            </div>
-          </div>
-        </section>
+    <!-- Chart -->
+    <div class="chart-container" id="chartContainer" role="region" aria-labelledby="chartTitle">
+      <h3 class="chart-title" id="chartTitle">Population Data Chart</h3>
+      <div class="chart-wrapper">
+        <canvas id="myChart" role="img" aria-label="Population data chart will be displayed here after generating"></canvas>
       </div>
-    </main>
-    <footer id="copyRight" class="text-center mt-4"></footer>
-  </div>
-  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js"
-    integrity="sha384-ndDqU0Gzau9qJ1lfW4pNLlhNTkCfHzAVBReH9diLlvGRem5+R9g2FzA8ZGN954O5Q" crossorigin="anonymous"></script>
+    </div>
+  </main>
+
+  <footer id="copyRight" aria-label="Copyright information"></footer>
 </body>
 
 </html>