From 54ff875525faa44ed7639b46019089e9d5983a96 Mon Sep 17 00:00:00 2001
From: Markus Schiller <m.schiller@ymail.com>
Date: Mon, 21 Oct 2024 15:35:58 +0200
Subject: [PATCH] pushed with daily script

---
 README.md          | 69 +++++++++++++++++-----------------------------
 js/generateHTML.js |  6 ++--
 2 files changed, 29 insertions(+), 46 deletions(-)

diff --git a/README.md b/README.md
index e39b3c8..ef65774 100644
--- a/README.md
+++ b/README.md
@@ -1,56 +1,39 @@
 # Card Generator
 
-```bash
-#temp webserver
-python3 -m http.server 8000
-```
+just a small app to generate a html Code by using HTML Inputs.
+
+**How does the app work**
 
-these are the inital requirements i set myself:
-
-- learn tailwindcss
-- the preview should be in the middle and the selectors on the left top right and bottom of the preview
-- let me set the height + width of the card with sliders
-- let me add content to each of the 4 edges
-  - let me select the direction of the text (e.g. horiztonal/vertical)
-- lets me add unlimited content in the middle and set the proportional height in % with a slider and show the correct %
-  - let me use text/image/list/table as content
-- for each content i want to be able to set the following:
-  - let me change the size, font, color and alignment of each text individually
-  - let me set the background color of each content part
-  - let me set the different borders to each content
-    - let me choose a border side
-    - allow me to choose 2 or more border sides
-    - the border type
-    - p.dotted {border-style: dotted;}p.dashed {border-style: dashed;}p.solid {border-style: solid;}p.double {border-style: double;}p.groove {border-style: groove;}p.ridge {border-style: ridge;}p.inset {border-style: inset;}p.outset {border-style: outset;}p.none {border-style: none;}p.hidden {border-style: hidden;}p.mix {border-style: dotted dashed solid double;}
-    - rounded borders
-    - shadow
-      - shift right/down
-      - spread
-      - blur
-      - opacity
-      - inset
-      - color
-- separate the different parts so they are more distingushable
-
-
-
-
-1) initalize
-=> get sectionSelect and add addEventListener
+1. initalize (main.js)
+
+- get sectionSelect and add addEventListener
   - update state.selectedSection
   - generateHTML
   - updateUIElements
-=> resetButton
-=> go through allElements and add addEventListener
+- resetButton
+- go through allElements and add addEventListener
   - update state var for selectedSection
   - generateHTML
   - updateUIElements
 
-2) generateHTML
-=> getElementById(previewSettings) and set innerHTML
-=> for Each section (card/top/bottom...) generate a new DIV with and append if there is content in the TextArea
+2. generateHTML (generateHTML.js)
+
+- getElementById(previewSettings) and set innerHTML
+- for Each section (card/top/bottom...) generate a new DIV with and append if there is content in the TextArea
+
+3. update UI Elements (main.js)
 
-3) update UI Elements
-=> go through allElements
+- go through allElements
   - update HTML Input based on current state
   - update HTML label for Input based on current state
+
+# Local Development
+
+you need some kind of local webserver
+
+```bash
+#temp webserver with python
+python3 -m http.server 8000
+```
+
+and the http://localhost:8000
diff --git a/js/generateHTML.js b/js/generateHTML.js
index 3cf8515..468a2d4 100644
--- a/js/generateHTML.js
+++ b/js/generateHTML.js
@@ -1,4 +1,4 @@
-import { state } from './state.js'
+import { state } from './state.js';
 
 function createSectionElement(section, sectionName) {
   const element = document.createElement('div');
@@ -9,7 +9,7 @@ function createSectionElement(section, sectionName) {
   element.style.overflow = 'hidden';
   element.style.position = 'absolute';
 
-  const textElement = document.createElement('p');
+  // const textElement = document.createElement('p');
   element.style.margin = '0';
   element.style.padding = '5px';
   element.style.textAlign = 'center';
@@ -21,7 +21,7 @@ function createSectionElement(section, sectionName) {
     element.textContent = section.style.textStyle.content;
   }
 
-  element.appendChild(textElement);
+  // element.appendChild(textElement);
   return element;
 }