Skip to content

Commit

Permalink
Added cleancode for main.js
Browse files Browse the repository at this point in the history
  • Loading branch information
@BARBARBoyyHD
BARBARBoyyHD committed Jun 10, 2024
1 parent 669da3d commit a16fac7
Show file tree
Hide file tree
Showing 11 changed files with 474 additions and 444 deletions.
13 changes: 9 additions & 4 deletions about.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,11 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="shortcut icon" type="image/x-icon" href="companyLogo/aerobg.png" />
<link
rel="shortcut icon"
type="image/x-icon"
href="companyLogo/aerobg.png"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>AeroTracker</title>
<link rel="stylesheet" href="style/style.css" />
Expand Down Expand Up @@ -184,9 +188,10 @@ <h1>Pitch Deck</h1>
</div>
</section>
<section class="aerofooter-section">
<footer class="aerofooter">
</footer>
<div class="copyright"><h1>©2024 AeroCycle all rights reserved</h1></div>
<footer class="aerofooter"></footer>
<div class="copyright">
<h1>©2024 AeroCycle all rights reserved</h1>
</div>
</section>
</main>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
Expand Down
52 changes: 41 additions & 11 deletions data/scorecardData.json
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,46 @@
{
"scorecard": {
"United Kingdom": {
"2015": { "revenue": 2220143, "profit": 1014085, "itemSold": 33439 },
"2016": { "revenue": 2600379, "profit": 1103233, "itemSold": 43194 }
"scorecard": [
{
"country": "United Kingdom",
"year": 2015,
"revenue": 2220143,
"profit": 1014085,
"itemsSold": 33439
},
"France": {
"2015": { "revenue": 1871282, "profit": 646498, "itemSold": 26345 },
"2016": { "revenue": 1800511, "profit": 635646, "itemSold": 36399 }
{
"country": "United Kingdom",
"year": 2016,
"revenue": 2600379,
"profit": 1103233,
"itemsSold": 43194
},
"Germany": {
"2015": { "revenue": 1925113, "profit": 714038, "itemSold": 24924 },
"2016": { "revenue": 2220143, "profit": 859379, "itemSold": 36514 }
{
"country": "France",
"year": 2015,
"revenue": 1871282,
"profit": 646498,
"itemsSold": 26345
},
{
"country": "France",
"year": 2016,
"revenue": 1800511,
"profit": 635646,
"itemsSold": 36399
},
{
"country": "Germany",
"year": 2015,
"revenue": 1925113,
"profit": 714038,
"itemsSold": 24924
},
{
"country": "Germany",
"year": 2016,
"revenue": 2220143,
"profit": 859379,
"itemsSold": 36514
}
}
]
}
56 changes: 33 additions & 23 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,11 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="shortcut icon" type="image/x-icon" href="companyLogo/Aero2.png"/>
<link
rel="shortcut icon"
type="image/x-icon"
href="companyLogo/Aero2.png"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>AeroTracker</title>
<link rel="stylesheet" href="/style/style.css" />
Expand All @@ -21,7 +25,6 @@
href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.css"
/>
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />

</head>

<body>
Expand Down Expand Up @@ -61,23 +64,23 @@
<h1 id="yearly" class="range">Sales Performance</h1>
</div> -->
<!-- First row -->
<section class="container-first-row">
<section class="container-first-row">
<div class="score-cards">
<div class="score-card-revenue" data-aos="fade-down">
<h3 data-aos="fade-down">Revenue</h3>
<p class="cardValue" id="Revenue" data-aos="fade-down"></p>
<div class="score-card-revenue" data-aos="fade-down">
<h3 data-aos="fade-down">Revenue</h3>
<p class="cardValue" id="Revenue" data-aos="fade-down"></p>
</div>
<div class="score-card-profit" data-aos="fade-down">
<h3 data-aos="fade-down">Profit</h3>
<p class="cardValue" id="profit" data-aos="fade-down"></p>
<div class="score-card-profit" data-aos="fade-down">
<h3 data-aos="fade-down">Profit</h3>
<p class="cardValue" id="profit" data-aos="fade-down"></p>
</div>
<div class="score-card-item" data-aos="fade-down">
<h3 data-aos="fade-down">Items Sold</h3>
<p class="cardValue" id="Item-sold" data-aos="fade-down"></p>
<div class="score-card-item" data-aos="fade-down">
<h3 data-aos="fade-down">Items Sold</h3>
<p class="cardValue" id="Item-sold" data-aos="fade-down"></p>
</div>
</div>

<div class="selectors" data-aos="fade-down">
<div class="selectors" data-aos="fade-down">
<div class="select-country">
<select id="country">
<option value="">Select a country</option>
Expand All @@ -99,8 +102,11 @@ <h3 data-aos="fade-down">Items Sold</h3>
<!-- Second Row -->
<section class="container-second-row">
<div class="wrap-entire-row">
<div class="Second-row-wrap" data-aos="fade-up"
data-aos-anchor-placement="center-bottom">
<div
class="Second-row-wrap"
data-aos="fade-up"
data-aos-anchor-placement="center-bottom"
>
<!-- <h1 class="line-chart-label">Sales Trends</h1> -->
<div class="wrap-line-chart">
<div class="filterLine">
Expand All @@ -126,8 +132,11 @@ <h3 data-aos="fade-down">Items Sold</h3>
<!-- <div class="text-positioning">
<h1>Sales By Category</h1>
</div> -->
<div class="wrap-category" data-aos="fade-up"
data-aos-anchor-placement="center-bottom">
<div
class="wrap-category"
data-aos="fade-up"
data-aos-anchor-placement="center-bottom"
>
<div class="barchart-category">
<div class="table-gender sales-kategori">
<div class="filterBar">
Expand Down Expand Up @@ -175,7 +184,7 @@ <h1>Sales By Category</h1>
<!-- Third row -->
<section class="container-third-row">
<div class="wrap-third-row"></div>
<div class="wrap-topProduct" data-aos="fade-down">
<div class="wrap-topProduct" data-aos="fade-down">
<h1>Top Product</h1>
<div class="barChart">
<div>
Expand All @@ -188,7 +197,7 @@ <h1>Top Product</h1>
</div>
</div>
</div>
<div class="wrap-age" data-aos="fade-down">
<div class="wrap-age" data-aos="fade-down">
<h1>Sales By Gender and Age</h1>
<div class="barchart-gender">
<canvas id="ageBarChart" width="300" height="200"></canvas>
Expand All @@ -206,7 +215,7 @@ <h1>Sales by Country</h1>
<h1 class="table-title">Sales Detail</h1>
</section>
<section class="sales-details-section">
<div class="wrap-entire-table" data-aos="fade-down">
<div class="wrap-entire-table" data-aos="fade-down">
<table
id="myTable"
class="table-bordered"
Expand All @@ -225,9 +234,10 @@ <h1 class="table-title">Sales Detail</h1>
</div>
</section>
<section class="aerofooter-section">
<footer class="aerofooter">
</footer>
<div class="copyright"><h1>©2024 AeroCycle all rights reserved</h1></div>
<footer class="aerofooter"></footer>
<div class="copyright">
<h1>©2024 AeroCycle all rights reserved</h1>
</div>
</section>
</div>
</main>
Expand Down
129 changes: 54 additions & 75 deletions script/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,6 @@ function fetchDataAndCalculateTotals() {
Rev.textContent = `$${totalRevenue}`;
prof.textContent = `$${totalProfit}`;
Isold.textContent = `${totalItemSold}`;


})
.catch((error) => {
console.error("There was a problem with the fetch operation:", error);
Expand All @@ -49,90 +47,71 @@ function country() {

// Define a function to handle selection change
function handleSelectionChange() {
let total;
let totalProf;
let totalIsold;
let selectedCountry = countrySelect.value;
let selectedYear = yearSelect.value;

if (!selectedCountry && !selectedYear) {
fetchDataAndCalculateTotals();
}
if (selectedYear === "2015") {
Rev.textContent = `$${6273281}`;
prof.textContent = `$${2374621}`;
Isold.textContent = `${84708}`;
} else {
Rev.textContent = `$${6621033}`;
prof.textContent = `$${2598258}`;
Isold.textContent = `${116107}`;
}
if (selectedCountry === "United Kingdom" && selectedYear === "2015") {
console.log("It's UK 2015");
Rev.textContent = `$${2220143}`;
prof.textContent = `$${1014085}`;
Isold.textContent = `${33439}`;
} else if (selectedCountry === "France" && selectedYear === "2015") {
console.log("It's UK 2015");
Rev.textContent = `$${1871282}`;
prof.textContent = `$${646498}`;
Isold.textContent = `${26345}`;
} else if (selectedCountry === "Germany" && selectedYear === "2015") {
console.log("It's UK 2015");
Rev.textContent = `$${1925113}`;
prof.textContent = `$${714038}`;
Isold.textContent = `24924`;
} else if (
selectedCountry === "United Kingdom" &&
selectedYear === "2016"
) {
console.log("It's UK 2016");
Rev.textContent = `$${2600379}`;
prof.textContent = `$${1103233}`;
Isold.textContent = `43194`;
} else if (selectedCountry === "France" && selectedYear === "2016") {
console.log("It's France 2016");
Rev.textContent = `$${1800511}`;
prof.textContent = `$${635646}`;
Isold.textContent = `36399`;
} else if (selectedCountry === "Germany" && selectedYear === "2016") {
console.log("It's Germany 2016");
Rev.textContent = `$${2220143}`;
prof.textContent = `$${859379}`;
Isold.textContent = `36514`;
} else {
if (selectedCountry === "United Kingdom") {
total = 2476886 + 2600379;
totalProf = 1014085 + 1103233;
totalIsold = 33439 + 43194;

Rev.textContent = `$${total}`;
prof.textContent = `$${totalProf}`;
Isold.textContent = `${totalIsold}`;
} else if (selectedCountry === "France") {
total = 1871282 + 1800511;
totalProf = 646498 + 635646;
totalIsold = 26345 + 36399;
fetch("./data/scorecardData.json")
.then((response) => {
if (!response.ok) {
throw new Error("Network response was not ok");
}
return response.json();
})
.then((data) => {
let filteredData;
if (!selectedCountry && !selectedYear) {
// If no country or year selected, use all data
filteredData = data.scorecard;
} else if (!selectedCountry && selectedYear) {
// If no country selected but year is selected, filter data for the selected year
filteredData = data.scorecard.filter(
(item) => item.year === parseInt(selectedYear)
);
} else if (selectedYear) {
// If both country and year selected, filter data for the selected country and year
filteredData = data.scorecard.filter(
(item) =>
item.country === selectedCountry &&
item.year === parseInt(selectedYear)
);
} else {
// If no year selected, filter data for the selected country
filteredData = data.scorecard.filter(
(item) => item.country === selectedCountry
);
}

Rev.textContent = `$${total}`;
prof.textContent = `$${totalProf}`;
Isold.textContent = `${totalIsold}`;
} else if (selectedCountry === "Germany") {
total = 1925113.0 + 2220143.0;
totalProf = 714038.0 + 859379.0;
totalIsold = 24924 + 36514;
// Calculate total sums
let sumRevenue = filteredData.reduce(
(sum, item) => sum + item.revenue,
0
);
let sumProfit = filteredData.reduce(
(sum, item) => sum + item.profit,
0
);
let sumItemSold = filteredData.reduce(
(sum, item) => sum + item.itemsSold,
0
);

Rev.textContent = `$${total}`;
prof.textContent = `$${totalProf}`;
Isold.textContent = `${totalIsold}`;
}
}
// Update UI with total sums
Rev.textContent = `$${sumRevenue}`;
prof.textContent = `$${sumProfit}`;
Isold.textContent = `${sumItemSold}`;
})
.catch((error) => {
console.error("There was a problem with the fetch operation:", error);
});
}

// Add event listeners for both country and year selection
countrySelect.addEventListener("change", handleSelectionChange);
yearSelect.addEventListener("change", handleSelectionChange);
}

// Call the country function to initialize
country();

fetchDataAndCalculateTotals();
country();
Loading

0 comments on commit a16fac7

Please sign in to comment.