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 f245290

Browse files
Twitter Follow Component Project HTML, CSS, JavaScript
1 parent a5b6887 commit f245290

File tree

3 files changed

+246
-0
lines changed

3 files changed

+246
-0
lines changed

‎83. Twitter Follow Component/app.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
let body = document.body;
2+
let themer = document.querySelector(".themer");
3+
const followButtons = document.querySelectorAll(".follow-button");
4+
5+
themer.addEventListener("click", toggleTheme);
6+
7+
function toggleTheme() {
8+
if (body.className === "light-theme") {
9+
body.className = "dark-theme";
10+
themer.innerText = "Light";
11+
} else {
12+
body.className = "light-theme";
13+
themer.innerText = "Dark";
14+
}
15+
}
16+
17+
followButtons.forEach((btn) => {
18+
btn.addEventListener("click", (e) => followUnFollow(e.target));
19+
});
20+
21+
function followUnFollow(button) {
22+
button.classList.toggle("followed");
23+
if (button.innerText == "Follow") button.innerText = "Unfollow";
24+
else button.innerText = "Follow";
25+
}
Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Twitter Follow</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<button class="themer">Dark</button>
11+
12+
<div class="card">
13+
<h1 class="card-title">Who To Follow</h1>
14+
<span class="divider"></span>
15+
<div class="profile">
16+
<div class="profile-pic img-one"></div>
17+
<div class="profile-info">
18+
<span class="display-name">Albert Dare</span>
19+
<span class="username">albertdera</span>
20+
</div>
21+
<button class="follow-button followed">Unfollow</button>
22+
</div>
23+
<span class="divider"></span>
24+
<div class="profile">
25+
<div class="profile-pic img-two"></div>
26+
<div class="profile-info">
27+
<span class="display-name">Meysam Jarahkar</span>
28+
<span class="username">arona</span>
29+
</div>
30+
<button class="follow-button">Follow</button>
31+
</div>
32+
<span class="divider"></span>
33+
<div class="profile">
34+
<div class="profile-pic img-three"></div>
35+
<div class="profile-info">
36+
<span class="display-name">Meysam Jarahkar</span>
37+
<span class="username">arona</span>
38+
</div>
39+
<button class="follow-button">Follow</button>
40+
</div>
41+
42+
<a href="" class="show-more">Show More</a>
43+
</div>
44+
45+
<script src="app.js"></script>
46+
</body>
47+
</html>
Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
:root {
2+
--light-bg: white;
3+
--light-primary: rgb(247, 249, 250);
4+
--light-secondary: rgb(240, 242, 243);
5+
--light-divider: rgb(235, 237, 238);
6+
7+
--dark-bg: black;
8+
--dark-primary: #15181c;
9+
--dark-secondary: #2f3336;
10+
--dark-divider: #2f3336;
11+
12+
--highlight-color: #e0245e;
13+
}
14+
15+
* {
16+
box-sizing: border-box;
17+
}
18+
19+
html,
20+
body {
21+
margin: 0;
22+
height: 100%;
23+
width: 100%;
24+
}
25+
26+
html {
27+
display: table;
28+
font-family: sans-serif;
29+
}
30+
31+
body {
32+
background: var(--background-color);
33+
display: table-cell;
34+
vertical-align: middle;
35+
width: 100%;
36+
}
37+
38+
h1 {
39+
font-size: 1.3em;
40+
font-weight: 900;
41+
}
42+
43+
.light-theme {
44+
--background-color: var(--light-bg);
45+
--primary-bg: var(--light-primary);
46+
--secondary-bg: var(--light-secondary);
47+
--divider: var(--light-divider);
48+
}
49+
50+
.dark-theme {
51+
--background-color: var(--dark-bg);
52+
--primary-bg: var(--dark-primary);
53+
--secondary-bg: var(--dark-secondary);
54+
--divider: var(--dark-divider);
55+
color: white !important;
56+
}
57+
58+
.card {
59+
background-color: var(--primary-bg);
60+
height: auto;
61+
width: 360px;
62+
margin: 0 auto;
63+
border-radius: 24px;
64+
}
65+
66+
.card-title {
67+
margin: 0;
68+
padding: 20px 20px 15px 20px;
69+
}
70+
71+
.divider {
72+
display: block;
73+
width: 100%;
74+
border-top: 1px solid var(--secondary-bg);
75+
}
76+
77+
.profile {
78+
width: 100%;
79+
min-width: 100%;
80+
max-width: 100%;
81+
padding: 10px 20px;
82+
display: flex;
83+
flex-wrap: nowrap;
84+
align-items: center;
85+
align-content: stretch;
86+
justify-items: stretch;
87+
justify-content: space-between;
88+
}
89+
90+
.profile:hover,
91+
.show-more:hover {
92+
background-color: var(--secondary-bg);
93+
}
94+
95+
.profile-pic {
96+
display: block;
97+
height: 50px;
98+
width: 50px;
99+
border-radius: 50%;
100+
background-position: top;
101+
background-size: cover;
102+
}
103+
104+
.img-one {
105+
background-image: url(https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80);
106+
}
107+
.img-two {
108+
background-image: url(https://images.unsplash.com/photo-1610088441520-4352457e7095?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80);
109+
}
110+
.img-three {
111+
background-image: url(https://images.unsplash.com/photo-1579987102269-ac45dafda12c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=486&q=80);
112+
}
113+
114+
.profile-info {
115+
padding: 0 10px;
116+
flex-grow: 1;
117+
}
118+
119+
.display-name,
120+
.username {
121+
display: block;
122+
}
123+
124+
.display-name {
125+
font-weight: 700;
126+
}
127+
128+
.username {
129+
color: rgb(155, 153, 153);
130+
}
131+
132+
.username::before {
133+
content: "@";
134+
}
135+
136+
.follow-button {
137+
background-color: inherit;
138+
border: 1px solid var(--highlight-color);
139+
border-radius: 16px;
140+
color: var(--highlight-color);
141+
padding: 6px 16px;
142+
outline: none;
143+
font-weight: 900;
144+
}
145+
146+
.followed {
147+
background-color: var(--highlight-color);
148+
color: white;
149+
}
150+
151+
.show-more {
152+
border-bottom-left-radius: inherit;
153+
border-bottom-right-radius: inherit;
154+
display: block;
155+
padding: 15px 20px 20px 20px;
156+
text-decoration: none;
157+
color: var(--highlight-color);
158+
}
159+
160+
.show-more:focus {
161+
-webkit-tap-highlight-color: transparent;
162+
}
163+
164+
.themer {
165+
background-color: var(--primary-bg);
166+
color: inherit;
167+
outline: none;
168+
border: none;
169+
border-radius: 8px;
170+
position: fixed;
171+
right: 30px;
172+
top: 30px;
173+
padding: 8px 10px;
174+
}

0 commit comments

Comments
(0)

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