Skip to content

Commit a7b23a8

Browse files
author
Sam Vitare
committed
updated some week 6
1 parent 7499221 commit a7b23a8

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

49 files changed

+1727
-1523
lines changed

‎chart-js/expense-chart/expenses.html

+28-24
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,48 @@
11
<!DOCTYPE html>
22
<html>
3-
4-
<head>
3+
<head>
54
<title>Expenses doughnut chart</title>
65

76
<!-- Chart JS script -->
87
<!-- This page loads as soon as the page loads, so no async defer is used here -->
9-
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.0/dist/chart.min.js"></script>
8+
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
109

1110
<!--
12-
Our JS script: async defer makes our JS script run after the whole page is loaded, i.e.,
13-
this will load after ChartJS & the html is loaded.
11+
Our JS script: async defer makes our JS script run after the whole page is loaded,
12+
i.e., this will load after ChartJS & the html is loaded.
1413
-->
1514
<script async defer src="expenses_chart.js"></script>
1615

1716
<!-- Bootstrap stylesheet -->
18-
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
19-
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
20-
</head>
21-
22-
<body class="p-5">
17+
<link
18+
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
19+
rel="stylesheet"
20+
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
21+
crossorigin="anonymous"
22+
/>
23+
</head>
24+
25+
<body class="p-5">
2326
<!-- Page title -->
2427
<h1 class="text-center">Build a chart of your monthly expenses</h1>
2528

2629
<!-- The chart will be drawn here -->
2730
<canvas id="expenses-doughnut-chart"></canvas>
2831

2932
<form>
30-
<div class="mb-3">
31-
<label for="expense-name" class="form-label">Expense Type</label>
32-
<input id="expense-name" type="text" class="form-control">
33-
</div>
34-
35-
<div class="mb-3">
36-
<label for="expense-amount" class="form-label">Amount</label>
37-
<input id="expense-amount" type="number" class="form-control">
38-
</div>
39-
40-
<button id="add-expense-btnID" type="button" class="btn btn-info">Add to chart</button>
33+
<div class="mb-3">
34+
<label for="expense-name" class="form-label">Expense Type</label>
35+
<input id="expense-name" type="text" class="form-control" />
36+
</div>
37+
38+
<div class="mb-3">
39+
<label for="expense-amount" class="form-label">Amount</label>
40+
<input id="expense-amount" type="number" class="form-control" />
41+
</div>
42+
43+
<button id="add-expense-btnID" type="button" class="btn btn-info">
44+
Add to chart
45+
</button>
4146
</form>
42-
</body>
43-
44-
</html>
47+
</body>
48+
</html>

‎chart-js/expense-chart/expenses_chart.js

+95-85
Original file line numberDiff line numberDiff line change
@@ -1,104 +1,114 @@
11
// This file is used with expenses.html file
22

33
/* Find the input elements & the button on the document page */
4-
let expenseNameInput = document.querySelector('#expense-name');
5-
let expenseAmountInput = document.querySelector('#expense-amount');
6-
let addExpenseButton = document.querySelector('#add-expense-btnID');
4+
let expenseNameInput = document.querySelector("#expense-name");
5+
let expenseAmountInput = document.querySelector("#expense-amount");
6+
let addExpenseButton = document.querySelector("#add-expense-btnID");
77

88
/* Find the chart canvas element */
9-
let chartCanvas = document.querySelector('#expenses-doughnut-chart');
9+
let chartCanvas = document.querySelector("#expenses-doughnut-chart");
1010

1111
// create a drawing context that does the drawing on the canvas
12-
let context = chartCanvas.getContext('2d');
12+
let context = chartCanvas.getContext("2d");
1313

14-
// TODO create chart object
14+
// TODO create chart object
1515
let expenseChart = new Chart(context, {
16-
type: 'doughnut', // type of chart
17-
data: {
18-
// what does each item in the chart represent
19-
labels: [],
20-
datasets: [{
21-
// label name for the chart
22-
label: 'Expense chart',
23-
data: [],
24-
backgroundColor: [],
25-
}],
26-
},
27-
options: {}
28-
})
29-
30-
// TODO (optional) replace with colors of your choice. The array can have as many or as few colors as you like
31-
let chartColors = ['tomato', 'orange', 'dodgerblue', 'mediumseagreen', 'slateblue', 'violet'];
16+
type: "doughnut", // type of chart
17+
data: {
18+
// what does each item in the chart represent
19+
labels: [],
20+
datasets: [
21+
{
22+
// label name for the chart
23+
label: "Expense chart",
24+
data: [],
25+
backgroundColor: [],
26+
},
27+
],
28+
},
29+
options: {},
30+
});
31+
32+
// TODO (optional) replace with colors of your choice.
33+
// The array can have as many or as few colors as you like
34+
let chartColors = [
35+
"tomato",
36+
"orange",
37+
"dodgerblue",
38+
"mediumseagreen",
39+
"slateblue",
40+
"violet",
41+
];
3242

