How to treat a string as a vector in javascript

Question

The title sums up the question, but here's the long story:

I'm doing small projects for myself to a. learn new stuff along the way. b. to figure out what is possible and what is not. I've set out to make a "self-marketing gallery/website for a painter". I split up the webpage into 9 grid boxes (navbar, 6 mini boxes, main content box, and a footer). The 6 mini-boxes is set to display: flex, left side is occupied by a painting, which is blurred and on hover expands and becomes clear. On the right I wanted a description of the painting, but done with a typewriter effect. Now there are many solutions I found on the internet, but I've had trouble making them work and even if i did, I prefer to figure out a solution of my own, to see how I would tackle this problem instinctively. In c++ I learned that a string is a sort of a vector of letters and can be treated as a vector. So, my idea is to do the same in javascript, hence a loop that itirates through the string(a vector), adds one character, makes a | symbol appear and dissappear and then adds the next letter and when the text is finished loops | symbol on repeat. Now the immideate problem I encountered is that unlike c++ a string is not a vector in javascript, hence the question

Answer 1

If I right understood you can use ie this methods:

https://code.sololearn.com/WJ8qK4IOjB98/?ref=app

Answer 2

I appreciate the time you took for explaining, I give you that. Many people came here and post questions with little, or sometimes nothing in Description. And here you are writing a full blown one.

I'm having a bit of difficulty understanding the last parts however, the part about how a '|' symbol appear/disappear, use of loop, adding one character etc.

Can you brief me one example of such string, and how that string/vector affect something (in the page).

Answer 3

@Ipang so like, if we take an example of the word "Hello". A vector of the word would be lets say => ['H','e','l','l','o']. lets say we call this string 'hw', hw[0] would be 'H', hw[1] would be 'e' etc. So in the end the loop runs once and writes on the actual page the letter 'H', when it runs again, it becomes hw[i++], and keeps writing down pre-existing text one letter at a time, until it finishes and 'Hello' is written out on the page. So unlike the usual solution of hiding the text and slowly revealing it, I'm actually writing the text on the page in real time. The '|' symbol is simply the cursor line that appears and dissappears when you write down text on a computer. The delay, because even if you loop through a vector one character at a time, for the processor it might take longer, but for a human being its going to be an instant.

So basically, the computer must write down H, wait 0.25 seconds, write the next letter, wait 0.25 seconds, and the viewer of the webpage sees 6 paragraphs written out by 6 ghosts in 6 different grid boxes.

Which would be pretty cool I guess. On second thought it would be even cooler, if the viewer hovers above a painting, and this triggers the ghost to write out the text. But I guess I would have to center the image and move it left as the text appears. Great, now it's more complex, I will in fact lose my mind.

Answer 4

@JaScript thank you that was really helpful

Answer 5

You are welcome snowlife.
If the string methods of JavaScript are not enough for your project and you need an array with your text, then this example can help:

https://code.sololearn.com/WGUQwyhV724o/?ref=app

Answer 6

Thank you all, for anyone who discovers this question later on,what I learned from JaScript's code is that:
1. I have to have a variable for everything, an empty string, the actual text, the variable which will change and even the delay.
2. A string is actually a vector of letters, I was just doing it wrong.
3. It's possible to assign a value to a variable and then erase that text from the page but not from the code, by assigning it an "empty" value, this does not invalidate the variable which had the value assigned to it already
4. What setinterval is
5. there can only be one onload action, even if you put it in a different file
6. The end result was indeed pretty cool

Answer 7

Snowlife,
Nice idea! so the "text" if I may call it so, will be written in all 6 grids together simultaneously, not one by one?

I hope JaScript's example helps you to get started 👍