Как добавить стиль к условию javascript

Question

У меня есть файл с html и javascript. Он показывает сумму значений для арабских c алфавитов, введенных в текстовое поле. Вы можете проверить образец, введя такой текст, как ا ب د د ح و ز, тогда он покажет вам сумму значений по этим числам внизу. Скажите, пожалуйста, как я могу сделать текст результата и значение результата как h1, а также поле за результатом, которое вычисляется с помощью + sum; в конце скрипта, как это изображение. ссылка на изображение, которое я хочу показать.

Answer 1

Это то, что вам нужно? Все дело в html / css стиле

const sum = 23671;

document.getElementById("hijri").innerHTML = '<h2><div class="resultbox">Value of your text is</div><div class="resultbox redbox">'+sum+'</div></h2>';

#hijri {
  font-family: 'Trebuchet MS', Arial;
}
.resultbox {
  float: left;
  padding: 20px;
}
.redbox {
  background-color: red;
}

<div id="hijri">
</div>