Skip to content

Commit ebeabed

Browse files
soyainesoyaine
committed
complete 06 exercise
1 parent 483cad4 commit ebeabed

3 files changed

Lines changed: 181 additions & 2 deletions

File tree

‎05 - Flex Panel Gallery/README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ CSS 在这个过程中占了重点，运用 `flex` 可以使各个元素按一
5555
- `.panel`：使其中的 `<p>` 按纵向的 flex 等分排布（此处为三等分）
5656
- `p` ：借用 flex 相对于主轴及侧轴的对齐方式，使其中的文字垂直水平居中
5757

58-
容易混淆不同 CSS 属性的应用对象，只需记住针对容器内子元素的特性较少（只有 5 个），可以这样联想：针对某一个具体的小元素进行设置，可供发挥的空间比较少，而针对 Flex 容器本身，有统筹大局的责任，故特性多一些。下面简单介绍一些基本的特性（没有完全列出）。
58+
这里容易混淆的是不同 CSS 属性的应用对象，想区分很简单，只需记住针对容器内子元素的特性较少（只有 5 个），可以这样联想：针对某一个具体的小元素进行设置，可供发挥的空间比较少，而针对 Flex 容器本身，有统筹大局的责任，故特性多一些。下面简单介绍一些基本的特性（没有完全列出）。
5959

6060
#### 针对 Flex items 的特性（Children）
6161

@@ -74,7 +74,7 @@ CSS 在这个过程中占了重点，运用 `flex` 可以使各个元素按一
7474
- `align-items`：沿侧轴的对齐方式
7575
- `align-content`：子元素中文本沿侧轴的对齐方式（只有一行时无效）
7676

77-
可以在下面两个地方试一下 Flex 的各种特性：
77+
可以在下面几个地方试一下 Flex 的各种特性：
7878

7979
- [http://demo.agektmr.com/flexbox/](http://demo.agektmr.com/flexbox/)
8080
- [http://the-echoplex.net/flexyboxes/](http://the-echoplex.net/flexyboxes/)

‎06 - Type Ahead/index-SOYAINE.html‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Type Ahead 👀</title>
6+
<link rel="stylesheet" href="style.css">
7+
</head>
8+
<body>
9+
10+
<form class="search-form">
11+
<input type="text" class="search" placeholder="诗句 抑或 诗名">
12+
<ul class="suggestions">
13+
<li>输入词句，找一首诗</li>
14+
<li></li>
15+
</ul>
16+
</form>
17+
<script>
18+
// const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
19+
20+
const endpoint = 'https://raw.githubusercontent.com/soyaine/FE-Practice/gh-pages/TangPoetryCut.json';
21+
22+
23+
const poetrys = [];
24+
fetch(endpoint)
25+
.then(blob => blob.json())
26+
.then(data => poetrys.push(...data));
27+
28+
function findMatches( wordToMatch, poetrys) {
29+
return poetrys.filter(poet => {
30+
// 找出匹配的诗句
31+
const regex = new RegExp(wordToMatch, 'gi');
32+
return poet.detail_text.match(regex) || poet.title.match(regex);
33+
});
34+
}
35+
36+
// function displayMatches() {
37+
// const matches = findMatches(this.value, poetrys);
38+
// suggestions.innerHTML = "";
39+
// matches.forEach(poet => {
40+
// const li = document.createElement('li');
41+
// li.textContent = poet.detail_text;
42+
//// .replace('。', '。'+'&#8291;');
43+
// suggestions.appendChild(li);
44+
// console.log(poet.detail_text)
45+
// });
46+
// }
47+
48+
function displayMatches() {
49+
const matches = findMatches(this.value, poetrys);
50+
const html = matches.map( poet => {
51+
const text = poet.detail_text.replace(this.value, `<span class="hl">${ this.value }</span>`);
52+
return `
53+
<li>
54+
<span class="poet">${ text }</span>
55+
</li>
56+
`;
57+
}).join('');
58+
// <span class="info">
59+
// <span class="title">${ poet.title }</span>
60+
// <span class="author">${ poet.detail_author[0] }</span>
61+
// </span>
62+
console.log(html);
63+
suggestions.innerHTML = html;
64+
}
65+
66+
const search = document.querySelector('.search');
67+
const suggestions = document.querySelector('.suggestions');
68+
69+
search.addEventListener('change', displayMatches);
70+
search.addEventListener('keyup', displayMatches);
71+
72+
// console.log(cities);
73+
</script>
74+
</body>
75+
</html>
76+
77+
78+
79+
80+
81+
82+
83+

‎06 - Type Ahead/style.css‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
html {
2+
box-sizing: border-box;
3+
background:hsla(193, 30%, 64%, 0.78);
4+
font-family:'Kaiti', 'helvetica neue';
5+
font-size: 20px;
6+
font-weight: 200;
7+
}
8+
*, *:before, *:after {
9+
box-sizing: inherit;
10+
}
11+
input {
12+
width: 100%;
13+
padding:20px;
14+
font-family:'Kaiti', 'helvetica neue';
15+
}
16+
17+
.search-form {
18+
max-width:700px;
19+
margin:50px auto;
20+
}
21+
22+
input.search {
23+
margin: 0;
24+
text-align: center;
25+
outline:0;
26+
border: 10px solid #F7F7F7;
27+
width: 120%;
28+
left: -10%;
29+
position: relative;
30+
top: 10px;
31+
z-index: 2;
32+
border-radius: 5px;
33+
font-size: 40px;
34+
box-shadow: 0 0 5px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.19);
35+
}
36+
37+
38+
.suggestions {
39+
margin: 0;
40+
padding: 0;
41+
position: relative;
42+
/*perspective:20px;*/
43+
}
44+
.suggestions li {
45+
background:white;
46+
list-style: none;
47+
border-bottom: 1px solid #D8D8D8;
48+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.14);
49+
margin:0;
50+
padding:20px;
51+
transition:background 0.2s;
52+
display:flex;
53+
justify-content:center;
54+
text-transform: capitalize;
55+
}
56+
57+
.suggestions li:nth-child(even) {
58+
transform: perspective(100px) rotateX(3deg) translateY(2px) scale(1.001);
59+
background: linear-gradient(to bottom, #ffffff 0%,#EFEFEF 100%);
60+
}
61+
.suggestions li:nth-child(odd) {
62+
transform: perspective(100px) rotateX(-3deg) translateY(3px);
63+
background: linear-gradient(to top, #ffffff 0%,#EFEFEF 100%);
64+
}
65+
66+
span.population {
67+
font-size: 15px;
68+
}
69+
70+
span.info {
71+
display: flex;
72+
flex-direction: column;
73+
}
74+
span.author, span.title {
75+
font-size: .8em;
76+
/* right: 0;*/
77+
}
78+
79+
.details {
80+
text-align: center;
81+
font-size: 15px;
82+
}
83+
84+
.hl {
85+
background:hsla(193, 37%, 64%, 0.65);
86+
}
87+
88+
.love {
89+
text-align: center;
90+
}
91+
92+
a {
93+
color:black;
94+
background:rgba(0,0,0,0.1);
95+
text-decoration: none;
96+
}

0 commit comments

Comments
 (0)