Add more german phrases

takahirohonda · Aug 24, 2024 · 5113bac · 5113bac
1 parent c355071
commit 5113bac
Show file tree

Hide file tree

Showing 6 changed files with 133 additions and 5 deletions.
diff --git a/apps/fe-sys-design/src/1-dom/index.html b/apps/fe-sys-design/src/1-dom/index.html
@@ -34,11 +34,13 @@ <h3 class="card__title"></h3>
       const bodyElem = clonedCardTemplateNode.querySelector(
         '.card__body__content'
       )
-      console.log(`checkint titleElem: ${titleElem}`)
-      console.log(`checkint card template ${clonedCardTemplateNode}`)
-      // getting error because querySelector not returning any......
       titleElem.appendChild(document.createTextNode(title))
       bodyElem.appendChild(document.createTextNode(body))
+
+      // this works, too - from the actual solution
+      // const [cardTitle] = element.getElementsByTagName("h3");
+      //   const [cardBody] = element.getElementsByTagName("section");
+      //   [cardTitle.textContent, cardBody.textContent] = [title, body];
       return clonedCardTemplateNode
     }
 

diff --git a/apps/fe-sys-design/src/2-intersection-observer/index.css b/apps/fe-sys-design/src/2-intersection-observer/index.css
@@ -0,0 +1,42 @@
+* {
+    box-sizing: border-box;
+}
+#container {
+    display: flex;
+    flex-direction: column;
+    width: 80%;
+    margin: 0 auto;
+}
+.card {
+    margin: 2rem;
+    padding: 1.5rem 2rem;
+    border: 8px solid lightgray;
+    border-radius: 2rem;
+    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
+}
+.card__body {
+    display: flex;
+    flex-direction: row;
+}
+.card__body__image {
+    width: 128px;
+    height: 128px;
+    flex-shrink: 0;
+    border-radius: 100%;
+    margin: 1rem;
+    background: radial-gradient(circle at 18.7% 37.8%, rgb(250, 250, 250) 0%, rgb(225, 234, 238) 90%);
+}
+.card__body__content {
+    padding: 0 1rem;
+}
+
+#bottom-observer {
+    width: 100%;
+    height: 100px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background: rgba(255, 0, 0, 0.2);
+    border: 2px dashed  rgba(255, 0, 0, 0.6);
+}
diff --git a/apps/fe-sys-design/src/2-intersection-observer/index.html b/apps/fe-sys-design/src/2-intersection-observer/index.html
@@ -0,0 +1,54 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Frontend System Design Fundamentals</title>
+    <link rel="stylesheet" href="./index.css" />
+    <template id="card_template">
+      <article class="card">
+        <h3 class="card__title"></h3>
+        <div class="card__body">
+          <div class="card__body__image"></div>
+          <section class="card__body__content"></section>
+        </div>
+      </article>
+    </template>
+  </head>
+  <body>
+    <main id="container">
+      <div id="list"></div>
+      <div id="bottom-observer">Bottom Observer</div>
+    </main>
+    <script type="module">
+      import { initMockDB } from '../../utils/db.js'
+
+      const [template, list, observerElement] = document.querySelectorAll(
+        '#card_template, #list, #bottom-observer'
+      )
+
+      const db = initMockDB({
+        title: 'Fundamentals of Frontend System Design',
+        body: 'Learning to use Intersection Observer',
+      })
+
+      function createCardElement(title, body) {
+        const element = template.content.cloneNode(true).firstElementChild
+        const [cardTitle, cardBody] = element.querySelectorAll(
+          '.card__title, .card__body__content'
+        )
+        ;[cardTitle.textContent, cardBody.textContent] = [title, body]
+        return element
+      }
+
+      /**
+       * Exercise - Intersection Observer
+       * 1. Create Intersection observer instance and provide a callback to it
+       * 2. In the callback use mock db - next function to get the next chunk of data
+       * 3. Create a fragment where you chunk all your DOM Mutations
+       * 4. Update fragment
+       * 5. Append fragment to "list" container
+       */
+      const observer = null
+    </script>
+  </body>
+</html>
diff --git a/apps/learn-german/README.md b/apps/learn-german/README.md
@@ -2,6 +2,8 @@
 
 This project was generated by using ![@nx/web](https://nx.dev/nx-api/web/documents/overview#setting-up-nxweb). `@nx/web` is for creating a web component. It can be used to create a vanilla JS project.
 
+**Special Letters** - ß ä ö ü Ä Ö Ü ß
+
 # Web Speech APIs
 
 https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API

diff --git a/apps/learn-german/src/app/const/verbs.ts b/apps/learn-german/src/app/const/verbs.ts
@@ -17,5 +17,30 @@ export const SEIN = [
   'Er ist Lehrer.',
   'Sie ist Lehrerin.',
   'Sind Sie Deutche?',
-  'Nein, ich bin ',
+  'Nein, ich bin Österreicherin.',
+  'Das sind meine Eltern.',
+  'Das ist mein Reisekoffer.',
+  'Das ist eine Brezel.',
+  'Ist das ein Buch von Michael Ende?',
+  'Ja, das ist es.',
+  'Das Buch ist sehr populär',
+  'Ist das ein deutsches Produkt?',
+  'Nein, das ist aus der Schweiz.',
+  'Das ist sehr preiswert.',
+  'Gut, das nehme ich.',
+]
+
+export const HABEN = [
+  'Ich habe zwei Geschwister.',
+  'Ich habe Zeit.',
+  'Er hat Hunger.',
+  'Haben Sie einen Stadtplan?',
+  'Haben Sie noch ein Zimmer frei?',
+]
+
+export const WERDEN = [
+  'Ich werde Ärztin.',
+  'Der Kaffee wird kalt.',
+  'Es wird Nacht.',
+  'Die Tage werden immer länger.',
 ]
diff --git a/apps/learn-german/src/app/verbs.ts b/apps/learn-german/src/app/verbs.ts
@@ -1,6 +1,9 @@
 import '../index.css'
-import { GEBEN } from './const/verbs'
+import { GEBEN, SEIN, HABEN, WERDEN } from './const/verbs'
 import { createSentenceList } from './utils'
 ;(function () {
   createSentenceList([...GEBEN], 'geben')
+  createSentenceList([...SEIN], 'sein')
+  createSentenceList([...HABEN], 'haben')
+  createSentenceList([...WERDEN], 'werden')
 })()