-
-
-
-
-
\ No newline at end of file
diff --git a/lab/longest_bridges_chart.js b/lab/longest_bridges_chart.js
deleted file mode 100644
index fafe8c0..0000000
--- a/lab/longest_bridges_chart.js
+++ /dev/null
@@ -1,71 +0,0 @@
-let canvas = document.querySelector('#bridge-chart');
-// a button that will be used to switch between the large dataset and the small one
-let changeDataButton = document.querySelector('#change-data');
-let context = canvas.getContext('2d');
-// a boolean that will be used to toggle between showing the large data set and the small one
-let showLargeBridgeData = false;
-
-// fetching the bridge data from the json file and storing it in the local variable 'largeBridgeData'
-let largeBridgeData = [];
-fetch('bridge_data.json')
- .then(res => res.json())
- .then(data => {
- largeBridgeData = data.data;
- }).catch(error => {console.error("unable to fetch the bridge data: ", error)});
-
-
-let bridges = [
- {name: 'Verrazano-Narrows Bridge', cityState: 'New York, NY', span: 1298.4, location: [40.6066, -74.0447]},
- {name: 'Golden Gate Bridge', cityState: 'San Francisco and Marin, CA', span: 1280.2, location: [37.8199, -122.4783]},
- {name: 'Mackinac Bridge', cityState: 'Mackinaw and St Ignace, MI', span: 1158.0, location: [45.8174, -84.7278]},
- {name: 'George Washington Bridge', cityState: 'New York, NY and New Jersey, NJ', span: 1067.0, location: [40.8517, -73.9527]},
- {name: 'Tacoma Narrows Bridge', cityState: 'Tacoma and Kitsap, WA', span: 853.44, location: [47.2690, -122.5517]}
-]
-
-// creates a new chart object and populates it with the given dataset and then returns it
-// should call chart.destroy() on the already created chart if one was already created
-let loadBridgeDataSet = (dataSet) => {
- // creating the new chart
- let bridgesChart = new Chart(context, {
- type: 'bar',
- data: {
- datasets: [
- {
- label: 'Length in Meters',
- data: [],
- backgroundColor: 'green'
- }
- ],
- labels: []
- },
- options: {
- scales: {
- yAxes: [{
- ticks: {
- beginAtZero: true
- }
- }]
- }
- }
- });
-
- // iterating over the dataset and adding the data to the chart
- for (let i in dataSet) {
- let bridge = dataSet[i];
- bridgesChart.data.labels.push(bridge.name);
- bridgesChart.data.datasets[0].data.push(bridge.span);
- }
- bridgesChart.update();
- return bridgesChart;
-}
-
-// creating the initial chart with the smaller dataset
-let chart = loadBridgeDataSet(bridges)
-
-// adding an event listener to the button to toggle the small and large datasets whenever the button is pressed
-changeDataButton.addEventListener('click', function () {
- chart.destroy();
- showLargeBridgeData ? chart = loadBridgeDataSet(bridges) : chart = loadBridgeDataSet(largeBridgeData)
- showLargeBridgeData = !showLargeBridgeData;
-})
-
diff --git a/lecture_code/draw_word.html b/lecture_code/draw_word.html
deleted file mode 100644
index 8a5c4d5..0000000
--- a/lecture_code/draw_word.html
+++ /dev/null
@@ -1,15 +0,0 @@
-
-
-
-
- Draw on a Picture
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/lecture_code/draw_word.js b/lecture_code/draw_word.js
deleted file mode 100644
index 3696173..0000000
--- a/lecture_code/draw_word.js
+++ /dev/null
@@ -1,20 +0,0 @@
-let canvas = document.querySelector('#canvas');
-let context = canvas.getContext('2d');
-
-let input = document.querySelector('#image-text');
-input.disabled = true;
-
-let image = new Image();
-image.src = 'underwater.jpg';
-
-image.addEventListener('load', function(){
- context.drawImage(image, 0, 0);
- input.disabled = false;
-});
-
-input.addEventListener('input', function() {
- let text = this.value;
- context.font = '40px courier';
- context.drawImage(image, 0, 0);
- context.fillText(text, 100, 30);
-})
diff --git a/lecture_code/drawing.html b/lecture_code/drawing.html
deleted file mode 100644
index 96095b1..0000000
--- a/lecture_code/drawing.html
+++ /dev/null
@@ -1,27 +0,0 @@
-
-
-
-
- Drawing Program
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/lecture_code/expenses.html b/lecture_code/expenses.html
deleted file mode 100644
index d32fe75..0000000
--- a/lecture_code/expenses.html
+++ /dev/null
@@ -1,32 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
Build a chart of your monthly expenses
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/lecture_code/expenses_chart.js b/lecture_code/expenses_chart.js
deleted file mode 100644
index 01acf0f..0000000
--- a/lecture_code/expenses_chart.js
+++ /dev/null
@@ -1,87 +0,0 @@
-/* Input elements */
-let expenseNameInput = document.querySelector('#expense-name')
-let expenseAmountInput = document.querySelector('#expense-amount')
-let addExpenseButton = document.querySelector('#add-expense')
-
-/* Get chart canvas and contex */
-let chartCanvas = document.querySelector('#expenses-doughnut-chart')
-let ctx = chartCanvas.getContext('2d')
-
-
-// creating the chart object
-let expenseChart = new Chart(ctx, {
- type: 'doughnut',
- data: {
- datasets: [
- {
- data: [],
- backgroundColor: []
- }
- ],
- labels: []
- },
- options: {} // fill in things here later.
-})
-
-// this array contains a list of all the colors that will be used in the chart
-// the first color will be used for the first expense, and so on and so on
-let chartColors = [ 'tomato', 'orange', 'dodgerblue', 'mediumseagreen', 'slateblue', 'violet' ]
-
-
-// adds the expense to the chart
-function addExpenseToChart(name, amount) {
- // adding the expense to the chart
- expenseChart.data.labels.push(name);
- expenseChart.data.datasets[0].data.push(amount);
-
- let colorCount = expenseChart.data.datasets[0].backgroundColor.length
- let color = chartColors[colorCount % chartColors.length]
-
- expenseChart.data.datasets[0].backgroundColor.push(color);
-
- expenseChart.update();
-}
-
-// adding functionality to the addExpenseButton
-addExpenseButton.addEventListener('click', function() {
-
- let errors = []
-
- let expenseName = expenseNameInput.value
- let expenseAmount = expenseAmountInput.value
-
- // Validate both fields are filled in, and the amount is a positive number
- if (expenseName.length == 0) {
- errors.push('Enter a type of expense')
- }
-
- if (expenseAmount.length == 0 || expenseAmountInput < 0) {
- errors.push('Enter a positive amount for the expense')
- }
-
- // If any errors, alert and return - do not procede to add to chart
- if (errors.length > 0) {
- alert( errors.join('\n') )
- return
- }
-
- // calling function to update the chart
- addExpenseToChart(expenseName, expenseAmount);
-
- // Clear inputs, ready for next expense name and amount.
- expenseNameInput.value = ''
- expenseAmountInput.value = ''
-
-})
-
-
-// adding an event listener to click the add to chart button anytime the enter button is clicked
-window.addEventListener('keyup', function() {
- if (event.keyCode === 13) {
- let inputElements = [expenseNameInput, expenseAmountInput, addExpenseButton];
- if (inputElements.includes(document.activeElement)) {
- addExpenseButton.click();
- expenseNameInput.focus();
- }
- }
-})
\ No newline at end of file
diff --git a/lecture_code/hello_chart.html b/lecture_code/hello_chart.html
deleted file mode 100644
index 8cf8350..0000000
--- a/lecture_code/hello_chart.html
+++ /dev/null
@@ -1,12 +0,0 @@
-
-
-
-
-
-
-
-