Typewriter / Speed

https://codepen.io/danborjesson/pen/zQNMeL

Trying to create a typewriter that’s change the font weight depending on the speed you typing. So for I have everything in the Codepen.

Here is the function to create append the text to bow with an event listener.

$("#textarea").on("keypress", function(e) { $("#content").append(e.key) 
}); 

And my plan is to call the spans tags so when I write the letters stays in the font-weight they are typed. Anyone has any suggestions?

Yhanks

I’m not exactly sure what your question is but my two first thoughts on how to go about what you’re suggesting are the following:

Option 1: At a standard interval, record the number of characters inputted and use that as the basis for determining weight. IE every average characters per minute is 200, so 3.33 characters per second, anything more or less change weight.

Option 2: Measure the time between individual characters, so every time a character is input, a listener is activated that returns a time and resets the next time a character is pressed, then use that time to determine weight etc.

Not sure if that’s what you’re asking but that’s what came to mind when reading your write up, hope it helps :+1:

1 Like

Thanks Colin for reply!

I think I have created a solution for the option 2, it looks like this:

let last, ms, n;
let output = $('#output');

$('#textarea').on('input', function() {
    n = new Date();
    ms = n - last;
    output.text(ms + 'ms');
    last = n;
    
});

$('#textarea').on('keypress', function() {
    console.log(ms);
    if (ms >= 0 && ms <= 25){
      this.style.fontWeight = 900;
    }

and then I have an else if for every weight between 100-900 But the problem is that the weight changes on the whole text and not just on the next character. I don’t know how that part.

I believe it’s because you’re calling this.style.fontWeight which is referring to the entire text area. I’ll be honest my expertise is definitely not front-end dev.

1 Like

Randell You are my hero! Big thanks! I took your good modification and with som changing it’s exactly as I wanted.

https://codepen.io/danborjesson/pen/vwmYKa

Now I only have a few adjustments left, like prevent backspace, enter and escape button. :slight_smile:

From the beginning I wanted to append the keypress and not append from an input textarea but before you helped me I couldn’t find a way to solve it without the input element. So that’s just lazy coding by me now right now, I will delete that input element (and for answering your question, it was supposed to be a input element, but the Codepen changes endings if I switch element, so it must be a mistake together with that). It’s styled with css (display: none). If you look at the image it is exactly how I want it. Or maybe I’m missing something, still pretty new to this.

/L