From a850b1310f53a1d5508b716b3b0b641f8e433058 Mon Sep 17 00:00:00 2001
From: Markus Schiller <m.schiller@ymail.com>
Date: Sun, 27 Oct 2024 21:52:40 +0100
Subject: [PATCH] pushed with daily script

---
 index.html         | 522 ++++++++++++++++++++++++++-------------------
 js/generateHTML.js | 102 +++++----
 js/main.js         | 108 +++++++---
 js/state.js        | 107 +++++-----
 4 files changed, 491 insertions(+), 348 deletions(-)

diff --git a/index.html b/index.html
index ca2c9b9..6ec23d5 100644
--- a/index.html
+++ b/index.html
@@ -15,109 +15,131 @@ <h1 class="text-3xl font-bold mb-8 text-center">Card Generator</h1>
         <!-- Left Column -->
         <!----------------------------->
         <div id="leftColumn" class="flex flex-col space-y-4">
-          <div id="contentSettings" class="bg-green-500 min-h-28 p-4 rounded-lg shadow-sm">
-
-<h3 class="text-lg font-semibold mb-4">Content Settings</h3>
-
-<select id="sectionSelect">
-  <option value="card">Card</option>
-  <option value="top">Top</option>
-  <option value="bottom">Bottom</option>
-  <option value="left">Left</option>
-  <option value="right">Right</option>
-  <option value="middle">Middle</option>
-</select>
-
-<div>
-    <label for="widthSlider">Section Width</label>
-    <input type="range" id="widthSlider" min="10" max="2048" value="500" />
-    <span id="widthSliderValue">500</span>
-    <span>px</span>
-</div>
-
-<div>
-    <label for="heightSlider">Section Height</label>
-    <input type="range" id="heightSlider" min="10" max="2048" value="500" />
-    <span id="heightSliderValue">500</span>
-    <span>px</span>
-</div>
-
-<div>
-    <label for="bgColor">Background Color</label>
-    <input type="color" id="bgColor" value="#0000ff" />
-</div>
-
-<div>
-    <label for="textArea">Set Text</label>
-    <textarea id="textArea" rows="3" cols="30">Hello, World!</textarea>
-</div>
-
-<div>
-    <button id="addMiddleButton">Add Middle</button>
-    <button id="deleteMiddleButton">Delete Middle</button>
-</div>
-
-<div>
-    <button id="resetButton">Reset</button>
-</div>
-
+          <div
+            id="contentSettings"
+            class="bg-green-500 min-h-28 p-4 rounded-lg shadow-sm"
+          >
+            <h3 class="text-lg font-semibold mb-4">Content Settings</h3>
+
+            <select id="sectionSelect">
+              <option value="card">Card</option>
+              <option value="top">Top</option>
+              <option value="bottom">Bottom</option>
+              <option value="left">Left</option>
+              <option value="right">Right</option>
+              <option value="middle">Middle</option>
+            </select>
+
+            <div>
+              <label for="widthSlider">Section Width</label>
+              <input
+                type="range"
+                id="widthSlider"
+                min="10"
+                max="2048"
+                value="500"
+              />
+              <span id="widthSliderValue">500</span>
+              <span>px</span>
+            </div>
+
+            <div>
+              <label for="heightSlider">Section Height</label>
+              <input
+                type="range"
+                id="heightSlider"
+                min="10"
+                max="2048"
+                value="500"
+              />
+              <span id="heightSliderValue">500</span>
+              <span>px</span>
+            </div>
+
+            <div>
+              <label for="bgColor">Background Color</label>
+              <input type="color" id="bgColor" value="#0000ff" />
+            </div>
+
+            <div>
+              <label for="textArea">Set Text</label>
+              <textarea id="textArea" rows="3" cols="30">
+Hello, World!</textarea
+              >
+            </div>
+
+            <div>
+              <button id="addMiddleButton">Add Middle</button>
+              <button id="deleteMiddleButton">Delete Middle</button>
+            </div>
+
+            <div>
+              <button id="resetButton">Reset</button>
+            </div>
           </div>
