From 9905bb9994aac6a3b4333f864478791d95f80429 Mon Sep 17 00:00:00 2001
From: "yuting.song" <yutingsongzenjoy@126.com>
Date: Tue, 25 Jun 2019 12:42:20 +0800
Subject: [PATCH 01/12] fix #58 variable name

---
 04 - Array Cardio Day 1/index-SOYAINE.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/04 - Array Cardio Day 1/index-SOYAINE.html b/04 - Array Cardio Day 1/index-SOYAINE.html
index f9f8dbf..a1ff32a 100644
--- a/04 - Array Cardio Day 1/index-SOYAINE.html	
+++ b/04 - Array Cardio Day 1/index-SOYAINE.html	
@@ -132,7 +132,7 @@
     // 7. sort Exercise
     // Sort the people alphabetically by last name
     // 按照姓氏的字母进行排序
-    const sortName = inventors.sort((a, b) => {
+    const sortName = people.sort((a, b) => {
       return (a.last > b.last) ? 1 : -1;
     })
     console.table(sortName);

From 2b653b4d34f4548341fbd2c1f856a27f7f880dab Mon Sep 17 00:00:00 2001
From: soyaine <soyaine@outlook.com>
Date: Tue, 25 Jun 2019 14:32:38 +0800
Subject: [PATCH 02/12] style: lint comment code

---
 09 - Dev Tools Domination/index-SOYAINE.html  | 103 +++++++++---------
 .../index-SOYAINE.html                        |   4 +-
 2 files changed, 56 insertions(+), 51 deletions(-)

diff --git a/09 - Dev Tools Domination/index-SOYAINE.html b/09 - Dev Tools Domination/index-SOYAINE.html
index a8780bd..4dcbabd 100644
--- a/09 - Dev Tools Domination/index-SOYAINE.html	
+++ b/09 - Dev Tools Domination/index-SOYAINE.html	
@@ -9,7 +9,13 @@
   <p onClick="makeGreen()">×点×我×呀×</p>
 
   <script>
-    const dogs = [{ name: 'Snickers', age: 2 }, { name: 'hugo', age: 8 }];
+    const dogs = [{
+      name: 'Snickers',
+      age: 2
+    }, {
+      name: 'hugo',
+      age: 8
+    }];
 
     function makeGreen() {
       const p = document.querySelector('p');
@@ -18,76 +24,75 @@
     }
 
     // Regular
-	// 常规输出
-	  console.log("我只是 console 世界的一介草民");
+    // 常规输出
+    console.log("我只是 console 世界的一介草民");
 
     // Interpolated
-	// 字符替换
-	  console.log("我的名字叫做 %s ", "log");
-	  console.log("我的年龄是 %f ", 1.23);
-//	  console.log("我的名字叫做 %o ", {1.23: 12});
+    // 字符替换
+    console.log("我的名字叫做 %s ", "log");
+    console.log("我的年龄是 %f ", 1.23);
+    // console.log("我的名字叫做 %o ", {1.23: 12});
 
     // Styled
-	// 设定输出的样式
-	  console.log("偷偷告诉你，我会变身 %c ~\(≧▽≦)/~巴拉拉~~", "color: #00fdff; font-size: 2em;");
+    // 设定输出的样式
+    console.log("偷偷告诉你，我会变身 %c ~\(≧▽≦)/~巴拉拉~~", "color: #00fdff; font-size: 2em;");
 
     // warning!
-	  console.warn("warning! 我可警告你哦~")
+    console.warn("warning! 我可警告你哦~")
 
     // Error :|
-	  console.error("error~别又来报错了！╭(╯^╰)╮");
+    console.error("error~别又来报错了！╭(╯^╰)╮");
 
     // Info
-	  console.info("Talk is cheap. Show me the code");
+    console.info("Talk is cheap. Show me the code");
 
     // Viewing DOM Elements
-	// 打印输出 DOM 元素
-	  const p = document.querySelector('p');
-	  console.log(p);
-	  console.dir(p);
+    // 打印输出 DOM 元素
+    const p = document.querySelector('p');
+    console.log(p);
+    console.dir(p);
 
     // Testing
-	  console.assert(1 ===1, "（这句发布时删除）");
-	  console.assert(1 ===0, "看看看，失策了吧");
-	console.assert(p.innerHTML.match("她"), "我这儿才没有她这个人");
+    console.assert(1 === 1, "（这句发布时删除）");
+    console.assert(1 === 0, "看看看，失策了吧");
+    console.assert(p.innerHTML.match("她"), "我这儿才没有她这个人");
 
     // clearing
-//	  console.clear();
+    // console.clear();
 
     // Grouping together
-	dogs.forEach(dog => {
-		console.group();
-//		console.groupCollapsed(); // 收起列表
-		console.log(`${dog.name}`);
-		console.log(`${dog.age}`);
-		console.log(`${dog.name} 有 ${dog.age} 岁了`);
-		console.groupEnd();
-	});
-
-	//
-	  console.table(dogs);
-	  console.table(dogs, ["age"]);
+    dogs.forEach(dog => {
+      console.group();
+      // console.groupCollapsed(); 
+      // 收起列表
+      console.log(`${dog.name}`);
+      console.log(`${dog.age}`);
+      console.log(`${dog.name} 有 ${dog.age} 岁了`);
+      console.groupEnd();
+    });
+
+    console.table(dogs);
+    console.table(dogs, ["age"]);
 
     // counting
-	  console.count("（读来过反）羊只");
-	  console.count("（读来过反）羊只");
-	  console.count("（读来过反）鱼条");
-	  console.count("（读来过反）羊只");
-	  console.count("（读来过反）羊只");
-	  console.count("（读来过反）鱼条");
-	  console.count("（读来过反）鱼条");
-	  console.count("（读来过反）羊只");
+    console.count("（读来过反）羊只");
+    console.count("（读来过反）羊只");
+    console.count("（读来过反）鱼条");
+    console.count("（读来过反）羊只");
+    console.count("（读来过反）羊只");
+    console.count("（读来过反）鱼条");
+    console.count("（读来过反）鱼条");
+    console.count("（读来过反）羊只");
 
     // timing
-	  console.time('fetch my data');
-	  fetch("https://api.github.com/users/soyaine")
-		  .then(data => data.json())
-		  .then(data => {
-		  console.timeEnd('fetch my data');
-		  console.log(data);
-	  });
-//	  console.timeEnd('fetch my data');
-
+    console.time('fetch my data');
+    fetch("https://api.github.com/users/soyaine")
+      .then(data => data.json())
+      .then(data => {
+        console.timeEnd('fetch my data');
+        console.log(data);
+      });
+    // console.timeEnd('fetch my data');
   </script>
 </body>
 </html>
diff --git a/14 - JavaScript References VS Copying/index-SOYAINE.html b/14 - JavaScript References VS Copying/index-SOYAINE.html
index acf3f62..4e11b80 100644
--- a/14 - JavaScript References VS Copying/index-SOYAINE.html	
+++ b/14 - JavaScript References VS Copying/index-SOYAINE.html	
@@ -101,8 +101,8 @@
       }
     };
 
-//    console.clear();
-//    console.log(wes);
+    // console.clear();
+    // console.log(wes);
 
     const dev = Object.assign({}, wes);
 

From a4b28030c75a287c67522aa8a5cf8c5145df7e5c Mon Sep 17 00:00:00 2001
From: soyaine <soyaine@outlook.com>
Date: Thu, 27 Jun 2019 12:09:58 +0800
Subject: [PATCH 03/12] style: lint code

---
 06 - Type Ahead/index-SOYAINE.html | 84 ++++++++++++++----------------
 1 file changed, 38 insertions(+), 46 deletions(-)

diff --git a/06 - Type Ahead/index-SOYAINE.html b/06 - Type Ahead/index-SOYAINE.html
index 927d08d..890247a 100644
--- a/06 - Type Ahead/index-SOYAINE.html	
+++ b/06 - Type Ahead/index-SOYAINE.html	
@@ -14,61 +14,53 @@
       <li></li>
     </ul>
   </form>
-<script>
-// const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
+  <script>
+    // const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
 
     const endpoint = 'https://gist.githubusercontent.com/soyaine/81399bb2b24ca1bb5313e1985533c640/raw/bdf7df2cbcf70706c4a5e51a7dfb8c933ed78878/TangPoetry.json';
-	
- 	
-    const  poetrys = [];
+
+
+    const poetrys = [];
     fetch(endpoint)
