From 5113bac82fe1606d0dc96956e69693f3d5086643 Mon Sep 17 00:00:00 2001 From: takahirohonda Date: Sat, 24 Aug 2024 22:31:32 +0200 Subject: [PATCH] Add more german phrases --- apps/fe-sys-design/src/1-dom/index.html | 8 +-- .../src/2-intersection-observer/index.css | 42 +++++++++++++++ .../src/2-intersection-observer/index.html | 54 +++++++++++++++++++ apps/learn-german/README.md | 2 + apps/learn-german/src/app/const/verbs.ts | 27 +++++++++- apps/learn-german/src/app/verbs.ts | 5 +- 6 files changed, 133 insertions(+), 5 deletions(-) create mode 100644 apps/fe-sys-design/src/2-intersection-observer/index.css create mode 100644 apps/fe-sys-design/src/2-intersection-observer/index.html diff --git a/apps/fe-sys-design/src/1-dom/index.html b/apps/fe-sys-design/src/1-dom/index.html index ea374c1..bd6e8be 100644 --- a/apps/fe-sys-design/src/1-dom/index.html +++ b/apps/fe-sys-design/src/1-dom/index.html @@ -34,11 +34,13 @@

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 new file mode 100644 index 0000000..d66eb4d --- /dev/null +++ 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); +} \ No newline at end of file diff --git a/apps/fe-sys-design/src/2-intersection-observer/index.html b/apps/fe-sys-design/src/2-intersection-observer/index.html new file mode 100644 index 0000000..41deccc --- /dev/null +++ b/apps/fe-sys-design/src/2-intersection-observer/index.html @@ -0,0 +1,54 @@ + + + + + Frontend System Design Fundamentals + + + + +
+
+
Bottom Observer
+
+ + + diff --git a/apps/learn-german/README.md b/apps/learn-german/README.md index 3ff5617..3d4e0a1 100644 --- 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 index 9e954dd..8ee491f 100644 --- 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 index 2276c79..6b4af5b 100644 --- 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') })()