diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..98993d7 Binary files /dev/null and b/.DS_Store differ diff --git a/01 - JavaScript Drum Kit/background.jpg b/01 - JavaScript Drum Kit/background.jpg new file mode 100644 index 0000000..671339c Binary files /dev/null and b/01 - JavaScript Drum Kit/background.jpg differ diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index c771dea..1946ed9 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -1,10 +1,12 @@ + JS Drum Kit + @@ -58,8 +60,26 @@ - + + \ No newline at end of file diff --git a/01 - JavaScript Drum Kit/style.css b/01 - JavaScript Drum Kit/style.css index 3e0a320..efb5956 100644 --- a/01 - JavaScript Drum Kit/style.css +++ b/01 - JavaScript Drum Kit/style.css @@ -1,39 +1,41 @@ html { font-size: 10px; - background:url(http://i.imgur.com/b9r5sEL.jpg) bottom center; + background: url(background.jpg) bottom center; background-size: cover; } -body,html { + +body, +html { margin: 0; padding: 0; font-family: sans-serif; } .keys { - display:flex; - flex:1; - min-height:100vh; + display: flex; + flex: 1; + min-height: 100vh; align-items: center; justify-content: center; } .key { - border:4px solid black; - border-radius:5px; - margin:1rem; + border: 4px solid black; + border-radius: 5px; + margin: 1rem; font-size: 1.5rem; - padding:1rem .5rem; - transition:all .07s; - width:100px; + padding: 1rem .5rem; + transition: all .07s; + width: 100px; text-align: center; - color:white; - background:rgba(0,0,0,0.4); - text-shadow:0 0 5px black; + color: white; + background: rgba(0, 0, 0, 0.4); + text-shadow: 0 0 5px black; } .playing { - transform:scale(1.1); - border-color:#ffc600; + transform: scale(1.1); + border-color: #ffc600; box-shadow: 0 0 10px #ffc600; } @@ -46,5 +48,5 @@ kbd { font-size: 1.2rem; text-transform: uppercase; letter-spacing: 1px; - color:#ffc600; -} + color: #ffc600; +} \ No newline at end of file diff --git a/02 - JS + CSS Clock/index-FINISHED.html b/02 - JS + CSS Clock/index-FINISHED.html index db653a5..161b6c7 100644 --- a/02 - JS + CSS Clock/index-FINISHED.html +++ b/02 - JS + CSS Clock/index-FINISHED.html @@ -1,34 +1,36 @@ + JS + CSS Clock + -
-
-
-
-
-
+
+
+
+
+
+
+ - + - + + \ 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..523e069 100644 --- a/02 - JS + CSS Clock/index-START.html +++ b/02 - JS + CSS Clock/index-START.html @@ -1,34 +1,22 @@ + JS + CSS Clock - - - - -
-
-
-
-
-
-
- - + + + + + +
+
+
+
+
+
+
+ - + + \ No newline at end of file diff --git a/03 - CSS Variables/background.jpeg b/03 - CSS Variables/background.jpeg new file mode 100644 index 0000000..011ebd7 Binary files /dev/null and b/03 - CSS Variables/background.jpeg differ diff --git a/03 - CSS Variables/index-FINISHED.html b/03 - CSS Variables/index-FINISHED.html index c3217fc..52a61d5 100644 --- a/03 - CSS Variables/index-FINISHED.html +++ b/03 - CSS Variables/index-FINISHED.html @@ -1,9 +1,11 @@ + Scoped CSS Variables and JS +

Update CSS Variables with JS

@@ -18,7 +20,7 @@

Update CSS Variables with JS

- + @@ -76,4 +78,5 @@

Update CSS Variables with JS

- + + \ No newline at end of file diff --git a/03 - CSS Variables/index-SOYAINE.html b/03 - CSS Variables/index-SOYAINE.html index 4160169..3ebf10f 100644 --- a/03 - CSS Variables/index-SOYAINE.html +++ b/03 - CSS Variables/index-SOYAINE.html @@ -1,9 +1,11 @@ + Scoped CSS Variables and JS +

Update CSS Variables with JS

@@ -16,9 +18,9 @@

Update CSS Variables with JS

-
- - +
+ + img { padding: ; filter: blur(); @@ -27,31 +29,30 @@

Update CSS Variables with JS

 - + - + + \ No newline at end of file diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index 7171607..2663b5d 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -1,9 +1,11 @@ + Scoped CSS Variables and JS +

Update CSS Variables with JS

@@ -12,19 +14,45 @@

Update CSS Variables with JS

- + - + + img { + padding: ; + filter: blur(); + background: ; + } + +
+ - + + \ No newline at end of file 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); diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index 04e974b..f10670f 100644 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index-START.html @@ -1,80 +1,106 @@ + Flex Panels 💪 + @@ -116,4 +142,5 @@ - + + \ No newline at end of file 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 @@
  • - - - - - - - - + }).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); + + + \ No newline at end of file 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 @@

    ×点×我×呀×

    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);