Added test V2
This commit is contained in:
Binary file not shown.
21
html/test_13.02.20/test_13.02.20_V2/index.html
Normal file
21
html/test_13.02.20/test_13.02.20_V2/index.html
Normal file
@@ -0,0 +1,21 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Test</title>
|
||||
<link rel="stylesheet" href="./resources/css/main.css">
|
||||
<script src="./resources/js/tasksJSON.js"></script>
|
||||
<script async src="./resources/js/linkConnector.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Test</h1>
|
||||
|
||||
<div class="center">
|
||||
<div class="textboxGrid"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
0
html/test_13.02.20/test_13.02.20_V2/oppgaver/.keep
Normal file
0
html/test_13.02.20/test_13.02.20_V2/oppgaver/.keep
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 380 KiB |
@@ -0,0 +1,68 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Oppgave 1</title>
|
||||
<link rel="stylesheet" href="../../resources/css/main.css">
|
||||
<script async src="./oppgave.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Påskerennet 2020 - Olastøl, Hardanger</h1>
|
||||
|
||||
<div class="center"id="graphics">
|
||||
<img src="images/easter-154509.svg"> <!-- Tatt fra https://pixabay.com/vectors/easter-spring-grass-lawn-154509/ -->
|
||||
</div>
|
||||
|
||||
<div class="center" id="registration">
|
||||
|
||||
<h2>Legg til deltaker</h2>
|
||||
|
||||
<div class="inline">
|
||||
<form id="addParticipantForm">
|
||||
<label for="nameRegistration">Navn på deltaker:</label>
|
||||
<input type="text" id="nameRegistration" placeholder="Ole" required>
|
||||
<label for="ageRegistration">Alder:</label>
|
||||
<input type="number" id="ageRegistration" min="0" max="130" placeholder="20" required>
|
||||
<input type="submit" id="addParticipant" value="Legg til deltaker">
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="inline">
|
||||
<form id="updateResultsForm">
|
||||
<label for="nameSelector">Velg deltaker:</label>
|
||||
<select id="nameSelector"></select>
|
||||
<label for="activity1">Resultat 1:</label>
|
||||
<input type="number" id="activity1" min="0" max="100">
|
||||
<label for="activity2">Resultat 2:</label>
|
||||
<input type="number" id="activity2" min="0" max="100">
|
||||
<label for="activity3">Resultat3:</label>
|
||||
<input type="number" id="activity3" min="0" max="100">
|
||||
<input type="submit" id="updateResults" value="Oppdater resultater">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="center">
|
||||
<table id="participants">
|
||||
<tr>
|
||||
<th>Navn</th>
|
||||
<th>Alder</th>
|
||||
<th>Resultat 1</th>
|
||||
<th>Resultat 2</th>
|
||||
<th>Resultat 3</th>
|
||||
<th>Resultatsum</th>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="center">
|
||||
<button id="printResultsButton">Print resultater</button>
|
||||
<br><br><br>
|
||||
<table id="results"></table>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
167
html/test_13.02.20/test_13.02.20_V2/oppgaver/oppgave1/oppgave.js
Normal file
167
html/test_13.02.20/test_13.02.20_V2/oppgaver/oppgave1/oppgave.js
Normal file
@@ -0,0 +1,167 @@
|
||||
|
||||
/* Hardcoded participant list */
|
||||
let participants = [
|
||||
{
|
||||
name: "Harald",
|
||||
age: "33",
|
||||
results: [undefined, undefined, undefined],
|
||||
resultSum: 0
|
||||
}, {
|
||||
name: "Borghild",
|
||||
age: "25",
|
||||
results: [undefined, undefined, undefined],
|
||||
resultSum: 0
|
||||
}, {
|
||||
name: "Ola",
|
||||
age: "12",
|
||||
results: [undefined, undefined, undefined],
|
||||
resultSum: 0
|
||||
}, {
|
||||
name: "Knut",
|
||||
age: "62",
|
||||
results: [undefined, undefined, undefined],
|
||||
resultSum: 0
|
||||
}, {
|
||||
name: "Lise",
|
||||
age: "46",
|
||||
results: [undefined, undefined, undefined],
|
||||
resultSum: 0
|
||||
}
|
||||
]
|
||||
|
||||
/* Add HTML DOM reference variables */
|
||||
const graphicsBox = document.getElementById("graphics");
|
||||
|
||||
const addParticipantForm = document.getElementById("addParticipantForm");
|
||||
const nameRegistrationInput = document.getElementById("nameRegistration");
|
||||
const ageRegistrationInput = document.getElementById("ageRegistration");
|
||||
const addParticipantButton = document.getElementById("addParticipant");
|
||||
|
||||
const updateResultsForm = document.getElementById("updateResultsForm");
|
||||
const nameSelector = document.getElementById("nameSelector");
|
||||
const activity1Input = document.getElementById("activity1");
|
||||
const activity2Input = document.getElementById("activity2");
|
||||
const activity3Input = document.getElementById("activity3");
|
||||
const updateResultsButton = document.getElementById("updateResults");
|
||||
|
||||
const participantTable = document.getElementById("participants");
|
||||
const participantTableHeaders = participantTable.innerHTML;
|
||||
|
||||
const printResultsButton = document.getElementById("printResultsButton");
|
||||
const resultTable = document.getElementById("results");
|
||||
|
||||
/* Add event listeners */
|
||||
addParticipantForm.addEventListener("submit", addParticipant, false);
|
||||
updateResultsForm.addEventListener("submit", updateResults, false);
|
||||
printResultsButton.addEventListener("click", printResults, false);
|
||||
nameSelector.addEventListener("change", updateSelector, false);
|
||||
|
||||
|
||||
/* Init HTML */
|
||||
updateParticipants();
|
||||
|
||||
/* Oppdaterer HTML og selector med ny deltakerliste og score */
|
||||
function updateParticipants() {
|
||||
|
||||
/* Reset inner HTML data */
|
||||
participantTable.innerHTML = participantTableHeaders;
|
||||
nameSelector.innerHTML = "";
|
||||
|
||||
for (participant in participants) {
|
||||
|
||||
|
||||
/* Update HTML table from participant array */
|
||||
let newTable =
|
||||
`<tr>` +
|
||||
`<td>${participants[participant].name}</td>` +
|
||||
`<td>${participants[participant].age}</td>`;
|
||||
|
||||
for (result in participants[participant].results) {
|
||||
if (participants[participant].results[result] != undefined) {
|
||||
newTable += `<td>${participants[participant].results[result]}</td>`;
|
||||
}
|
||||
}
|
||||
|
||||
/* Add sum to object and add to table if all 3 results exist */
|
||||
if (!participants[participant].results.includes(undefined)) {
|
||||
participants[participant].sum = participants[participant].results.reduce((a, b) => parseInt(a) + parseInt(b), 0);
|
||||
newTable += `<td>${participants[participant].sum}</td>`;
|
||||
}
|
||||
|
||||
newTable += `</tr>`;
|
||||
participantTable.innerHTML += newTable;
|
||||
|
||||
/* Update selector */
|
||||
nameSelector.innerHTML += `<option value=${participant}>${participants[participant].name}</option>`
|
||||
|
||||
}
|
||||
updateSelector();
|
||||
}
|
||||
|
||||
/* Legger til deltaker og kjører updateParticipants */
|
||||
function addParticipant(evt) {
|
||||
evt.preventDefault();
|
||||
|
||||
participants = [...participants, {
|
||||
name: nameRegistrationInput.value,
|
||||
age: ageRegistrationInput.value,
|
||||
results: [undefined, undefined, undefined],
|
||||
resultSum: 0
|
||||
}]
|
||||
|
||||
updateParticipants();
|
||||
|
||||
}
|
||||
|
||||
/* Redigerer poenglisten til den gjeldende deltakeren og kjører updateParticipants */
|
||||
function updateResults(evt) {
|
||||
evt.preventDefault();
|
||||
|
||||
const participantNum = nameSelector.value;
|
||||
participants[participantNum].results[0] = activity1Input.value;
|
||||
participants[participantNum].results[1] = activity2Input.value;
|
||||
participants[participantNum].results[2] = activity3Input.value;
|
||||
|
||||
updateParticipants();
|
||||
|
||||
}
|
||||
|
||||
/* Oppdaterer poengvelgerne etter valgt deltaker */
|
||||
function updateSelector() {
|
||||
const participant = participants[nameSelector.value];
|
||||
activity1Input.value = (participant.results[0] == undefined) ? "" : participant.results[0]; //Cant set number to undefined -> Set ""
|
||||
activity2Input.value = (participant.results[1] == undefined) ? "" : participant.results[1];
|
||||
activity3Input.value = (participant.results[2] == undefined) ? "" : participant.results[2];
|
||||
}
|
||||
|
||||
/* Printer ut resultater */
|
||||
function printResults() {
|
||||
|
||||
/* Remove participants without full score */
|
||||
let resultParticipants = participants.filter((participant) => participant.sum > 0);
|
||||
|
||||
/* Sort participants by result */
|
||||
resultParticipants.sort((a, b) => b.sum-a.sum);
|
||||
|
||||
/* Add to HTML result table*/
|
||||
resultTable.innerHTML = "<tr>" +
|
||||
"<th>Plassering</th>" +
|
||||
"<th>Navn</th>" +
|
||||
"<th>Aktivitet 1</th>" +
|
||||
"<th>Aktivitet 2</th>" +
|
||||
"<th>Aktivitet 3</th>" +
|
||||
"<th>Total Poengsum</th>" +
|
||||
"</tr>"
|
||||
|
||||
for (participant in resultParticipants) {
|
||||
resultTable.innerHTML += `<tr>` +
|
||||
`<td>${parseInt(participant) + 1}</td>` +
|
||||
`<td>${resultParticipants[participant].name}</td>` +
|
||||
`<td>${resultParticipants[participant].results[0]}</td>` +
|
||||
`<td>${resultParticipants[participant].results[1]}</td>` +
|
||||
`<td>${resultParticipants[participant].results[2]}</td>` +
|
||||
`<td>${resultParticipants[participant].sum}</td>` +
|
||||
`</tr>`;
|
||||
}
|
||||
|
||||
}
|
||||
131
html/test_13.02.20/test_13.02.20_V2/resources/css/main.css
Normal file
131
html/test_13.02.20/test_13.02.20_V2/resources/css/main.css
Normal file
@@ -0,0 +1,131 @@
|
||||
body {
|
||||
background-color: #282828;
|
||||
color: white;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
margin-right: 2%;
|
||||
margin-left: 8%;
|
||||
margin-top: 5%;
|
||||
font-family: museo-sans-rounded, sans-serif;
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: #787878;
|
||||
padding: 15px;
|
||||
display: inline-block;
|
||||
border: 2px solid white;
|
||||
border-radius: 15px;
|
||||
color: white;
|
||||
font-size: 16pt;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #505050;
|
||||
}
|
||||
button:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #2883d0;
|
||||
text-align: center;
|
||||
background-color: #3c3c3c;
|
||||
padding: 15px;
|
||||
margin-left: 10%;
|
||||
margin-right: 10%;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #91e22c;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #66D9EF;
|
||||
}
|
||||
a:hover {
|
||||
color: #A6E22E;
|
||||
}
|
||||
|
||||
input[type=color] {
|
||||
width: 4em;
|
||||
height: 2em;
|
||||
background-color: #787878;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
td, th {
|
||||
border: 1px solid white;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: left;
|
||||
background-color: #4CAF50;
|
||||
}
|
||||
|
||||
tr:nth-child(even) {
|
||||
background-color: #00000033;
|
||||
}
|
||||
tr:hover {
|
||||
background-color: rgba(255, 255, 255, 0.281);
|
||||
}
|
||||
|
||||
.center {
|
||||
background-color: #505050;
|
||||
margin: auto;
|
||||
margin-bottom: 10%;
|
||||
width: 70%;
|
||||
padding: 5%;
|
||||
height: max-content;
|
||||
border-radius: 15px;
|
||||
}
|
||||
.center * {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.inline {
|
||||
margin: 15px;
|
||||
}
|
||||
.inline * {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.leftalign * {
|
||||
margin: 15px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.textboxGrid {
|
||||
display: grid;
|
||||
justify-content: space-evenly;
|
||||
align-content: space-evenly;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-column-gap: auto;
|
||||
grid-row-gap: 20px;
|
||||
}
|
||||
.textboxGrid * {
|
||||
size: 100%;
|
||||
padding: 40px 80px;
|
||||
background-color: #787878;
|
||||
}
|
||||
.textboxGrid .linkElement {
|
||||
border: 1px solid black;
|
||||
}
|
||||
.textboxGrid .linkElement:hover {
|
||||
background-color: #505050;
|
||||
cursor: pointer;
|
||||
}
|
||||
.textboxGrid .linkElement a:hover {
|
||||
text-decoration: underline;
|
||||
color: #66D9EF;
|
||||
}
|
||||
.textboxGrid .linkElement * {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
background-color: transparent;
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
const taskArray = tasks.tasks;
|
||||
const grid = document.getElementsByClassName("textboxGrid")[0];
|
||||
|
||||
for (i=0; i<taskArray.length; i++) {
|
||||
|
||||
const linkElement = document.createElement("div");
|
||||
linkElement.className = "linkElement";
|
||||
|
||||
//TODO: taskArray needs to be preprocessed somehow
|
||||
linkElement.addEventListener("click", function () {
|
||||
window.location = taskArray[i]["path"];
|
||||
} )
|
||||
|
||||
const h2 = document.createElement("h2");
|
||||
const link = document.createElement("a");
|
||||
link.href = taskArray[i]["path"];
|
||||
link.innerHTML = taskArray[i]["name"];
|
||||
|
||||
h2.appendChild(link);
|
||||
linkElement.appendChild(h2);
|
||||
grid.appendChild(linkElement);
|
||||
|
||||
console.log(grid.querySelectorAll(".linkElement")[i]);
|
||||
grid.querySelectorAll(".linkElement")[i].addEventListener("onclick", function () {
|
||||
|
||||
window.location = taskArray[i]["path"];
|
||||
}, false);
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
const tasks = {"tasks": [{"name": "Oppgave 1", "path": "./oppgaver/oppgave1/oppgave.html"}]}
|
||||
Reference in New Issue
Block a user