Typewriter / Speed

Typewriter / Speed
0
#1

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

#2

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
#5

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.

#6

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
#7

@liverpool You can not specify the font-weight or any other css property for individual characters in a textarea. I took your original idea and modified it in a couple of ways to achieve the effect you want where the speed of characters typed increases the font weight of each character. I did this by change the textarea to a div element and using the css you had for the textarea plus a few extra properties to make it appear the same as it was before. The major thing I changed (for simplicity of my testing) was to not force the user to type in an input, but just allow the user to start typing.

After each character pressed a span element with a calculated font-weight is appended to the textarea div. The only think I can not figure out right now is how to make the text not wrap. I tried a few things, but hopefully one of our CSS gurus in the community can share a way to make that part work.

https://jsfiddle.net/L5ztdf4q/

2 Likes
#8

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:

#9

It does not seem to be working the way I was expecting. I noticed you have some invalid html which you need to deal with:

<input id="textarea" placeholder="Start typing"<div/>
<div id="content"></div>

You start with an input element here (which is a self-closing element), yet you end with a malformed closing div tag. Is it supposed to be an input element or a div element?

1 Like
#10

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