[SOLVED] How do I change text direction

Issue

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 class="container">
  <div class="heading">
    <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 class="result">
        <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

Solution

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.

Answered By – OneQ

Answer Checked By – Senaida (BugsFixing Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *