Skip to content

Commit 519eb6c

Browse files
sarfraz-mohsinsarfraz-mohsin
committed
This is a dynamic tweetbox, where can see the working behind of how a tweetbox works
1 parent af5a0b3 commit 519eb6c

File tree

3 files changed

+249
-0
lines changed

3 files changed

+249
-0
lines changed

‎dynamicTweetBox/index.html

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
8+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
9+
<link rel="stylesheet" href="style.css">
10+
<title>Dynamic Tweet Box</title>
11+
</head>
12+
<body>
13+
<div class="container">
14+
<div class="input-box">
15+
<div class="tweet-area">
16+
<span class="placeholder">What's Happening ?</span>
17+
<div class="input editable" contenteditable="true" spellcheck="false"></div>
18+
<div class="input readonly" contenteditable="true" spellcheck="false"></div>
19+
</div>
20+
<div class="privacy">
21+
<span class="material-symbols-outlined">public</span>
22+
<span class="reply">Everone can reply</span>
23+
</div>
24+
</div>
25+
<div class="bottom">
26+
<ul class="icons">
27+
<li><span class="material-symbols-outlined">gif_box</span></li>
28+
<li><span class="material-symbols-outlined">photo_album</span></li>
29+
<li><span class="material-symbols-outlined">location_on</span></li>
30+
<li><span class="material-symbols-outlined">mood</span></li>
31+
<li><span class="material-symbols-outlined">person</span></li>
32+
</ul>
33+
<div class="content">
34+
<span class="counter">100</span>
35+
<button class="tweet">Tweet</button>
36+
</div>
37+
</div>
38+
</div>
39+
40+
<script src="script.js"></script>
41+
</body>
42+
</html>

‎dynamicTweetBox/script.js

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
const editableInput = document.querySelector(".editable"),
2+
readonlyInput = document.querySelector(".readonly"),
3+
placeholder = document.querySelector(".placeholder"),
4+
counter = document.querySelector(".counter"),
5+
button = document.querySelector("button");
6+
7+
editableInput.onkeyup = (e) => {
8+
let element = e.target; //getting keyup element
9+
checkInput(element) //function calling
10+
}
11+
12+
editableInput.onkeypress = (e) => {
13+
let element = e.target; //getting keyup element
14+
checkInput(element) //function calling
15+
counter.style.display = "none"
16+
}
17+
18+
function checkInput(element){
19+
let currentLength = element.innerText.length; //getting length of keypressed element
20+
let maxLength = 100;
21+
let textTag = element.innerHTML;
22+
23+
if(currentLength <= 0){ //if currenLength is less than or equal to 0
24+
placeholder.style.display = "block";
25+
counter.style.display = "none"
26+
button.classList.remove("active")
27+
}
28+
else{
29+
placeholder.style.display = "none";
30+
counter.style.display = "block"
31+
button.classList.add("active")
32+
}
33+
34+
counter.innerText = maxLength - currentLength
35+
36+
if(currentLength > maxLength){
37+
let overText = element.innerText.substr(maxLength); //extracting over texts, the substring method extracts parts of a string, beginning at the character at the specified positon
38+
39+
overText = `<span class= "highlight">${overText}</span>`; //creating new span and passing over texts
40+
textTag = element.innerText.substr(0, maxLength) + overText; //replacing inner html of editable div with new
41+
readonlyInput.style.zIndex = "1";
42+
counter.style.color = "#e0245e";
43+
button.classList.remove("active")
44+
}else{
45+
readonlyInput.style.zIndex = "-1"
46+
counter.style.color = "#333"
47+
}
48+
49+
readonlyInput.innerHTML = textTag; //replacing innerHTML of readonly div with new span with over texts
50+
}

‎dynamicTweetBox/style.css

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&family=Roboto:wght@300;400;500&display=swap');
2+
3+
*{
4+
margin: 0;
5+
padding: 0;
6+
font-family: 'Roboto', sans-serif;
7+
box-sizing: border-box;
8+
}
9+
10+
body{
11+
display: flex;
12+
align-items: center;
13+
justify-content: center;
14+
min-height: 100vh;
15+
background: #1da1f2;
16+
}
17+
18+
.container{
19+
background: white;
20+
max-width: 475px;
21+
width: 100%;
22+
padding: 25px 25px 15px 25px;
23+
border-radius: 15px;
24+
}
25+
26+
.input-box{
27+
padding-top: 10px;
28+
border-bottom: 1px solid #e6e6e6;
29+
}
30+
31+
.input-box .tweet-area{
32+
position: relative;
33+
min-height: 130px;
34+
max-height: 170px;
35+
overflow-y: scroll;
36+
}
37+
38+
.tweet-area .placeholder{
39+
position: absolute;
40+
pointer-events: none;
41+
font-size: 22px;
42+
margin-top: -3px;
43+
color: #98a5b1;
44+
}
45+
46+
.tweet-area::-webkit-scrollbar{
47+
width: 0px;
48+
}
49+
50+
.tweet-area .input{
51+
outline: none;
52+
font-size: 17px;
53+
word-wrap: break-word;
54+
word-break: break-all;
55+
}
56+
57+
.tweet-area .editable{
58+
position: relative;
59+
z-index: 5;
60+
}
61+
62+
.tweet-area .readonly{
63+
position: absolute;
64+
top: 0;
65+
left: 0;
66+
z-index: -1;
67+
color: transparent;
68+
background: transparent;
69+
70+
}
71+
72+
.readonly .highlight{
73+
background: #fd9bb0;
74+
}
75+
76+
.input-box .privacy {
77+
display: inline-flex;
78+
align-items: center;
79+
color: #1da1f2;
80+
margin: 15px 0;
81+
padding: 7px 10px;
82+
cursor: pointer;
83+
transition: background 0.2s ease ;
84+
border-radius: 25px;
85+
}
86+
87+
.input-box .privacy:hover, .icons li:hover{
88+
background: #e7f5fe;
89+
}
90+
91+
.privacy .material-symbols-outlined{
92+
font-size: 19px;
93+
}
94+
95+
.privacy .reply{
96+
margin-left: 7px;
97+
font-size: 15px;
98+
font-weight: 600;
99+
}
100+
101+
.bottom{
102+
display: flex;
103+
align-items: center;
104+
justify-content: space-between;
105+
margin-top: 13px;
106+
}
107+
108+
.bottom .icons{
109+
display: inline-flex;
110+
}
111+
112+
.icons li{
113+
list-style: none;
114+
height: 38px;
115+
width: 38px;
116+
margin: 0px 2px;
117+
display: flex;
118+
justify-content: center;
119+
align-items: center;
120+
cursor: pointer;
121+
border-radius: 25px;
122+
transition: background 0.2s ease;
123+
color: #1da1f2;
124+
}
125+
126+
.bottom .content{
127+
display: flex;
128+
align-items: center;
129+
}
130+
131+
.content .counter{
132+
display: none;
133+
margin-right: 15px;
134+
padding-right: 15px;
135+
border-right: 1px solid #aab8c2;
136+
color: #98a5b1;
137+
}
138+
139+
.content button{
140+
background: #1da1f2;
141+
color: white;
142+
font-weight: 600;
143+
border-radius: 25px;
144+
padding: 8px 12px;
145+
border: none;
146+
cursor: pointer;
147+
letter-spacing: 0.4px;
148+
outline: none;
149+
opacity: 0.7;
150+
pointer-events: none;
151+
}
152+
153+
.content button.active{
154+
opacity: 1;
155+
pointer-events: auto;
156+
}
157+

0 commit comments

Comments
 (0)