scrimba
Note at 2:28
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

Note at 2:28
AboutCommentsNotes
Note at 2:28
Expand for more info
index.js
run
preview
console
/*
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 MAX_TWEET_LENGTH = 140
const tweetBtn = document.querySelector('#btn')
const tweetBox = document.querySelector('#string')
const charCounter = document.querySelector('#counterFooter')

function init() {
tweetBtn.disabled = true
tweetBtn.classList.add('buttonDisabled')
tweetBtn.addEventListener('click', createTweet)
tweetBox.addEventListener('keyup', checkTweet)
charCounter.textContent = `${MAX_TWEET_LENGTH}/${MAX_TWEET_LENGTH}`
}

function createTweet() {
window.open(
`https://twitter.com/intent/tweet?text=${encodeURIComponent(tweetBox.value)}`,
'_blank',
'noopener,noreferrer'
)
}

function checkTweet(evt) {
const tweetLength = evt.target.value.length
const remainingCount = MAX_TWEET_LENGTH - tweetLength

charCounter.textContent = `${remainingCount}/${MAX_TWEET_LENGTH}`

if (remainingCount <= 20) {
charCounter.style.color = 'red'
} else {
charCounter.style.color = 'white'
}

if (remainingCount < 0 || tweetLength === 0) {
tweetBtn.disabled = true
tweetBtn.classList.add('buttonDisabled')
tweetBtn.removeEventListener('click', createTweet)
} else {
tweetBtn.disabled = false
tweetBtn.classList.remove('buttonDisabled')
tweetBtn.addEventListener('click', createTweet)
}
}

init()
Console
/index.html
LIVE