/*
DESCRIPTION:
We are making a Social Media Character Counter! We want to display the available characters LEFT.
Using the Keydown event should help you here. When the characters reach 20 and below, we want them to turn red. So we will use Javascript to add that styling to it. If the characters drop below 0, we want the button to be disabled BUT if there are only 0 characters left, we should still be able to tweet.

Keydown, addEventListeners, add and remove a class

Tips:
1. We want to create our variables first
2. Add the event listener
3. Look in the CSS to see what could be used to disable the button
4. Create conditions to check the count of the characters

Let your imagination run wild! You can use the provided styling or you can take it to another level!
Make sure you share your solution using the "Share solution!" button at the top!
There will be multiple winners that I select!

Follow me on twitter @DThompsonDev so you can find who who is selected! I hope it's YOU!

*/

const textarea = document.getElementById('string');
const counter = document.getElementById('counter')
const button = document.getElementById('btn');
const footer = document.getElementById('counterFooter');
const message = document.getElementById('message');
message.innerHTML = 'Please type something first';

//I know the challenge says to use keydown, but it goes mad if you delete characters and gives the wrong length. Keyup doesn't do that - downside is it doesn't update if you hold a key down, but realistically no one will do that forever - and if they do they'll be happy to delete a few characters to it it in
textarea.addEventListener('keyup', function() {
    message.style.opacity = '0';
    const tweetLength = 280 - textarea.value.length;
    counter.innerHTML = tweetLength;
    tweetLength <= 20 ? footer.style.color = '#800000' : footer.style.color = 'black';
    tweetLength < 0 ? button.classList.add('buttonDisabled') : button.classList.remove('buttonDisabled');
});

button.addEventListener('click', function() {
    const tweetContent = textarea.value.replace(/[#]/g, '%23'); //Need to change the hash otherwise it cuts the tweet off there
    if(tweetContent !== '') {
      const link = `https://www.twitter.com/intent/tweet?text=${tweetContent}`;
      window.open(link);  
      //Delete the content now it's been tweeted (arguably you could leave it for changes, but you can also change it in the twitter window)
      textarea.value = '';
      counter.innerHTML = 0;
    } else {
        message.style.opacity = '1';
    }
})