JS-30

JS30 Day 5 - Flex Panel Gallery

用CSS與JS來製作一個點擊後會動畫展開的圖片展示效果， 運用到了CSS的flex、transform、transition.. 這篇比較偏向css知識！

特別運動 transitionend event 來觸發 className ，讓動畫面更流暢

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

JS30 Day 6 - Type Ahead

Request city 的資料後，實作前端搜尋結果 input 所輸入的 keyword 還有在資料上 high-light 出來

step1: 拿回 ajax data，需要預備一個 render data 和 rawData (其實一個就可以了，應該要改用 complute 就可以)

fetch(url).then(function (response) {
	return response.json();
}).then(function (resData) {
	list.value = resData;
	rawList.value = resData;
});

step2: 判斷資料是否要顯示資料

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 來取代

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

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 完成此問題

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）。而原本的陣列將不會被修改。

const index = comments.findIndex(comment => comment.id === 823423);
const newComments = [
      ...comments.slice(0, index),
      ...comments.slice(index + 1)
];

不過可以用解構賦值的方式達到 copy 的功能，在直接用 splice() 的方式達到目地，這樣子更直覺一點

splice() 方法可以藉由刪除既有元素並／或加入新元素來改變一個陣列的內容。

const index = comments.findIndex(comment => comment.id === 823423);
const newArray = [...comments].splice(index, comments.length);

demo

JS30 Day 8 -