-		.then(blob => blob.json())
-		.then(data => poetrys.push(...data));
- 
-	function findMatches( wordToMatch, poetrys) {
-		return poetrys.filter(poet => {
-			// 正则找出匹配的诗句
-			const regex = new RegExp(wordToMatch, 'gi');
-			const author = poet.detail_author.join('');
-//			console.log(author);
-			return poet.detail_text.match(regex) || poet.title.match(regex) || author.match(regex);
-		});
-	}
+      .then(blob => blob.json())
+      .then(data => poetrys.push(...data));
+
+    function findMatches(wordToMatch, poetrys) {
+      return poetrys.filter(poet => {
+        // 正则找出匹配的诗句
+        const regex = new RegExp(wordToMatch, 'gi');
+        const author = poet.detail_author.join('');
+        //			console.log(author);
+        return poet.detail_text.match(regex) || poet.title.match(regex) || author.match(regex);
+      });
+    }
 
-	function displayMatches() {
-		const matches = findMatches(this.value, poetrys);
-		const regex = new RegExp(this.value, 'gi');
-		const html = matches.map( poet => {
-			// 替换高亮的标签
-			const text = poet.detail_text.replace(regex, `<span class="hl">${ this.value }</span>`);
-			const title = poet.title.replace(regex, `<span class="hl">${ this.value }</span>`)
-			// 构造 HTML 值
-			return `
+    function displayMatches() {
+      const matches = findMatches(this.value, poetrys);
+      const regex = new RegExp(this.value, 'gi');
+      const html = matches.map(poet => {
+        // 替换高亮的标签
+        const text = poet.detail_text.replace(regex, `<span class="hl">${ this.value }</span>`);
+        const title = poet.title.replace(regex, `<span class="hl">${ this.value }</span>`)
+        // 构造 HTML 值
+        return `
 				<li>
 					<span class="poet">${ text }</span>
 					<span class="title">${ title } - ${ poet.detail_author[0] }</span>
 				</li>
 			`;
-		}).join('');
-//		console.log(html);
-		suggestions.innerHTML = html;
-	}
-	
-	const search = document.querySelector('.search');
-	const suggestions = document.querySelector('.suggestions');
-	
-	search.addEventListener('change', displayMatches);
-	search.addEventListener('keyup', displayMatches);
-
-//	console.log(poetrys);
- </script>
-  </body>
-</html>
-
-
-
-
-
+      }).join('');
+      //		console.log(html);
+      suggestions.innerHTML = html;
+    }
 
+    const search = document.querySelector('.search');
+    const suggestions = document.querySelector('.suggestions');
 
+    search.addEventListener('change', displayMatches);
+    search.addEventListener('keyup', displayMatches);
 
+    //	console.log(poetrys);
+  </script>
+</body>
+</html>
\ No newline at end of file

From ec00fa3d47b7bfeec69d927132719c9baa493232 Mon Sep 17 00:00:00 2001
From: soyaine <12845017+soyaine@users.noreply.github.com>
Date: Wed, 14 Jul 2021 15:43:37 +0800
Subject: [PATCH 04/12] remove videos link note #60

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 4654e0d..a35c1b4 100644
--- a/README.md
+++ b/README.md
@@ -29,7 +29,7 @@ JavaScirpt30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30
 
 下面是完成 Wes Bos 的 JavaScript30 挑战所能借鉴的文档，每个文档的具体使用建议如下：
 
-- [JavaScript30 官网](https://javascript30.com)：进入官网注册后可以观看和下载所有教程视频。Wes Bos 还把视频传到了百度云，进入官网直接拉到页面底部就能找到链接。
+- [JavaScript30 官网](https://javascript30.com)：进入官网注册后可以观看和下载所有教程视频。
 - [Nitish Dayal 写的英文指南](https://github.com/nitishdayal/JavaScript30/tree/master/exercises)：这是一份非官方的文字版指南，也是激励我写这一系列文章的主要因素。
 - [挑战初始文档](https://github.com/wesbos/JavaScript30)：这是 Wes Bos 这份教程涉及的代码，你可以直接 Clone 或者下载到本地，然后开始你 30 天的挑战之旅。文档共有 30 个文件夹，每个文件夹中至少有两个文件。
 	- **index-START.html**：是提供给我们的初始文档，方便我们专注于 JavaScript 的编写，这个文档已经将基础的 HTML 和 CSS 部分写好，我们只需要在这个基础上编写 JavaScript 代码，实现特定的功能即可。

From 1b044bc6610cbb131d897d9a3cc814372a414018 Mon Sep 17 00:00:00 2001
From: soyaine <12845017+soyaine@users.noreply.github.com>
Date: Wed, 14 Jul 2021 15:45:13 +0800
Subject: [PATCH 05/12] update nickname

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index a35c1b4..3a0956b 100644
--- a/README.md
+++ b/README.md
@@ -3,7 +3,7 @@
 创建日期：2016-12-20  
 最后更新：2018-12-05
 
-> Repo by: [未枝丫](https://github.com/soyaine)  
+> Repo by: [Soyaine](https://github.com/soyaine)  
 > [JavaScript30](https://javascript30.com) 教程作者：[Wes Bos](https://github.com/wesbos)    
 > 完整指南在 [GitHub](https://github.com/soyaine/JavaScript30)，喜欢请 Star 哦♪(^∇^*)
 
@@ -81,7 +81,7 @@ Name | Contribution
 [@zzh466](http://github.com/zzh466) | Review
 [@Xing Liu](https://github.com/S1ngS1ng) | Review
 [@大史不说话](https://github.com/dashnowords) |  No.[16](https://github.com/soyaine/JavaScript30/tree/master/16%20-%20Mouse%20Move%20Shadow).[17](https://github.com/soyaine/JavaScript30/tree/master/17%20-%20Sort%20Without%20Articles).[18](https://github.com/soyaine/JavaScript30/tree/master/18%20-%20AddingUpTimesWithReduce).[19](https://github.com/soyaine/JavaScript30/blob/master/19%20-%20Webcam%20Fun).[20](https://github.com/soyaine/JavaScript30/tree/master/20%20-%20Speech%20Detection).[21](https://github.com/soyaine/JavaScript30/tree/master/21%20-%20Geolocation).[22](https://github.com/soyaine/JavaScript30/tree/master/22%20-%20Follow%20Along%20Link%20Highlighter).[23](https://github.com/soyaine/JavaScript30/tree/master/23%20-%20Speech%20Synthesis).[24](https://github.com/soyaine/JavaScript30/tree/master/24%20-%20Sticky%20Nav).[25](https://github.com/soyaine/JavaScript30/tree/master/25%20-%20Event%20Related).[26](https://github.com/soyaine/JavaScript30/tree/master/26%20-%20Strip%20Follow%20Along%20Nav).[27](https://github.com/soyaine/JavaScript30/tree/master/27%20-%20Click%20and%20Drag).[28](https://github.com/soyaine/JavaScript30/tree/master/28%20-%20Video%20Speed%20Controller)
-[@未枝丫](https://github.com/soyaine) | No.[1](https://github.com/soyaine/JavaScript30/tree/master/01%20-%20JavaScript%20Drum%20Kit).[2](https://github.com/soyaine/JavaScript30/tree/master/02%20-%20JS%20%2B%20CSS%20Clock).[3](https://github.com/soyaine/JavaScript30/tree/master/03%20-%20CSS%20%Variables).[4](https://github.com/soyaine/JavaScript30/tree/master/04%20-%20Array%20Cardio%20Day%201).[5](https://github.com/soyaine/JavaScript30/blob/master/05%20-%20Flex%20Panel%20Gallery).[6](https://github.com/soyaine/JavaScript30/blob/master/06%20-%20Type%20Ahead).[7](https://github.com/soyaine/JavaScript30/tree/master/07%20-%20Array%20Cardio%20Day%202).[8](https://github.com/soyaine/JavaScript30/tree/master/08%20-%20Fun%20with%20HTML5%20Canvas).[9](https://github.com/soyaine/JavaScript30/blob/master/09%20-%20Dev%20Tools%20Domination).[10](https://github.com/soyaine/JavaScript30/blob/master/10%20-%20Hold%20Shift%20and%20Check%20Checkboxes/README.md).[12](https://github.com/soyaine/JavaScript30/tree/master/12%20-%20Key%20Sequence%20Detection/README.md).[13](https://github.com/soyaine/JavaScript30/blob/master/13%20-%20Slide%20in%20on%20Scroll/README.md).[14](https://github.com/soyaine/JavaScript30/tree/master/14%20-%20JavaScript%20References%20VS%20Copying)
+[@Soyaine](https://github.com/soyaine) | No.[1](https://github.com/soyaine/JavaScript30/tree/master/01%20-%20JavaScript%20Drum%20Kit).[2](https://github.com/soyaine/JavaScript30/tree/master/02%20-%20JS%20%2B%20CSS%20Clock).[3](https://github.com/soyaine/JavaScript30/tree/master/03%20-%20CSS%20%Variables).[4](https://github.com/soyaine/JavaScript30/tree/master/04%20-%20Array%20Cardio%20Day%201).[5](https://github.com/soyaine/JavaScript30/blob/master/05%20-%20Flex%20Panel%20Gallery).[6](https://github.com/soyaine/JavaScript30/blob/master/06%20-%20Type%20Ahead).[7](https://github.com/soyaine/JavaScript30/tree/master/07%20-%20Array%20Cardio%20Day%202).[8](https://github.com/soyaine/JavaScript30/tree/master/08%20-%20Fun%20with%20HTML5%20Canvas).[9](https://github.com/soyaine/JavaScript30/blob/master/09%20-%20Dev%20Tools%20Domination).[10](https://github.com/soyaine/JavaScript30/blob/master/10%20-%20Hold%20Shift%20and%20Check%20Checkboxes/README.md).[12](https://github.com/soyaine/JavaScript30/tree/master/12%20-%20Key%20Sequence%20Detection/README.md).[13](https://github.com/soyaine/JavaScript30/blob/master/13%20-%20Slide%20in%20on%20Scroll/README.md).[14](https://github.com/soyaine/JavaScript30/tree/master/14%20-%20JavaScript%20References%20VS%20Copying)
 
 ## JOIN US
 如果对这个系列的指南有什么改进的想法，欢迎[提 issue](https://github.com/soyaine/JavaScript30/issues)，如果你也想参与写作，请看 [wiki](https://github.com/soyaine/JavaScript30/wiki/%E6%8C%87%E5%8D%97%E7%BB%93%E6%9E%84%E8%AF%B4%E6%98%8E)，并联系 Soyaine。

From b3606c731b032ccc4d0698131bca944bbe4366e4 Mon Sep 17 00:00:00 2001
From: "wang.yuqing" <queena.wyq@gmail.com>
Date: Fri, 13 Aug 2021 14:16:50 +0800
Subject: [PATCH 06/12] the first homework of js30

---
 01 - JavaScript Drum Kit/index-FINISHED.html | 137 ++++++++++---------
 01 - JavaScript Drum Kit/index-QUEENA.html   |  83 +++++++++++
 2 files changed, 153 insertions(+), 67 deletions(-)
 create mode 100644 01 - JavaScript Drum Kit/index-QUEENA.html

diff --git a/01 - JavaScript Drum Kit/index-FINISHED.html b/01 - JavaScript Drum Kit/index-FINISHED.html
index 0e9d90b..9a44f38 100644
--- a/01 - JavaScript Drum Kit/index-FINISHED.html	
+++ b/01 - JavaScript Drum Kit/index-FINISHED.html	
@@ -1,83 +1,86 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-  <meta charset="UTF-8">
-  <title>JS Drum Kit</title>
-  <link rel="stylesheet" href="style.css">
+    <meta charset="UTF-8">
+    <title>JS Drum Kit</title>
+    <link rel="stylesheet" href="style.css">
 </head>
+
 <body>
 
 
-  <div class="keys">
-    <div data-key="65" class="key">
-      <kbd>A</kbd>
-      <span class="sound">clap</span>
-    </div>
-    <div data-key="83" class="key">
-      <kbd>S</kbd>
-      <span class="sound">hihat</span>
-    </div>
-    <div data-key="68" class="key">
-      <kbd>D</kbd>
-      <span class="sound">kick</span>
-    </div>
-    <div data-key="70" class="key">
-      <kbd>F</kbd>
-      <span class="sound">openhat</span>
-    </div>
-    <div data-key="71" class="key">
-      <kbd>G</kbd>
-      <span class="sound">boom</span>
+    <div class="keys">
+        <div data-key="65" class="key">
+            <kbd>A</kbd>
+            <span class="sound">clap</span>
+        </div>
+        <div data-key="83" class="key">
+            <kbd>S</kbd>
+            <span class="sound">hihat</span>
+        </div>
+        <div data-key="68" class="key">
+            <kbd>D</kbd>
+            <span class="sound">kick</span>
+        </div>
+        <div data-key="70" class="key">
+            <kbd>F</kbd>
+            <span class="sound">openhat</span>
+        </div>
+        <div data-key="71" class="key">
+            <kbd>G</kbd>
+            <span class="sound">boom</span>
+        </div>
+        <div data-key="72" class="key">
+            <kbd>H</kbd>
+            <span class="sound">ride</span>
+        </div>
+        <div data-key="74" class="key">
+            <kbd>J</kbd>
+            <span class="sound">snare</span>
+        </div>
+        <div data-key="75" class="key">
+            <kbd>K</kbd>
+            <span class="sound">tom</span>
+        </div>
+        <div data-key="76" class="key">
+            <kbd>L</kbd>
+            <span class="sound">tink</span>
+        </div>
     </div>
-    <div data-key="72" class="key">
-      <kbd>H</kbd>
-      <span class="sound">ride</span>
-    </div>
-    <div data-key="74" class="key">
-      <kbd>J</kbd>
-      <span class="sound">snare</span>
-    </div>
-    <div data-key="75" class="key">
-      <kbd>K</kbd>
-      <span class="sound">tom</span>
-    </div>
-    <div data-key="76" class="key">
-      <kbd>L</kbd>
-      <span class="sound">tink</span>
-    </div>
-  </div>
 
-  <audio data-key="65" src="sounds/clap.wav"></audio>
-  <audio data-key="83" src="sounds/hihat.wav"></audio>
-  <audio data-key="68" src="sounds/kick.wav"></audio>
-  <audio data-key="70" src="sounds/openhat.wav"></audio>
-  <audio data-key="71" src="sounds/boom.wav"></audio>
-  <audio data-key="72" src="sounds/ride.wav"></audio>
-  <audio data-key="74" src="sounds/snare.wav"></audio>
-  <audio data-key="75" src="sounds/tom.wav"></audio>
-  <audio data-key="76" src="sounds/tink.wav"></audio>
+    <audio data-key="65" src="sounds/clap.wav"></audio>
+    <audio data-key="83" src="sounds/hihat.wav"></audio>
+    <audio data-key="68" src="sounds/kick.wav"></audio>
+    <audio data-key="70" src="sounds/openhat.wav"></audio>
+    <audio data-key="71" src="sounds/boom.wav"></audio>
+    <audio data-key="72" src="sounds/ride.wav"></audio>
+    <audio data-key="74" src="sounds/snare.wav"></audio>
+    <audio data-key="75" src="sounds/tom.wav"></audio>
+    <audio data-key="76" src="sounds/tink.wav"></audio>
 
-<script>
-  function removeTransition(event) {
-    if (event.propertyName !== 'transform') return; // 过滤其中一种事件
-    event.target.classList.remove('playing'); // 移除高亮的样式
-  }
+    <script>
+        function removeTransition(event) {
+            if (event.propertyName !== 'transform') return; // 过滤其中一种事件
+            event.target.classList.remove('playing'); // 移除高亮的样式
+        }
 
-  function playSound(event) {
-    const audio = document.querySelector(`audio[data-key="${event.keyCode}"]`); // 根据触发按键的键码，获取对应音频
-    const key = document.querySelector(`div[data-key="${event.keyCode}"]`); // 获取页面对应按钮 DIV 元素
-    if (!audio) return; // 处理无效的按键事件
+        function playSound(event) {
+            const audio = document.querySelector(`audio[data-key="${event.keyCode}"]`); // 根据触发按键的键码，获取对应音频
+            const key = document.querySelector(`div[data-key="${event.keyCode}"]`); // 获取页面对应按钮 DIV 元素
+            if (!audio) return; // 处理无效的按键事件
 
-    key.classList.add('playing'); // 改变样式
-    audio.currentTime = 0; // 每次播放之后都使音频播放进度归零
-    audio.play(); // 播放相应音效
-  }
+            key.classList.add('playing'); // 改变样式
+            audio.currentTime = 0; // 每次播放之后都使音频播放进度归零
+            audio.play(); // 播放相应音效
+        }
 
-  const keys = Array.from(document.querySelectorAll('.key')); // 获取页面所有按钮元素
-  keys.forEach(key => key.addEventListener('transitionend', removeTransition)); // 添加 transition 事件监听
-  window.addEventListener('keydown', playSound);
-</script>
+        const keys = Array.from(document.querySelectorAll('.key')); // 获取页面所有按钮元素
+        keys.forEach(key => key.addEventListener('transitionend', removeTransition)); // 添加 transition 事件监听
+        window.addEventListener('keydown', playSound); //
+    </script>
 
 
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/01 - JavaScript Drum Kit/index-QUEENA.html b/01 - JavaScript Drum Kit/index-QUEENA.html
new file mode 100644
index 0000000..e045328
--- /dev/null
+++ b/01 - JavaScript Drum Kit/index-QUEENA.html	
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>JS Drum Kit</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <div class="keys">
+        <div data-key="65" class="key">
+            <kbd>A</kbd>
+            <span class="sound">clap</span>
+        </div>
+        <div data-key="83" class="key">
+            <kbd>S</kbd>
+            <span class="sound">hihat</span>
+        </div>
+        <div data-key="68" class="key">
+            <kbd>D</kbd>
+            <span class="sound">kick</span>
+        </div>
+        <div data-key="70" class="key">
+            <kbd>F</kbd>
+            <span class="sound">openhat</span>
+        </div>
+        <div data-key="71" class="key">
+            <kbd>G</kbd>
+            <span class="sound">boom</span>
+        </div>
+        <div data-key="72" class="key">
+            <kbd>H</kbd>
+            <span class="sound">ride</span>
+        </div>
+        <div data-key="74" class="key">
+            <kbd>J</kbd>
+            <span class="sound">snare</span>
+        </div>
+        <div data-key="75" class="key">
+            <kbd>K</kbd>
+            <span class="sound">tom</span>
+        </div>
+        <div data-key="76" class="key">
+            <kbd>L</kbd>
+            <span class="sound">tink</span>
+        </div>
+    </div>
+
+    <audio data-key="65" src="sounds/clap.wav"></audio>
+    <audio data-key="83" src="sounds/hihat.wav"></audio>
+    <audio data-key="68" src="sounds/kick.wav"></audio>
+    <audio data-key="70" src="sounds/openhat.wav"></audio>
+    <audio data-key="71" src="sounds/boom.wav"></audio>
+    <audio data-key="72" src="sounds/ride.wav"></audio>
+    <audio data-key="74" src="sounds/snare.wav"></audio>
+    <audio data-key="75" src="sounds/tom.wav"></audio>
+    <audio data-key="76" src="sounds/tink.wav"></audio>
+
+    <script>
+        function removeTransition(event) {
+            if (event.propertyName !== 'transform') return // 获取与转换关联的属性名称（transform:scale(1.1)）
+            event.target.classList.remove('playing')
+        }
+
+        function playSound(event) {
+            const key = document.querySelector(`div[data-key="${event.keyCode}"]`)
+            const audio = document.querySelector(`audio[data-key="${event.keyCode}"]`)
+            if (!audio) return;
+            audio.currentTime = 0 // 设置播放位置
+            audio.play()
+            key.classList.add('playing');
+        }
+        const keys = Array.from(document.querySelectorAll('.key')) // 将伪数组对象变成一个数组
+        keys.forEach(key => {
+            key.addEventListener('transitionend', removeTransition) // 添加监听事件，transition后去除样式
+        })
+        window.addEventListener('keydown', playSound) // 监听键盘事件，添加样式和音效
+    </script>
+
+</body>
+
+</html>
\ No newline at end of file

From 26617c967d08b2a6179433f76d7406343cdd64b4 Mon Sep 17 00:00:00 2001
From: "wang.yuqing" <queena.wyq@gmail.com>
Date: Tue, 14 Sep 2021 17:56:34 +0800
Subject: [PATCH 07/12] =?UTF-8?q?=E9=80=9A=E8=BF=87=E6=94=B9=E5=8F=98?=
 =?UTF-8?q?=E5=85=A8=E5=B1=80=E6=A0=B7=E5=BC=8F=E5=8F=98=E9=87=8F=E6=94=B9?=
 =?UTF-8?q?=E5=8F=98=E5=85=83=E7=B4=A0=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 03 - CSS Variables/index-QUEENA.html | 83 ++++++++++++++++++++++++++++
 1 file changed, 83 insertions(+)
 create mode 100644 03 - CSS Variables/index-QUEENA.html

diff --git a/03 - CSS Variables/index-QUEENA.html b/03 - CSS Variables/index-QUEENA.html
new file mode 100644
index 0000000..0a97035
--- /dev/null
+++ b/03 - CSS Variables/index-QUEENA.html	
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Scoped CSS Variables and JS</title>
+</head>
+
+<body>
+    <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
+
+    <div class="controls">
+        <label for="spacing">Spacing:</label>
+        <input type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
+
+        <label for="blur">Blur:</label>
+        <input type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
+
+        <label for="base">Base Color</label>
+        <input type="color" name="base" value="#ffc600">
+    </div>
+
+    <img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
+
+    <style>
+        /*
+      misc styles, nothing to do with CSS variables
+    */
+        /* 定义全局样式变量 */
+        
+         :root {
+            --base: #ffc600;
+            --spacing: 10px;
+            --blur: 10px;
+        }
+        
+        img {
+            padding: var(--spacing);
+            background: var(--base);
+            filter: blur(var(--blur));
+        }
+        
+        body {
+            text-align: center;
+        }
+        
+        body {
+            background: #193549;
+            color: white;
+            font-family: 'helvetica neue', sans-serif;
+            font-weight: 100;
+            font-size: 50px;
+        }
+        
+        .controls {
+            margin-bottom: 50px;
+        }
+        
+        input {
+            width: 100px;
+        }
+    </style>
+
+    <script>
+        // 获取input,并为其添加监听事件
+        const inputs = document.querySelectorAll('.controls input');
+        inputs.forEach(input => input.addEventListener('change', handleUpdate))
+        inputs.forEach(input => input.addEventListener('mousemove', handleUpdate))
+
+        // 改变或者移动鼠标事件 执行的动作
+        function handleUpdate() {
+            // 获取变量的单位  spacing--px  blur--px color--''
+            // this--input元素  dataset是自定义属性
+            console.log(this.dataset)
+            const suffix = this.dataset.sizing || ''
+                // 改变全局变量的值去改变元素的样式属性值
+            document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix)
+        }
+    </script>
+
+</body>
+
+</html>
\ No newline at end of file

From 015c482cdd190a3d9dd7bde926a0306d64c27fb4 Mon Sep 17 00:00:00 2001
From: "wang.yuqing" <queena.wyq@gmail.com>
Date: Wed, 17 Nov 2021 16:48:47 +0800
Subject: [PATCH 08/12] js-4

---
 03 - CSS Variables/index-FINISHED.html   | 140 +++++++++---------
 04 - Array Cardio Day 1/index-START.html | 173 +++++++++++++++++------
 2 files changed, 203 insertions(+), 110 deletions(-)

diff --git a/03 - CSS Variables/index-FINISHED.html b/03 - CSS Variables/index-FINISHED.html
index c3217fc..fca2fe3 100644
--- a/03 - CSS Variables/index-FINISHED.html	
+++ b/03 - CSS Variables/index-FINISHED.html	
@@ -1,79 +1,81 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-  <meta charset="UTF-8">
-  <title>Scoped CSS Variables and JS</title>
+    <meta charset="UTF-8">
+    <title>Scoped CSS Variables and JS</title>
 </head>
-<body>
-  <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
-
-  <div class="controls">
-    <label for="spacing">Spacing:</label>
-    <input type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
-
-    <label for="blur">Blur:</label>
-    <input type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
-
-    <label for="base">Base Color</label>
-    <input type="color" name="base" value="#ffc600">
-  </div>
-
-  <img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
-
-  <style>
-    :root {
-      --base: #ffc600;
-      --spacing: 10px;
-      --blur: 10px;
-    }
-
-    img {
-      padding: var(--spacing);
-      background: var(--base);
-      filter: blur(var(--blur));
-    }
-
-    .hl {
-      color: var(--base);
-    }
 
-    /*
+<body>
+    <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
+
+    <div class="controls">
+        <label for="spacing">Spacing:</label>
+        <input type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
+
+        <label for="blur">Blur:</label>
+        <input type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
+
+        <label for="base">Base Color</label>
+        <input type="color" name="base" value="#ffc600">
+    </div>
+
+    <img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
+
+    <style>
+         :root {
+            --base: #ffc600;
+            --spacing: 10px;
+            --blur: 10px;
+        }
+        
+        img {
+            padding: var(--spacing);
+            background: var(--base);
+            filter: blur(var(--blur));
+        }
+        
+        .hl {
+            color: var(--base);
+        }
+        /*
       misc styles, nothing to do with CSS variables
     */
-
-    body {
-      text-align: center;
-    }
-
-    body {
-      background: #193549;
-      color: white;
-      font-family: 'helvetica neue', sans-serif;
-      font-weight: 100;
-      font-size: 50px;
-    }
-
-    .controls {
-      margin-bottom: 50px;
-    }
-
-    input {
-      width:100px;
-    }
-  </style>
-
-  <script>
-    const inputs = document.querySelectorAll('.controls input');
-
-    function handleUpdate() {
-      const suffix = this.dataset.sizing || '';
-      document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
-    }
-
-    inputs.forEach(input => input.addEventListener('change', handleUpdate));
-    inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
-  </script>
+        
+        body {
+            text-align: center;
+        }
+        
+        body {
+            background: #193549;
+            color: white;
+            font-family: 'helvetica neue', sans-serif;
+            font-weight: 100;
+            font-size: 50px;
+        }
+        
+        .controls {
+            margin-bottom: 50px;
+        }
+        
+        input {
+            width: 100px;
+        }
+    </style>
+
+    <script>
+        const inputs = document.querySelectorAll('.controls input');
+
+        function handleUpdate() {
+            const suffix = this.dataset.sizing || '';
+            document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
+        }
+
+        inputs.forEach(input => input.addEventListener('change', handleUpdate));
+        inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
+    </script>
 
 
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
index 4162bce..89cc52c 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -1,61 +1,152 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-  <meta charset="UTF-8">
-  <title>Array Cardio 💪</title>
+    <meta charset="UTF-8">
+    <title>Array Cardio 💪</title>
 </head>
+
 <body>
-  <p><em>Psst: have a look at the JavaScript Console</em> 💁</p>
-  <script>
-    // Get your shorts on - this is an array workout!
-    // ## Array Cardio Day 1
+    <p><em>Psst: have a look at the JavaScript Console</em> 💁</p>
+    <script>
+        // Get your shorts on - this is an array workout!
+        // ## Array Cardio Day 1
+
+        // Some data we can work with
 
-    // Some data we can work with
+        const inventors = [{
+            first: 'Albert',
+            last: 'Einstein',
+            year: 1879,
+            passed: 1955
+        }, {
+            first: 'Isaac',
+            last: 'Newton',
+            year: 1643,
+            passed: 1727
+        }, {
+            first: 'Galileo',
+            last: 'Galilei',
+            year: 1564,
+            passed: 1642
+        }, {
+            first: 'Marie',
+            last: 'Curie',
+            year: 1867,
+            passed: 1934
+        }, {
+            first: 'Johannes',
+            last: 'Kepler',
+            year: 1571,
+            passed: 1630
+        }, {
+            first: 'Nicolaus',
+            last: 'Copernicus',
+            year: 1473,
+            passed: 1543
+        }, {
+            first: 'Max',
+            last: 'Planck',
+            year: 1858,
+            passed: 1947
+        }, {
+            first: 'Katherine',
+            last: 'Blodgett',
+            year: 1898,
+            passed: 1979
+        }, {
+            first: 'Ada',
+            last: 'Lovelace',
+            year: 1815,
+            passed: 1852
+        }, {
+            first: 'Sarah E.',
+            last: 'Goode',
+            year: 1855,
+            passed: 1905
+        }, {
+            first: 'Lise',
+            last: 'Meitner',
+            year: 1878,
+            passed: 1968
+        }, {
+            first: 'Hanna',
+            last: 'Hammarström',
+            year: 1829,
+            passed: 1909
+        }];
 
-    const inventors = [
-      { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 },
-      { first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 },
-      { first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 },
-      { first: 'Marie', last: 'Curie', year: 1867, passed: 1934 },
-      { first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 },
-      { first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 },
-      { first: 'Max', last: 'Planck', year: 1858, passed: 1947 },
-      { first: 'Katherine', last: 'Blodgett', year: 1898, passed: 1979 },
-      { first: 'Ada', last: 'Lovelace', year: 1815, passed: 1852 },
-      { first: 'Sarah E.', last: 'Goode', year: 1855, passed: 1905 },
-      { first: 'Lise', last: 'Meitner', year: 1878, passed: 1968 },
-      { first: 'Hanna', last: 'Hammarström', year: 1829, passed: 1909 }
-    ];
+        // 1.筛选出出生在16世纪的科学家
 
-    const flavours = ['Chocolate Chip', 'Kulfi', 'Caramel Praline', 'Chocolate', 'Burnt Caramel', 'Pistachio', 'Rose', 'Sweet Coconut', 'Lemon Cookie', 'Toffeeness', 'Toasted Almond', 'Black Raspberry Crunch', 'Chocolate Brownies', 'Pistachio Almond', 'Strawberry', 'Lavender Honey', 'Lychee', 'Peach', 'Black Walnut', 'Birthday Cake', 'Mexican Chocolate', 'Mocha Almond Fudge', 'Raspberry'];
+        const flavours = ['Chocolate Chip', 'Kulfi', 'Caramel Praline', 'Chocolate', 'Burnt Caramel', 'Pistachio', 'Rose', 'Sweet Coconut', 'Lemon Cookie', 'Toffeeness', 'Toasted Almond', 'Black Raspberry Crunch', 'Chocolate Brownies', 'Pistachio Almond', 'Strawberry', 'Lavender Honey', 'Lychee', 'Peach', 'Black Walnut', 'Birthday Cake', 'Mexican Chocolate', 'Mocha Almond Fudge', 'Raspberry'];
 
-    const people = ['Beck, Glenn', 'Becker, Carl', 'Beckett, Samuel', 'Beddoes, Mick', 'Beecher, Henry', 'Beethoven, Ludwig', 'Begin, Menachem', 'Belloc, Hilaire', 'Bellow, Saul', 'Benchley, Robert', 'Benenson, Peter', 'Ben-Gurion, David', 'Benjamin, Walter', 'Benn, Tony', 'Bennington, Chester', 'Benson, Leana', 'Bent, Silas', 'Bentsen, Lloyd', 'Berger, Ric', 'Bergman, Ingmar', 'Berio, Luciano', 'Berle, Milton', 'Berlin, Irving', 'Berne, Eric', 'Bernhard, Sandra', 'Berra, Yogi', 'Berry, Halle', 'Berry, Wendell', 'Bethea, Erin', 'Bevan, Aneurin', 'Bevel, Ken', 'Biden, Joseph', 'Bierce, Ambrose', 'Biko, Steve', 'Billings, Josh', 'Biondo, Frank', 'Birrell, Augustine', 'Black Elk', 'Blair, Robert', 'Blair, Tony', 'Blake, William'];
+        const people = ['Beck, Glenn', 'Becker, Carl', 'Beckett, Samuel', 'Beddoes, Mick', 'Beecher, Henry', 'Beethoven, Ludwig', 'Begin, Menachem', 'Belloc, Hilaire', 'Bellow, Saul', 'Benchley, Robert', 'Benenson, Peter', 'Ben-Gurion, David', 'Benjamin, Walter', 'Benn, Tony', 'Bennington, Chester', 'Benson, Leana', 'Bent, Silas', 'Bentsen, Lloyd', 'Berger, Ric', 'Bergman, Ingmar', 'Berio, Luciano', 'Berle, Milton', 'Berlin, Irving', 'Berne, Eric', 'Bernhard, Sandra', 'Berra, Yogi', 'Berry, Halle', 'Berry, Wendell', 'Bethea, Erin', 'Bevan, Aneurin', 'Bevel, Ken', 'Biden, Joseph', 'Bierce, Ambrose', 'Biko, Steve', 'Billings, Josh', 'Biondo, Frank', 'Birrell, Augustine', 'Black, Elk', 'Blair, Robert', 'Blair, Tony', 'Blake, William'];
 
-    // Array.prototype.filter()
-    // 1. Filter the list of inventors for those who were born in the 1500's
+        // Array.prototype.filter() 筛选出出生在16世纪的科学家
+        // 1. Filter the list of inventors for those who were born in the 1500's
+        const filterArray =
+            inventors.filter(item => {
+                if (item.year > 1500 && item.year < 1600) {
+                    return true
+                } else {
+                    return false
+                }
+            })
+        console.table(filterArray)
 
-    // Array.prototype.map()
-    // 2. Give us an array of the inventors' first and last names
+        // Array.prototype.map()    输入科学家的名字
+        // 2. Give us an array of the inventors' first and last names
+        const mapArray = inventors.map(item => item.first + ' ' + item.last)
+        console.table(mapArray)
 
-    // Array.prototype.sort()
-    // 3. Sort the inventors by birthdate, oldest to youngest
+        // Array.prototype.sort()
+        // 3. Sort the inventors by birthdate, oldest to youngest
+        const ordered = inventors.sort((a, b) => {
+            return a.year > b.year ? 1 : -1
+        })
+        console.table(ordered)
 
-    // Array.prototype.reduce()
-    // 4. How many years did all the inventors live?
 
-    // 5. Sort the inventors by years lived
+        // Array.prototype.reduce()
+        // 4. How many years did all the inventors live?
 
-    // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
-    // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris
+        // 5. Sort the inventors by years lived
 
+        const liveLonger = inventors.sort((a, b) => ((a.passed - a.year) > (b.passed - b.year)) ? 1 : -1)
+        console.table(liveLonger)
 
-    // 7. sort Exercise
-    // Sort the people alphabetically by last name
+        // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
+        // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris
+        // 筛选出含有'de'的标题
+        // const category = document.querySelector('.mw-category')
+        // const links = Array.from(category.querySelector('a'))
+        // const de = links.map(item => item.textContent).filter(title => title.includes('de'))
 
-    // 8. Reduce Exercise
-    // Sum up the instances of each of these
-    const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck' ];
 
-  </script>
+        // 7. sort Exercise
+        // Sort the people alphabetically by last name
+        // const sortByLastName = inventors.sort((a, b) => a.last > b.last ? 1 : -1)
+        // console.table(sortByLastName)
+        const sortByLastName = people.sort((a, b) => {
+            const [afirst, alast] = a.split(', ')
+            const [bfirst, blast] = b.split(', ')
+            console.log([afirst, alast])
+            return alast > blast ? 1 : -1
+        })
+        console.table(sortByLastName)
+
+
+        // 8. Reduce Exercise
+        // Sum up the instances of each of these
+        const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck'];
+        const static = data.reduce((obj, item) => {
+            if (!obj[item]) {
+                obj[item] = 0
+            }
+            obj[item]++;
+            return obj
+        }, {})
+    </script>
 </body>
-</html>
+
+</html>
\ No newline at end of file

From 9064f1701aa83ae6aae3d1a455ccc012564269e8 Mon Sep 17 00:00:00 2001
From: "wang.yuqing" <queena.wyq@gmail.com>
Date: Thu, 18 Nov 2021 11:50:22 +0800
Subject: [PATCH 09/12] js-5

---
 05 - Flex Panel Gallery/index-queena.html | 179 ++++++++++++++++++++++
 1 file changed, 179 insertions(+)
 create mode 100644 05 - Flex Panel Gallery/index-queena.html

diff --git a/05 - Flex Panel Gallery/index-queena.html b/05 - Flex Panel Gallery/index-queena.html
new file mode 100644
index 0000000..9e72267
--- /dev/null
+++ b/05 - Flex Panel Gallery/index-queena.html	
@@ -0,0 +1,179 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Flex Panels 💪</title>
+    <link href='https://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'>
+</head>
+
+<body>
+    <style>
+        html {
+            box-sizing: border-box;
+            background: #ffc600;
+            font-family: 'helvetica neue';
+            font-size: 20px;
+            font-weight: 200;
+        }
+        
+        body {
+            margin: 0;
+        }
+        
+        *,
+        *:before,
+        *:after {
+            box-sizing: inherit;
+        }
+        
+        .panels {
+            min-height: 100vh;
+            overflow: hidden;
+            display: flex;
+            flex-direction: row;
+        }
+        
+        .panel {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            background: #6B0F9C;
+            box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.1);
+            color: white;
+            text-align: center;
+            align-items: center;
+            border: 1px solid #f00;
+            /* Safari transitionend event.propertyName === flex */
+            /* Chrome + FF transitionend event.propertyName === flex-grow */
+            transition: font-size 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11), flex 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11), background 0.2s;
+            font-size: 20px;
+            background-size: cover;
+            background-position: center;
+        }
+        
+        .panel1 {
+            background-image: url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500);
+        }
+        
+        .panel2 {
+            background-image: url(https://source.unsplash.com/1CD3fd8kHnE/1500x1500);
+        }
+        
+        .panel3 {
+            background-image: url(https://images.unsplash.com/photo-1465188162913-8fb5709d6d57?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&w=1500&h=1500&fit=crop&s=967e8a713a4e395260793fc8c802901d);
+        }
+        
+        .panel4 {
+            background-image: url(https://source.unsplash.com/ITjiVXcwVng/1500x1500);
+        }
+        
+        .panel5 {
+            background-image: url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500);
+        }
+        
+        .panel>* {
+            margin: 0;
+            width: 100%;
+            transition: transform 0.5s;
+        }
+        
+        .panel p {
+            flex: 1;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            text-transform: uppercase;
+            font-family: 'Amatic SC', cursive;
+            text-shadow: 0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45);
+            font-size: 2em;
+        }
+        
+        .panel>*:first-child {
+            transform: translateY(-100%);
+        }
+        
+        .panel>*:last-child {
+            transform: translateY(100%);
+        }
+        
+        .panel.open-active>*:first-child {
+            transform: translateY(0%);
+        }
+        
+        .panel.open-active>*:last-child {
+            transform: translateY(0%);
+        }
+        
+        .panel p:nth-child(2) {
+            font-size: 4em;
+        }
+        
+        .panel.open {
+            flex: 5;
+            font-size: 40px;
+        }
+        
+        .cta {
+            color: white;
+            text-decoration: none;
+        }
+    </style>
+
+
+    <div class="panels">
+        <div class="panel panel1">
+            <p>Hey</p>
+            <p>Let's</p>
+            <p>Dance</p>
+        </div>
+        <div class="panel panel2">
+            <p>Give</p>
+            <p>Take</p>
+            <p>Receive</p>
+        </div>
+        <div class="panel panel3">
+            <p>Experience</p>
+            <p>It</p>
+            <p>Today</p>
+        </div>
+        <div class="panel panel4">
+            <p>Give</p>
+            <p>All</p>
+            <p>You can</p>
+        </div>
+        <div class="panel panel5">
+            <p>Life</p>
+            <p>In</p>
+            <p>Motion</p>
+        </div>
+    </div>
+
+    <script>
+        const panels = document.querySelectorAll('.panel')
+        panels.forEach((panel) => panel.addEventListener('click', toggleOpen))
+
+        function toggleOpen(e) {
+            console.log('e', e);
+            console.log('this', this)
+            console.log('classList', this.classList)
+            this.classList.toggle('open') // classList.toggle class有就会去除，没有则会添加
+        }
+        panels.forEach(panel => panel.addEventListener('transitionend', toggleActive))
+
+        function toggleActive(e) {
+            console.log(e);
+            if (e.propertyName.includes('flex')) {
+                this.classList.toggle('open-active')
+            }
+        }
+    </script>
+
+
+
+
+
+
+</body>
+
+</html>
\ No newline at end of file

From 4ba7315b35fb0bf5bbb0baff79d58fdbad19334b Mon Sep 17 00:00:00 2001
From: "wang.yuqing" <queena.wyq@gmail.com>
Date: Mon, 27 Dec 2021 17:20:14 +0800
Subject: [PATCH 10/12] the seventh of homework

---
 05 - Flex Panel Gallery/index-queena.html | 15 ++--
 06 - Type Ahead/index-FINISHED.html       | 96 ++++++++++++-----------
 06 - Type Ahead/index-queena.html         | 56 +++++++++++++
 07 - Array Cardio Day 2/index-queena.html | 77 ++++++++++++++++++
 4 files changed, 188 insertions(+), 56 deletions(-)
 create mode 100644 06 - Type Ahead/index-queena.html
 create mode 100644 07 - Array Cardio Day 2/index-queena.html

diff --git a/05 - Flex Panel Gallery/index-queena.html b/05 - Flex Panel Gallery/index-queena.html
index 9e72267..d4e6220 100644
--- a/05 - Flex Panel Gallery/index-queena.html	
+++ b/05 - Flex Panel Gallery/index-queena.html	
@@ -154,9 +154,12 @@
         panels.forEach((panel) => panel.addEventListener('click', toggleOpen))
 
         function toggleOpen(e) {
-            console.log('e', e);
-            console.log('this', this)
-            console.log('classList', this.classList)
+            // console.log('e', e);
+            // console.log('this', this)
+            // console.log('classList', this.classList)
+            panels.forEach((panel) => {
+                console.log('panel-classList', panel.classList)
+            })
             this.classList.toggle('open') // classList.toggle class有就会去除，没有则会添加
         }
         panels.forEach(panel => panel.addEventListener('transitionend', toggleActive))
@@ -168,12 +171,6 @@
             }
         }
     </script>
-
-
-
-
-
-
 </body>
 
 </html>
\ No newline at end of file
diff --git a/06 - Type Ahead/index-FINISHED.html b/06 - Type Ahead/index-FINISHED.html
index 5902b43..4529d08 100644
--- a/06 - Type Ahead/index-FINISHED.html	
+++ b/06 - Type Ahead/index-FINISHED.html	
@@ -1,61 +1,63 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-  <meta charset="UTF-8">
-  <title>Type Ahead 👀</title>
-  <link rel="stylesheet" href="style.css">
+    <meta charset="UTF-8">
+    <title>Type Ahead 👀</title>
+    <link rel="stylesheet" href="style.css">
 </head>
+
 <body>
 
-  <form class="search-form">
-    <input type="text" class="search" placeholder="City or State">
-    <ul class="suggestions">
-      <li>Filter for a city</li>
-      <li>or a state</li>
-    </ul>
-  </form>
-<script>
-const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
-
-const cities = [];
-fetch(endpoint)
-  .then(blob => blob.json())
-  .then(data => cities.push(...data));
-
-function findMatches(wordToMatch, cities) {
-  return cities.filter(place => {
-    // here we need to figure out if the city or state matches what was searched
-    const regex = new RegExp(wordToMatch, 'gi');
-    return place.city.match(regex) || place.state.match(regex)
-  });
-}
-
-function numberWithCommas(x) {
-  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-}
-
-function displayMatches() {
-  const matchArray = findMatches(this.value, cities);
-  const html = matchArray.map(place => {
-    const regex = new RegExp(this.value, 'gi');
-    const cityName = place.city.replace(regex, `<span class="hl">${this.value}</span>`);
-    const stateName = place.state.replace(regex, `<span class="hl">${this.value}</span>`);
-    return `
+    <form class="search-form">
+        <input type="text" class="search" placeholder="City or State">
+        <ul class="suggestions">
+            <li>Filter for a city</li>
+            <li>or a state</li>
+        </ul>
+    </form>
+    <script>
+        const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
+
+        const cities = [];
+        fetch(endpoint)
+            .then(blob => blob.json())
+            .then(data => cities.push(...data));
+
+        function findMatches(wordToMatch, cities) {
+            return cities.filter(place => {
+                // here we need to figure out if the city or state matches what was searched
+                const regex = new RegExp(wordToMatch, 'gi');
+                return place.city.match(regex) || place.state.match(regex)
+            });
+        }
+
+        function numberWithCommas(x) {
+            return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+        }
+
+        function displayMatches() {
+            const matchArray = findMatches(this.value, cities);
+            const html = matchArray.map(place => {
+                const regex = new RegExp(this.value, 'gi');
+                const cityName = place.city.replace(regex, `<span class="hl">${this.value}</span>`);
+                const stateName = place.state.replace(regex, `<span class="hl">${this.value}</span>`);
+                return `
       <li>
         <span class="name">${cityName}, ${stateName}</span>
         <span class="population">${numberWithCommas(place.population)}</span>
       </li>
     `;
-  }).join('');
-  suggestions.innerHTML = html;
-}
+            }).join('');
+            suggestions.innerHTML = html;
+        }
 