-          <div id="textSettings" class="bg-red-600 min-h-28 p-4 rounded-lg shadow-sm">
-
-<h3 class="text-lg font-semibold mb-4">Text Settings</h3>
-
-<div>
-    <label for="fontSizeSlider">Font Size</label>
-    <input type="range" id="fontSizeSlider" min="1" max="72" value="16" />
-    <span id="fontSizeSliderValue">16</span>
-    <span>px</span>
-</div>
-
-<div>
-    <label>Font Family</label>
-    <select id="fontSelect">
-        <option value="arial">Arial</option>
-        <option value="helvetica">Helvetica</option>
-        <option value="timesNewRoman">Times New Roman</option>
-        <option value="georgia">Georgia</option>
-        <option value="courierNew">Courier New</option>
-        <option value="verdana">Verdana</option>
-    </select>
-</div>
-
-<div>
-    <label for="textColor">Text Color</label>
-    <input type="color" id="textColor" value="#0000ff" />
-</div>
-
-<div>
-    <label>Text Alignment</label>
-    <button id="leftAlignmentButton">Left</button>
-    <button id="rightAlignmentButton">Right</button>
-    <button id="centerAlignmentButton">Center</button>
-</div>
-
-
-    <label>Text Formatting</label>
-
-<div>
-    <label for="boldCheckbox" class="font-bold">Bold Text</label>
-    <input type="checkbox" id="boldCheckbox" />
-
-    <label for="italicCheckbox" class="italic">Italic</label>
-    <input type="checkbox" id="italicCheckbox" />
-
-    <label for="underlineCheckbox" class="underline">Underline</label>
-    <input type="checkbox" id="underlineCheckbox" />
-
-    <label for="strikethroughCheckbox" class="line-through">Strikethrough</label>
-    <input type="checkbox" id="strikethroughCheckbox" />
-
+          <div
+            id="textSettings"
+            class="bg-red-600 min-h-28 p-4 rounded-lg shadow-sm"
+          >
+            <h3 class="text-lg font-semibold mb-4">Text Settings</h3>
+
+            <div>
+              <label for="fontSizeSlider">Font Size</label>
+              <input
+                type="range"
+                id="fontSizeSlider"
+                min="1"
+                max="72"
+                value="16"
+              />
+              <span id="fontSizeSliderValue">16</span>
+              <span>px</span>
+            </div>
+
+            <div>
+              <label>Font Family</label>
+              <select id="fontSelect">
+                <option value="arial">Arial</option>
+                <option value="helvetica">Helvetica</option>
+                <option value="timesNewRoman">Times New Roman</option>
+                <option value="georgia">Georgia</option>
+                <option value="courierNew">Courier New</option>
+                <option value="verdana">Verdana</option>
+              </select>
+            </div>
+
+            <div>
+              <label for="textColor">Text Color</label>
+              <input type="color" id="textColor" value="#0000ff" />
+            </div>
+
+            <div>
+              <label>Text Alignment</label>
+              <button id="leftAlignmentButton">Left</button>
+              <button id="rightAlignmentButton">Right</button>
+              <button id="centerAlignmentButton">Center</button>
+            </div>
+
+            <label>Text Formatting</label>
+
+            <div>
+              <label for="boldCheckbox" class="font-bold">Bold Text</label>
+              <input type="checkbox" id="boldCheckbox" />
+
+              <label for="italicCheckbox" class="italic">Italic</label>
+              <input type="checkbox" id="italicCheckbox" />
+
+              <label for="underlineCheckbox" class="underline">Underline</label>
+              <input type="checkbox" id="underlineCheckbox" />
+
+              <label for="strikethroughCheckbox" class="line-through"
+                >Strikethrough</label
+              >
+              <input type="checkbox" id="strikethroughCheckbox" />
+              <!--
     <label for="highlightCheckbox" class="bg-lime-400">Highlight</label>
-    <input type="checkbox" id="highlightCheckbox" />
-</div>
-
-
+    <input type="checkbox" id="highlightCheckbox" /> -->
+            </div>
           </div>
         </div>
         <!-- end left -->
@@ -127,12 +149,23 @@ <h3 class="text-lg font-semibold mb-4">Text Settings</h3>
         <!----------------------------->
 
         <div id="middleColumn" class="md:col-span-2 flex flex-col space-y-4">
