--- tags: [javascript, JS30] title: JS30 --- ## JS30 Day 5 - Flex Panel Gallery > 用CSS與JS來製作一個點擊後會動畫展開的圖片展示效果, > 運用到了CSS的flex、transform、transition.. 這篇比較偏向css知識! 特別運動 `transitionend` event 來觸發 className ,讓動畫面更流暢 ```javascript // <div class="panels"> // <div class="panel panel1"> // ... // </div> // </div> const panels = document.querySelectorAll('.panel'); panels.forEach((panel) => panel.addEventListener('click', toggleOpen)); panels.forEach((panel) => panel.addEventListener('transitionend', toggleActive) ); ``` [demo](https://stackblitz.com/edit/vitejs-vite-ggcehh?file=src%2FApp.vue) ## JS30 Day 6 - Type Ahead > Request city 的資料後,實作前端搜尋結果 > input 所輸入的 keyword 還有在資料上 high-light 出來 step1: 拿回 ajax data,需要預備一個 render data 和 rawData (其實一個就可以了,應該要改用 complute 就可以) ```javascript fetch(url).then(function (response) { return response.json(); }).then(function (resData) { list.value = resData; rawList.value = resData; }); ``` step2: 判斷資料是否要顯示資料 ```javascript const regex = new RegExp(keyWord.value, 'gi'); const data = rawList.value .filter((item) => { return item.city.match(regex) || item.state.match(regex); }) ``` step3: 把資料作出 high-light 的效果,判斷找出來的值,直接用 html 來取代 ```javascript const cityValue = item.city.match(regex) && item.city.match(regex)[0]; const stateValue = item.state.match(regex) && item.state.match(regex)[0]; const cityHtml = item.city.replace(regex,`<span class='high-ligth'>${cityValue}</span>`); const stateHtml = item.state.replace(regex,`<span class='high-ligth'>${stateValue}</span>`); ``` [demo](https://stackblitz.com/edit/vue-u1pqzt?file=src%2FApp.vue) ## JS30 Day 7 - Array Cardio Day 2 > 1. people是否有19歲以上的人 > 2. People是否每個人都19歲以上 > 3. 在comments中找到id是823423的資料 > 4. 在comments中找到id是823423的資料索引值, 並透過索引值刪除這筆資料 > > 運用 `some` `every` `find` `findIndex` 的 function 完成此問題 ```javascript const people = [ { name: 'Wes', year: 1988 }, { name: 'Kait', year: 1986 }, { name: 'Irv', year: 1970 }, { name: 'Lux', year: 2015 }, ]; const comments = [ { text: 'Love this!', id: 523423 }, { text: 'Super good', id: 823423 }, { text: 'You are the best', id: 2039842 }, { text: 'Ramen is my fav food ever', id: 123523 }, { text: 'Nice Nice Nice!', id: 542328 }, ]; ``` 有看網上此解,因為 slice 不會改變原本的 array 有淺拷貝的功能。 > **`slice()`** 方法會回傳一個新陣列物件,為原陣列選擇之 `begin` 至 `end`(不含 `end`)部分的淺拷貝(shallow copy)。而原本的陣列將不會被修改。 ```javascript const index = comments.findIndex(comment => comment.id === 823423); const newComments = [ ...comments.slice(0, index), ...comments.slice(index + 1) ]; ``` 不過可以用解構賦值的方式達到 copy 的功能,在直接用 splice() 的方式達到目地,這樣子更直覺一點 > **`splice()`** 方法可以藉由刪除既有元素並/或加入新元素來改變一個陣列的內容。 ```javascript const index = comments.findIndex(comment => comment.id === 823423); const newArray = [...comments].splice(index, comments.length); ``` [demo](https://stackblitz.com/edit/js-wtrk2v?file=index.js)