Explorer
project
index.css
index.html
index.js
Dependencies
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
/*
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()