That will create the project with the following folder structure:

The main logic of the app will be written in index.svelte file in route folder, remove all in index.svelte file section Tags in markup. Leave the tag in.

Let’s start with the first paragraph we’re going to use to test our reading speed. I chose about 300 words from Alice and Wonderland, but you can choose any content you like.

Let’s start with a paragraph:

The rabbit-hole somehow went straight up like a tunnel, and then suddenly fell down, so suddenly, that Alice didn’t even have a moment to think about stopping, before she fell herself down. Hui Paati which looked like a deep well. Either the well was too deep, or it was falling too slowly, because she had plenty of time to see for herself and know what would happen next. At first, she tried to look down and find out where she was coming, but it was too dark to see anything: then, she looked at the sides of the well, and saw that they were full of cupboards and books. Shelves were full: here and there were maps and pictures hung on pegs. As she passed by, she pulled out a jar from one of the shelves: it was labeled[3] “Orange marmalade,” but to her great dismay it was empty: she didn’t like to drop the jar for fear of hitting someone, so managed to put it in one of the cupboards as it fell from her. “Well!” Alice thought to herself, “After falling like this, I will think nothing of falling down the stairs! How brave they all at home will think of me! Why, I will not say anything about it, even though I am home.” Let me fall over you!” (Which most likely was true.) Down, down, down. Will the fall never end? “I wonder how many miles I’ve fallen by this time?” She said aloud, “I must be going somewhere near the center of the earth. Let me see: she’ll be four thousand miles down, I think—” (You see Alice used this sort of thing in her lessons in the school room had learned many things, and although it was not a very good opportunity to show his knowledge, since there was no one to hear him, it was still good to say, “Yes that is the correct distance, but then what longitude or latitude I -Stay in line?”

Copy and paste the above paragraph, (or any paragraph of your choice), and save it in a variable called Article, Be sure to wrap the paragraph in back tick “ so that you don’t have any weird formatting problems.

After that, we’ll split the paragraph into individual words and save them in an array with the .split method. The split method takes a string as an argument. Here we are using a blank space argument. This method automatically returns an array.

We are saving the paragraph in the ‘Words’ array so that we can go through each word later.

the first piece of data is boolean reading is variable, With this variable we will control the start and stop of the traversal through the words. we are also using a identity To add to each word. And finally, we start with a default reading speed Which is 150. This number is milliseconds as we will see later with the setInterval function.

The second part of the data is an array of objects which we are calling words per minute. We are going to use that array to populate the options in the select element.

changeSpeed() Handler is super simple. It will be listening to the select element and grabbing the value of the option and updating the speed.

startReading() The function is where we have the main logic how it will work once we click on the button to start reading.

The first thing it does is flip the value of the boolean isReading, Then we are setting and saving a setInterval it will work only when isReading true and if id is the last word in the array.

In other words, the gap will stop if we reach the last word. In the else clause we stop the interval (basically a traversal of words), we reset the id, and we’re reading returns false.

last price readingSpeed, which is milliseconds. How fast or slow this interval will be according to which WPM speed was selected.

There’s also some logic in the Svelte component markup. In paragraph, we a. are using it # each block. it is looping through words array, getting index (I) and a . To produce <अवधि> Tags for each word with a class, an ID, or none, depending on certain conditions.

The first condition is if the reading is true and if the index is equal to the id, (To start with it will be true because they are both 0 . will be) span tag will have an id and a class highlight text. As you will see in the CSS below, the highlight text Class Each span will make the tag bolder and increase the font-size a bit.

We also want to give the span a class faded text If is reading True so all other words “faded”. That square gives the text a light gray color.

Finally if the conditions are false we just render the span without any class nor id.

I’ve added a few styles for the buttons, but you can style the app however you like. important classes are .fade-text And .highlight-text classes, but even those you can tweak and customize as you wish.

run npm run dev and check if it all works.

This concludes my first tutorial.