diff --git a/html/tasks/chapter_8/highcharts/highchartsTheme.js b/html/tasks/chapter_8/highcharts/highchartsTheme.js new file mode 100644 index 0000000..4c3738c --- /dev/null +++ b/html/tasks/chapter_8/highcharts/highchartsTheme.js @@ -0,0 +1,49 @@ +/* Found at https://github.com/jbkunst/highcharts-themes-collection */ + +Highcharts.theme = { + "colors": ["#F92672", "#66D9EF", "#A6E22E", "#A6E22E"], + "chart": { + "backgroundColor": "#272822", + "style": { + "fontFamily": "Arial", + "color": "#A2A39C" + } + }, + "title": { + "style": { + "color": "#A2A39C" + }, + "align": "left" + }, + "subtitle": { + "style": { + "color": "#A2A39C" + }, + "align": "left" + }, + "legend": { + "align": "right", + "verticalAlign": "bottom", + "itemStyle": { + "fontWeight": "normal", + "color": "#A2A39C" + } + }, + "xAxis": { + "gridLineDashStyle": "Dot", + "gridLineWidth": 1, + "gridLineColor": "#A2A39C", + "lineColor": "#A2A39C", + "minorGridLineColor": "#A2A39C", + "tickColor": "#A2A39C", + "tickWidth": 1 + }, + "yAxis": { + "gridLineDashStyle": "Dot", + "gridLineColor": "#A2A39C", + "lineColor": "#A2A39C", + "minorGridLineColor": "#A2A39C", + "tickColor": "#A2A39C", + "tickWidth": 1 + } +}; \ No newline at end of file diff --git a/html/tasks/chapter_8/highcharts/oppgave.html b/html/tasks/chapter_8/highcharts/oppgave.html index 844669e..7b4a44c 100755 --- a/html/tasks/chapter_8/highcharts/oppgave.html +++ b/html/tasks/chapter_8/highcharts/oppgave.html @@ -7,15 +7,38 @@ Highcharts +

Highcharts

