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

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

@@ -7,15 +7,38 @@
<title>Highcharts</title>
<link rel="stylesheet" href="../../../../resources/css/main.css" />
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="./highchartsTheme.js"></script>
<script async src="./script.js"></script>
</head>
<body>
<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>
</body>

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

@@ -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);
/* 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 class="error" id="testError">
<b>ERROR:</b>
Please insert something in the textarea
</div>
<div id="errorHolder"></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 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;
}

11
resources/css/main.css
View File

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

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

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