Skip to content

Commit f245290

Browse files
HuXn-WebDevHuXn-WebDev
committed
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+
}

‎83. Twitter Follow Component/index.html‎

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>

‎83. Twitter Follow Component/style.css‎

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)