MVC med Terje

2024-09-10 14:18:18 +02:00 · 2024-09-10 14:18:18 +02:00 · d3f21427f0
parent 4a15b372f9
commit d3f21427f0
2 changed files with 114 additions and 0 deletions
--- a/MVC/farger.html
+++ b/MVC/farger.html
@ -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>
--- a/MVC/farger.js
+++ b/MVC/farger.js
@ -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();
+}