JS Drum Kit

From 8cb74d7fee6391731a232f9ae92c6c73c8bf54dd Mon Sep 17 00:00:00 2001 From: yuri12138 Date: Thu, 11 May 2023 15:11:35 +0800 Subject: [PATCH 1/6] =?UTF-8?q?=E7=AC=AC=E4=B8=80=E5=A4=A9=E5=AE=8C?= =?UTF-8?q?=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 01 - JavaScript Drum Kit/index-yuri.html | 87 ++++++++++++++++++++++++ 1 file changed, 87 insertions(+) create mode 100644 01 - JavaScript Drum Kit/index-yuri.html diff --git a/01 - JavaScript Drum Kit/index-yuri.html b/01 - JavaScript Drum Kit/index-yuri.html new file mode 100644 index 0000000..049535f --- /dev/null +++ b/01 - JavaScript Drum Kit/index-yuri.html @@ -0,0 +1,87 @@ + + + + + + JS Drum Kit + + + + + + +

+ A + clap +

+ S + hihat +

+ D + kick +

+ F + openhat +

+ G + boom +

+ H + ride +

+ J + snare +

+ K + tom +

+ L + tink +

+ +

+ + + + + + \ No newline at end of file From b154ff989a3615b75ecb68ccf10cf25862aebfb1 Mon Sep 17 00:00:00 2001 From: yuri12138 Date: Mon, 15 May 2023 11:48:34 +0800 Subject: [PATCH 2/6] =?UTF-8?q?=E7=AC=AC=E4=BA=8C=E5=A4=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 02 - JS + CSS Clock/index-yuri.html | 110 ++++++++++++++++++++++++++++ 1 file changed, 110 insertions(+) create mode 100644 02 - JS + CSS Clock/index-yuri.html diff --git a/02 - JS + CSS Clock/index-yuri.html b/02 - JS + CSS Clock/index-yuri.html new file mode 100644 index 0000000..b865117 --- /dev/null +++ b/02 - JS + CSS Clock/index-yuri.html @@ -0,0 +1,110 @@ + + + + + JS + CSS Clock + + + + +

+ + + + + + + From b35ae98bccaed8d20983224ad5127c5ed9864ae6 Mon Sep 17 00:00:00 2001 From: yuri12138 Date: Wed, 24 May 2023 16:30:47 +0800 Subject: [PATCH 3/6] =?UTF-8?q?=E7=AC=AC=E5=9B=9B=E5=A4=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 04 - Array Cardio Day 1/index-YURI.html | 108 ++++++++++++++++++++++++ 1 file changed, 108 insertions(+) create mode 100644 04 - Array Cardio Day 1/index-YURI.html diff --git a/04 - Array Cardio Day 1/index-YURI.html b/04 - Array Cardio Day 1/index-YURI.html new file mode 100644 index 0000000..7db3bb2 --- /dev/null +++ b/04 - Array Cardio Day 1/index-YURI.html @@ -0,0 +1,108 @@ + + + + + + Array Cardio 💪 + + + +

Psst: have a look at the JavaScript Console 💁

+ + + + \ No newline at end of file From dea228bbe151cfa320ced21bbc1ed6863220fcee Mon Sep 17 00:00:00 2001 From: yuri12138 Date: Fri, 26 May 2023 16:44:10 +0800 Subject: [PATCH 4/6] =?UTF-8?q?=E7=AC=AC=E4=BA=94=E5=A4=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 05 - Flex Panel Gallery/index-YURI.html | 149 ++++++++++++++++++++++++ 1 file changed, 149 insertions(+) create mode 100644 05 - Flex Panel Gallery/index-YURI.html diff --git a/05 - Flex Panel Gallery/index-YURI.html b/05 - Flex Panel Gallery/index-YURI.html new file mode 100644 index 0000000..4ac0ba5 --- /dev/null +++ b/05 - Flex Panel Gallery/index-YURI.html @@ -0,0 +1,149 @@ + + + + + Flex Panels 💪 + + + + + + +

Hey

Let's

Dance

Give

Take

Receive

Experience

Today

Give

All

You can

Life

Motion