-const searchInput = document.querySelector('.search');
-const suggestions = document.querySelector('.suggestions');
+        const searchInput = document.querySelector('.search');
+        const suggestions = document.querySelector('.suggestions');
 
-searchInput.addEventListener('change', displayMatches);
-searchInput.addEventListener('keyup', displayMatches);
+        searchInput.addEventListener('change', displayMatches);
+        searchInput.addEventListener('keyup', displayMatches);
+    </script>
+</body>
 
-</script>
-  </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/06 - Type Ahead/index-queena.html b/06 - Type Ahead/index-queena.html
new file mode 100644
index 0000000..4b25fb5
--- /dev/null
+++ b/06 - Type Ahead/index-queena.html	
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Type Ahead 👀</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+
+    <form class="search-form">
+        <input type="text" class="search" placeholder="City or State">
+        <ul class="suggestions">
+            <li>Filter for a city</li>
+            <li>or a state</li>
+        </ul>
+    </form>
+    <script>
+        const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
+        // 1.监听输入值
+        const searchInput = document.querySelector('.search')
+        searchInput.addEventListener('change', matchData)
+        searchInput.addEventListener('keyup', matchData)
+            // 2.使用fetch获取数据
+        const allData = []
+        fetch(endpoint).then(res => res.json()).then(data => allData.push(...data))
+
+        // 3.根据输入值和数据相匹配
+        // 3.1正则表达式
+        function findMatches(wordToMatch, cities) {
+            return cities.filter(place => {
+                const regex = new RegExp(wordToMatch, 'gi')
+                return
+            })
+        }
+
+        function matchData() {
+            let filterCity = allData.filter(item => item.city === this.value)
+            console.log(filterCity)
+            const suggestions = document.querySelector('.suggestions')
+            filterCity.forEach(item => {
+                    let liHtml = `<li>${item.city}</li>`
+                    suggestions.appendChild(liHtml)
+                })
+                // console.log(allData)
+                // console.log(this.value)
+
+        }
+
+        // 3.将匹配到的值放在ul中
+        // 4.将关键词设置高亮再显示在搜索框中
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/07 - Array Cardio Day 2/index-queena.html b/07 - Array Cardio Day 2/index-queena.html
new file mode 100644
index 0000000..0c496a8
--- /dev/null
+++ b/07 - Array Cardio Day 2/index-queena.html	
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Array Cardio 💪💪</title>
+</head>
+
+<body>
+    <p><em>Psst: have a look at the JavaScript Console</em> 💁</p>
+    <script>
+        // ## Array Cardio Day 2
+
+        const people = [{
+            name: 'Wes',
+            year: 1988
+        }, {
+            name: 'Kait',
+            year: 1986
+        }, {
+            name: 'Irv',
+            year: 1970
+        }, {
+            name: 'Lux',
+            year: 2015
+        }];
+
+        const comments = [{
+            text: 'Love this!',
+            id: 523423
+        }, {
+            text: 'Super good',
+            id: 823423
+        }, {
+            text: 'You are the best',
+            id: 2039842
+        }, {
+            text: 'Ramen is my fav food ever',
+            id: 123523
+        }, {
+            text: 'Nice Nice Nice!',
+            id: 542328
+        }];
+
+        // Some and Every Checks
+        // Array.prototype.some() // is at least one person 19?
+        // 分析：至少有一个人说明要的结果是有或没有 使用some
+        const isExist = people.some(item => {
+            return (new Date().getFullYear() - item.year) > 19
+        })
+        console.log('是否有人超过19岁？', isExist)
+
+
+        // Array.prototype.every() // is everyone 19?
+        const isAll = people.every(item => {
+            return new Date().getFullYear() - item.year > 19
+        })
+        console.log('是否每一个人都超过19岁？', isAll)
+
+        // Array.prototype.find()
+        // Find is like filter, but instead returns just the one you are looking for
+        // find the comment with the ID of 823423
+        const isComment = comments.find(item => item.id == '823423')
+        console.log(`id为‘823423’的评论是 ${isComment.text}`)
+
+        // Array.prototype.findIndex()
+        // Find the comment with this ID
+        // delete the comment with the ID of 823423
+        const index = comments.findIndex(item => item.id == '823423')
+        console.log('删除前', comments)
+        console.log(`id为‘823423’的序号是 ${index}`)
+        comments.splice(index, 1)
+        console.log('删除后', comments)
+    </script>
+</body>
+
+</html>
\ No newline at end of file

