Skip to content

Commit c7fcbe1

Browse files
lizwang50lizwang50
authored
Merge pull request #40 from lizwang50/Liz/day-7
感謝卡米指點 day-7 迷津
2 parents 485d6cf + 5d1b18e commit c7fcbe1

File tree

2 files changed

+136
-1
lines changed

2 files changed

+136
-1
lines changed

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -624,7 +624,7 @@ <h5 class="font-weight-bold font-italic text-white team-tag">TEAM</h5>
624624
<li>Day#06｜<span>Type Ahead</span>
625625
</li>
626626
</a>
627-
<a class="project-item" href="#">
627+
<a class="project-item" href="team/Liz/Day7 - Array Cardio Day 2/index.html">
628628
<li>Day#07｜<span>Array Cardio Day 2</span>
629629
</li>
630630
</a>

‎team/Liz/Day7 - Array Cardio Day 2/index.html‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Array Cardio Day 2</title>
8+
<link href="https://fonts.googleapis.com/css?family=Baloo+Da+2&display=swap" rel="stylesheet">
9+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
10+
<style>
11+
body {
12+
box-sizing: border-box;
13+
background: #333333;
14+
font-family: 'Baloo Da 2', cursive ,-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
15+
font-size: 20px;
16+
font-weight: 200;
17+
}
18+
</style>
19+
</head>
20+
21+
<body>
22+
<div class="container">
23+
<h1 class="text-white">Day - 7 - Array Cardio Day 2</h1>
24+
<p class="text-white"><em>Psst: have a look at the JavaScript Console</em> 💁</p>
25+
<section>
26+
<div class="text-white">
27+
<h4>Array.prototype.some()</h4>
28+
<small class="text-secondary">is at least one person 19 or older?</small>
29+
<p class="isAdult"></p>
30+
</div>
31+
<div class="text-white">
32+
<h4>Array.prototype.every()</h4>
33+
<small class="text-secondary">is everyone 19 or older?</small>
34+
<p class="allAdult"></p>
35+
</div>
36+
<div class="text-white">
37+
<h4>Array.prototype.find()</h4>
38+
<p class="text-secondary">Find is like filter, but instead returns just the one you are looking for</p>
39+
<small class="text-secondary">find the comment with the ID of 823423</small>
40+
<p class="text-white">Text : <span class="commentText""></span></p>
41+
<p class="text-white">ID : <span class="commentId"></span></p>
42+
</div>
43+
<div class="text-white">
44+
<h4>Array.prototype.findIndex()</h4>
45+
<p class="text-secondary">Find the comment with this ID</p>
46+
<small class="text-secondary">delete the comment with the ID of 823423</small>
47+
<ul class="splice"></ul>
48+
</div>
49+
50+
</section>
51+
</div>
52+
<script>
53+
// ## Array Cardio Day 2
54+
const people = [
55+
{ name: 'Wes', year: 1988 },
56+
{ name: 'Kait', year: 1986 },
57+
{ name: 'Irv', year: 1970 },
58+
{ name: 'Lux', year: 2015 }
59+
];
60+
61+
const comments = [
62+
{ text: 'Love this!', id: 523423 },
63+
{ text: 'Super good', id: 823423 },
64+
{ text: 'You are the best', id: 2039842 },
65+
{ text: 'Ramen is my fav food ever', id: 123523 },
66+
{ text: 'Nice Nice Nice!', id: 542328 }
67+
];
68+
69+
// Some and Every Checks
70+
//some()：會去比對這個陣列裡面的條件，只要有一個符合，就會回傳 True
71+
// Array.prototype.some() // is at least one person 19 or older?
72+
//好懂寫法（初學者）
73+
// const isAdult = people.some(function (person) {
74+
// //person 就是這個函式要用動態改變的東西
75+
// const currentYear = new Date().getFullYear();
76+
// //先拿到今年是幾年
77+
// if(currentYear - person.year > 18){
78+
// //如果今年減掉這個人的出生年小於 18 就回傳 True
79+
// return true
80+
// }
81+
// });
82+
//簡寫
83+
const isAdult = people.some( person => {
84+
return (new Date()).getFullYear() - person.year > 18
85+
});
86+
console.log({isAdult});
87+
document.querySelector('.isAdult').innerHTML = isAdult;
88+
89+
// Array.prototype.every() // is everyone 19 or older?
90+
const allAdult = people.every( person => (new Date()).getFullYear() - person.year > 18);
91+
document.querySelector('.allAdult').innerHTML = allAdult;
92+
console.log({allAdult});
93+
94+
// Array.prototype.find()
95+
// Find is like filter, but instead returns just the one you are looking for
96+
// find the comment with the ID of 823423
97+
// const comment = comments.find(function (comment) {
98+
// if(comment.id === 823423){
99+
// return true
100+
// }
101+
// })
102+
const comment = comments.find((comment)=> comment.id === 823423);
103+
document.querySelector('.commentText').innerHTML = comment.text;
104+
document.querySelector('.commentId').innerHTML = comment.id;
105+
console.log(comment);
106+
107+
// Array.prototype.findIndex()
108+
// Find the comment with this ID
109+
// delete the comment with the ID of 823423
110+
const index = comments.findIndex((comment)=> comment.id === 823423);
111+
comments.splice(index,1);
112+
const splice = document.querySelector('.splice');
113+
// [ 物件 ] 用 map 讓它變成 [ 我想要的字串 ]
114+
splice.innerHTML = comments.map(c=> `
115+
<li>${c.text}</li>
116+
<li>${c.id}</li>
117+
`).join("\n");
118+
//之後再用 join 把字串陣列變成一個字串
119+
//再弄到 innerHTML 上
120+
121+
// --下面是比較不好的寫法--
122+
// const spliceLen = comments.length;
123+
// for (let i = 0; i < spliceLen; i++) {
124+
// splice.innerHTML = splice.innerHTML + `
125+
// <li>${comments[i].text}</li>
126+
// <li>${comments[i].id}</li>
127+
// `
128+
// console.log(i);}
129+
// ;
130+
// console.log(splice);
131+
132+
</script>
133+
</body>
134+
135+
</html>

0 commit comments

Comments
 (0)