Challenge #276 [Easy] Recktangles

by Bruno Moreira

HTML

<body>
  <div style="position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 100%; height: 100%;">
    <div style="width: auto; height: auto; border: none; padding-top: 10%; text-align: center;">
      <pre id="console"></pre>
    </div>
    <button id="input" type="button">INPUT</button>
    <button id="rotate" type="button">ROTATE 45º</button>
  </div>
</body>

CSS

body {
  width: 100%;
  height: 100%;
  margin: 0;
}

#console {
  color: #373b41;
  font-family: Monospace;
  font-size: 20pt;
  -webkit-transition: all 0.5s;
}

button {
  position: absolute;
  bottom: 10px;
  background-color: #111;
  border: none;
  border-radius: 3px;
  color: #fff;
  padding: 5px;
}

#input {
  right: 10px;
}

#rotate {
  right: 70px;
}

.rotate {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
}

JavaScript

function log(message) {
  document.getElementById("console").innerHTML = message;
}

document.getElementById("input").addEventListener("click", () => {
  let word, width, height, result = [];

  word = prompt("Enter the desired word.").toUpperCase();
  width = parseInt(prompt("Enter the desired width."));
  height = parseInt(prompt("Enter the desired height."));

  let chars = word.split("");

  result[0] = chars.join(" ");

  for (let i = 1; i < chars.length - 1; i++) {
    result[i] = chars[i] + " ".repeat(chars.join(" ").length - 2) + chars[chars.length - 1 - i];
  }

  result[chars.length - 1] = chars.reverse().join(" ");

  for (let i = 1; i < width; i++) {
    for (let k = 0; k < result.length; k++) {
      result[k] += result[k].split("").reverse().join("").substring(1, chars.join(" ").length);
    }
  }

  for (let i = 1; i < height; i++) {
    let length = result.length;
    for (let k = 0; k < word.length; k++) {
      result[length - 1 + k] = result[length - 1 - k];
    }
  }

  log(result.join("\n"));
});

document.getElementById("rotate").addEventListener("click", () => {
  if (document.getElementById("rotate").innerHTML === "REVERT") {
    document.getElementById("console").className = "";
    document.getElementById("rotate").innerHTML = "ROTATE 45º"
  } else {
    document.getElementById("console").className = "rotate";
    document.getElementById("rotate").innerHTML = "REVERT";
  }
});