From d3f21427f0baaaf76cfdc6f1a367c4a1bb69b608 Mon Sep 17 00:00:00 2001 From: Geir Okkenhaug Jerstad Date: Tue, 10 Sep 2024 14:18:18 +0200 Subject: [PATCH] MVC med Terje --- MVC/farger.html | 42 +++++++++++++++++++++++++++++ MVC/farger.js | 72 +++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 114 insertions(+) create mode 100644 MVC/farger.html create mode 100644 MVC/farger.js diff --git a/MVC/farger.html b/MVC/farger.html new file mode 100644 index 0000000..ccd2ff1 --- /dev/null +++ b/MVC/farger.html @@ -0,0 +1,42 @@ + + + + + + Document + + +
+ +
+ + + + \ No newline at end of file diff --git a/MVC/farger.js b/MVC/farger.js new file mode 100644 index 0000000..46f73ff --- /dev/null +++ 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()} +
+ ${createColorsHtml()} +
+ `; +} +function createAddColorHtml() { + if (!isAdding) return ''; + return /*HTML*/ ` + + + + `; + +} +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*/ ` +
+
+
${color}
+ +
+
+
+ `; + } + 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(); +} \ No newline at end of file