Day 23 of Scrimba JavaScriptmas — Replicate Twitter Tweet Button
The true title of this challenge is Social Media Input. But i think that title would be nice too. So like the title, i was challenged to build the same replica of tweet button. It has 140 character maximum for input, and if it less than 20, the counter will turn into red. And if the character is more than 140, the tweet button will not can’t be used.
The hint of challenge is using addEventListener of textarea by using keydown. I just make it simpler for me, i use an arrow function of the textarea and add onkeydown. So if any of keyboard clicked, it will give the output of an event, just like using keydown.
So this is my solution
index.html
<html>
<head>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<textarea type="text" id="string" placeholder="Type in the box"></textarea>
<div id="counterFooter"><span id="number">140</span>/140</div><button id="btn"><h2>Tweet</h2></button>
</div>
<script src="index.pack.js"></script>
</body>
</html>
For this html i adding the span and id=”number” in ‘140’ inside the div with id=”counterFooter”.
index.css
body{
background-color: #023F6A;
font-family: sans-serif;
}
.container{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
textarea{
width:50%;
height: 30vh;
background-color: rgb(21, 32, 43);
color: #fff;
border-radius:10px;
}
textarea::placeholder{
color:#fff;
}
#counterFooter {
margin-top: 0.2rem;
font-size:0.8rem;
color: #fff;
margin-left:30%;
font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}button{
width:50%;
background-color: rgb(29, 161, 242);
border-radius: 10px;
padding: 0 10%;
}
button h2{
color: #fff;}
.buttonDisabled {
opacity: .5;
cursor: not-allowed;
}
I just want to make the styling become prettier. Instead using default cursor, i change the .buttonDisabled, cursor into not-allowed.
index.pack.js
const textarea = document.querySelector('textarea');
const button = document.querySelector('#btn');
const counter = document.querySelector('#counterFooter');
const activeCount = document.querySelector('#number');textarea.onkeydown = function (){
if(activeCount.innerHTML = 140){
activeCount.innerHTML = activeCount.innerHTML - this.value.length;
activeCount.style.color = 'white';
counter.style.color = 'white';
}
if(activeCount.innerHTML <= 20){
activeCount.style.color = 'red';
counter.style.color = 'red';
button.classList.remove('buttonDisabled');
}
if(activeCount.innerHTML < 0){
activeCount.style.color = 'red';
counter.style.color = 'red';
button.classList.add('buttonDisabled')
}
}
For this, just like i said before. The first thing i do, is to declare variable of what needed in this coding. After that, using onkeydown for textarea. I build an arrow function inside it, that did if statement. The first statement if the activeCount length is 140, i change that number every i press the keyboard button and give the default style in here so if it fall into second statement, the style will back into default when the second statement is not fullfiled.
The second statement, i give some style here to change the color of counter become red. Also i remove .buttonDisabled style if available. The .buttonDisabled will activated when the character is fall into third statement.
I think that’s all for now. It took me around 2 hours to finish this. But yeah i happy, finally could finish it
Thanks @scrimba @DthompsonDev for the #javascriptmas challenge. I really learn a lot here. Here is the link for my solution.
Happy, coding!!!
