From 29033ca723d5ca1ffa71481a32148b0f6f918f75 Mon Sep 17 00:00:00 2001 From: AqingCyan Date: Tue, 11 May 2021 23:34:17 +0800 Subject: [PATCH 1/3] Add the Chinese translation of Chapter 3 --- .idea/workspace.xml | 51 ++++++++++++++++++++++++ 3-terrarium/translations/README.zh-cn.md | 34 ++++++++++++++++ 2 files changed, 85 insertions(+) create mode 100644 .idea/workspace.xml create mode 100644 3-terrarium/translations/README.zh-cn.md diff --git a/.idea/workspace.xml b/.idea/workspace.xml new file mode 100644 index 00000000..712044e7 --- /dev/null +++ b/.idea/workspace.xml @@ -0,0 +1,51 @@ + + + + + + + + + + + + + + + + + + + + + + 1620739109941 + + + + + + + + + \ No newline at end of file diff --git a/3-terrarium/translations/README.zh-cn.md b/3-terrarium/translations/README.zh-cn.md new file mode 100644 index 00000000..e3e8e949 --- /dev/null +++ b/3-terrarium/translations/README.zh-cn.md @@ -0,0 +1,34 @@ +# 我的花艺瓶：一个用于学习 HTML、CSS 和使用 JS 操作 DOM 的项目 🌵🌱 + +思考构建一个的具有拖放交互的小程序，只需要很少的 HTML、CSS 和 JS 代码，你就可以构建一个被美化的，且具有交互功能的 Web 页面。 + +![我的花艺瓶](../images/screenshot_gray.png) + +# 教程 + +1. [HTML 简介](../1-intro-to-html/translations/README.zh-tw.md) +2. [CSS 简介](../2-intro-to-css/translations/README.zh-tw.md) +3. [DOM 简介与 JS 闭包](../translations/3-intro-to-DOM-and-closures/README.zh-tw.md) + +## 参与人员 + +由 [Jen Looper](https://www.twitter.com/jenlooper) 充满着 ♥️ 编写。 + +使用 CSS 来编写一个花艺瓶的灵感来自于 Jakub Mandra 的玻璃瓶 [CodePen](https://codepen.io/Rotarepmi/pen/rjpNZY)。 + +上面的手绘插画由 [Jen Looper](http://jenlooper.com) 使用 Procreate 绘制。 + +## 部署你的花艺瓶 + +你可以使用 Azure Static Web Apps 部署并发布你的花艺瓶到网络上。 + +1. Fork 这个仓库 + +2. 点击下方的按钮 + +[![Deploy to Azure button](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-13441-cxa#create/Microsoft.StaticApp) + +3. 按照指引创建你的应用。请确保你的程序根目录为 `/solution` 或者是你自己代码项目的根目录。这个应用不需要使用任何 API，因此你不用担心需要去调用什么额外的内容。.github 目录会在你 fork 的仓库中创建，它将帮助 Azure Static Web Apps 的构建服务构建并发布你的应用到一个新的地址。 + + + From e7690b9dfcde3874689105e1061b6a30d8ec3156 Mon Sep 17 00:00:00 2001 From: AqingCyan Date: Tue, 11 May 2021 23:35:15 +0800 Subject: [PATCH 2/3] remove .idea/ --- .idea/workspace.xml | 51 --------------------------------------------- 1 file changed, 51 deletions(-) delete mode 100644 .idea/workspace.xml diff --git a/.idea/workspace.xml b/.idea/workspace.xml deleted file mode 100644 index 712044e7..00000000 --- a/.idea/workspace.xml +++ /dev/null @@ -1,51 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - 1620739109941 - - - - - - - - - \ No newline at end of file From 07667c149510b2dece965e0120bb181121d95576 Mon Sep 17 00:00:00 2001 From: Austin Jenchi Date: Tue, 11 May 2021 22:26:51 -0700 Subject: [PATCH 3/3] make some small tweaks to template/route --- 7-bank-project/1-template-route/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/7-bank-project/1-template-route/README.md b/7-bank-project/1-template-route/README.md index b01a52db..84839c03 100644 --- a/7-bank-project/1-template-route/README.md +++ b/7-bank-project/1-template-route/README.md @@ -135,7 +135,7 @@ function updateRoute(templateId) { What we do here is exactly the 3 steps described above. We instantiate the template with the id `templateId`, and put its cloned content within our app placeholder. Note that we need to use `cloneNode(true)` to copy the entire subtree of the template. -Now call this function with one of the template and look at the result. +Now call this function with one of the templates and look at the result. ```js updateRoute('login'); @@ -189,7 +189,7 @@ function updateRoute() { } ``` -Here we mapped the routes we declared to the corresponding template. You can try it that it works correctly by changing the URL manually in your browser. +Here we mapped the routes we declared to the corresponding template. You can check that it works correctly by changing the URL manually in your browser. ✅ What happens if you enter an unknown path in the URL? How could we solve this? @@ -266,7 +266,7 @@ Using the `history.pushState` creates new entries in the browser's navigation hi If you try clicking on the back button a few times, you'll see that the current URL changes and the history is updated, but the same template keeps being displayed. -That's because don't know that we need to call `updateRoute()` every time the history changes. If you take a look at the [`history.pushState` documentation](https://developer.mozilla.org/docs/Web/API/History/pushState), you can see that if the state changes - meaning that we moved to a different URL - the [`popstate`](https://developer.mozilla.org/docs/Web/API/Window/popstate_event) event is triggered. We'll use that to fix that issue. +That's because the browser doesn't know that we need to call `updateRoute()` every time the history changes. If you take a look at the [`history.pushState` documentation](https://developer.mozilla.org/docs/Web/API/History/pushState), you can see that if the state changes - meaning that we moved to a different URL - the [`popstate`](https://developer.mozilla.org/docs/Web/API/Window/popstate_event) event is triggered. We'll use that to fix that issue. ### Task