Skip to content

Commit 8c3ed8a

Browse files
FinnFinn
Finn
authored and
Finn
committed
accordion collapse
1 parent 64d5827 commit 8c3ed8a

File tree

7 files changed

+296
-1
lines changed

7 files changed

+296
-1
lines changed

‎workout/day1-button-ripple-effect/script.js

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,19 @@
11
const rippleButtons = document.querySelectorAll('.ripple');
22

33
function rippleClick(e){
4-
console.log(123)
4+
5+
// e is an event object
6+
// clientx provides the horizontal coordinate within the viewport (currently being shown)
7+
// at which the event occur( as opposed to the coordinate within the page)
58
const clientX = e.clientX
69
const clientY = e.clientY
710

11+
// event.target provides the reference to the object onto which the event was dispatched 触发事件
12+
// it is different from event.currentTarget when the handler is called during the bubbling or capturing phase of the event
13+
14+
// five values that position can take : static, absolute, relative, fixed, sticky.
15+
// offsetTop is the distance between the current node and the closest offset parent( whose position is non-static )
16+
// if there is on offset parent, return body
817
const target = e.target
918
const offsetLeft = target.offsetLeft
1019
const offsetTop = target.offsetTop

‎workout/day3-hidden-search/index.html

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
7+
<link rel="stylesheet" href="style.css" />
8+
<title>Hidden Search</title>
9+
</head>
10+
<body>
11+
<div class="search">
12+
<input type="text" class="input" placeholder="Search...">
13+
<button class="btn">
14+
<i class="fas fa-search"></i>
15+
</button>
16+
</div>
17+
<script src="script.js"></script>
18+
</body>
19+
</html>

‎workout/day3-hidden-search/script.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
const searchNode = document.querySelector('.search');
2+
const input = document.querySelector('.input')
3+
4+
searchNode.addEventListener('click',()=> handleClick());
5+
6+
function handleClick(){
7+
searchNode.classList.toggle('active')
8+
input.focus()
9+
}

‎workout/day3-hidden-search/style.css

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
2+
3+
* {
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
background-image: linear-gradient(90deg, #7d5fff, #7158e2);
9+
font-family: 'Roboto', sans-serif;
10+
display: flex;
11+
align-items: center;
12+
justify-content: center;
13+
height: 100vh;
14+
overflow: hidden;
15+
margin: 0;
16+
}
17+
18+
.search {
19+
position: relative;
20+
height: 50px;
21+
}
22+
23+
.search .input {
24+
background-color: #fff;
25+
border: 0;
26+
font-size: 18px;
27+
padding: 15px;
28+
height: 50px;
29+
width: 0px;
30+
transition: width 0.3s ease;
31+
}
32+
33+
.btn {
34+
background-color: #fff;
35+
border: 0;
36+
cursor: pointer;
37+
font-size: 24px;
38+
position: absolute;
39+
top: 0;
40+
left: 0;
41+
height: 50px;
42+
width: 50px;
43+
transition: transform 0.3s ease;
44+
}
45+
46+
.btn:focus,
47+
.input:focus {
48+
outline: none;
49+
}
50+
51+
.search.active .input {
52+
width: 200px;
53+
}
54+
55+
.search.active .btn {
56+
transform: translateX(198px);
57+
}

‎workout/day4-faq-collapse/index.html

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
7+
<link rel="stylesheet" href="style.css" />
8+
<title>FAQ</title>
9+
</head>
10+
<body>
11+
<h1>Frequently Asked Questions</h1>
12+
<div class="faq-container">
13+
<div class="faq active">
14+
<h3 class="faq-title">
15+
Why shouldn't we trust atoms?
16+
</h3>
17+
18+
<p class="faq-text">
19+
They make up everything
20+
</p>
21+
22+
<button class="faq-toggle">
23+
<i class="fas fa-chevron-down"></i>
24+
</button>
25+
</div>
26+
27+
<div class="faq">
28+
<h3 class="faq-title">
29+
What do you call someone with no body and no nose?
30+
</h3>
31+
<p class="faq-text">
32+
Nobody knows.
33+
</p>
34+
<button class="faq-toggle">
35+
<i class="fas fa-chevron-down"></i>
36+
</button>
37+
</div>
38+
39+
<div class="faq">
40+
<h3 class="faq-title">
41+
What's the object-oriented way to become wealthy?
42+
</h3>
43+
<p class="faq-text">
44+
Inheritance.
45+
</p>
46+
<button class="faq-toggle">
47+
<i class="fas fa-chevron-down"></i>
48+
</button>
49+
</div>
50+
51+
<div class="faq">
52+
<h3 class="faq-title">
53+
How many tickles does it take to tickle an octopus?
54+
</h3>
55+
<p class="faq-text">
56+
Ten-tickles!
57+
</p>
58+
<button class="faq-toggle">
59+
<i class="fas fa-chevron-down"></i>
60+
</button>
61+
</div>
62+
63+
<div class="faq">
64+
<h3 class="faq-title">
65+
What is: 1 + 1?
66+
</h3>
67+
<p class="faq-text">
68+
Depends on who are you asking.
69+
</p>
70+
<button class="faq-toggle">
71+
<i class="fas fa-chevron-down"></i>
72+
</button>
73+
</div>
74+
</div>
75+
<script src="script.js"></script>
76+
</body>
77+
</html>

‎workout/day4-faq-collapse/script.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
const toggles = document.querySelectorAll('.faq-toggle')
2+
3+
toggles.forEach(toggle => {
4+
toggle.addEventListener('click', () => {
5+
// use css tricks to implement the requirements first
6+
toggle.parentNode.classList.toggle('active')
7+
})
8+
})

‎workout/day4-faq-collapse/style.css

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
2+
3+
* {
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
font-family: 'Muli', sans-serif;
9+
background-color: #f0f0f0;
10+
}
11+
12+
h1 {
13+
margin: 50px 0 30px;
14+
text-align: center;
15+
}
16+
17+
.faq-container {
18+
max-width: 600px;
19+
margin: 0 auto;
20+
}
21+
22+
.faq {
23+
background-color: transparent;
24+
border: 1px solid #9fa4a8;
25+
border-radius: 10px;
26+
margin: 20px 0;
27+
padding: 30px;
28+
position: relative;
29+
overflow: hidden;
30+
}
31+
32+
.faq.active {
33+
background-color: #fff;
34+
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.1);
35+
}
36+
37+
.faq.active::before,
38+
.faq.active::after {
39+
content: '\f075';
40+
font-family: 'Font Awesome 5 Free';
41+
color: #2ecc71;
42+
font-size: 7rem;
43+
position: absolute;
44+
opacity: 0.2;
45+
top: 20px;
46+
left: 20px;
47+
z-index: 0;
48+
}
49+
50+
.faq.active::before {
51+
color: #3498db;
52+
top: -10px;
53+
left: -30px;
54+
transform: rotateY(180deg);
55+
}
56+
57+
.faq-title {
58+
margin: 0 35px 0 0;
59+
}
60+
61+
.faq-text {
62+
height: 0;
63+
margin: 0;
64+
transition-duration: .3s;
65+
overflow: hidden;
66+
}
67+
68+
.faq.active .faq-text {
69+
height: auto;
70+
margin: 30px 0 0;
71+
}
72+
73+
.faq-toggle {
74+
background-color: transparent;
75+
border: 0;
76+
border-radius: 50%;
77+
cursor: pointer;
78+
display: flex;
79+
align-items: center;
80+
justify-content: center;
81+
font-size: 16px;
82+
padding: 0;
83+
position: absolute;
84+
top: 30px;
85+
right: 30px;
86+
height: 30px;
87+
width: 30px;
88+
}
89+
90+
.faq-toggle:focus {
91+
outline: 0;
92+
}
93+
94+
.faq-toggle .fa-times {
95+
display: none;
96+
}
97+
98+
.faq.active .faq-toggle .fa-times {
99+
color: #fff;
100+
display: block;
101+
}
102+
@keyframes spin{
103+
to{
104+
transform: rotateX(180deg)
105+
}
106+
}
107+
.faq.active .faq-toggle .fa-chevron-down {
108+
/* display: none; */
109+
/* animation: spin 1s ease; */
110+
transform: rotateX(180deg);
111+
transition: all .3s;
112+
}
113+
114+
.faq.active .faq-toggle {
115+
/* background-color: #9fa4a8; */
116+
}

0 commit comments

Comments
 (0)