Update CSS Variables with JS

+ Spacing: + + + Blur: + + + Base Color + +

Date: Fri, 25 Oct 2024 16:09:40 +0800 Subject: [PATCH 04/21] add js04 --- 04 - Array Cardio Day 1/index-MINE.html | 96 +++++++++++++++++++++++++ 04 - Array Cardio Day 1/summary.md | 14 ++++ 2 files changed, 110 insertions(+) create mode 100644 04 - Array Cardio Day 1/index-MINE.html create mode 100644 04 - Array Cardio Day 1/summary.md diff --git a/04 - Array Cardio Day 1/index-MINE.html b/04 - Array Cardio Day 1/index-MINE.html new file mode 100644 index 0000000000..05046452cd --- /dev/null +++ b/04 - Array Cardio Day 1/index-MINE.html @@ -0,0 +1,96 @@ + + + + + Array Cardio 💪 + + + +

Psst: have a look at the JavaScript Console 💁

+ + + diff --git a/04 - Array Cardio Day 1/summary.md b/04 - Array Cardio Day 1/summary.md new file mode 100644 index 0000000000..1b0bf6c9aa --- /dev/null +++ b/04 - Array Cardio Day 1/summary.md @@ -0,0 +1,14 @@ +# Summary + +## JS + +- Array operation + - Array.prototype.filter() + - Array.prototype.map() + - Array.prototype.sort() + - Array.prototype.reduce() + - Array.prototype.slice() +- `console.table(obj)` to display js objects in table in console. +- String operation + - String.split() + - String.trim() From b063f0d379de90826833ea6056afeadf6de51577 Mon Sep 17 00:00:00 2001 From: Mao Ding Date: Fri, 25 Oct 2024 16:30:01 +0800 Subject: [PATCH 05/21] add js07 --- 07 - Array Cardio Day 2/index-MINE.html | 48 +++++++++++++++++++++++++ 07 - Array Cardio Day 2/summary.md | 0 2 files changed, 48 insertions(+) create mode 100644 07 - Array Cardio Day 2/index-MINE.html create mode 100644 07 - Array Cardio Day 2/summary.md diff --git a/07 - Array Cardio Day 2/index-MINE.html b/07 - Array Cardio Day 2/index-MINE.html new file mode 100644 index 0000000000..4c8345be9a --- /dev/null +++ b/07 - Array Cardio Day 2/index-MINE.html @@ -0,0 +1,48 @@ + + + + + Array Cardio 💪💪 + + + +

Psst: have a look at the JavaScript Console 💁

+ + + diff --git a/07 - Array Cardio Day 2/summary.md b/07 - Array Cardio Day 2/summary.md new file mode 100644 index 0000000000..e69de29bb2 From 2ae9ad943e7edb8413ec6d8cd18a1ac88238e06f Mon Sep 17 00:00:00 2001 From: Mao Ding Date: Fri, 25 Oct 2024 16:36:30 +0800 Subject: [PATCH 06/21] add summary of js07 --- 07 - Array Cardio Day 2/index-MINE.html | 2 +- 07 - Array Cardio Day 2/summary.md | 9 +++++++++ 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/07 - Array Cardio Day 2/index-MINE.html b/07 - Array Cardio Day 2/index-MINE.html index 4c8345be9a..9c6cdb6b7f 100644 --- a/07 - Array Cardio Day 2/index-MINE.html +++ b/07 - Array Cardio Day 2/index-MINE.html @@ -45,4 +45,4 @@ - + \ No newline at end of file diff --git a/07 - Array Cardio Day 2/summary.md b/07 - Array Cardio Day 2/summary.md index e69de29bb2..d782e178bb 100644 --- a/07 - Array Cardio Day 2/summary.md +++ b/07 - Array Cardio Day 2/summary.md @@ -0,0 +1,9 @@ +# Summary + +## JS + +- Array.prototype.some(function()) +- Array.prototype.every(function()) +- Array.prototype.find(function()) +- Array.prototype.findIndex(function()) +- Array.prototype.splice() \ No newline at end of file From a837ed35b9100e7a7a3d5e94cf9af7d7f48f6dd2 Mon Sep 17 00:00:00 2001 From: Mao Ding Date: Mon, 28 Oct 2024 19:45:51 +0800 Subject: [PATCH 07/21] add js05 --- 05 - Flex Panel Gallery/index-FINISHED.html | 12 +- 05 - Flex Panel Gallery/index-MINE.html | 156 ++++++++++++++++++++ 05 - Flex Panel Gallery/summary.md | 28 ++++ 3 files changed, 194 insertions(+), 2 deletions(-) create mode 100644 05 - Flex Panel Gallery/index-MINE.html create mode 100644 05 - Flex Panel Gallery/summary.md diff --git a/05 - Flex Panel Gallery/index-FINISHED.html b/05 - Flex Panel Gallery/index-FINISHED.html index 85c33c1ee2..ffa36320cd 100644 --- a/05 - Flex Panel Gallery/index-FINISHED.html +++ b/05 - Flex Panel Gallery/index-FINISHED.html @@ -51,11 +51,19 @@ flex-direction: column; } - .panel1 { background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); } + /* .panel1 { background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); } .panel2 { background-image:url(https://source.unsplash.com/rFKUFzjPYiQ/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); } + .panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); } */ + + .panel1 { background-image: url(https://images.unsplash.com/photo-1729698331344-ca8ad1dff0df?q=80&w=2574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D); } + .panel2 { background-image: url(https://images.unsplash.com/photo-1729729552784-789caecb8b2c?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHw1fHx8ZW58MHx8fHx8); } + .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://images.unsplash.com/photo-1729731321992-5fdb6568816a?q=80&w=2574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D); } + .panel5 { background-image: url(https://images.unsplash.com/photo-1727461895261-9a006b52f342?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D); } + + /* Flex Items */ .panel > * { diff --git a/05 - Flex Panel Gallery/index-MINE.html b/05 - Flex Panel Gallery/index-MINE.html new file mode 100644 index 0000000000..c9c01b01a0 --- /dev/null +++ b/05 - Flex Panel Gallery/index-MINE.html @@ -0,0 +1,156 @@ + + + + + Flex Panels 💪 + + + + + + + +

Hey

Let's

Dance

Give

Take

Receive

Experience

Today

Give

All

You can

Life

Motion

+ + + + + + + diff --git a/05 - Flex Panel Gallery/summary.md b/05 - Flex Panel Gallery/summary.md new file mode 100644 index 0000000000..e2d08e1948 --- /dev/null +++ b/05 - Flex Panel Gallery/summary.md @@ -0,0 +1,28 @@ +# Summary + +## CSS + +- Define `border` in the coding process to help coding. +- `box-shadow: inset 0 0 0 5px rgba(255,255,255,0.1);` +- `p` tag as other tags has default margin. +- `overflow: hidden;` hides items overflow current content range. +- Flex + - use `justify-content: center;` and `align-items: center;` to place child items in the vertical and horizonal center. + - `flex: 1;` is shorthand for `flex-grow:1; flex-shrink: 1; flex-basis: 0;` + - Use `flex: 1;` and `flex: 5;` for different items to control the relative size of flex items. +- Text + - `text-align: center;` + - `text-transform: uppercase;` + - `text-shadow: 0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45);` + - `display: flex; justify-content: center; align-items: center;` can place the text in the vertical and horizontal level center. +- `transform: translateY(100%)` +- Pseudo-class selector + - `:nth-child(1)` + - `:first-child` + - `:last-child` +- Media query + - `@media only screen and (max-width: 600px)` + + + + From c7f43ed28fa3d0301d39f0672cef66683e3a20b5 Mon Sep 17 00:00:00 2001 From: Mao Ding Date: Tue, 29 Oct 2024 22:11:41 +0800 Subject: [PATCH 08/21] add js06 --- 06 - Type Ahead/index-MINE.html | 53 +++++++++++++++++++++++++++++++++ 06 - Type Ahead/summary.md | 35 ++++++++++++++++++++++ 2 files changed, 88 insertions(+) create mode 100644 06 - Type Ahead/index-MINE.html create mode 100644 06 - Type Ahead/summary.md diff --git a/06 - Type Ahead/index-MINE.html b/06 - Type Ahead/index-MINE.html new file mode 100644 index 0000000000..7cf58dd9b2 --- /dev/null +++ b/06 - Type Ahead/index-MINE.html @@ -0,0 +1,53 @@ + + + + + Type Ahead 👀 + + + + + + + + + + diff --git a/06 - Type Ahead/summary.md b/06 - Type Ahead/summary.md new file mode 100644 index 0000000000..75fdf3a749 --- /dev/null +++ b/06 - Type Ahead/summary.md @@ -0,0 +1,35 @@ +# Summary + +## JS +- Regex + ```js + const wordToMarch = 'word'; + const regex = new RegExp(wordToMatch, 'gi'); + const content = 'long content word'; + const matched = content.match(regex); + + const changedContent = content.replace(regex, (match) => `${match}`); + + const numStr = '1234567'; + const numArr = numStr.match(/.{1,3}/g); + ``` + - 'i' in RegExp to ignore case. + - 'g' in RegExp to find all matches. + - '.' in RegExp to represent any char. + - '{1,3}' in RegExp to combine '.' means matching 1 to 3 times. + +- `...` unpack operation + ```js + const array1 = [1, 2, 3]; + const array2 = []; + array2.push(...array1); + ``` + +## CSS +- `transform: perspective(100px) rotateX(3deg);` to simulate 3D perspective. +- `background: linear-gradient(to bottom, #ffffff 0%,#EFEFEF 100%);` changes background color linearly. +- `li { list-style: none; }` +- `z-index: 2` to cover component with z-index value less than 2. +- `box-sizing: border-box;` makes hight, width contain padding and border. +- `text-transform: capitalize;` +- `display: flex; justify-content: space-between;` \ No newline at end of file From b0006a43c452f7e6883445c03e3876df7d795a90 Mon Sep 17 00:00:00 2001 From: Mao Ding Date: Wed, 30 Oct 2024 22:03:58 +0800 Subject: [PATCH 09/21] add js08 --- 08 - Fun with HTML5 Canvas/index-MINE.html | 74 ++++++++++++++++++++++ 1 file changed, 74 insertions(+) create mode 100644 08 - Fun with HTML5 Canvas/index-MINE.html diff --git a/08 - Fun with HTML5 Canvas/index-MINE.html b/08 - Fun with HTML5 Canvas/index-MINE.html new file mode 100644 index 0000000000..a58b7756f5 --- /dev/null +++ b/08 - Fun with HTML5 Canvas/index-MINE.html @@ -0,0 +1,74 @@ + + + + + HTML5 Canvas + + + +

+ + + + + + From 8785fb41fdad9176ef6b4afc2bf1dd79eb32dbce Mon Sep 17 00:00:00 2001 From: Mao Ding Date: Fri, 1 Nov 2024 16:22:29 +0800 Subject: [PATCH 10/21] update js08 code --- 08 - Fun with HTML5 Canvas/index-MINE.html | 17 ++++------------- 1 file changed, 4 insertions(+), 13 deletions(-) diff --git a/08 - Fun with HTML5 Canvas/index-MINE.html b/08 - Fun with HTML5 Canvas/index-MINE.html index a58b7756f5..47d172b967 100644 --- a/08 - Fun with HTML5 Canvas/index-MINE.html +++ b/08 - Fun with HTML5 Canvas/index-MINE.html @@ -28,6 +28,7 @@ ctx.lineTo(event.clientX, event.clientY); ctx.stroke(); ctx.lineCap = 'round'; + ctx.lineJoin = 'round'; ctx.lineWidth = brushSize; ctx.strokeStyle = `hsl(${hueValue}, 100%, 50%)`; @@ -47,21 +48,11 @@ [currentX, currentY] = [event.clientX, event.clientY]; } - document.addEventListener('mousedown', (event) => { - isDrawing = true; - // [currentX, currentY] = [event.clientX, event.clientY]; - console.log('mousedown'); - }); - + document.addEventListener('mousedown', (event) => isDrawing = true); document.addEventListener('mousemove', draw); + document.addEventListener('mouseup', () => isDrawing = false); + document.addEventListener('mouseout', () => isDrawing = false); - document.addEventListener('mouseup', () => { - isDrawing = false; - }); - - document.addEventListener('mouseout', () => { - isDrawing = false; - }); + + + diff --git a/13 - Slide in on Scroll/summary.md b/13 - Slide in on Scroll/summary.md new file mode 100644 index 0000000000..2013a0b8b5 --- /dev/null +++ b/13 - Slide in on Scroll/summary.md @@ -0,0 +1,28 @@ +# Summary + +## JS +- Get the current bottom location in Y axis + ```js + window.scrollY + window.innerHeight; + ``` +- Get the height of a DOM + ```js + image.height + ``` + +## CSS +- Simulate slide effect of images in the article: combine transform and float + ```css + .align-left { + float: left; + } + + .slide-in { + opacity: 0; + transition: all .5s; + } + + .align-left.slide-in { + transform: translateX(-30%) scale(0.95); + } + ``` \ No newline at end of file From 930f8458757071d58929c83526c91dbb38988dad Mon Sep 17 00:00:00 2001 From: Mao Ding Date: Fri, 8 Nov 2024 10:16:45 +0800 Subject: [PATCH 16/21] add js14 --- .../index-MINE.html | 75 +++++++++++++++++++ .../summary.md | 36 +++++++++ 2 files changed, 111 insertions(+) create mode 100644 14 - JavaScript References VS Copying/index-MINE.html create mode 100644 14 - JavaScript References VS Copying/summary.md diff --git a/14 - JavaScript References VS Copying/index-MINE.html b/14 - JavaScript References VS Copying/index-MINE.html new file mode 100644 index 0000000000..763e59dc7b --- /dev/null +++ b/14 - JavaScript References VS Copying/index-MINE.html @@ -0,0 +1,75 @@ + + + + + JS Reference VS Copy + + + + + + + + diff --git a/14 - JavaScript References VS Copying/summary.md b/14 - JavaScript References VS Copying/summary.md new file mode 100644 index 0000000000..620792d287 --- /dev/null +++ b/14 - JavaScript References VS Copying/summary.md @@ -0,0 +1,36 @@ +# Summary + +## JS +- Shadow copy of array + ```js + const items = ['Wes', 'Sarah', 'Ryan', 'Poppy']; + const items2 = items.slice() + const items3 = [].concat(items); + const items4 = Array.from(items); + ``` +- Shadow copy of object + ```js + const obj = { + name: 'wes', + age: 100, + social: { + twitter: '@wesbos', + facebook: 'wesbos.developer' + } + }; + + const obj2 = Object.assign({}, obj); + ``` +- Deep copy of object + ```js + const obj = { + name: 'wes', + age: 100, + social: { + twitter: '@wesbos', + facebook: 'wesbos.developer' + } + }; + + const obj2 = JSON.parse(JSON.stringify(obj)); + ``` \ No newline at end of file From c65b8318a9577a1de7f4d113b43f5d3f996b2030 Mon Sep 17 00:00:00 2001 From: Mao Ding Date: Sat, 16 Nov 2024 11:13:55 +0800 Subject: [PATCH 17/21] add js16 --- 16 - Mouse Move Shadow/index-MINE.html | 66 ++++++++++++++++++++++++++ 16 - Mouse Move Shadow/summary.md | 27 +++++++++++ 2 files changed, 93 insertions(+) create mode 100644 16 - Mouse Move Shadow/index-MINE.html create mode 100644 16 - Mouse Move Shadow/summary.md diff --git a/16 - Mouse Move Shadow/index-MINE.html b/16 - Mouse Move Shadow/index-MINE.html new file mode 100644 index 0000000000..eaac08db02 --- /dev/null +++ b/16 - Mouse Move Shadow/index-MINE.html @@ -0,0 +1,66 @@ + + + + + Mouse Shadow + + + + +

🔥WOAH!

+ + + + + + diff --git a/16 - Mouse Move Shadow/summary.md b/16 - Mouse Move Shadow/summary.md new file mode 100644 index 0000000000..2fd78594ac --- /dev/null +++ b/16 - Mouse Move Shadow/summary.md @@ -0,0 +1,27 @@ +# Summary + +## JS +- some location properties + ```js + // Get the position of the event + let { offsetX: x, offsetY: y } = event; + + // Get the size of DOM + const { offsetWidth: width, offsetHeight: height } = aDom; + + // Get the position of a DOM + aDom.offsetLeft; + aDom.offsetTop; + ``` + +## CSS +- Set the text shadow + ```css + { + text-shadow: horizontal-offset vertical-offset blur-radius shadow color + } + ``` + - horizontal-offset: 10px + - vertical-offset: 10px + - blur-radius: 1px + - shadow-color: rgba(0,0,0,1) \ No newline at end of file From 2cf5024423c33048f80fdd7dbaea54103d463e85 Mon Sep 17 00:00:00 2001 From: Mao Ding Date: Thu, 28 Nov 2024 14:25:27 +0800 Subject: [PATCH 18/21] add js11 --- 11 - Custom Video Player/index.html | 3 +- 11 - Custom Video Player/scripts-MINE.js | 49 ++++++++++++++++++++++++ 11 - Custom Video Player/style.css | 4 ++ 11 - Custom Video Player/summary.md | 29 ++++++++++++++ 4 files changed, 84 insertions(+), 1 deletion(-) create mode 100644 11 - Custom Video Player/scripts-MINE.js create mode 100644 11 - Custom Video Player/summary.md diff --git a/11 - Custom Video Player/index.html b/11 - Custom Video Player/index.html index d824b1e5d3..753991cea3 100644 --- a/11 - Custom Video Player/index.html +++ b/11 - Custom Video Player/index.html @@ -23,6 +23,7 @@ - + + diff --git a/11 - Custom Video Player/scripts-MINE.js b/11 - Custom Video Player/scripts-MINE.js new file mode 100644 index 0000000000..c74680a0c3 --- /dev/null +++ b/11 - Custom Video Player/scripts-MINE.js @@ -0,0 +1,49 @@ +const video = document.querySelector('.player__video'); +const progressBar = document.querySelector('.progress'); +const progressBarFilled = progressBar.querySelector('.progress__filled'); +const toggleButton = document.querySelector('.toggle'); +const sliders = document.querySelectorAll('.player__slider'); +const skipButtons = document.querySelectorAll('[data-skip]'); + +// Toggle button +function togglePlay() { + const method = video.paused ? 'play' : 'pause'; + video[method](); // JS dynamic method call + + toggleButton.textContent = video.paused ? '►' : '❚❚'; +} + +video.addEventListener('click', togglePlay); +toggleButton.addEventListener('click', togglePlay); + +// Progress +function updateProgress(event) { + const percentage = event.offsetX / progressBar.offsetWidth; + video.currentTime = percentage * video.duration; +} + +let progressbarMousedown = false; + +progressBar.addEventListener('click', updateProgress); +progressBar.addEventListener('mousedown', () => progressbarMousedown = true); +progressBar.addEventListener('mousemove', (event) => progressbarMousedown && updateProgress(event)); +progressBar.addEventListener('mouseup', () => progressbarMousedown = false); + +video.addEventListener('timeupdate', () => { + const percentage = video.currentTime / video.duration; + progressBarFilled.style.flexBasis = `${percentage * 100}%`; +}); + +// Sliders +sliders.forEach((slider) => { + slider.addEventListener('input', () => { + video[slider.name] = slider.value; + }); +}); + +// Skip buttons +skipButtons.forEach((button) => { + button.addEventListener('click', () => { + video.currentTime += parseFloat(button.dataset.skip); + }) +}); diff --git a/11 - Custom Video Player/style.css b/11 - Custom Video Player/style.css index f2420cdf32..4b97dac18f 100644 --- a/11 - Custom Video Player/style.css +++ b/11 - Custom Video Player/style.css @@ -82,6 +82,10 @@ body { height: 15px; } +.player .progress { + height: 15px; +} + .player__controls > * { flex: 1; } diff --git a/11 - Custom Video Player/summary.md b/11 - Custom Video Player/summary.md new file mode 100644 index 0000000000..afaba8f2c5 --- /dev/null +++ b/11 - Custom Video Player/summary.md @@ -0,0 +1,29 @@ +# Summary +## JS +- JS dynamic method call + ```js + const method = video.paused ? 'play' : 'pause'; + video[method](); // JS dynamic method call + ``` +- Events relative to mouse: *click*, *mousedown*, *mousemove*, *mouseup* +- Events relative to video player: *play*, *pause* +- Properties relative to video player: + - `video.paused` + - `video.currentTime` +- Get the dataset value defined in attributes + ```js + button.dataset.skip + ``` + + ```html + + ``` + +## CSS +- Flex + ```css + { + flex-basis: 50%; /* Set the initial relative content length based on the parent element */ + } + ``` +- \ No newline at end of file From 5c16eef824957302852d10360a9cb0aedab58264 Mon Sep 17 00:00:00 2001 From: Mao Ding Date: Mon, 9 Dec 2024 15:39:03 +0800 Subject: [PATCH 19/21] add js17 --- 17 - Sort Without Articles/index-MINE.html | 77 ++++++++++++++++++++++ 17 - Sort Without Articles/summary.md | 26 ++++++++ 2 files changed, 103 insertions(+) create mode 100644 17 - Sort Without Articles/index-MINE.html create mode 100644 17 - Sort Without Articles/summary.md diff --git a/17 - Sort Without Articles/index-MINE.html b/17 - Sort Without Articles/index-MINE.html new file mode 100644 index 0000000000..3d746bf853 --- /dev/null +++ b/17 - Sort Without Articles/index-MINE.html @@ -0,0 +1,77 @@ + + + + + Sort Without Articles + + + + + + +

+ + + + + diff --git a/17 - Sort Without Articles/summary.md b/17 - Sort Without Articles/summary.md new file mode 100644 index 0000000000..35ade74579 --- /dev/null +++ b/17 - Sort Without Articles/summary.md @@ -0,0 +1,26 @@ +# Summary +## JS +- Regular expression to replace + ```js + bandName.replace(/^(a |the |an )/i, '') + ``` + +## CSS +- Put the item in the middle in the horizon. + ```css + { + width: 500px; + margin: auto; + } + ``` +- Set the different behavior for the last child of DOM + ```css + #bands li { + border-bottom: 1px solid #efefef; + padding: 20px; + } + + #bands li:last-child { + border-bottom: 0; + } + ``` \ No newline at end of file From ec46935bd214b790e8cb03e0827288058f6aee3f Mon Sep 17 00:00:00 2001 From: Mao Ding Date: Mon, 9 Dec 2024 16:19:57 +0800 Subject: [PATCH 20/21] add js18 --- .../index-MINE.html | 197 ++++++++++++++++++ 18 - Adding Up Times with Reduce/summary.md | 9 + 2 files changed, 206 insertions(+) create mode 100644 18 - Adding Up Times with Reduce/index-MINE.html create mode 100644 18 - Adding Up Times with Reduce/summary.md diff --git a/18 - Adding Up Times with Reduce/index-MINE.html b/18 - Adding Up Times with Reduce/index-MINE.html new file mode 100644 index 0000000000..97d54b937b --- /dev/null +++ b/18 - Adding Up Times with Reduce/index-MINE.html @@ -0,0 +1,197 @@ + + + + + Videos + + + +

+ Video 1 +
+ Video 2 +
+ Video 3 +
+ Video 4 +
+ Video 5 +
+ Video 6 +
+ Video 7 +
+ Video 8 +
+ Video 9 +
+ Video 10 +
+ Video 11 +
+ Video 12 +
+ Video 13 +
+ Video 14 +
+ Video 15 +
+ Video 16 +
+ Video 17 +
+ Video 18 +
+ Video 19 +
+ Video 20 +
+ Video 21 +
+ Video 22 +
+ Video 23 +
+ Video 24 +
+ Video 25 +
+ Video 26 +
+ Video 27 +
+ Video 28 +
+ Video 29 +
+ Video 30 +
+ Video 31 +
+ Video 32 +
+ Video 33 +
+ Video 34 +
+ Video 35 +
+ Video 36 +
+ Video 37 +
+ Video 38 +
+ Video 39 +
+ Video 40 +
+ Video 41 +
+ Video 42 +
+ Video 43 +
+ Video 44 +
+ Video 45 +
+ Video 46 +
+ Video 47 +
+ Video 48 +
+ Video 49 +
+ Video 50 +
+ Video 51 +
+ Video 52 +
+ Video 53 +
+ Video 54 +
+ Video 55 +
+ Video 56 +
+ Video 57 +
+ Video 58 +

+ + + diff --git a/18 - Adding Up Times with Reduce/summary.md b/18 - Adding Up Times with Reduce/summary.md new file mode 100644 index 0000000000..59e840437b --- /dev/null +++ b/18 - Adding Up Times with Reduce/summary.md @@ -0,0 +1,9 @@ +# Summary +## JS +- `reduce()` for array + ```js + array.reduce((accumulator, current) => { + // do something with accumulator and current + return accumulator; + }, initialAccumulator); + ``` \ No newline at end of file From 6686b5c612504ba97467ff51cd56208aeaebfbb6 Mon Sep 17 00:00:00 2001 From: Mao Ding Date: Tue, 10 Dec 2024 19:25:04 +0800 Subject: [PATCH 21/21] js15 --- 15 - LocalStorage/index-MINE.html | 82 +++++++++++++++++++++++++++++++ 15 - LocalStorage/summary.md | 29 +++++++++++ 2 files changed, 111 insertions(+) create mode 100644 15 - LocalStorage/index-MINE.html create mode 100644 15 - LocalStorage/summary.md diff --git a/15 - LocalStorage/index-MINE.html b/15 - LocalStorage/index-MINE.html new file mode 100644 index 0000000000..dd5363dd11 --- /dev/null +++ b/15 - LocalStorage/index-MINE.html @@ -0,0 +1,82 @@ + + + + + LocalStorage + + + + + + + + +

LOCAL TAPAS

Loading Tapas...

+ +

+ + + + + + + diff --git a/15 - LocalStorage/summary.md b/15 - LocalStorage/summary.md new file mode 100644 index 0000000000..52d7396ba6 --- /dev/null +++ b/15 - LocalStorage/summary.md @@ -0,0 +1,29 @@ +# Summary + +## CSS +- The basic idea to cutomize the basic tools offered by language like checkbox is to implement by yourself. +- Use `flex` to make content center. + ```css + { + display: flex; + justify-content: center; // horizontally + align-items: center; // vertically + } + ``` +- Use `fill` to change the shape or font color. + ```css + { + fill: white; + } + ``` +- Use `border-radius: 50%` to change the box into circle. +- Use `text-align: center` to centerlize the text. +- Use `:before` to add the virtual first child for the target object. + +## JS +- **Event delegation** is listening the parent node instead of listening every children nodes. +- **Local storage** is key-value data structure holded by the browser. Key and value need to be string type. + ```js + localStorage.getItem('keyName'); + localStorage.setItem('keyName', JSON.stringify(value)); + ``` \ No newline at end of file