geir/startit
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

MVC med Terje

Browse source
This commit is contained in:
Geir Okkenhaug Jerstad 2024-09-10 14:18:18 +02:00
parent 4a15b372f9
commit d3f21427f0
2 changed files with 114 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
MVC/farger.html Normal file
View file

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
</div>
<script>
// modell
let colors = ['red','green','blue','yellow', 'grey']
// view
function updateView() {
for (let color of colors) {
colorsHtml = /*HTML*/ `
<div class="color">
<div class="topBox">
${createColors}
</div>
</div>
`;
}
document.getElementById('app').innerHTML = /*HTML*/ `
<div class="colors>"></div>
`;
}
function createColorsHtml(){
let colorsHtml = '';
for(let color of colors ){
}
}
</script>
</body>
</html>

72
MVC/farger.js Normal file
View file

@ -0,0 +1,72 @@
// model
let colors = ['red', 'green', 'blue', 'yellow', 'grey']
let isAdding = false;
let addColorName;
// view
updateView();
function updateView() {
document.getElementById('app').innerHTML = /*HTML*/`
${createAddColorHtml()}
<div class="colors">
${createColorsHtml()}
</div>
`;
}
function createAddColorHtml() {
if (!isAdding) return '<button onclick="startAdd()">+</button>';
return /*HTML*/ `
<input
type="text"
oninput="addColorName=this.value"
value="${addColorName ?? ''}"
/>
<button onclick="addColor()">Legg til ny farge</button>
<button onclick="cancelAddColor()">Avbryt</button>
`;
}
function addColor() {
colors.push(addColorName);
isAdding = false;
addColorName = '';
updateView();
}
function createColorHtml() {
let colorsHtml = '';
for (let i = 0; i < colors.lenght; i++) {
let color = colors[i];
colorsHtml += /*HTML*/ `
<div class="color">
<div class="topBox">
<div>${color}</div>
<button onclick="deleteColor(${i})">x</button>
</div>
<div style="background-color: ${color}" class="box"></div>
</div>
`;
}
return colorsHtml;
}
// Controller
function addColor(){
colors.push(addColorName);
isAdding = false;
addColorName = '';
updateView();
}
function deleteColor(index) {
colors.splice(index, 1)
updateView();
}
function startAdd() {
isAdding = true;
updateView();
}
function cancelAdd() {
isAdding = false;
updateView();
}