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 1/4] 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 2/4] 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 3/4] 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 acd4cb33ecb36ffdbd18e27c932d7f74ba95e95f Mon Sep 17 00:00:00 2001
From: "hanlong.liao" <hanlong.liao@renren-inc.com>
Date: Thu, 18 Mar 2021 12:19:33 +0800
Subject: [PATCH 4/4] =?UTF-8?q?=E5=AE=8C=E6=88=90=E5=89=8D=E4=B8=89?=
 =?UTF-8?q?=E4=B8=AA=E9=A1=B9=E7=9B=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 01 - JavaScript Drum Kit/index-START.html |  35 +++++++-
 02 - JS + CSS Clock/index-START.html      | 102 +++++++++++++++++-----
 03 - CSS Variables/index-START.html       |  63 +++++++++++--
 3 files changed, 167 insertions(+), 33 deletions(-)

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index c771dea..b259669 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -1,10 +1,12 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <title>JS Drum Kit</title>
   <link rel="stylesheet" href="style.css">
 </head>
+
 <body>
 
 
@@ -59,7 +61,38 @@
 
   <script>
 
+    /**
+    1. 键盘事件
+    2. 对应的元素添加class
+    3. audio标签
+    */
+
+
+    document.addEventListener('keydown', (evt) => {
+      playByKeyCode(evt.keyCode)
+      highlightByCode(evt.keyCode);
+    })
+    document.addEventListener('keyup', (evt) => {
+      cancelHighlightByCode(evt.keyCode);
+    })
+    const playByKeyCode = code => {
+      let audio = document.querySelector(`audio[data-key="${code}"]`);
+      if(!audio) return;
+      audio.play();
+    }
+    const highlightByCode = code => {
+      let key = document.querySelector(`.key[data-key="${code}"`);
+      if(!key) return;
+      key.classList.add('playing');
+    }
+    const cancelHighlightByCode = code => {
+      let key = document.querySelector(`.key[data-key="${code}"`);
+      if(!key) return;
+      key.classList.remove('playing');
+    }
   </script>
 
+
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html
index 2712384..c8ec077 100644
--- a/02 - JS + CSS Clock/index-START.html	
+++ b/02 - JS + CSS Clock/index-START.html	
@@ -1,34 +1,37 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <title>JS + CSS Clock</title>
 </head>
+
 <body>
 
 
-    <div class="clock">
-      <div class="clock-face">
-        <div class="hand hour-hand"></div>
-        <div class="hand min-hand"></div>
-        <div class="hand second-hand"></div>
-      </div>
+  <div class="clock">
+    <div class="clock-face">
+      <div class="hand hour-hand"></div>
+      <div class="hand min-hand"></div>
+      <div class="hand second-hand"></div>
     </div>
+  </div>
 
 
   <style>
     html {
-      background:#018DED url(http://unsplash.it/1500/1000?image=881&blur=50);
-      background-size:cover;
-      font-family:'helvetica neue';
+      background: #018DED url(https://unsplash.it/1500/1000?image=881&blur=5);
+      background-size: cover;
+      font-family: 'helvetica neue';
       text-align: center;
       font-size: 10px;
     }
 
     body {
+      margin: 0;
       font-size: 2rem;
-      display:flex;
-      flex:1;
+      display: flex;
+      flex: 1;
       min-height: 100vh;
       align-items: center;
     }
@@ -36,38 +39,91 @@
     .clock {
       width: 30rem;
       height: 30rem;
-      border:20px solid white;
-      border-radius:50%;
-      margin:50px auto;
+      border: 20px solid white;
+      border-radius: 50%;
+      margin: 50px auto;
       position: relative;
-      padding:2rem;
+      padding: 2rem;
       box-shadow:
-        0 0 0 4px rgba(0,0,0,0.1),
+        0 0 0 4px rgba(0, 0, 0, 0.1),
         inset 0 0 0 3px #EFEFEF,
         inset 0 0 10px black,
-        0 0 10px rgba(0,0,0,0.2);
+        0 0 10px rgba(0, 0, 0, 0.2);
     }
 
     .clock-face {
       position: relative;
       width: 100%;
       height: 100%;
-      transform: translateY(-3px); /* account for the height of the clock hands */
+      transform: translateY(-3px);
+      /* account for the height of the clock hands */
     }
 
     .hand {
-      width:50%;
-      height:6px;
-      background:black;
+      height: 6px;
       position: absolute;
-      top:50%;
+      top: 50%;
+      transform-origin: right;
+    }
+
+    .hour-hand {
+      width: 40%;
+      background-color: red;
+      margin-left: 10%;
+    }
+
+    .min-hand {
+      width: 45%;
+      background-color: green;
+      margin-left: 5%;
     }
 