3343
/**
34-
Adds the expense type, amount, & color to 'labels', 'data', & 'backgroundColor' arrays
35-
in the chart object.
36-
@param {string} name Expense type, for e.g., coffee, rent, food, etc.
37-
@param {number} amount Money spent for each expense item
44+
Adds the expense type, amount, & color to 'labels', 'data', & 'backgroundColor' arrays in the chart object.
45+
@param {string} name Expense type, for e.g., coffee, rent, food, etc.
46+
@param {number} amount Money spent for each expense item
3847
*/
3948
function addExpenseToChart(name, amount) {
40-
// TODO add expense to chart
41-
expenseChart.data.labels.push(name);
42-
expenseChart.data.datasets[0].data.push(amount);
43-
44-
// initial colorCount will begin at 0
45-
let colorCount = expenseChart.data.datasets[0].backgroundColor.length;
49+
// TODO add expense to chart
50+
expenseChart.data.labels.push(name);
51+
expenseChart.data.datasets[0].data.push(amount);
4652

47-
// this will always return a valid color from the chartColors array
48-
let bgColor = chartColors[colorCount % chartColors.length];
53+
// initial colorCount will begin at 0
54+
let colorCount = expenseChart.data.datasets[0].backgroundColor.length;
4955

50-
// push the colors onto the chart backgroundColor array
51-
expenseChart.data.datasets[0].backgroundColor.push(bgColor);
56+
// this will always return a valid color from the chartColors array
57+
let bgColor = chartColors[colorCount % chartColors.length];
5258

53-
expenseChart.update();
54-
}
55-
56-
57-
addExpenseButton.addEventListener('click', function () {
58-
// array of errors for validation
59-
let errors = [];
60-
61-
// get the input values for the expense name and the amount
62-
let expenseName = expenseNameInput.value.trim();
63-
let expenseAmount = expenseAmountInput.value;
64-
65-
// Validate both fields are filled in
66-
if (expenseName.length == 0) {
67-
errors.push('Enter a type of expense');
68-
expenseNameInput.value = '';
69-
}
59+
// push the colors onto the chart backgroundColor array
60+
expenseChart.data.datasets[0].backgroundColor.push(bgColor);
7061

71-
// Validate that the amount is a positive number
72-
if (expenseAmount.length == 0 || expenseAmountInput < 0) {
73-
errors.push('Enter a positive amount for the expense');
74-
}
75-
76-
// If any errors exist, alert and return - do not procede to add to chart
77-
if (errors.length > 0) {
78-
alert(errors.join('\n'));
79-
return; // stop processing
80-
}
62+
expenseChart.update();
63+
}
8164

82-
// TODO call function to update chart
83-
addExpenseToChart(expenseName, expenseAmount);
84-
85-
// Clear inputs, ready for next expense name and amount.
86-
expenseNameInput.value = '';
87-
expenseAmountInput.value = '';
88-
})
89-
90-
91-
// TODO add event listener to click the Add Expense button when the enter key is pressed
92-
window.addEventListener('keyup', function(event) {
93-
// Check if enter key is pressed, which has keyCode 13
94-
if (event.key === 'Enter') {
95-
// And if the focus is on one of the inputs, then click the addExpenseButton
96-
let inputElements = [ expenseNameInput, expenseAmountInput, addExpenseButton ]
97-
98-
if (inputElements.includes(document.activeElement)) {
99-
addExpenseButton.click() // click button
100-
expenseNameInput.focus() // move focus to expense name input, for convenience of entering new expense
101-
}
65+
addExpenseButton.addEventListener("click", function () {
66+
// array of errors for validation
67+
let errors = [];
68+
69+
// get the input values for the expense name and the amount
70+
let expenseName = expenseNameInput.value.trim();
71+
let expenseAmount = expenseAmountInput.value;
72+
73+
// Validate both fields are filled in
74+
if (expenseName.length == 0) {
75+
errors.push("Enter a type of expense");
76+
expenseNameInput.value = "";
77+
}
78+
79+
// Validate that the amount is a positive number
80+
if (expenseAmount.length == 0 || expenseAmountInput < 0) {
81+
errors.push("Enter a positive amount for the expense");
82+
}
83+
84+
// If any errors exist, alert and return - do not procede to add to chart
85+
if (errors.length > 0) {
86+
alert(errors.join("\n"));
87+
return; // stop processing
88+
}
89+
90+
// TODO call function to update chart
91+
addExpenseToChart(expenseName, expenseAmount);
92+
93+
// Clear inputs, ready for next expense name and amount.
94+
expenseNameInput.value = "";
95+
expenseAmountInput.value = "";
96+
});
97+
98+
// TODO add event listener to click the Add Expense button when the enter key is pressed
99+
window.addEventListener("keyup", function (event) {
100+
// Check if enter key is pressed, which has keyCode 13
101+
if (event.key === "Enter") {
102+
// And if the focus is on one of the inputs, then click the addExpenseButton
103+
let inputElements = [
104+
expenseNameInput,
105+
expenseAmountInput,
106+
addExpenseButton,
107+
];
108+
109+
if (inputElements.includes(document.activeElement)) {
110+
addExpenseButton.click(); // click button
111+
expenseNameInput.focus(); // move focus to expense name input, for convenience of entering new expense
102112
}
103-
})
104-
113+
}
114+
});

‎chart-js/longest-bridge-chart/bridge_chart.js

+62-32
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,81 @@
11
// This file is to be used for longest_bridge_chart.html file
22

33
// Find the canvas id reference and store in a variable
4-
let canvas = document.querySelector('#bridge-chartID');
4+
let canvas = document.querySelector("#bridge-chartID");
55

66
// Get the canvas context
7-
let context = canvas.getContext('2d');
7+
let context = canvas.getContext("2d");
88

99
// An array of bridges objects
1010
let bridges = [
11-
{ name: "Verrazano-Narrows Bridge", cityState: "New York, NY", span: 1298.4, coordinates: [40.6066, -74.0447] },
12-
{ name: "Golden Gate Bridge", cityState: "San Francisco & Marin, CA", span: 1280.2, coordinates: [37.8199, -122.4783] },
13-
{ name: "Mackinac Bridge", cityState: "Mackinaw and St Ignace, MI", span: 1158.0, coordinates: [45.8174, -84.7278] },
14-
{ name: "George Washington Bridge", cityState: "New York, NY & New Jersey, NJ", span: 1067.0, coordinates: [40.8517, -73.9527] },
15-
{ name: "Tacoma Narrows Bridge", cityState: "Tacoma and Kitsap, WA", span: 853.44, coordinates: [47.2690, -122.5517] },
16-
]
11+
{
12+
name: "Verrazano-Narrows Bridge",
13+
cityState: "New York, NY",
14+
span: 1298.4,
15+
coordinates: [40.6066, -74.0447],
16+
},
17+
{
18+
name: "Golden Gate Bridge",
19+
cityState: "San Francisco & Marin, CA",
20+
span: 1280.2,
21+
coordinates: [37.8199, -122.4783],
22+
},
23+
{
24+
name: "Mackinac Bridge",
25+
cityState: "Mackinaw and St Ignace, MI",
26+
span: 1158.0,
27+
coordinates: [45.8174, -84.7278],
28+
},
29+
{
30+
name: "George Washington Bridge",
31+
cityState: "New York, NY & New Jersey, NJ",
32+
span: 1067.0,
33+
coordinates: [40.8517, -73.9527],
34+
},
35+
{
36+
name: "Tacoma Narrows Bridge",
37+
cityState: "Tacoma and Kitsap, WA",
38+
span: 853.44,
39+
coordinates: [47.269, -122.5517],
40+
},
41+
];
1742

