I am making a word counter but the text is not in the left. How can I make it to the left?

let area = document.getElementById('area');
let char = document.getElementById('char');
let word = document.getElementById('word');

area.addEventListener('input', function() {
  // count characters
  let content = this.value;
  char.textContent = content.length;

  // remove empty spaces from start and end
  content.trim();
  console.log(content);

  let wordList = content.split(/\s/);

  // Remove spaces from between words
  let words = wordList.filter(function(element) {
    return element != "";
  });

  // count words
  word.textContent = words.length;
});

* {
  margin: 0;
  padding: 0;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.container h1 {
  font-size: 25px;
}

.container h3 {
  font-size: 20px;
}

.heading {
  border: 2px dashed green;
  padding: 5px;
  font-weight: 700;
  text-align: center;
  width: 400px;
}

#area {
  height: 200px;
  width: 400px;
  resize: none;
  font-size: 15px;
  font-weight: 700;
  padding: 5px;
  margin-top: 15px;
  color: green;
  outline: none;
  border: 2px dashed green;
}

#area:focus {
  border: 2px dashed blue;
  outline: none;
}

.result {
  color: green;
  font-size: 20px;
  width: 401px;
  text-align: center;
  font-weight: 200;
  padding: 5px;
  border: 2px dashed green;
  margin-top: 10px;
}

#word,
#char {
  font-size: 25px;
  text-decoration: none;
}

<div >
  <div >
    <h1 style="color:green">Word counter</h1>
    <h2>Delete everything first!</h2>
    <h3><b>Word and Character count<b></h3>
        </div>
        <textarea id="area"
                placeholder="Enter your Text Here">
        </textarea>
        <p >
        <span id="word">0</span> Words and
            <span id="char">0</span> Characters
        </p>

I tried changing the center to left but it gave weird results like the boxes being to the left of the page, the text being to the left but not centered. So again, how can I make it so that the text inside the middle box is on the left and not in a weird spot

CodePudding user response：

If you mean in your textarea, it is because you have spaces between your textarea tags

Try this : <textarea id="area" placeholder="Enter your Text Here"></textarea>

That's why your placeholder wouldn't show too.

CodePudding user response：

You can use dir="rtl" on text area

<textarea dir="rtl"></textarea>

<element dir="ltr|rtl|auto">

ltr - Left-to-right text direction

rtl - Right-to-left text