diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..85cc208 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,22 @@ +{ + "workbench.colorCustomizations": { + "activityBar.activeBackground": "#1f6fd02f", + "activityBar.background": "#1f6fd02f", + "activityBar.foreground": "#e7e7e7", + "activityBar.inactiveForeground": "#e7e7e799", + "activityBarBadge.background": "#ee90bb", + "activityBarBadge.foreground": "#15202b", + "commandCenter.border": "#e7e7e799", + "sash.hoverBorder": "#1f6fd02f", + "statusBar.background": "#1857a42f", + "statusBar.foreground": "#e7e7e7", + "statusBarItem.hoverBackground": "#1f6fd02f", + "statusBarItem.remoteBackground": "#1857a42f", + "statusBarItem.remoteForeground": "#e7e7e7", + "titleBar.activeBackground": "#1857a42f", + "titleBar.activeForeground": "#e7e7e7", + "titleBar.inactiveBackground": "#1857a499", + "titleBar.inactiveForeground": "#e7e7e799" + }, + "peacock.color": "#1857a42f" +} \ No newline at end of file diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index c771dea..92bd5f1 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -1,12 +1,13 @@ + JS Drum Kit - +
@@ -58,8 +59,30 @@ - + + \ No newline at end of file diff --git a/01 - JavaScript Drum Kit/index-draft.html b/01 - JavaScript Drum Kit/index-draft.html deleted file mode 100644 index 903fcc3..0000000 --- a/01 - JavaScript Drum Kit/index-draft.html +++ /dev/null @@ -1,118 +0,0 @@ - - - - - JS Drum Kit - - - - - -
-
- A - clap -
-
- S - hihat -
-
- D - kick -
-
- F - openhat -
-
- G - boom -
-
- H - ride -
-
- J - snare -
-
- K - tom -
-
- L - tink -
-
- - - - - - - - - - - - - - - - - diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html index 2712384..df82c8d 100644 --- a/02 - JS + CSS Clock/index-START.html +++ b/02 - JS + CSS Clock/index-START.html @@ -1,34 +1,37 @@ + JS + CSS Clock + -
-
-
-
-
-
+
+
+
+
+
+
+
- + + \ No newline at end of file diff --git a/03 - CSS Variables/img.jpg b/03 - CSS Variables/img.jpg new file mode 100644 index 0000000..6b58d92 Binary files /dev/null and b/03 - CSS Variables/img.jpg differ diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index 7171607..39d6897 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -1,30 +1,37 @@ + Scoped CSS Variables and JS +

Update CSS Variables with JS