-          <div id="previewContainer" class="bg-green-600 p-4 rounded-lg shadow-sm overflow-hidden">
-          <h3 class="text-lg font-semibold mb-4">Preview</h3>
-
-            <div id="previewSettings" class="relative w-full aspect-square flex items-center justify-center"></div>
+          <div
+            id="previewContainer"
+            class="bg-green-600 p-4 rounded-lg shadow-sm overflow-hidden"
+          >
+            <h3 class="text-lg font-semibold mb-4">Preview</h3>
+
+            <div
+              id="previewSettings"
+              class="relative w-full aspect-square flex items-center justify-center"
+            ></div>
+          </div>
+          <div
+            id="htmlOutputSettings"
+            class="bg-green-600 min-h-28 p-4 rounded-lg shadow-sm"
+          >
+            <h3 class="text-lg font-semibold mb-4">HTML Output</h3>
           </div>
-          <div id="htmlOutputSettings" class="bg-green-600 min-h-28 p-4 rounded-lg shadow-sm"><h3 class="text-lg font-semibold mb-4">HTML Output</h3></div>
         </div>
         <!-- end middle -->
 
@@ -141,119 +174,169 @@ <h3 class="text-lg font-semibold mb-4">Preview</h3>
         <!----------------------------->
 
         <div id="rightColumn" class="flex flex-col space-y-4">