+    .second-hand {
+      width: 50%;
+      background-color: blue;
+    }
   </style>
 
   <script>
+    /*
+    1. 时间换算成二维角度，一个格子多少度，360/60 = 6deg
+    2. 秒针转一圈，分针进一位，秒针转60圈，时针进一位
+    3. 如何让指针围着中心点转动
+    */
 
+    // 转动指针
+    const transformElByClassName = (className, deg) => {
+      let el = document.body.querySelector(className);
+      if(!el) return;
+      el.style.transform = `rotate(${deg + 90}deg)`; // 90是从12点钟起步
+
+    }
+    const init = () => {
+      let now = new Date(Date.now())
+      let hour = now.getHours();// 24小时制
+      let min = now.getMinutes();//60分钟制
+      let second = now.getSeconds();//60秒钟制
+      transformElByClassName('.hour-hand', hour * (360 / 12) + (min / 60) * 30);
+      transformElByClassName('.min-hand', min * (360 / 60) + (second / 60) * 6);
+      transformElByClassName('.second-hand', second * (360 / 60));
+      setInterval(() => {
+        second++;
+        transformElByClassName('.second-hand', second * (360 / 60));
+        if(second >= 60) {
+          min++;
+          transformElByClassName('.min-hand', min * (360 / 60) + (second / 60) * 6);
+          second = second - 60;
+        }
+        if(min >= 60) {
+          hour++;
+          transformElByClassName('.hour-hand', hour * (360 / 12) + (min / 60) * 30);
+          min = min - 60;
+        }
+      }, 1000);
+    }
+    init()
 
   </script>
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
index 7171607..81c7ffa 100644
--- a/03 - CSS Variables/index-START.html	
+++ b/03 - CSS Variables/index-START.html	
@@ -1,36 +1,40 @@
 <!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">
+    <input id="spacing" 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">
+    <input id="blur" 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">
+    <input id="base" type="color" name="base" value="#ffc600">
   </div>
 
   <img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
 
   <style>
-
     /*
       misc styles, nothing to do with CSS variables
     */
-
-    body {
-      text-align: center;
+    /* global */
+    :root {
+      --spacing: 10px;
+      --blur: 10px;
+      --base: #ffc600;
     }
 
     body {
+      text-align: center;
       background: #193549;
       color: white;
       font-family: 'helvetica neue', sans-serif;
@@ -43,12 +47,53 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
     }
 
     input {
-      width:100px;
+      width: 100px;
+    }
+
+    img {
+      padding: var(--spacing, 0px);
+      filter: blur(var(--blur, 0));
+      background-color: var(--base, #193549);
     }
   </style>
 
   <script>
+    /*
+
+    考验：
+    1. :root
+    2. CSS 变量 var
+    3. input事件change,mousemove(为什么要用这个？因为滑动滑块的同时展示效果要同步)
+    */
+    /**
+    CSS变量（自定义属性）：
+    用法：
+      属性名要以两个减号(--)命名，大小写敏感；
+      属性名也是有作用域的，作用域就是对应的选择器；
+      自定义属性值可以被继承；
+      备用值：从var第一个逗号到最后的内容都是备用值，仅当第一个参数未定义或无效时启用；
+    好处：
+      高复用，维护性高；语义化标识；
+    JS：
+    获取某一DOM的CSS变量：
+    element.style.getPropertyValue("--color"); //和获取其他属性值是一样的方法
+    获取任意DOM节点上的CSS变量：
+    getComputedStyle(element).getPropertyValue("--color");
+    修改一个DOM节点上的CSS变量：
+    element.style.setProperty("--color", #ffffff);
+    */
+    const rootStyle = document.documentElement.style;
+    let controls = document.querySelector('.controls');
+    const updateStyle = evt => {
+      let el = evt.target;
+      if(el.tagName !== 'INPUT') return;
+      let { name, value, dataset: { sizing = '' } } = el;
+      rootStyle.setProperty(`--${name}`, `${value}${sizing}`);
+    }
+    controls.addEventListener('change', updateStyle);
+    controls.addEventListener('mousemove', updateStyle);
   </script>
 
 </body>
-</html>
+
+</html>
\ No newline at end of file