- + - + - +
+
- + - + + \ 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..d48c700 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -33,29 +33,58 @@ // Array.prototype.filter() // 1. Filter the list of inventors for those who were born in the 1500's + const arr1 = inventors.filter(item => item.year >= 1500 && item.year <1600); + console.table(arr1); + // Array.prototype.map() // 2. Give us an array of the inventors' first and last names + const arr2 = arr1.map(item => ({fist: item.first, last: item.last})); + console.table(arr2); // Array.prototype.sort() // 3. Sort the inventors by birthdate, oldest to youngest + const arr3 = arr1.sort((a, b) => b.year - a.year); + console.table(arr3); // Array.prototype.reduce() // 4. How many years did all the inventors live? + const totalYear = arr1.reduce((total, cur) => total + cur.passed - cur.year, 0); + console.log(totalYear); // 5. Sort the inventors by years lived + const arr5 = arr1.sort((a, b) => (a.passed - a.year) - (b.passed - b.year)); + console.table(arr5); // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris - + function getCateList() { + const links = document.querySelectorAll('.mw-category-group li a'); + const textList = [...links].filter(item => item.innerText.includes('de')); + + console.log(arr.length); + } // 7. sort Exercise // Sort the people alphabetically by last name + const sortName = people.sort((a, b) => { + return (a.split(', ')[1] > b.split(', ')[1]) ? 1 : -1; + }) + console.table(sortName); // 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 res = data.reduce((obj, item) => { + if (!obj[item]) { + obj[item] = 0; + } + obj[item]++; + + return obj; + }, {}); + console.table(res); diff --git a/05 - Flex Panel Gallery/images/1.jpg b/05 - Flex Panel Gallery/images/1.jpg new file mode 100644 index 0000000..e2f333d Binary files /dev/null and b/05 - Flex Panel Gallery/images/1.jpg differ diff --git a/05 - Flex Panel Gallery/images/2.jpg b/05 - Flex Panel Gallery/images/2.jpg new file mode 100644 index 0000000..1fa05a8 Binary files /dev/null and b/05 - Flex Panel Gallery/images/2.jpg differ diff --git a/05 - Flex Panel Gallery/images/3.jpg b/05 - Flex Panel Gallery/images/3.jpg new file mode 100644 index 0000000..b2ef2d9 Binary files /dev/null and b/05 - Flex Panel Gallery/images/3.jpg differ diff --git a/05 - Flex Panel Gallery/images/4.jpg b/05 - Flex Panel Gallery/images/4.jpg new file mode 100644 index 0000000..23f548a Binary files /dev/null and b/05 - Flex Panel Gallery/images/4.jpg differ diff --git a/05 - Flex Panel Gallery/images/5.jpg b/05 - Flex Panel Gallery/images/5.jpg new file mode 100644 index 0000000..7a06632 Binary files /dev/null and b/05 - Flex Panel Gallery/images/5.jpg differ diff --git a/05 - Flex Panel Gallery/index-SOYAINE.html b/05 - Flex Panel Gallery/index-SOYAINE.html index 4606f8f..843ff8e 100644 --- a/05 - Flex Panel Gallery/index-SOYAINE.html +++ b/05 - Flex Panel Gallery/index-SOYAINE.html @@ -50,11 +50,12 @@ } - .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); } + .panel1 { background-image:url(./images/1.jpg); } + .panel2 { background-image:url(./images/2.jpg); } + .panel3 { background-image:url(./images/3.jpg); } + .panel4 { background-image:url(./images/4.jpg); } + .panel5 { background-image:url(./images/5.jpg); } + .panel > * { margin:0; @@ -99,11 +100,6 @@ font-size:40px; } - .cta { - color:white; - text-decoration: none; - } - diff --git a/05 - Flex Panel Gallery/index-SOYAINE2.html b/05 - Flex Panel Gallery/index-SOYAINE2.html index 11a778f..ce78df4 100644 --- a/05 - Flex Panel Gallery/index-SOYAINE2.html +++ b/05 - Flex Panel Gallery/index-SOYAINE2.html @@ -22,9 +22,9 @@ } .panels { + display: flex; min-height:100vh; overflow: hidden; - display: flex; } .panel { @@ -44,18 +44,18 @@ font-size: 20px; background-size:cover; background-position:center; - flex: 1; - display: flex; - justify-content: center; - flex-direction: column; + + flex: 1; + display: flex; + flex-direction: column; } - .panel1 { background-image:url(https://source.unsplash.com/UdgvzNom0Xs/1500x1500); } - .panel2 { background-image:url(https://source.unsplash.com/fHXP17AxOEk/1500x1500); } - .panel3 { background-image:url(https://source.unsplash.com/3IEZsaXmzzs/1500x1500); } - .panel4 { background-image:url(https://source.unsplash.com/tNDvFkxkBHo/1500x1500); } - .panel5 { background-image:url(https://source.unsplash.com/GEJxI_QRPwM/1500x1500); } + .panel1 { background-image:url(./images/1.jpg); } + .panel2 { background-image:url(./images/2.jpg); } + .panel3 { background-image:url(./images/3.jpg); } + .panel4 { background-image:url(./images/4.jpg); } + .panel5 { background-image:url(./images/5.jpg); } .panel > * { margin: 0; @@ -98,11 +98,6 @@ transform: translateY(0); } - .cta { - color:white; - text-decoration: none; - } -
diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index 04e974b..da55711 100644 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index-START.html @@ -1,83 +1,121 @@ + Flex Panels 💪 - - + .panel p:nth-child(3) { + transform: translateY(100%); + } + .panel.open p:nth-child(1), + .panel.open p:nth-child(3) { + transform: translateY(0); + } + + +

Hey

@@ -107,13 +145,22 @@
- - - - - - - + + \ No newline at end of file diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html index 1436886..46d61fa 100644 --- a/06 - Type Ahead/index-START.html +++ b/06 - Type Ahead/index-START.html @@ -1,22 +1,48 @@ + Type Ahead 👀 +
- +
    -
  • Filter for a city
    • -
  • or a state
    • +
  • 输入词句，找一首诗
    • +
- + - - - + \ No newline at end of file diff --git a/08 - Fun with HTML5 Canvas/avtar.png b/08 - Fun with HTML5 Canvas/avtar.png new file mode 100644 index 0000000..b223a7c Binary files /dev/null and b/08 - Fun with HTML5 Canvas/avtar.png differ diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html index 37c148d..1deea17 100644 --- a/08 - Fun with HTML5 Canvas/index-START.html +++ b/08 - Fun with HTML5 Canvas/index-START.html @@ -4,16 +4,74 @@ HTML5 Canvas + - + + + + const canvas = document.getElementById('draw'); + canvas.width = window.innerWidth; + canvas.height = window.innerHeight; + + const ctx = canvas.getContext('2d'); + ctx.lineCap = 'round'; + ctx.lineJoin = 'round'; + + let isDrawing = false; + const minHue = 0; + const maxHue = 360; + const minLineWidth = 1; + const maxLineWidth = 40; + let hue = 0; + let isLineWidthIncrease = true; + let x = 0; + let y = 0; + + function onMouseMove(e) { + if (!isDrawing) return; + + ctx.beginPath(); + + // color range + hue = hue < maxHue ? ++hue : minHue; + ctx.strokeStyle = `hsl(${ hue }, 100%, 50%)`; - + + canvas.addEventListener('mousedown', e => { + isDrawing = true; + [x, y] = [e.clientX, e.clientY]; + + canvas.addEventListener('mousemove', onMouseMove); + }) + + canvas.addEventListener('mouseup', () => { + canvas.removeEventListener('mousemove', onMouseMove); + isDrawing = false; + }); + + canvas.addEventListener('mouseout', () => isDrawing = false); + diff --git a/08 - Fun with HTML5 Canvas/test-Canvas.html b/08 - Fun with HTML5 Canvas/test-Canvas.html new file mode 100644 index 0000000..2d687cd --- /dev/null +++ b/08 - Fun with HTML5 Canvas/test-Canvas.html @@ -0,0 +1,126 @@ + + + + + HTML5 Canvas + + + + img + + your browser do not support canvas. + + + + + +