Toggle buttons

Author: eoussama

src/index.html

@@ -144,7 +144,18 @@ <h5 class="card-title">Recovered</h5>
                 <h5 class="card-title">Yearly Stats</h5>
               </div>
 
-              <div class="col">
+              <div class="col d-flex justify-content-end">
+                <button
+                  type="button"
+                  id="chart-line-btn"
+                  class="btn btn-primary"
+                >
+                  <img
+                    src="images/icons/maximize.svg"
+                    alt="Maximize icon"
+                  >
+                </button>
+
                 <select
                   class="form-select"
                   id="chart-line-select"
@@ -174,7 +185,18 @@ <h5 class="card-title">Yearly Stats</h5>
                 <h5 class="card-title">Yearly Vaccinations by Country</h5>
               </div>
 
-              <div class="col">
+              <div class="col d-flex justify-content-end">
+                <button
+                  type="button"
+                  id="chart-map-btn"
+                  class="btn btn-primary"
+                >
+                  <img
+                    src="images/icons/maximize.svg"
+                    alt="Maximize icon"
+                  >
+                </button>
+
                 <select
                   class="form-select"
                   id="chart-map-select"

src/scripts/chart.js

@@ -1,8 +1,9 @@
 import { getHistoricalData } from './api.js';
-import { populateSelect, getDataByMonth, sendLoadEvent } from './utils.js';
+import { populateSelect, getDataByMonth, sendLoadEvent, toggleButton } from './utils.js';
 
 window.addEventListener('DOMContentLoaded', async () => {
   let lineChart;
+
   const data = await getHistoricalData();
   const ctx = document.getElementById('chart-line');
 
@@ -12,6 +13,8 @@ window.addEventListener('DOMContentLoaded', async () => {
   const yearRange = Math.abs(endYear - startYear + 1);
   const years = Array(yearRange).fill(startYear).map((_, i) => startYear + i);
 
+  toggleButton('chart-line-btn', console.log);
+
   sendLoadEvent(() => {
     populateSelect('chart-line-select', years, loadChart, data);
     loadChart(data);

src/scripts/map.js

@@ -1,5 +1,5 @@
 import { getVaccinationData } from './api.js';
-import { populateSelect, getDataByMonth, sendLoadEvent } from './utils.js';
+import { populateSelect, getDataByMonth, sendLoadEvent, toggleButton } from './utils.js';
 
 window.addEventListener('DOMContentLoaded', async () => {
   let mapChart;
@@ -13,6 +13,8 @@ window.addEventListener('DOMContentLoaded', async () => {
   const yearRange = Math.abs(endYear - startYear + 1);
   const years = Array(yearRange).fill(startYear).map((_, i) => startYear + i);
 
+  toggleButton('chart-map-btn', console.log);
+
   sendLoadEvent(() => {
     populateSelect('chart-map-select', years, loadChart, data);
     loadChart(data);

src/scripts/utils.js

@@ -41,4 +41,21 @@ export function sendLoadEvent(callback) {
 export function sendReadyEvent() {
   const event = new CustomEvent('pageReady');
   setTimeout(() => document.dispatchEvent(event));
+}
+
+export function toggleButton(buttonId, callback) {
+  let maximized = false;
+  const btn = document.getElementById(buttonId);
+
+  btn.addEventListener('click', () => {
+    const img = btn.querySelector('img');
+    maximized = !maximized;
+
+    if (img) {
+      const iconPath = `images/icons/${maximized ? 'minimize' : 'maximize'}.svg`;
+      img.setAttribute('src', iconPath);
+    }
+
+    callback(maximized);
+  });
 }

src/styles/card.css

@@ -38,4 +38,28 @@
 
   opacity: 0.1;
   transform: translateY(-50%);
+}
+
+.card .btn {
+  width: 35px;
+  height: 36px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  --bs-btn-bg: #ced0ff;
+  --bs-btn-hover-bg: #bcbeff;
+  --bs-btn-active-bg: #bcbeff;
+
+  --bs-btn-border-color: transparent;
+  --bs-btn-hover-border-color: transparent;
+  --bs-btn-active-border-color: transparent;
+}
+
+.card .btn img {
+  width: 20px;
+
+  opacity: 0.7;
+  filter: brightness(0);
 }

src/styles/chart.css

@@ -7,7 +7,7 @@
   cursor: pointer;
 
   width: 100px;
-  margin-left: auto;
+  margin-left: 10px;
 
   color: #40415a;
   background-color: #ced0ff;