1843
// colors for bar background colors
19-
let chartColors = ['tomato', 'orange', 'dodgerblue', 'mediumseagreen', 'violet'];
44+
let chartColors = [
45+
"tomato",
46+
"orange",
47+
"dodgerblue",
48+
"mediumseagreen",
49+
"violet",
50+
];
2051

2152
// empty arrays used in chart objects
2253
let bridgeNames = [];
2354
let bridgeSpans = [];
2455

2556
// add bridge names and spans to the empty arrays above
26-
bridges.forEach(function(bridge) {
27-
bridgeNames.push(bridge.name);
28-
bridgeSpans.push(bridge.span);
29-
})
30-
57+
bridges.forEach(function (bridge) {
58+
bridgeNames.push(bridge.name);
59+
bridgeSpans.push(bridge.span);
60+
});
3161

3262
// create a horizontal bar chart object
3363
let bridgeChart = new Chart(context, {
34-
type: 'bar', // type of chart
35-
// this is an object
36-
data: {
37-
// what does each bar represent in the chart
38-
labels: bridgeNames, // an array of bridge names
39-
// this is an array of 1 object
40-
datasets: [{
41-
label: 'Longest US Bridges (meters)', // label name for the chart
42-
data: bridgeSpans, // an array of lengths of bridges (should be a number)
43-
backgroundColor: chartColors, // an array of colors
44-
}],
45-
},
46-
options: {
47-
indexAxis: 'y',
48-
},
49-
})
50-
51-
64+
type: "bar", // type of chart
65+
// this is an object
66+
data: {
67+
// what does each bar represent in the chart
68+
labels: bridgeNames, // an array of bridge names
69+
// this is an array of 1 object
70+
datasets: [
71+
{
72+
label: "Longest US Bridges (meters)", // label name for the chart
73+
data: bridgeSpans, // an array of lengths of bridges (should be a number)
74+
backgroundColor: chartColors, // an array of colors
75+
},
76+
],
77+
},
78+
options: {
79+
indexAxis: "y",
80+
},
81+
});

0 commit comments

Comments
 (0)