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 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 + + + + +
+
+
+
+
+
+
+ + + + + + + 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 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

+

It

+

Today

+
+
+

Give

+

All

+

You can

+
+
+

Life

+

In

+

Motion

+
+
+ + + + + + + + + + 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 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 💁

+ + +