-
+
-
- + Chart for fruits below +
+ +
+ +
+
+
+ + + + + +
+
+ +
+ + + + + + +
BananasApples
diff --git a/html/tasks/chapter_8/highcharts/script.js b/html/tasks/chapter_8/highcharts/script.js index 34e4ad3..5ca099c 100755 --- a/html/tasks/chapter_8/highcharts/script.js +++ b/html/tasks/chapter_8/highcharts/script.js @@ -1,3 +1,7 @@ +// @ts-check + +/* Initialize variables */ + const data = [ { name: 'Banana', @@ -7,11 +11,48 @@ const data = [ name: 'Apple', data: [3,2,5,6,2] } -] +]; +Highcharts.setOptions(Highcharts.theme); + +/* Register HTML DOM elements by variables */ + +const fruitForm = document.getElementById("fruitForm"); +const bananas = document.getElementById("bananaInput"); +const apples = document.getElementById("appleInput"); +const table1 = document.getElementById("table1"); +const errorBox1 = document.getElementById("errorBox"); + +/* Add event listeners */ + +fruitForm.querySelector('input[type=submit]').addEventListener('click', (evt) => { + evt.preventDefault(); + + errorBox1.innerHTML = ''; + + try { + if (bananas.value < 0 || bananas.value > 100) throw 'Bananas must be between 0 and 100'; + if (apples.value < 0 || apples.value > 100) throw 'Apples must be between 0 and 100'; + if (bananas.value === '' || apples.value === '') throw 'A value is missing'; + } catch (error) { + const htmlError = createError(error); + errorBox1.appendChild(htmlError); + return; + } + + data[0].data.push(parseInt(bananas.value)); + data[1].data.push(parseInt(apples.value)); + bananas.value=''; + apples.value=''; + updateCharts(); +}); + +/* Initialize HTML with functions */ + +/* chart1 config */ const config = { - title: { text: 'Tittel'}, - subtitle: { text: 'Undertittel'}, + title: { text: 'Chart 1'}, + subtitle: { text: 'Fruits'}, xAxis: { title: { text: 'Numbers' @@ -38,4 +79,53 @@ const config = { } -Highcharts.chart('container', config); \ No newline at end of file +/* Create chart */ +Highcharts.chart('chart1', config); + +/* Make HTML table rows */ +for (let i = 0; i < data[0].data.length; i++) { + const row = document.createElement("tr"); + + const bananaData = document.createElement("td"); + bananaData.innerHTML = data[0].data[i].toString(); + row.appendChild(bananaData); + + const appleData = document.createElement("td"); + appleData.innerHTML = data[1].data[i].toString(); + row.appendChild(appleData); + + table1.appendChild(row); + +} + +/* Functions */ + +function updateCharts() { + + Highcharts.chart('chart1', config); + + const row = document.createElement("tr"); + + const bananaData = document.createElement("td"); + bananaData.innerHTML = data[0].data[data[0].data.length-1].toString(); + row.appendChild(bananaData); + + const appleData = document.createElement("td"); + appleData.innerHTML = data[1].data[data[1].data.length-1].toString(); + row.appendChild(appleData); + + table1.appendChild(row); +} + +function createError(errorMessage) { + const error = document.createElement("div"); + error.setAttribute('class', 'error'); + + const errorBold = document.createElement("b"); + errorBold.innerHTML = 'ERROR:'; + error.appendChild(errorBold); + + errorBold.after(errorMessage); + + return error; +} \ No newline at end of file diff --git a/html/tasks/chapter_8/notes/oppgave.html b/html/tasks/chapter_8/notes/oppgave.html index 8ec2272..ac901dc 100755 --- a/html/tasks/chapter_8/notes/oppgave.html +++ b/html/tasks/chapter_8/notes/oppgave.html @@ -23,10 +23,7 @@
-
- ERROR: - Please insert something in the textarea -
+
diff --git a/html/tasks/chapter_8/notes/script.js b/html/tasks/chapter_8/notes/script.js index e228bf1..6c0942d 100755 --- a/html/tasks/chapter_8/notes/script.js +++ b/html/tasks/chapter_8/notes/script.js @@ -6,7 +6,7 @@ const noteForm = document.getElementById('noteInput'); const noteText = document.getElementById('noteInputText'); const noteSubmit = document.getElementById('noteInputSubmit'); const notes = document.getElementById('notes'); -const error1 = document.getElementById('testError'); +const error1 = document.getElementById('errorHolder'); /* Add event listeners */ @@ -22,11 +22,12 @@ jQuery('button').click('click', buttonDelete); function addNote(evt) { evt.preventDefault(); + error1.innerHTML = ''; + if (noteText.value === '') { - error1.style.display = 'block'; + const error = createError('Add notes into the textarea'); + error1.appendChild(error); return; - } else { - error1.style.display = 'none'; } const text = noteText.value; @@ -54,3 +55,16 @@ function buttonDelete(evt) { evt.currentTarget.parentNode.parentNode.removeChild(evt.currentTarget.parentNode); localStorage.setItem('notes', notes.innerHTML); } + +function createError(errorMessage) { + const error = document.createElement("div"); + error.setAttribute('class', 'error'); + + const errorBold = document.createElement("b"); + errorBold.innerHTML = 'ERROR:'; + error.appendChild(errorBold); + + errorBold.after(errorMessage); + + return error; +} diff --git a/resources/css/main.css b/resources/css/main.css index d2945c8..cec5f4e 100644 --- a/resources/css/main.css +++ b/resources/css/main.css @@ -115,7 +115,7 @@ tr:hover { .center { background-color: #505050; margin: auto; - margin-bottom: 10%; + margin-bottom: 5%; width: 70%; padding: 5%; height: -webkit-max-content; @@ -213,7 +213,7 @@ tr:hover { } .error { - display: none; + display: block; border: 1px solid black; border-radius: 5px; background-color: #f92677; @@ -222,3 +222,10 @@ tr:hover { text-align: center; margin: 15px auto; } + +.chart { + margin: auto; + margin-bottom: 5%; + width: 70%; + border: 3px solid #91e22c; +} diff --git a/resources/css/scss/_classes.scss b/resources/css/scss/_classes.scss index 956908c..989e239 100644 --- a/resources/css/scss/_classes.scss +++ b/resources/css/scss/_classes.scss @@ -1,7 +1,7 @@ .center { background-color: $grey3; margin: auto; - margin-bottom: 10%; + margin-bottom: 5%; width: 70%; padding: 5%; height: max-content; @@ -108,7 +108,7 @@ } .error { - display: none; + display: block; border: 1px solid black; border-radius: 5px; background-color: $red; @@ -116,4 +116,11 @@ padding: 10px; text-align: center; margin: $standardMargin auto; +} + +.chart { + margin: auto; + margin-bottom: 5%; + width: 70%; + border: 3px solid $green; } \ No newline at end of file