+ + + + + + + + + + From 7055960a0b27ccbcbef0962a3e70ad80a38181c3 Mon Sep 17 00:00:00 2001 From: yuri12138 Date: Tue, 30 May 2023 11:56:42 +0800 Subject: [PATCH 5/6] day6 --- 06 - Type Ahead/index-FINISHED.html | 4 +- 06 - Type Ahead/index-YURI.html | 54 ++++++++++++++++++++ 06 - Type Ahead/style.css | 77 ++++++++++++++++------------- 3 files changed, 99 insertions(+), 36 deletions(-) create mode 100644 06 - Type Ahead/index-YURI.html diff --git a/06 - Type Ahead/index-FINISHED.html b/06 - Type Ahead/index-FINISHED.html index 5902b43..9caf660 100644 --- a/06 - Type Ahead/index-FINISHED.html +++ b/06 - Type Ahead/index-FINISHED.html @@ -31,13 +31,13 @@ } function numberWithCommas(x) { - return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); + 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 regex = new RegExp(this.value, 'gi');//全局忽略大小写的匹配模式 const cityName = place.city.replace(regex, `${this.value}`); const stateName = place.state.replace(regex, `${this.value}`); return ` diff --git a/06 - Type Ahead/index-YURI.html b/06 - Type Ahead/index-YURI.html new file mode 100644 index 0000000..3bc3f42 --- /dev/null +++ b/06 - Type Ahead/index-YURI.html @@ -0,0 +1,54 @@ + + + + + + Type Ahead 👀 + + + + + + + + + + \ No newline at end of file diff --git a/06 - Type Ahead/style.css b/06 - Type Ahead/style.css index a2eac4d..fc5fb8b 100644 --- a/06 - Type Ahead/style.css +++ b/06 - Type Ahead/style.css @@ -1,28 +1,32 @@ html { box-sizing: border-box; - background:hsla(193, 30%, 64%, 0.78); + background: hsla(193, 30%, 64%, 0.78); font-family: 'Kaiti', 'SimHei', 'Hiragino Sans GB ', 'helvetica neue'; font-size: 20px; font-weight: 200; } - *, *:before, *:after { + + *, + *:before, + *:after { box-sizing: inherit; } + input { width: 100%; - padding:20px; - font-family:'Kaiti', 'helvetica neue'; + padding: 20px; + font-family: 'Kaiti', 'helvetica neue'; } .search-form { - max-width:700px; - margin:50px auto; + max-width: 700px; + margin: 50px auto; } input.search { margin: 0; text-align: center; - outline:0; + outline: 0; border: 10px solid #F7F7F7; width: 120%; left: -10%; @@ -41,46 +45,51 @@ position: relative; /*perspective:20px;*/ } + .suggestions li { - background:white; + background: white; list-style: none; border-bottom: 1px solid #D8D8D8; box-shadow: 0 0 10px rgba(0, 0, 0, 0.14); - margin:0; - padding:20px; - transition:background 0.2s; - display:flex; - justify-content:center; + margin: 0; + padding: 20px; + transition: background 0.2s; + display: flex; + justify-content: center; text-transform: capitalize; } .suggestions li:nth-child(even) { transform: perspective(100px) rotateX(3deg) translateY(2px) scale(1.001); - background: linear-gradient(to bottom, #ffffff 0%,#EFEFEF 100%); + background: linear-gradient(to bottom, #ffffff 0%, #EFEFEF 100%); } + .suggestions li:nth-child(odd) { transform: perspective(100px) rotateX(-3deg) translateY(3px); - background: linear-gradient(to top, #ffffff 0%,#EFEFEF 100%); + background: linear-gradient(to top, #ffffff 0%, #EFEFEF 100%); } span.population { font-size: 15px; } - -span.info { - display: flex; - flex-direction: column; -} - span.author, span.title { - font-size: .8em; -/* right: 0;*/ - } -span.title { - color: #7c8e94; - position: absolute; - right: 5px; - bottom: 1px; -} + + span.info { + display: flex; + flex-direction: column; + } + + span.author, + span.title { + font-size: .8em; + /* right: 0;*/ + } + + span.title { + color: #7c8e94; + position: absolute; + right: 5px; + bottom: 1px; + } .details { text-align: center; @@ -88,7 +97,7 @@ span.title { } .hl { - background:hsla(193, 37%, 64%, 0.65); + background: hsla(193, 37%, 64%, 0.65); } .love { @@ -96,7 +105,7 @@ span.title { } a { - color:black; - background:rgba(0,0,0,0.1); + color: black; + background: rgba(0, 0, 0, 0.1); text-decoration: none; - } + } \ No newline at end of file From b906f9dc603151fd331aec7c6ada5ad1996de851 Mon Sep 17 00:00:00 2001 From: yuri12138 Date: Wed, 31 May 2023 14:16:57 +0800 Subject: [PATCH 6/6] day 7 --- 07 - Array Cardio Day 2/index-YURI.html | 52 +++++++++++++++++++++++++ 1 file changed, 52 insertions(+) create mode 100644 07 - Array Cardio Day 2/index-YURI.html diff --git a/07 - Array Cardio Day 2/index-YURI.html b/07 - Array Cardio Day 2/index-YURI.html new file mode 100644 index 0000000..c9157d4 --- /dev/null +++ b/07 - Array Cardio Day 2/index-YURI.html @@ -0,0 +1,52 @@ + + + + + Array Cardio 💪💪 + + +

Psst: have a look at the JavaScript Console 💁

+ + +