-          <div id="borderSettings" class="bg-blue-500 min-h-28 p-4 rounded-lg shadow-sm">
-
-<h3 class="text-lg font-semibold mb-4">Border Settings</h3>
-
-<div>
-    <div>
-        <label>Border Sides</label>
-        <label for="topBorderCheckbox">Top Border</label>
-        <input type="checkbox" id="topBorderCheckbox" />
-
-        <label for="rightBorderCheckbox">Right Border</label>
-        <input type="checkbox" id="rightBorderCheckbox" />
-
-        <label for="bottomBorderCheckbox">Bottom Border</label>
-        <input type="checkbox" id="bottomBorderCheckbox" />
-
-        <label for="leftBorderCheckbox">Left Border</label>
-        <input type="checkbox" id="leftBorderCheckbox" />
-    </div>
-
-    <div>
-        <label>Border Type</label>
-        <select id="borderTypeSelect">
-            <option value="solid">Solid</option>
-            <option value="dashed">Dashed</option>
-            <option value="dotted">Dotted</option>
-            <option value="double">Double</option>
-            <option value="groove">Groove</option>
-            <option value="ridge">Ridge</option>
-            <option value="inset">Inset</option>
-            <option value="outset">Outset</option>
-        </select>
-    </div>
-
-    <div>
-        <label for="borderSizeSlider">Border Size</label>
-        <input type="range" id="borderSizeSlider" min="0" max="20" value="1" />
-        <span id="borderSizeSliderValue">1</span>
-        <span>px</span>
-    </div>
-
-
-    <div>
-        <label for="borderRoundendCornersSlider">Roundend Corners</label>
-        <input type="range" id="borderRoundendCornersSlider" min="0" max="50" value="0" />
-        <span id="borderRoundendCornersSliderValue">0</span>
-        <span>px</span>
-    </div>
-
-    <div>
-        <label for="borderColor">Border Color</label>
-        <input type="color" id="borderColor" value="#0000ff" />
-    </div>
-</div>
-
-<div>
-    <label>Shadow Settings</label>
-    <div>
-        <label for="shadowCheckbox">Shadow</label>
-        <input type="checkbox" id="shadowCheckbox" />
-
-        <label for="insetShadowCheckbox">Inset Shadow</label>
-        <input type="checkbox" id="insetShadowCheckbox" />
-    </div>
-
-    <div>
-        <label for="shadowShiftRightSlider">Shadow Shift Right</label>
-        <input type="range" id="shadowShiftRightSlider" min="-20" max="20" value="0" />
-        <span id="shadowShiftRightSliderValue">0</span>
-        <span>px</span>
-    </div>
-
-    <div>
-        <label for="shadowShiftDownSlider">Shadow Shift Down</label>
-        <input type="range" id="shadowShiftDownSlider" min="-20" max="20" value="0" />
-        <span id="shadowShiftDownSliderValue">0</span>
-        <span>px</span>
-    </div>
-
-    <div>
-        <label for="shadowSpreadSlider">Shadow Spread</label>
-        <input type="range" id="shadowSpreadSlider" min="0" max="20" value="0" />
-        <span id="shadowSpreadSliderValue">0</span>
-        <span>px</span>
-    </div>
-
-    <div>
-        <label for="shadowBlurSlider">Shadow Blur</label>
-        <input type="range" id="shadowBlurSlider" min="0" max="20" value="0" />
-        <span id="shadowBlurSliderValue">0</span>
-        <span>px</span>
-    </div>
-
-    <div>
-        <label for="shadowOpacitySlider">Shadow Opacity</label>
-        <input type="range" id="shadowOpacitySlider" min="0" max="100" value="50" />
-        <span id="shadowOpacitySliderValue">50</span>
-        <span>%</span>
-    </div>
-
-    <div>
-        <label for="shadowColor">Shadow Color</label>
-        <input type="color" id="shadowColor" value="#0000ff" />
-    </div>
-</div>
-
+          <div
+            id="borderSettings"
+            class="bg-blue-500 min-h-28 p-4 rounded-lg shadow-sm"
+          >
+            <h3 class="text-lg font-semibold mb-4">Border Settings</h3>
+
+            <div>
+              <div>
+                <label>Border Sides</label>
+                <label for="topBorderCheckbox">Top Border</label>
+                <input type="checkbox" id="topBorderCheckbox" />
+
+                <label for="rightBorderCheckbox">Right Border</label>
+                <input type="checkbox" id="rightBorderCheckbox" />
+
+                <label for="bottomBorderCheckbox">Bottom Border</label>
+                <input type="checkbox" id="bottomBorderCheckbox" />
+
+                <label for="leftBorderCheckbox">Left Border</label>
+                <input type="checkbox" id="leftBorderCheckbox" />
+              </div>
+
+              <div>
+                <label>Border Type</label>
+                <select id="borderTypeSelect">
+                  <option value="solid">Solid</option>
+                  <option value="dashed">Dashed</option>
+                  <option value="dotted">Dotted</option>
+                  <option value="double">Double</option>
+                  <option value="groove">Groove</option>
+                  <option value="ridge">Ridge</option>
+                  <option value="inset">Inset</option>
+                  <option value="outset">Outset</option>
+                </select>
+              </div>
+
+              <div>
+                <label for="borderSizeSlider">Border Size</label>
+                <input
+                  type="range"
+                  id="borderSizeSlider"
+                  min="0"
+                  max="20"
+                  value="1"
+                />
+                <span id="borderSizeSliderValue">1</span>
+                <span>px</span>
+              </div>
+
+              <div>
+                <label for="borderRoundendCornersSlider"
+                  >Roundend Corners</label
+                >
+                <input
+                  type="range"
+                  id="borderRoundendCornersSlider"
+                  min="0"
+                  max="50"
+                  value="0"
+                />
+                <span id="borderRoundendCornersSliderValue">0</span>
+                <span>px</span>
+              </div>
+
+              <div>
+                <label for="borderColor">Border Color</label>
+                <input type="color" id="borderColor" value="#0000ff" />
+              </div>
+            </div>
+
+            <div>
+              <label>Shadow Settings</label>
+              <div>
+                <label for="shadowCheckbox">Shadow</label>
+                <input type="checkbox" id="shadowCheckbox" />
+
+                <label for="insetShadowCheckbox">Inset Shadow</label>
+                <input type="checkbox" id="insetShadowCheckbox" />
+              </div>
+
+              <div>
+                <label for="shadowShiftRightSlider">Shadow Shift Right</label>
+                <input
+                  type="range"
+                  id="shadowShiftRightSlider"
+                  min="-20"
+                  max="20"
+                  value="0"
+                />
+                <span id="shadowShiftRightSliderValue">0</span>
+                <span>px</span>
+              </div>
+
+              <div>
+                <label for="shadowShiftDownSlider">Shadow Shift Down</label>
+                <input
+                  type="range"
+                  id="shadowShiftDownSlider"
+                  min="-20"
+                  max="20"
+                  value="0"
+                />
+                <span id="shadowShiftDownSliderValue">0</span>
+                <span>px</span>
+              </div>
+
+              <div>
+                <label for="shadowSpreadSlider">Shadow Spread</label>
+                <input
+                  type="range"
+                  id="shadowSpreadSlider"
+                  min="0"
+                  max="20"
+                  value="0"
+                />
+                <span id="shadowSpreadSliderValue">0</span>
+                <span>px</span>
+              </div>
+
+              <div>
+                <label for="shadowBlurSlider">Shadow Blur</label>
+                <input
+                  type="range"
+                  id="shadowBlurSlider"
+                  min="0"
+                  max="20"
+                  value="0"
+                />
+                <span id="shadowBlurSliderValue">0</span>
+                <span>px</span>
+              </div>
+
+              <div>
+                <label for="shadowOpacitySlider">Shadow Opacity</label>
+                <input
+                  type="range"
+                  id="shadowOpacitySlider"
+                  min="0"
+                  max="100"
+                  value="50"
+                />
+                <span id="shadowOpacitySliderValue">50</span>
+                <span>%</span>
+              </div>
+
+              <div>
+                <label for="shadowColor">Shadow Color</label>
+                <input type="color" id="shadowColor" value="#0000ff" />
+              </div>
+            </div>
           </div>
