Updated JS scripts

Author: BobsProgrammingAcademy

js/scripts.js

@@ -1,99 +1,98 @@
 // SIDEBAR TOGGLE
 
-var sidebarOpen = false;
-var sidebar = document.getElementById("sidebar");
+let sidebarOpen = false;
+const sidebar = document.getElementById('sidebar');
 
 function openSidebar() {
-  if(!sidebarOpen) {
-    sidebar.classList.add("sidebar-responsive");
+  if (!sidebarOpen) {
+    sidebar.classList.add('sidebar-responsive');
     sidebarOpen = true;
   }
 }
 
 function closeSidebar() {
-  if(sidebarOpen) {
-    sidebar.classList.remove("sidebar-responsive");
+  if (sidebarOpen) {
+    sidebar.classList.remove('sidebar-responsive');
     sidebarOpen = false;
   }
 }
 
-
-
 // ---------- CHARTS ----------
 
 // BAR CHART
-var barChartOptions = {
-  series: [{
-    data: [10, 8, 6, 4, 2]
-  }],
+const barChartOptions = {
+  series: [
+    {
+      data: [10, 8, 6, 4, 2],
+    },
+  ],
   chart: {
     type: 'bar',
     height: 350,
     toolbar: {
-      show: false
+      show: false,
     },
   },
-  colors: [
-    "#246dec",
-    "#cc3c43",
-    "#367952",
-    "#f5b74f",
-    "#4f35a1"
-  ],
+  colors: ['#246dec', '#cc3c43', '#367952', '#f5b74f', '#4f35a1'],
   plotOptions: {
     bar: {
       distributed: true,
       borderRadius: 4,
       horizontal: false,
       columnWidth: '40%',
-    }
+    },
   },
   dataLabels: {
-    enabled: false
+    enabled: false,
   },
   legend: {
-    show: false
+    show: false,
   },
   xaxis: {
-    categories: ["Laptop", "Phone", "Monitor", "Headphones", "Camera"],
+    categories: ['Laptop', 'Phone', 'Monitor', 'Headphones', 'Camera'],
   },
   yaxis: {
     title: {
-      text: "Count"
-    }
-  }
+      text: 'Count',
+    },
+  },
 };
 
-var barChart = new ApexCharts(document.querySelector("#bar-chart"), barChartOptions);
+const barChart = new ApexCharts(
+  document.querySelector('#bar-chart'),
+  barChartOptions
+);
 barChart.render();
 
-
 // AREA CHART
-var areaChartOptions = {
-  series: [{
-    name: 'Purchase Orders',
-    data: [31, 40, 28, 51, 42, 109, 100]
-  }, {
-    name: 'Sales Orders',
-    data: [11, 32, 45, 32, 34, 52, 41]
-  }],
+const areaChartOptions = {
+  series: [
+    {
+      name: 'Purchase Orders',
+      data: [31, 40, 28, 51, 42, 109, 100],
+    },
+    {
+      name: 'Sales Orders',
+      data: [11, 32, 45, 32, 34, 52, 41],
+    },
+  ],
   chart: {
     height: 350,
     type: 'area',
     toolbar: {
       show: false,
     },
   },
-  colors: ["#4f35a1", "#246dec"],
+  colors: ['#4f35a1', '#246dec'],
   dataLabels: {
     enabled: false,
   },
   stroke: {
-    curve: 'smooth'
+    curve: 'smooth',
   },
-  labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
+  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
   markers: {
-    size: 0
+    size: 0,
   },
   yaxis: [
     {
@@ -111,8 +110,11 @@ var areaChartOptions = {
   tooltip: {
     shared: true,
     intersect: false,
-  }
+  },
 };
 
-var areaChart = new ApexCharts(document.querySelector("#area-chart"), areaChartOptions);
-areaChart.render();
+const areaChart = new ApexCharts(
+  document.querySelector('#area-chart'),
+  areaChartOptions
+);
+areaChart.render();