From efb673e5022b5cf8786fe67945844da0e1d80220 Mon Sep 17 00:00:00 2001
From: "wang.yuqing" <queena.wyq@gmail.com>
Date: Mon, 27 Dec 2021 20:09:58 +0800
Subject: [PATCH 11/12] js-8

---
 08 - Fun with HTML5 Canvas/index-queena.html | 89 ++++++++++++++++++++
 1 file changed, 89 insertions(+)
 create mode 100644 08 - Fun with HTML5 Canvas/index-queena.html

diff --git a/08 - Fun with HTML5 Canvas/index-queena.html b/08 - Fun with HTML5 Canvas/index-queena.html
new file mode 100644
index 0000000..c939ddc
--- /dev/null
+++ b/08 - Fun with HTML5 Canvas/index-queena.html	
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>HTML5 Canvas</title>
+</head>
+
+<body>
+    <canvas id="draw" width="800" height="800"></canvas>
+    <script>
+        /* 整体思路：1.获取宽高，确定鼠标事件监听范围
+                                   2.初始化画笔的线条填充色和形状、衔接形状、结尾形状
+                                   3. 定义初始点、是否要绘画的变量
+                                   4. 优化事件：颜色、线条
+                      */
+
+        const canvas = document.querySelector('#draw');
+        const ctx = canvas.getContext('2d');
+
+        // 画板的宽高
+        canvas.width = window.innerWidth;
+        canvas.height = window.innerHeight;
+
+        // 线条样式
+        ctx.strokeStyle = '#BADA55' // 填充色
+        ctx.lineJoin = 'round'; // 两条线段的衔接处
+        ctx.lineCap = 'round'; // 线段结尾形状
+        ctx.lineWidth = 100; //线条宽度
+
+
+        let isDrawing = false;
+        let lastX = 0; //起点初始值
+        let lastY = 0;
+        let hue = 0; //h(hue)s(Saturation)l(light)色相变量
+        let direction = false // lineWidth线条粗细变量
+
+
+        function draw(e) {
+            if (!isDrawing) return;
+            [lastX, lastY] = [e.offsetX, e.offsetY]
+            ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`
+            ctx.beginPath()
+            ctx.moveTo(lastX, lastY)
+            ctx.lineTo(e.offsetX, e.offsetY)
+                // console.log('e.offsetX, e.offsetY', e.offsetX, e.offsetY)
+            ctx.stroke()
+
+            hue++;
+            if (hue >= 360) {
+                hue = 0
+            }
+            if (ctx.lineWidth >= 100 || ctx.lineWidth <= 0) {
+                direction = !direction;
+            }
+
+            if (direction) {
+                ctx.lineWidth++;
+            } else {
+                ctx.lineWidth--;
+            }
+        }
+
+        // 监听mouseDown事件,鼠标按下
+        canvas.addEventListener('mousedown', e => {
+            isDrawing = true;
+            // console.log(e)
+        })
+
+        // 监听mouseMove事件，鼠标移动，没有区分按下与否
+        canvas.addEventListener('mousemove', draw)
+
+        // 监听mouseUp事件，按钮放开
+        canvas.addEventListener('mouseup', () => isDrawing = false)
+
+        // 监听mouseOut事件，移出画板
+        canvas.addEventListener('mouseout', () => isDrawing = false)
+    </script>
+
+    <style>
+        html,
+        body {
+            margin: 0;
+        }
+    </style>
+
+</body>
+
+</html>
\ No newline at end of file

From 6f71dc7b824409ee89d0ffa2fcb0a4765e45992d Mon Sep 17 00:00:00 2001
From: "wang.yuqing" <queena.wyq@gmail.com>
Date: Mon, 10 Jan 2022 11:58:25 +0800
Subject: [PATCH 12/12] js-8

---
 .../queena.html                               | 144 ++++++++++++++++++
 1 file changed, 144 insertions(+)
 create mode 100644 10 - Hold Shift and Check Checkboxes/queena.html

diff --git a/10 - Hold Shift and Check Checkboxes/queena.html b/10 - Hold Shift and Check Checkboxes/queena.html
new file mode 100644
index 0000000..3047c5f
--- /dev/null
+++ b/10 - Hold Shift and Check Checkboxes/queena.html	
@@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Document</title>
+</head>
+
+<body>
+    <style>
+        html {
+            font-family: sans-serif;
+            background: #ffc600;
+        }
+        
+        .inbox {
+            max-width: 400px;
+            margin: 50px auto;
+            background: white;
+            border-radius: 5px;
+            box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.1);
+        }
+        
+        .item {
+            display: flex;
+            align-items: center;
+            border-bottom: 1px solid #F1F1F1;
+        }
+        
+        .item:last-child {
+            border-bottom: 0;
+        }
+        
+        input:checked+p {
+            background: #F9F9F9;
+            text-decoration: line-through;
+        }
+        
+        input[type="checkbox"] {
+            margin: 20px;
+        }
+        
+        p {
+            margin: 0;
+            padding: 20px;
+            transition: background 0.2s;
+            flex: 1;
+            font-family: 'helvetica neue';
+            font-size: 20px;
+            font-weight: 200;
+            border-left: 1px solid #D1E2FF;
+        }
+        
+        .details {
+            text-align: center;
+            font-size: 15px;
+        }
+    </style>
+    <!--
+   The following is a common layout you would see in an email client.
+
+   When a user clicks a checkbox, holds Shift, and then clicks another checkbox a few rows down, all the checkboxes inbetween those two checkboxes should be checked.
+
+  -->
+    <div class="inbox">
+        <div class="item">
+            <input type="checkbox">
+            <p>This is an inbox layout.</p>
+        </div>
+        <div class="item">
+            <input type="checkbox">
+            <p>Check one item</p>
+        </div>
+        <div class="item">
+            <input type="checkbox">
+            <p>Hold down your Shift key</p>
+        </div>
+        <div class="item">
+            <input type="checkbox">
+            <p>Check a lower item</p>
+        </div>
+        <div class="item">
+            <input type="checkbox">
+            <p>Everything inbetween should also be set to checked</p>
+        </div>
+        <div class="item">
+            <input type="checkbox">
+            <p>Try do it with out any libraries</p>
+        </div>
+        <div class="item">
+            <input type="checkbox">
+            <p>Just regular JavaScript</p>
+        </div>
+        <div class="item">
+            <input type="checkbox">
+            <p>Good Luck!</p>
+        </div>
+        <div class="item">
+            <input type="checkbox">
+            <p>Don't forget to tweet your result!</p>
+        </div>
+    </div>
+
+    <script>
+        // 对象：所有复选框
+        // 事件：监听点击和按下shift键
+
+
+
+        // 分析 
+        // 1.获取所有input对象
+        // 2.监听点击事件和shift键
+        // 3.获取点击的input下标和按下shift键之后的下标（不确定这两个值大小）
+        // 4.更改这两个值之间（包括这两个值）的input状态
+
+        let checkboxes = document.querySelectorAll('.inbox input[type="checkbox"]')
+        const boxArr = Array.from(checkboxes)
+        let lastChecked
+        let onOff = false
+        console.log(boxArr)
+
+
+        function handleCheck(e) {
+            if (!lastChecked) lastChecked = this // 点击事件的第一个元素
+            let onOff = lastChecked.checked
+            if (e.shiftKey) {
+                let start = boxArr.indexOf(this) // 现在点击input序号
+                let end = boxArr.indexOf(lastChecked) //上一个点击的input序号
+                boxArr.slice(Math.min(start, end), Math.max(start, end) + 1).forEach(input => {
+                    input.checked = onOff
+                })
+            }
+            lastChecked = this;
+        }
+        boxArr.forEach(checkbox => checkbox.addEventListener('click', handleCheck))
+
+        // 学到的知识点
+        // 1.nodelist 只是类数组，只能用forEach()等简单的方法
+        // 2.slice 不改变数据，不包含最后一个元素
+        // Math.max() 和Math.min() 找到一组数字数据最值
+    </script>
+</body>
+
+</html>
\ No newline at end of file