Creamos el HTML de manera dinamica

merunga · Apr 25, 2019 · 98b8e09 · 98b8e09
1 parent b76f5ec
commit 98b8e09
Show file tree

Hide file tree

Showing 8 changed files with 93 additions and 20 deletions.
diff --git a/src/index.html b/src/index.html
@@ -9,25 +9,6 @@
 </head>
 <body>
   <div id="root">
-    <section class="todoapp">
-			<header class="header">
-				<h1>todos</h1>
-				<input class="new-todo" placeholder="What needs to be done?" autofocus="">
-			</header>
-			<section class="main" style="display: block;">
-				<ul class="todo-list">
-          <li data-id="" class="">
-            <div class="view">
-              <label>un todo</label>
-              <button class="destroy"></button>
-            </div>
-          </li>
-        </ul>
-			</section>
-			<footer class="footer" style="display: block;">
-				<span class="todo-count"><strong>1</strong> item left</span>
-			</footer>
-		</section>
   </div>
   <script src="main.js" type="module"></script>
 </body>

diff --git a/src/main.js b/src/main.js
@@ -1,3 +1,5 @@
+import { renderUI } from './view/controller.js';
+
 window.addEventListener('load', () => {
-  console.log('aaaaaaaa')
+  renderUI();
 });
diff --git a/src/styles.css b/src/styles.css
@@ -107,6 +107,7 @@ body {
 }
 
 .main {
+  display: block;
 	position: relative;
 	z-index: 2;
 	border-top: 1px solid #e6e6e6;
@@ -253,6 +254,7 @@ body {
 }
 
 .footer {
+  display: block;
 	color: #777;
 	padding: 10px 15px;
 	height: 20px;

diff --git a/src/view/App.js b/src/view/App.js
@@ -0,0 +1,27 @@
+import Header from './Header.js';
+import Todos from './Todos.js';
+import Footer from './Footer.js';
+
+/**
+ * Crea el html de la app dinamicamente basandose
+ * en los `todos` que se reciben como parametro
+ *
+ * @param todos Array de objetos con los todos existentes
+ */
+export default (todos) => {
+  // Creamos cada una de las secciones
+  const headerSrc = Header();
+  const todosSrc = Todos(todos);
+  const footerSrc = Footer(todos.length);
+
+  // Creamos el elemento padre con template string
+  const appSrc = `
+    <section class="todoapp">
+      ${headerSrc}
+      ${todosSrc}
+      ${footerSrc}
+    </section>
+  `;
+
+  return appSrc;
+};
diff --git a/src/view/Footer.js b/src/view/Footer.js
@@ -0,0 +1,10 @@
+/**
+ * Crea el html del footer
+ *
+ * @param count Cantidad de todos en la app
+ */
+export default count => (
+  `<footer class="footer" style="display: block;">
+    <span class="todo-count"><strong>${count}</strong> todos</span>
+  </footer>`
+);
diff --git a/src/view/Header.js b/src/view/Header.js
@@ -0,0 +1,10 @@
+/**
+ * Crea el html de la cabecera
+ */
+export default () => (`
+  <header class="header">
+    <h1>todos</h1>
+    <input class="new-todo" placeholder="What needs to be done?" autofocus="">
+  </header>
+  `
+);
diff --git a/src/view/Todos.js b/src/view/Todos.js
@@ -0,0 +1,20 @@
+/**
+ * Crea el html de la lista de todos
+ *
+ * @param todos Array de objetos con los todos existentes
+ * Los todos deben tener `id` y `label`
+ */
+export default todos => (
+  `<section class="main">
+      <ul class="todo-list">
+       ${todos.map(t => (`
+        <li data-id="${t.id}">
+          <div class="view">
+            <label>${t.label}</label>
+            <button class="destroy"></button>
+          </div>
+        </li>
+      `))}
+      </ul>
+    </section>`
+);
diff --git a/src/view/controller.js b/src/view/controller.js
@@ -0,0 +1,21 @@
+import App from './App.js';
+
+/**
+ * Renderiza el html de la aplicacion
+ */
+export const renderUI = () => {
+  // Por el momento comenzamos con todos estaticos
+  const todos = [
+    {
+      id: 'id',
+      label: 'Un todo',
+    },
+  ];
+
+  // creamos el HTML en formator string dinamicamente usando los todos
+  const app = App(todos);
+
+  // lo insertamos en el elemento #root
+  const root = document.getElementById('root');
+  root.innerHTML = app;
+};