How do i add such caret in my website ?
https://monkeytype.com/
It is using event listener and moving caret on each letter type but the problem is how do i find specific width for each letter cuz all letters don' t have same width, I thought of alternative approach which is adding ::after pseudo property but doing this i will not get the caret move effect like in above website.
Monkeytype | A minimalistic, customizable typing test
The most customizable typing test website with a minimal design and a ton of features. Test yourself in various modes, track your progress and improve your speed.
20 Replies
in the example screenshot, they use a monospace type font. Those characters have all the same width
what if i wanna add functionality where user can change font type ?
Each character might actually be inside its own element. I am on the phone so can't really check...
And then you check the width of the element which holds a character.
But the very fact that they are changing the color of each character suggests that I might be correct
they are using separate span tag for each letter
indeed they do. so with js (getBoundingClientRect() ) you can get the size of each
Nice
@Bismuth
Not sure what exactly you want to build but I hope it's not to just change the caret colo
Color*
probably the position of the caret
Probably
although, there might be other options. (transparent text) for what is typed, and the caret as after pseudo element attached to it. It al depend on how the project of OP is build.
That's cool idea
im cloning same site
It's open source...
I will recommend reading their code
but after pseudo will not allow me to add smooth caret move effect
that's huge code base : ) im not capable of that
You only live once..
Go for it
😜
as of now lol
Btw, I did read some of it out of boredom once..
You actually can go through some of it
also who reads that much when i can ask experts like you here😛
Lol ... The bug I am trying to fix has a different opinion apparently
Good luck @Bismuth
yea, it is positioned absolute, so you'll have to check the last character that is added. get the position (boundingClientRect) of the character, and place the caret behind it
