pushed with daily script

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

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;
 }