pass template

index.js

@@ -0,0 +1,103 @@
+const body = document.querySelector(".body");
+console.log(document.body.innerHTML);
+
+fetch(window.location.origin + "/pass.json")
+  .then((data) => data.json())
+  .then((jsondata1) => {
+    console.log(jsondata1);
+    jsondata1.map((jsondata) => {
+      body.innerHTML += `<div ${!jsondata.background ? `style="background: black"` : `style="background: ${jsondata.background}"`} class="pass">
+    <div class="pass-header-v">
+        <div class="pass-header">
+            <div class="pass-header-img">
+                <img
+                    src="${jsondata.header.img.src}"
+                    alt="${jsondata.header.img.alt}"
+                />
+            </div>
+            <div class="pass-header-text">
+                <p ${!jsondata.header.desc.color ? "" : `style="color: ${jsondata.header.desc.color}"`} class="pass-desc">${jsondata.header.desc.data}</p>
+                <h2 ${!jsondata.header.data.color ? "" : `style="color: ${jsondata.header.data.color}"`} class="pass-name">${jsondata.header.data.data}</h2>
+            </div>
+        </div>
+        ${
+          !jsondata.header.body
+            ? ``
+            : `<div ${!jsondata.header.body.img ? `style="height: max-content"` : ``} class="pass-body-img">
+            ${
+              !jsondata.header.body.img
+                ? ``
+                : `<img
+                src="${jsondata.header.body.img.src}"
+                alt="${jsondata.header.body.img.alt}"
+            />`
+            }
+            ${!jsondata.header.body.desc ? `` : `<p ${!jsondata.header.body.desc.color ? "" : `style="color: ${jsondata.header.body.desc.color}"`} class="pass-desc">${jsondata.header.body.desc.data}</p>`}
+            ${!jsondata.header.body.data ? `` : `<p ${!jsondata.header.body.data.color ? "" : `style="color: ${jsondata.header.body.data.color}"`} class="pass-body-img-data"><b>${jsondata.header.body.data.data}</b></p>`}
+        </div>`
+        }
+        ${
+          !jsondata.body
+            ? ``
+            : `<div class="pass-body">
+              ${jsondata.body.reduce((acc, block) => {
+                return (
+                  acc +
+                  `<div class="pass-body-text">
+                    <div>
+                      ${
+                        !block.left
+                          ? ``
+                          : `<p ${!block.left.desc.color ? `` : `style="color: ${block.left.desc.color}"`} class="pass-desc">${block.left.desc.data}</p>
+                      <p ${!block.left.data.color ? `` : `style="color: ${block.left.data.color}"`}>
+                      ${block.left.data.data}
+                      </p>`
+                      }
+                    </div>
+                    <div>
+                      ${
+                        !block.right
+                          ? ``
+                          : `<p ${!block.right.desc.color ? `` : `style="color: ${block.right.desc.color}"`} class="pass-desc">${block.right.desc.data}</p>
+                      <p ${!block.right.data.color ? `` : `style="color: ${block.right.data.color}"`}>
+                      ${block.right.data.data}
+                      </p>`
+                      }
+                    </div>
+                </div>`
+                );
+              }, "")}
+            </div>`
+        }
+    </div>
+
+    ${
+      !jsondata.footer
+        ? ``
+        : `<div class="pass-footer">
+        ${
+          !jsondata.footer.img
+            ? ``
+            : `<div ${jsondata.footer.img.type === "rectangle" ? `style="width: 80%;height: 80px;"` : `style="width: 100px; height: 100px"`} class="pass-footer-img">
+            <img
+                ${jsondata.footer.img.type === "rectangle" ? `style="width: 100%;height: 80px;"` : `style="width: 100px; height: 100px"`}
+                src="${jsondata.footer.img.src}"
+                alt="${jsondata.footer.img.alt}"
+            />
+        </div>`
+        }
+        ${
+          !jsondata.footer.subimg
+            ? ``
+            : `<div class="pass-footer-subimg">
+            <img
+                src="${jsondata.footer.subimg.src}"
+                alt="${jsondata.footer.subimg.alt}"
+            />
+        </div>`
+        }
+    </div>`
+    }
+    </div`;
+    });
+  });