Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit a7e9882

Browse files
add task24 and update the answer of task 23
1 parent 1bd46c5 commit a7e9882

File tree

2 files changed

+141
-0
lines changed

2 files changed

+141
-0
lines changed
Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Speech Detection</title>
6+
</head>
7+
<body>
8+
9+
<div class="words" contenteditable>
10+
</div>
11+
12+
<script>
13+
window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
14+
15+
const recognition = new SpeechRecognition();
16+
recognition.interimResults = true;
17+
18+
let p = document.createElement('p');
19+
const words = document.querySelector('.words');
20+
words.appendChild(p);
21+
22+
recognition.addEventListener('result', e => {
23+
const transcript = Array.from(e.results)
24+
.map(result => result[0])
25+
.map(result => result.transcript)
26+
.join('');
27+
28+
const poopScript = transcript.replace(/poop|poo|shit|dump/gi, '💩');
29+
p.textContent = poopScript;
30+
31+
if (e.results[0].isFinal) {
32+
p = document.createElement('p');
33+
words.appendChild(p);
34+
}
35+
});
36+
37+
recognition.addEventListener('end', recognition.start);
38+
39+
recognition.start();
40+
41+
</script>
42+
43+
44+
<style>
45+
html {
46+
font-size: 10px;
47+
}
48+
49+
body {
50+
background:#ffc600;
51+
font-family: 'helvetica neue';
52+
font-weight: 200;
53+
font-size: 20px;
54+
}
55+
56+
.words {
57+
max-width:500px;
58+
margin:50px auto;
59+
background:white;
60+
border-radius:5px;
61+
box-shadow:10px 10px 0 rgba(0,0,0,0.1);
62+
padding:1rem 2rem 1rem 5rem;
63+
background: -webkit-gradient(linear, 0 0, 0 100%, from(#d9eaf3), color-stop(4%, #fff)) 0 4px;
64+
background-size: 100% 3rem;
65+
position: relative;
66+
line-height:3rem;
67+
}
68+
p {
69+
margin: 0 0 3rem;
70+
}
71+
72+
.words:before {
73+
content: '';
74+
position: absolute;
75+
width: 4px;
76+
top: 0;
77+
left: 30px;
78+
bottom: 0;
79+
border: 1px solid;
80+
border-color: transparent #efe4e4;
81+
}
82+
</style>
83+
84+
</body>
85+
</html>
Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Sort Without Articles</title>
6+
</head>
7+
<body>
8+
9+
<style>
10+
body {
11+
margin: 0;
12+
font-family: sans-serif;
13+
background: url("https://source.unsplash.com/nDqA4d5NL0k/2000x2000");
14+
background-size: cover;
15+
display: flex;
16+
align-items: center;
17+
min-height: 100vh;
18+
}
19+
20+
#bands {
21+
list-style: inside square;
22+
font-size: 20px;
23+
background: white;
24+
width: 500px;
25+
margin: auto;
26+
padding: 0;
27+
box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.05);
28+
}
29+
#bands li {
30+
border-bottom: 1px solid #efefef;
31+
padding: 20px;
32+
}
33+
#bands li:last-child {
34+
border-bottom: 0;
35+
}
36+
37+
a {
38+
color: #ffc600;
39+
text-decoration: none;
40+
}
41+
42+
</style>
43+
44+
<ul id="bands"></ul>
45+
46+
<script>
47+
const bands = ['The Plot in You', 'The Devil Wears Prada', 'Pierce the Veil', 'Norma Jean', 'The Bled', 'Say Anything', 'The Midway State', 'We Came as Romans', 'Counterparts', 'Oh, Sleeper', 'A Skylit Drive', 'Anywhere But Here', 'An Old Dog'];
48+
49+
// const sortedBands = *****; write your code here
50+
51+
// 处理完后,将每一个歌名以 <li>${band}</li> 的格式加入到 document.querySelector('#bands')中即可
52+
53+
</script>
54+
55+
</body>
56+
</html>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /