Comment Box
View app
View GitHub repository
For this project, as part of my application for Founders & Coders, I came up with a Twitter-style comment box, which employed the same logic as with Twitter: only a maximum of 140 characters would be allowed to be inputted. As with when Tweeting, a countdown would inform you of how many characters were left, before reaching zero – after which the user would no longer be able to input any more characters.
While the process of constructing the Name and Email fields in HTML was straightforward, constructing the JavaScript for the comment box turned out to be difficult at first. I set up a variable, maxChar, with the maximum character limit of 140 allowed – a flag that could be compared as the user started typing in characters. However, this logic was tricky to understand at first, given that this variable was separate to the variable for a counter on the screen (‘counter‘), which was counting down from 140 to zero rather than up from zero to 140. In my own mind, the maxChar variable should have theoretically been at zero, given that zero displayed on the screen signified the limit, rather than 140. This complicated logic is why a character countdown function can trip up the programmer. In any case, a preventDefault event method was employed to stop the user from entering any more characters at zero countdown.
In addition, the code would also have to acccount for what happened if the user backspaced. This was accounted for in the JavaScript via the incrementing and decrementing of the maxChar variable. The user would only be allowed to backspace if the maxChar variable was not at a maximum of 140 characters.
I also constructed an if else condition to account for if the user had reached the maxChar limit of zero characters (again, confusingly rather than 140). Once the user reached zero characters, I then made the text highlight in red – not only for what the user had written in, but also with the warning sign below the comment box:
I also wanted to make the walls of the Comment Box red, along with the text, but found this difficult to realise. It took working with another potential cohort student during a session at Founders & Coders’ offices to work out that this could be done using the CSS Outline property, which I wasn’t familiar with before.
Finally, I also constructed a printOutput function, which on Submit not only printed out what the user had typed in the Comment Box, but also made the filling in of the user’s name in the Name field compulsory too; the inputted name was included along with the Comment Box text.