-          <div id="helpSection" class="bg-blue-600 min-h-28 p-4 rounded-lg shadow-sm">
-
-<h3 class="text-lg font-semibold mb-4">Help</h3>
-
-You can use html Entities for example <code class="text-sm sm:text-base inline-flex text-left items-center space-x-4 bg-gray-800 text-white rounded-lg p-1">&amp;nbsp;</code> for empty spaces.
-
+          <div
+            id="helpSection"
+            class="bg-blue-600 min-h-28 p-4 rounded-lg shadow-sm"
+          >
+            <h3 class="text-lg font-semibold mb-4">Help</h3>
+
+            You can use html Entities for example
+            <code
+              class="text-sm sm:text-base inline-flex text-left items-center space-x-4 bg-gray-800 text-white rounded-lg p-1"
+              >&amp;nbsp;</code
+            >
+            for empty spaces.
           </div>
         </div>
         <!-- end right -->
@@ -262,8 +345,7 @@ <h3 class="text-lg font-semibold mb-4">Help</h3>
     </div>
     <!-- end container -->
 
-
-<!--   <script>
+    <!--   <script>
     let componentsLoaded = 0;
     const totalComponents = 5;
 
diff --git a/js/generateHTML.js b/js/generateHTML.js
index c1b34b8..61da897 100644
--- a/js/generateHTML.js
+++ b/js/generateHTML.js
@@ -1,23 +1,36 @@
-import { state } from './state.js';
+import { state } from "./state.js";
 
 function createSectionElement(section, sectionName) {
-  const element = document.createElement('div');
+  const element = document.createElement("div");
+  element.id = sectionName;
   element.style.backgroundColor = section.contentSettings.backgroundColor;
-  element.style.display = 'flex';
-  element.style.alignItems = 'center';
-  element.style.justifyContent = 'center';
-  element.style.overflow = 'hidden';
-  element.style.position = 'absolute';
-
-  // const textElement = document.createElement('p');
-  element.style.margin = '0';
-  element.style.padding = '5px';
-  element.style.textAlign = 'center';
-  element.style.wordWrap = 'break-word';
-  element.style.fontWeight = section.textSettings.bold ? 'bold' : '';
-  element.style.fontStyle = section.textSettings.italic ? 'italic' : '';
-
-  if (sectionName !== 'card') {
+  element.style.display = "flex";
+  element.style.alignItems = "center";
+  element.style.justifyContent = "center";
+  element.style.overflow = "hidden";
+  element.style.position = "absolute";
+
+  // const textElement = document.createElement("p");
+  element.style.margin = "0";
+  element.style.padding = "5px";
+  element.style.textAlign = "center";
+  element.style.wordWrap = "break-word";
+  element.style.fontWeight = section.textSettings.bold ? "bold" : "";
+  element.style.fontStyle = section.textSettings.italic ? "italic" : "";
+  element.style.textDecoration = section.textSettings.underline
+    ? "underline"
+    : "";
+
+  element.style.textDecoration = section.textSettings.strikethrough
+    ? "line-through"
+    : "";
+
+  element.style.fontSize = section.textSettings.fontsize + "px";
+
+  if (sectionName === "card") {
+    element.className =
+      "transform-gpu origin-top-left w-[500px] h-[500px] max-w-full max-h-full aspect-square";
+  } else {
     element.textContent = section.contentSettings.content;
   }
 
@@ -26,58 +39,59 @@ function createSectionElement(section, sectionName) {
 }
 
 export function generateHTML() {
-  const preview = document.getElementById('previewSettings');
-  const card = createSectionElement(state.sections.card, 'card');
-  card.style.position = 'relative';
-  card.style.width = state.sections.card.contentSettings.width + 'px';
-  card.style.height = state.sections.card.contentSettings.height + 'px';
+  console.log("state: ", state);
+  const preview = document.getElementById("previewSettings");
+  const card = createSectionElement(state.sections.card, "card");
+  card.style.position = "relative";
+  card.style.width = state.sections.card.contentSettings.width + "px";
+  card.style.height = state.sections.card.contentSettings.height + "px";
 
   if (state.sections.top.contentSettings.content) {
-    const top = createSectionElement(state.sections.top, 'top');
-    top.style.top = '0';
-    top.style.left = '0';
-    top.style.width = '100%';
-    top.style.height = state.sections.contentSettings.height + 'px';
+    const top = createSectionElement(state.sections.top, "top");
+    top.style.top = "0";
+    top.style.left = "0";
+    top.style.width = "100%";
+    top.style.height = state.sections.top.contentSettings.height + "px";
     card.appendChild(top);
   }
 
   if (state.sections.bottom.contentSettings.content) {
-    const bottom = createSectionElement(state.sections.bottom, 'bottom');
-    bottom.style.bottom = '0';
-    bottom.style.left = '0';
-    bottom.style.width = '100%';
-    bottom.style.height = state.sections.bottom.contentSettings.height + 'px';
+    const bottom = createSectionElement(state.sections.bottom, "bottom");
+    bottom.style.bottom = "0";
+    bottom.style.left = "0";
+    bottom.style.width = "100%";
+    bottom.style.height = state.sections.bottom.contentSettings.height + "px";
     card.appendChild(bottom);
   }
 
   if (state.sections.left.contentSettings.content) {
-    const left = createSectionElement(state.sections.left, 'left');
-    left.style.top = state.sections.top.contentSettings.height + 'px';
-    left.style.left = '0';
-    left.style.width = state.sections.left.contentSettings.width + 'px';
+    const left = createSectionElement(state.sections.left, "left");
+    left.style.top = state.sections.top.contentSettings.height + "px";
+    left.style.left = "0";
+    left.style.width = state.sections.left.contentSettings.width + "px";
     left.style.height = `calc(100% - ${parseInt(state.sections.top.contentSettings.height) + parseInt(state.sections.bottom.contentSettings.height)}px)`;
     card.appendChild(left);
   }
 
   if (state.sections.right.contentSettings.content) {
-    const right = createSectionElement(state.sections.right, 'right');
-    right.style.top = state.sections.top.contentSettings.height + 'px';
-    right.style.right = '0';
-    right.style.width = state.sections.right.contentSettings.width + 'px';
+    const right = createSectionElement(state.sections.right, "right");
+    right.style.top = state.sections.top.contentSettings.height + "px";
+    right.style.right = "0";
+    right.style.width = state.sections.right.contentSettings.width + "px";
     right.style.height = `calc(100% - ${parseInt(state.sections.top.contentSettings.height) + parseInt(state.sections.bottom.contentSettings.height)}px)`;
     card.appendChild(right);
   }
 
   if (state.sections.middle.contentSettings.content) {
-    const middle = createSectionElement(state.sections.middle, 'middle');
-    middle.style.top = state.sections.top.contentSettings.height + 'px';
-    middle.style.left = state.sections.left.contentSettings.width + 'px';
+    const middle = createSectionElement(state.sections.middle, "middle");
+    middle.style.top = state.sections.top.contentSettings.height + "px";
+    middle.style.left = state.sections.left.contentSettings.width + "px";
     middle.style.width = `calc(100% - ${parseInt(state.sections.left.contentSettings.width) + parseInt(state.sections.right.contentSettings.width)}px)`;
     middle.style.height = `calc(100% - ${parseInt(state.sections.top.contentSettings.height) + parseInt(state.sections.bottom.contentSettings.height)}px)`;
     card.appendChild(middle);
   }
 
-  preview.innerHTML = '';
+  preview.innerHTML = "";
   preview.appendChild(card);
 
   // scalePreview();
diff --git a/js/main.js b/js/main.js
index e55bcae..3503f9e 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,45 +1,83 @@
-import { state, resetState} from './state.js'
-import {generateHTML} from './generateHTML.js'
+import { state, resetState } from "./state.js";
+import { generateHTML } from "./generateHTML.js";
 
 const allElements = [
-  { elementID: 'heightSlider', eventType: 'input', inputType: 'range', stateKey: ['contentSettings', 'height'] },
-  { elementID: 'widthSlider', eventType: 'input', inputType: 'range', stateKey: ['contentSettings', 'width'] },
-  { elementID: 'bgColor', eventType: 'input', inputType: 'color', stateKey: ['contentSettings', 'backgroundColor'] },
   {
-    elementID: 'textArea',
-    eventType: 'input',
-    inputType: 'textarea',
-    stateKey: ['contentSettings', 'content'],
+    elementID: "heightSlider",
+    eventType: "input",
+    inputType: "range",
+    stateKey: ["contentSettings", "height"],
   },
   {
-    elementID: 'boldCheckbox',
-    eventType: 'change',
-    inputType: 'checkbox',
-    stateKey: ['textSettings', 'bold'],
+    elementID: "widthSlider",
+    eventType: "input",
+    inputType: "range",
+    stateKey: ["contentSettings", "width"],
+  },
+  {
+    elementID: "bgColor",
+    eventType: "input",
+    inputType: "color",
+    stateKey: ["contentSettings", "backgroundColor"],
+  },
+  {
+    elementID: "textArea",
+    eventType: "input",
+    inputType: "textarea",
+    stateKey: ["contentSettings", "content"],
+  },
+  {
+    elementID: "fontSizeSlider",
+    eventType: "input",
+    inputType: "range",
+    stateKey: ["textSettings", "fontsize"],
+  },
+  {
+    elementID: "boldCheckbox",
+    eventType: "change",
+    inputType: "checkbox",
+    stateKey: ["textSettings", "bold"],
+  },
+  {
+    elementID: "italicCheckbox",
+    eventType: "change",
+    inputType: "checkbox",
+    stateKey: ["textSettings", "italic"],
+  },
+  {
+    elementID: "underlineCheckbox",
+    eventType: "change",
+    inputType: "checkbox",
+    stateKey: ["textSettings", "underline"],
+  },
+  {
+    elementID: "strikethroughCheckbox",
+    eventType: "change",
+    inputType: "checkbox",
+    stateKey: ["textSettings", "strikethrough"],
   },
-  { elementID: 'fontSizeSlider', eventType: 'input', inputType: 'range', stateKey: ['textSettings', 'font-size'] },
-
 ];
 
 function initialize() {
-  const selectSection = document.getElementById('sectionSelect');
-  selectSection.addEventListener('change', function () {
+  const selectSection = document.getElementById("sectionSelect");
+  selectSection.addEventListener("change", function () {
     state.selectedSection = this.value;
-    console.log('changed selectSection to: ', this.value);
+    console.log("changed selectSection to: ", this.value);
     generateHTML();
     updateUIElements();
   });
 
-  const resetButton = document.getElementById('resetButton');
+  const resetButton = document.getElementById("resetButton");
   if (resetButton) {
-    resetButton.addEventListener('click', resetState);
+    resetButton.addEventListener("click", resetState);
   }
 
   for (const elem of allElements) {
     const element = document.getElementById(elem.elementID);
     if (element) {
       element.addEventListener(elem.eventType, function () {
-        let newValue = elem.inputType === 'checkbox' ? this.checked : this.value;
+        let newValue =
+          elem.inputType === "checkbox" ? this.checked : this.value;
 
         let target = state.sections[state.selectedSection];
         for (let i = 0; i < elem.stateKey.length - 1; i++) {
@@ -50,12 +88,12 @@ function initialize() {
         generateHTML();
         updateUIElements();
 
-        console.log('elementID: ', elem.elementID);
-        console.log('eventType: ', elem.eventType);
-        console.log('inputType: ', elem.inputType);
-        console.log('stateKey: ', elem.stateKey);
-        console.log('newValue: ', newValue);
-        console.log('state: ', state);
+        console.log("elementID: ", elem.elementID);
+        console.log("eventType: ", elem.eventType);
+        console.log("inputType: ", elem.inputType);
+        console.log("stateKey: ", elem.stateKey);
+        console.log("newValue: ", newValue);
+        console.log("state: ", state);
       });
     } else {
       console.warn(`Element with ID "${elem.elementID}" not found.`);
@@ -71,7 +109,7 @@ function updateUIElements() {
 
   for (const elem of allElements) {
     const element = document.getElementById(elem.elementID);
-    const elementValue = document.getElementById(elem.elementID + 'Value');
+    const elementValue = document.getElementById(elem.elementID + "Value");
     if (!element) continue;
 
     let value = currentSection;
@@ -79,7 +117,7 @@ function updateUIElements() {
       value = value[key];
     }
 
-    if (elem.inputType === 'checkbox') {
+    if (elem.inputType === "checkbox") {
       element.checked = value;
     } else {
       element.value = value;
@@ -89,16 +127,16 @@ function updateUIElements() {
       elementValue.textContent = value;
     }
 
-    if (elem.inputType === 'textarea') {
-      element.disabled = state.selectedSection === 'card';
+    if (elem.inputType === "textarea") {
+      element.disabled = state.selectedSection === "card";
     }
   }
 }
 
-console.log("init")
+console.log("init");
 initialize();
 
-document.addEventListener('DOMContentLoaded', () => {
-  console.log("init")
+document.addEventListener("DOMContentLoaded", () => {
+  console.log("init");
   initialize();
-});
\ No newline at end of file
+});
diff --git a/js/state.js b/js/state.js
index 4a09236..72bfa7e 100644
--- a/js/state.js
+++ b/js/state.js
@@ -1,75 +1,84 @@
 const stateTemplate = {
-  selectedSection: 'card',
+  selectedSection: "card",
   sections: {
     card: {
       contentSettings: {
-        width: '500',
-        height: '500',
-        backgroundColor: '#00ff00',
+        width: "500",
+        height: "500",
+        backgroundColor: "#00ff00",
+        content: "No text for card, use Middle instead!",
       },
       textSettings: {
-        content: 'No text for card, use Middle instead!',
         bold: false,
         italic: false,
+        underline: false,
       },
-      borderSettings: {
-
-      },
+      borderSettings: {},
     },
     top: {
-      dimensions: { width: '500', height: '50' },
-      style: {
-        backgroundColor: '',
-        textStyle: {
-          content: 'Top',
-          bold: false,
-          italic: false,
-        },
+      contentSettings: {
+        width: "500",
+        height: "50",
+        backgroundColor: "",
+        content: "Top",
+      },
+      textSettings: {
+        bold: false,
+        italic: false,
       },
+      borderSettings: {},
     },
     bottom: {
-      dimensions: { width: '500', height: '50' },
-      style: {
-        backgroundColor: '',
-        textStyle: {
-          content: 'Bottom',
-          bold: false,
-          italic: false,
-        },
+      contentSettings: {
+        width: "500",
+        height: "50",
+        backgroundColor: "",
+        content: "Bottom",
       },
+      textSettings: {
+        bold: false,
+        italic: false,
+      },
+      borderSettings: {},
     },
     right: {
-      dimensions: { width: '50', height: '400' },
-      style: {
-        backgroundColor: '',
-        textStyle: {
-          content: 'Right',
-          bold: false,
-          italic: false,
-        },
+      contentSettings: {
+        width: "50",
+        height: "400",
+        backgroundColor: "",
+        content: "Right",
       },
+      textSettings: {
+        bold: false,
+        italic: false,
+      },
+      borderSettings: {},
     },
     left: {
-      dimensions: { width: '50', height: '400' },
-      style: {
-        backgroundColor: '',
-        textStyle: {
-          content: 'Left',
-          bold: false,
-          italic: false,
-        },
+      contentSettings: {
+        width: "50",
+        height: "400",
+        backgroundColor: "",
+        content: "Left",
       },
+      textSettings: {
+        bold: false,
+        italic: false,
+      },
+      borderSettings: {},
     },
     middle: {
-      dimensions: { width: '400', height: '400' },
-      style: {
-        backgroundColor: '',
-        textStyle: {
-          content: 'Middle',
-          bold: false,
-          italic: false,
-        },
+      contentSettings: {
+        width: "400",
+        height: "400",
+        backgroundColor: "",
+        content: "Middle",
+      },
+      textSettings: {
+        bold: false,
+        italic: false,
       },
+      borderSettings: {},
     },
   },
 };
@@ -80,4 +89,4 @@ export function resetState() {
   generateHTML();
 }
 
-export let state = JSON.parse(JSON.stringify(stateTemplate));
\ No newline at end of file
+export let state = JSON.parse(JSON.stringify(stateTemplate));