I'd like to write my own hackertyper site that prints itself when pressing some keys.
But when I try the code below, it prints everything at the same line. I used template literals (``) and couldn't make it. Then tried <br /> in the string but also not worked. How do I make it right?
Edit: I was using <p> tag in the HTML file, when I changed it to <pre> tag as Praveen said, it solved my problem. Thank you.
"use strict";
let str = `"use strict"
let str = "";
let emptyStr = "";
let i = 0;
document.addEventListener("keydown", function () {
emptyStr += str.charAt(i++) + str.charAt(i++) + str.charAt(i++);
document.querySelector("#string").textContent = emptyStr;
});`;
let emptyStr = "";
let i = 0;
document.addEventListener("keydown", function () {
emptyStr += str.charAt(i++) + str.charAt(i++) + str.charAt(i++);
document.querySelector("#string").textContent = emptyStr;
});<p id="string"></p>I guess if you're trying to print it out, you need to print it out on a <pre> tag or an element with style white-space: pre or similar.
Here's an example with <pre> tag:
let str = `This is HackerTyper
See I have spaces and lines!`;
let emptyStr = "";
let i = 0;
document.addEventListener("keydown", function () {
emptyStr += str.charAt(i++) + str.charAt(i++) + str.charAt(i++);
document.querySelector("#string").textContent = emptyStr;
});<pre id="string"></pre>Here's the same with white-space: pre for <div>:
let str = `This is HackerTyper
See I have spaces and lines!`;
let emptyStr = "";
let i = 0;
document.addEventListener("keydown", function () {
emptyStr += str.charAt(i++) + str.charAt(i++) + str.charAt(i++);
document.querySelector("#string").textContent = emptyStr;
});div {
white-space: pre;
}<div id="string"></div>And, finally, just wanted to tell, this is a really good implementation of HackerTyper.