🚠 first publish to github

naltatis · Oct 1, 2019 · a1df686 · a1df686
1 parent c41e052
commit a1df686
Show file tree

Hide file tree

Showing 208 changed files with 55,305 additions and 0 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,3 @@
+{
+  "printWidth": 76
+}
diff --git a/10_child_parent_communication/team-checkout/static/fragment.css b/10_child_parent_communication/team-checkout/static/fragment.css
@@ -0,0 +1,22 @@
+checkout-buy button {
+  width: 100%;
+  padding: 0.5em;
+  font-size: 1.5em;
+  border: none;
+  color: white;
+  border-radius: .25em;
+  background: rgb(28, 184, 65);
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+  margin-bottom: 0.65em;
+  cursor: pointer;
+  transition: transform 0.1s ease-in-out;
+}
+
+checkout-buy button:hover {
+  background: rgb(10, 150, 60);
+}
+
+checkout-buy button:active {
+  background: gray;
+  transform: scale(0.98);
+}
diff --git a/10_child_parent_communication/team-checkout/static/fragment.js b/10_child_parent_communication/team-checkout/static/fragment.js
@@ -0,0 +1,28 @@
+const prices = {
+  porsche: { standard: 66, platinum: 966 },
+  fendt: { standard: 54, platinum: 945 },
+  eicher: { standard: 58, platinum: 958 }
+};
+
+class CheckoutBuy extends HTMLElement {
+  static get observedAttributes() {
+    return ["sku", "edition"];
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback() {
+    this.render();
+  }
+  render() {
+    const sku = this.getAttribute("sku");
+    const edition = this.getAttribute("edition") || "standard";
+    this.innerHTML = `
+      <button type="button">buy for ${prices[sku][edition]} $</button>
+    `;
+    this.querySelector("button").addEventListener("click", () => {
+      this.dispatchEvent(new CustomEvent("checkout:item_added"));
+    });
+  }
+}
+window.customElements.define("checkout-buy", CheckoutBuy);
diff --git a/10_child_parent_communication/team-decide/product/eicher.html b/10_child_parent_communication/team-decide/product/eicher.html
@@ -0,0 +1,39 @@
+<html>
+  <head>
+    <title>Eicher Diesel 215/16</title>
+    <link href="/static/page.css" rel="stylesheet" />
+    <link
+      href="http://localhost:3003/static/fragment.css"
+      rel="stylesheet"
+    />
+  </head>
+  <body class="decide_layout">
+    <h1 class="decide_header">The Tractor Store</h1>
+    <div class="decide_product">
+      <h2 class="decide_headline">Eicher Diesel 215/16</h2>
+      <img
+        class="decide_image"
+        src="https://mi-fr.org/img/eicher_standard.svg"
+      />
+    </div>
+    <div class="decide_details">
+      <label class="decide_editions">
+        <p>Material Upgrade?</p>
+        <input type="checkbox" name="edition" />
+        <span>Platinum<br />Edition</span>
+        <img src="https://mi-fr.org/img/eicher_platinum.svg" />
+      </label>
+      <checkout-buy sku="eicher"></checkout-buy>
+    </div>
+    <aside
+      class="decide_recos"
+      data-fragment="http://localhost:3002/fragment/recommendations/eicher"
+    >
+      <a href="http://localhost:3002/recommendations/eicher">
+        Show Recommendations
+      </a>
+    </aside>
+    <script src="/static/page.js" async></script>
+    <script src="http://localhost:3003/static/fragment.js" async></script>
+  </body>
+</html>
diff --git a/10_child_parent_communication/team-decide/product/fendt.html b/10_child_parent_communication/team-decide/product/fendt.html
@@ -0,0 +1,39 @@
+<html>
+  <head>
+    <title>Fendt F20 Dieselroß</title>
+    <link href="/static/page.css" rel="stylesheet" />
+    <link
+      href="http://localhost:3003/static/fragment.css"
+      rel="stylesheet"
+    />
+  </head>
+  <body class="decide_layout">
+    <h1 class="decide_header">The Tractor Store</h1>
+    <div class="decide_product">
+      <h2 class="decide_headline">Fendt F20 Dieselroß</h2>
+      <img
+        class="decide_image"
+        src="https://mi-fr.org/img/fendt_standard.svg"
+      />
+    </div>
+    <div class="decide_details">
+      <label class="decide_editions">
+        <p>Material Upgrade?</p>
+        <input type="checkbox" name="edition" value="platinum" />
+        <span>Platinum<br />Edition</span>
+        <img src="https://mi-fr.org/img/fendt_platinum.svg" />
+      </label>
+      <checkout-buy sku="fendt"></checkout-buy>
+    </div>
+    <aside
+      class="decide_recos"
+      data-fragment="http://localhost:3002/fragment/recommendations/fendt"
+    >
+      <a href="http://localhost:3002/recommendations/fendt">
+        Show Recommendations
+      </a>
+    </aside>
+    <script src="/static/page.js" async></script>
+    <script src="http://localhost:3003/static/fragment.js" async></script>
+  </body>
+</html>
diff --git a/10_child_parent_communication/team-decide/product/porsche.html b/10_child_parent_communication/team-decide/product/porsche.html
@@ -0,0 +1,39 @@
+<html>
+  <head>
+    <title>Porsche-Diesel Master 419</title>
+    <link href="/static/page.css" rel="stylesheet" />
+    <link
+      href="http://localhost:3003/static/fragment.css"
+      rel="stylesheet"
+    />
+  </head>
+  <body class="decide_layout">
+    <h1 class="decide_header">The Tractor Store</h1>
+    <div class="decide_product">
+      <h2 class="decide_headline">Porsche-Diesel Master 419</h2>
+      <img
+        class="decide_image"
+        src="https://mi-fr.org/img/porsche_standard.svg"
+      />
+    </div>
+    <div class="decide_details">
+      <label class="decide_editions">
+        <p>Material Upgrade?</p>
+        <input type="checkbox" name="edition" value="platinum" />
+        <span>Platinum<br />Edition</span>
+        <img src="https://mi-fr.org/img/porsche_platinum.svg" />
+      </label>
+      <checkout-buy sku="porsche"></checkout-buy>
+    </div>
+    <aside
+      class="decide_recos"
+      data-fragment="http://localhost:3002/fragment/recommendations/porsche"
+    >
+      <a href="http://localhost:3002/recommendations/porsche">
+        Show Recommendations
+      </a>
+    </aside>
+    <script src="/static/page.js" async></script>
+    <script src="http://localhost:3003/static/fragment.js" async></script>
+  </body>
+</html>
diff --git a/10_child_parent_communication/team-decide/static/page.css b/10_child_parent_communication/team-decide/static/page.css
@@ -0,0 +1,117 @@
+/* GLOBAL STYLES */
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: 'Helvetica Neue', Arial, sans-serif;
+  font-size: 20px;
+}
+
+a {
+  color: inherit;
+}
+
+/* PRODUCT PAGE STYLES */
+
+.decide_layout {
+  display: grid;
+  margin: 0;
+  padding: 0 1rem 1rem;
+  grid-gap: 2rem;
+  grid-template-columns: 3fr 2fr 2fr;
+}
+
+.decide_header {
+  font-size: 2rem;
+  margin: 1rem 0 0;
+  text-align: center;
+  padding: 0.25rem;
+  border: solid lightgray;
+  border-width: 3px 0;
+  grid-column: 1 / span 3;
+}
+
+.decide_product {
+  position: relative;
+}
+
+@keyframes confirm{
+  0% {
+    transform: scale(0.4);
+    opacity: 0;
+  }
+  30% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  60% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+}
+
+.decide_product--confirm::after {
+  position: absolute;
+  right: 0;
+  top: .5em;
+  left: 0;
+  text-align: center;
+  font-size: 10em;
+  color: rgb(28, 184, 65);
+  content: "✔";
+  text-shadow: 5px 5px 0px rgba(255, 255, 255, 0.8);
+  animation: confirm 2s ease-in-out forwards;
+}
+
+.decide_headline {
+  font-size: 1.5em;
+  text-align: center;
+  margin: 0;
+}
+
+.decide_image {
+  width: 100%;
+}
+
+.decide_details {
+  display: flex;
+  justify-content: space-evenly;
+  flex-direction: column;
+}
+
+
+.decide_editions {
+  display: block;
+  cursor: pointer;
+  white-space: nowrap;
+  margin: 0 auto;
+}
+
+.decide_editions p {
+  font-weight: bold;
+}
+
+.decide_editions input {
+   zoom: 1.25;
+   transform: scale(1.5);
+}
+
+.decide_editions span {
+  display: inline-block;
+  margin-left: 0.5em;
+  vertical-align: middle;
+}
+
+.decide_editions img {
+  width: 80px;
+  height: 80px;
+  margin-left: 0.5em;
+  display: inline-block;
+  vertical-align: middle;
+}
diff --git a/10_child_parent_communication/team-decide/static/page.js b/10_child_parent_communication/team-decide/static/page.js
@@ -0,0 +1,31 @@
+(function ajaxFragment() {
+  const element = document.querySelector(".decide_recos");
+  const url = element.getAttribute("data-fragment");
+
+  window
+    .fetch(url)
+    .then(res => res.text())
+    .then(html => {
+      element.innerHTML = html;
+    });
+})();
+
+(function editions() {
+  const platinum = document.querySelector(".decide_editions input");
+  const image = document.querySelector(".decide_image");
+  const buyButton = document.querySelector("checkout-buy");
+
+  platinum.addEventListener("change", e => {
+    const edition = e.target.checked ? "platinum" : "standard";
+    buyButton.setAttribute("edition", edition);
+    image.src = image.src.replace(/(standard|platinum)/, edition);
+  });
+
+  const element = document.querySelector(".decide_product");
+  buyButton.addEventListener("checkout:item_added", e => {
+    element.classList.add("decide_product--confirm");
+  });
+  element.addEventListener("animationend", () => {
+    element.classList.remove("decide_product--confirm");
+  });
+})();
diff --git a/10_child_parent_communication/team-inspire/fragment/recommendations/eicher.html b/10_child_parent_communication/team-inspire/fragment/recommendations/eicher.html
@@ -0,0 +1,10 @@
+<link href="http://localhost:3002/static/fragment.css" rel="stylesheet" />
+<h2 class="inspire_headline">Recommendations</h2>
+<div class="inspire_recommendations">
+  <a href="http://localhost:3001/product/porsche">
+    <img src="https://mi-fr.org/img/porsche.svg" />
+  </a>
+  <a href="http://localhost:3001/product/fendt">
+    <img src="https://mi-fr.org/img/fendt.svg" />
+  </a>
+</div>
diff --git a/10_child_parent_communication/team-inspire/fragment/recommendations/fendt.html b/10_child_parent_communication/team-inspire/fragment/recommendations/fendt.html
@@ -0,0 +1,10 @@
+<link href="http://localhost:3002/static/fragment.css" rel="stylesheet" />
+<h2 class="inspire_headline">Recommendations</h2>
+<div class="inspire_recommendations">
+  <a href="http://localhost:3001/product/eicher">
+    <img src="https://mi-fr.org/img/eicher.svg" />
+  </a>
+  <a href="http://localhost:3001/product/porsche">
+    <img src="https://mi-fr.org/img/porsche.svg" />
+  </a>
+</div>
diff --git a/10_child_parent_communication/team-inspire/fragment/recommendations/porsche.html b/10_child_parent_communication/team-inspire/fragment/recommendations/porsche.html
@@ -0,0 +1,10 @@
+<link href="http://localhost:3002/static/fragment.css" rel="stylesheet" />
+<h2 class="inspire_headline">Recommendations</h2>
+<div class="inspire_recommendations">
+  <a href="http://localhost:3001/product/fendt">
+    <img src="https://mi-fr.org/img/fendt.svg" />
+  </a>
+  <a href="http://localhost:3001/product/eicher">
+    <img src="https://mi-fr.org/img/eicher.svg" />
+  </a>
+</div>
diff --git a/10_child_parent_communication/team-inspire/recommendations/eicher.html b/10_child_parent_communication/team-inspire/recommendations/eicher.html
@@ -0,0 +1,18 @@
+<html>
+  <head>
+    <title>Recommendations</title>
+    <link href="/static/page.css" rel="stylesheet" />
+  </head>
+  <body class="inspire_layout">
+    <h1 class="inspire_header">The Tractor Store</h1>
+    <h2 class="inspire_headline">Recommendations</h2>
+    <div class="inspire_recommendations">
+      <a href="http://localhost:3001/product/porsche" target="_parent">
+        <img src="https://mi-fr.org/img/porsche.svg" />
+      </a>
+      <a href="http://localhost:3001/product/fendt" target="_parent">
+        <img src="https://mi-fr.org/img/fendt.svg" />
+      </a>
+    </div>
+  </body>
+</html>
diff --git a/10_child_parent_communication/team-inspire/recommendations/fendt.html b/10_child_parent_communication/team-inspire/recommendations/fendt.html
@@ -0,0 +1,18 @@
+<html>
+  <head>
+    <title>Recommendations</title>
+    <link href="/static/page.css" rel="stylesheet" />
+  </head>
+  <body class="inspire_layout">
+    <h1 class="inspire_header">The Tractor Store</h1>
+    <h2 class="inspire_headline">Recommendations</h2>
+    <div class="inspire_recommendations">
+      <a href="http://localhost:3001/product/eicher" target="_parent">
+        <img src="https://mi-fr.org/img/eicher.svg" />
+      </a>
+      <a href="http://localhost:3001/product/porsche" target="_parent">
+        <img src="https://mi-fr.org/img/porsche.svg" />
+      </a>
+    </div>
+  </body>
+</html>