DEV Community

loading...
Cover image for Day 23 of JavaScriptmas - Social Media Input Solution

Day 23 of JavaScriptmas - Social Media Input Solution

Sekti
Keep moving forward. Learn well not learn fast.
・2 min read

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:

  1. Display the available characters LEFT.
  2. When the characters reach 20 and below, counter will turn red.
  3. 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>
Enter fullscreen mode Exit fullscreen mode

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);  
}
Enter fullscreen mode Exit fullscreen mode

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');
    }
});
Enter fullscreen mode Exit fullscreen mode

Discussion (0)

Forem Open with the Forem app