(JAVASCRIPT) How to style the layout of this JS code?

Question

I have this code in javascript and I would like to edit its layout, but I do not know how to do (or do not remember) if you can help me showing examples I would appreciate.

<script>
    function lastModified() {
    var modiDate = new Date(document.lastModified);
    var showAs = modiDate.getDate() + "-" + (modiDate.getMonth() + 1) + "-" + modiDate.getFullYear();
    return showAs
}

function GetTime() {
    var modiDate = new Date();
    var Seconds

    if (modiDate.getSeconds() < 10) {
        Seconds = "0" + modiDate.getSeconds();
    } else {
        Seconds = modiDate.getSeconds();
    }

    var modiDate = new Date();
    var CurTime = modiDate.getHours() + ":" + modiDate.getFullMinutes() + ":" + Seconds
    return CurTime
    }
    Date.prototype.getFullMinutes = function () {
        if (this.getMinutes() < 10) {
            return '0' + this.getMinutes();
        }
        return this.getMinutes();
    };

document.write("Ultima Atualização em: ")
document.write(lastModified() + " as " + GetTime());
document.write(" por ")
document.write("@ViewBag.usuarioLogado");
</script>

Answer 1

You can seamlessly insert html tags into the script, but it’s not ideal by programming patterns (harms maintenance)... unless it’s really necessary in terms of scope.

I put only the opening of a div with a red background-color and a br trim line breaks, because I closed the div at the end, but can be added whatever is necessary, both html and css, however, gets messy!!

<script>
    function lastModified() {
    var modiDate = new Date(document.lastModified);
    var showAs = modiDate.getDate() + "-" + (modiDate.getMonth() + 1) + "-" + modiDate.getFullYear();
    return showAs
}

function GetTime() {
    var modiDate = new Date();
    var Seconds

    if (modiDate.getSeconds() < 10) {
        Seconds = "0" + modiDate.getSeconds();
    } else {
        Seconds = modiDate.getSeconds();
    }

    var modiDate = new Date();
    var CurTime = modiDate.getHours() + ":" + modiDate.getFullMinutes() + ":" + Seconds
    return CurTime
    }
    Date.prototype.getFullMinutes = function () {
        if (this.getMinutes() < 10) {
            return '0' + this.getMinutes();
        }
        return this.getMinutes();
    };

document.write("<div style='background-color: red'>Ultima Atualização em: ")
document.write(lastModified() + " as " + GetTime());
document.write(" por <br> ")
document.write("@ViewBag.usuarioLogado</div>");
</script>

Answer 2

It’s never a good idea to add content to your screen through document.write() as well as composing its content through concatenation, when it could be using interpolation.

In this case the ideal would be for you to leave an element in html, to function as container or placeholder of this content and change it in the page loading.

window.onload = () => {
  let elemento = document.getElementById("mensagemAtualizacao");
  mostrarUltimaAtualizacao(elemento);
}

function mostrarUltimaAtualizacao(el) {
  let usuarioLogado = '@ViewBag.usuarioLogado';
  let mensagem = `Última Atualização em: <b>${lastModified()}</b> às <b>${GetTime()}</b>, por <b>${usuarioLogado}</b>.`;
  el.innerHTML = mensagem;
  
}

function lastModified() {
  var modiDate = new Date(document.lastModified);
  var showAs = modiDate.getDate() + "-" + (modiDate.getMonth() + 1) + "-" + modiDate.getFullYear();
  return showAs
}

function GetTime() {
  var modiDate = new Date();
  var Seconds

  if (modiDate.getSeconds() < 10) {
    Seconds = "0" + modiDate.getSeconds();
  } else {
    Seconds = modiDate.getSeconds();
  }

  var modiDate = new Date();
  var CurTime = modiDate.getHours() + ":" + modiDate.getFullMinutes() + ":" + Seconds
  return CurTime
}
Date.prototype.getFullMinutes = function() {
  if (this.getMinutes() < 10) {
    return '0' + this.getMinutes();
  }
  return this.getMinutes();
};

<p id="mensagemAtualizacao">teste</p>