Coding an Interactive String Counter in JavaScript (Beginner)
In this video, we will code an interactive playground where the user can update the value of a string and the string characters along with the string count are automatically displayed in a nice looking UI. It is intended to help someone implement a simple web app from scratch using CSS and JavaScript.
---
Created: 20/08/2023
Duration: 57:47
Level: Beginner
---
Topics covered / What you'll learn:
String methods and the length property
String.prototype.split
CSS Selectors
Emmet Abbreviations
Chrome DevTools, using the Inspector
Hidden spaces in HTML
The 'contenteditable' HTML attribute
Handling the 'input' event
Flexbox layouts
Using innerHTML
---
Resources & References:
Live Codesandbox: https://codesandbox.io/s/github/kosta...
Source code: https://github.com/kostasx/LearnJavas...
Quickly open a new Codepen: pen.new
Emmet Abbreviations: https://docs.emmet.io/abbreviations/
System Font Stack
https://css-tricks.com/snippets/css/s...
contenteditable HTML attribute
https://developer.mozilla.org/en-US/d...
VSCode Editor Online: https://vscode.dev/
CSS Selectors:
Child Combinator
https://developer.mozilla.org/en-US/d...
:last-child
https://developer.mozilla.org/en-US/d...
:nth-child()
https://developer.mozilla.org/en-US/d...
Support this channel / Στηρίξτε αυτό το κανάλι:
If you found this material helpful and valuable please consider supporting me:
1) Like the videos and subscribe to the YouTube channel
2) Star the GitHub repository: https://github.com/kostasx/LearnJavas...
3) Buy me a Coffee: https://www.buymeacoffee.com/kostasx
4) Follow me on Twitter: / kostas_mns