oysteikt/IT2
Archived
0
0
Fork 0
Code Issues Pull Requests Releases Activity

Update highcharts + update error div

Browse Source
This commit is contained in:
Oystein Kristoffer Tveit
2020-04-02 20:41:50 +02:00
parent e8b8fbcd5c
commit 498d4f50a2
7 changed files with 206 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
html/tasks/chapter_8/highcharts/highchartsTheme.js Normal file
View File

@@ -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
}
};

27
html/tasks/chapter_8/highcharts/oppgave.html
View File

@@ -7,15 +7,38 @@
<title>Highcharts</title> <title>Highcharts</title>
<link rel="stylesheet" href="../../../../resources/css/main.css" /> <link rel="stylesheet" href="../../../../resources/css/main.css" />
<script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/highcharts.js"></script>
<script src="./highchartsTheme.js"></script>
<script async src="./script.js"></script> <script async src="./script.js"></script>
</head> </head>
<body> <body>
<h1>Highcharts</h1> <h1>Highcharts</h1>
<div class="center"> <div class='center'>
<div id='container'></div> Chart for fruits below
</div>
<div id='chart1' class='chart'></div>
<div class='center'>
<div class="inline">
<form id='fruitForm'>
<label for="bananaInput">Bananas: </label>
<input type="number" id="bananaInput" min="0" max="100" step="1" required>
<label for="appleInput">Apples: </label>
<input type="number" id="appleInput" min="0" max="100" step="1" required>
<input type="submit">
</form>
</div>
<div id="errorBox"></div>
<table class="inlineTable" id="table1">
<tr>
<th>Bananas</th>
<th>Apples</th>
</tr>
</table>
</div> </div>
</body> </body>

98
html/tasks/chapter_8/highcharts/script.js
View File

@@ -1,3 +1,7 @@
// @ts-check
/* Initialize variables */
const data = [ const data = [
{ {
name: 'Banana', name: 'Banana',
@@ -7,11 +11,48 @@ const data = [
name: 'Apple', name: 'Apple',
data: [3,2,5,6,2] 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 = { const config = {
title: { text: 'Tittel'}, title: { text: 'Chart 1'},
subtitle: { text: 'Undertittel'}, subtitle: { text: 'Fruits'},
xAxis: { xAxis: {
title: { title: {
text: 'Numbers' text: 'Numbers'
@@ -38,4 +79,53 @@ const config = {
} }
Highcharts.chart('container', config); /* 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;
}

5
html/tasks/chapter_8/notes/oppgave.html
View File

@@ -23,10 +23,7 @@
<div id="notes" class="textboxGrid"></div> <div id="notes" class="textboxGrid"></div>
<div class="error" id="testError"> <div id="errorHolder"></div>
<b>ERROR:</b>
Please insert something in the textarea
</div>
</div> </div>

22
html/tasks/chapter_8/notes/script.js
View File

@@ -6,7 +6,7 @@ const noteForm = document.getElementById('noteInput');
const noteText = document.getElementById('noteInputText'); const noteText = document.getElementById('noteInputText');
const noteSubmit = document.getElementById('noteInputSubmit'); const noteSubmit = document.getElementById('noteInputSubmit');
const notes = document.getElementById('notes'); const notes = document.getElementById('notes');
const error1 = document.getElementById('testError'); const error1 = document.getElementById('errorHolder');
/* Add event listeners */ /* Add event listeners */
@@ -22,11 +22,12 @@ jQuery('button').click('click', buttonDelete);
function addNote(evt) { function addNote(evt) {
evt.preventDefault(); evt.preventDefault();
error1.innerHTML = '';
if (noteText.value === '') { if (noteText.value === '') {
error1.style.display = 'block'; const error = createError('Add notes into the textarea');
error1.appendChild(error);
return; return;
} else {
error1.style.display = 'none';
} }
const text = noteText.value; const text = noteText.value;
@@ -54,3 +55,16 @@ function buttonDelete(evt) {
evt.currentTarget.parentNode.parentNode.removeChild(evt.currentTarget.parentNode); evt.currentTarget.parentNode.parentNode.removeChild(evt.currentTarget.parentNode);
localStorage.setItem('notes', notes.innerHTML); 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;
}

11
resources/css/main.css
View File

@@ -115,7 +115,7 @@ tr:hover {
.center { .center {
background-color: #505050; background-color: #505050;
margin: auto; margin: auto;
margin-bottom: 10%; margin-bottom: 5%;
width: 70%; width: 70%;
padding: 5%; padding: 5%;
height: -webkit-max-content; height: -webkit-max-content;
@@ -213,7 +213,7 @@ tr:hover {
} }
.error { .error {
display: none; display: block;
border: 1px solid black; border: 1px solid black;
border-radius: 5px; border-radius: 5px;
background-color: #f92677; background-color: #f92677;
@@ -222,3 +222,10 @@ tr:hover {
text-align: center; text-align: center;
margin: 15px auto; margin: 15px auto;
} }
.chart {
margin: auto;
margin-bottom: 5%;
width: 70%;
border: 3px solid #91e22c;
}

11
resources/css/scss/_classes.scss
View File

@@ -1,7 +1,7 @@
.center { .center {
background-color: $grey3; background-color: $grey3;
margin: auto; margin: auto;
margin-bottom: 10%; margin-bottom: 5%;
width: 70%; width: 70%;
padding: 5%; padding: 5%;
height: max-content; height: max-content;
@@ -108,7 +108,7 @@
} }
.error { .error {
display: none; display: block;
border: 1px solid black; border: 1px solid black;
border-radius: 5px; border-radius: 5px;
background-color: $red; background-color: $red;
@@ -117,3 +117,10 @@
text-align: center; text-align: center;
margin: $standardMargin auto; margin: $standardMargin auto;
} }
.chart {
margin: auto;
margin-bottom: 5%;
width: 70%;
border: 3px solid $green;
}