Day 23 of JavaScriptmas Challenge is to give feedback to user how many character remaining can be type in the textarea. This is similar like Twitter if you recognise it.
But this challenge will imitate the counter and will give some different style when the user reach on certain point.
The Keypoints for today challenge:
- Display the available characters LEFT.
- When the characters reach 20 and below, counter will turn red.
- If the characters drop below 0, the button to be disabled BUT if there are only 0 characters left, should still be able to tweet.
Solution
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">140/140</div>
<button id="btn"><h2>Tweet</h2></button>
</div>
<script src="index.js"></script>
</body>
</html>
CSS
html,body{
height: 100%;
background-color: #023F6A;
font-family: sans-serif;
}
.container{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 100%;
}
textarea{
width:50%;
height: 30vh;
background-color: rgb(21, 32, 43);
color: #fff;
padding: 1em;
line-height: 15px;
}
textarea::placeholder{
color:#fff;
}
#counterFooter {
font-size:1rem;
color: black;
font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
display: block;
width: 50%;
text-align: center;
font-weight: 700;
padding: 0.2em .8em;
background: rgba(244, 228, 186.5);
}
button{
width:55%;
background-color: rgb(241, 196, 15);
border-radius: 10px;
padding: 0 10%;
margin: 1em 0 0;
cursor: pointer;
transition: transform .3s ease;
}
button:hover{
transform: translateY(-3px);
}
button h2{
color: black;
text-transform: uppercase;
}
.buttonDisabled {
opacity: .5;
cursor: default;
}
button.buttonDisabled:hover{
transform: translateY(0);
}
JavaScript
const get = id => document.getElementById(id);
const MAX_CHARS = 140;
let text = get('string');
let btn = get('btn');
let counter = get('counterFooter');
// initialise disable tweet if length is 0
let tweet = text.value;
if(tweet.length == 0) {
btn.classList.add('buttonDisabled');
btn.style.cursor = 'default';
text.style.outline = "none !important";
text.style.border = "1px solid red";
text.style.boxShadow = "0 0 10px #719ECE";
}
text.addEventListener('keyup', () => {
let charLength = text.value.length;
let charRemaining = MAX_CHARS - charLength;
// update remaing characters to user
counter.innerText = `${charRemaining} / ${MAX_CHARS}`;
if(charLength == 0) {
counter.style.color = 'black';
btn.classList.add('buttonDisabled');
btn.style.cursor = 'default';
text.style.outline = "none !important";
text.style.border = "1px solid red";
text.style.boxShadow = "0 0 10px #719ECE";
} else if(charRemaining < 0) {
btn.classList.add('buttonDisabled');
btn.style.cursor = 'default';
text.style.outline = "none !important";
text.style.border = "1px solid red";
text.style.boxShadow = "0 0 10px #719ECE";
} else if(charRemaining <=20) {
counter.style.color = 'red';
btn.classList.remove('buttonDisabled');
btn.style.cursor = 'pointer';
text.style.outline = "unset";
text.style.border = "1px solid white";
text.style.boxShadow = "0 0 0 #719ECE";
} else {
counter.style.color = 'black';
btn.classList.remove('buttonDisabled');
btn.style.cursor = 'pointer';
text.style.outline = "unset";
text.style.border = "1px solid white";
text.style.boxShadow = "0 0 0 #719ECE";
}
});
btn.addEventListener('click', function() {
let tweet = text.value;
// send tweet if value less or equal to MAX_CHARS
if(tweet.length > 0 && tweet.length <= MAX_CHARS) {
let postTweet = `https://twitter.com/intent/tweet?text=${tweet}`;
window.open(postTweet, '_blank');
}
});
Top comments (0)