Html Question posted in
Some basic documentation can be found here.

Html – I can't get my pyramid to display correctly

The following code is supposed to generate a pyramid but for some odd reason when I output it on my page it doesn’t look anything like a pyramid. It displays properly in the console but not on the page itself. I tried flex but to no avail.

I tried using flex on the wincon variable which is for the viewport__display but I didn’t get a pyramid, I also tried putting the result in a div using template literals but i couldn’t figure out how to style it from there.

const view = document.getElementById("viewport");
const wincon = document.getElementById("viewport__display");
const genbtn = document.getElementById("viewport__btn");
const character = "!";
const count = 20;
const rows = [];
let inverted = false;

function padRow(rowNumber, rowCount) {
  return (
    " ".repeat(rowCount - rowNumber) +
    character.repeat(2 * rowNumber - 1) +
    " ".repeat(rowCount - rowNumber)
  );
}

for (let i = 1; i <= count; i++) {
  if (inverted) {
    rows.unshift(padRow(i, count));
  } else {
    rows.push(padRow(i, count));
  }
}

let result = "";

for (const row of rows) {
  result = result + "n" + row;
}

const output = result;

genbtn.addEventListener("click", () => {
  wincon.innerHTML = output;
});
@import url("https://fonts.googleapis.com/css2?family=Radio+Canada+Big:ital,wght@0,400..700;1,400..700&display=swap");
body {
  font-family: "Radio Canada Big", sans-serif;
  text-align: center;
  background-color: #ffffff96;
  display: flex;
  flex-flow: column nowrap;
  margin: 0;
  padding: 0;
}

h1 {
  background-color: rgb(0, 187, 255);
}

#viewport {
  width: 500px;
  height: 500px;
  background-color: black;
  margin-left: 400px;
  padding: 10px;
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-start;
}

#viewport__display {
  width: 350px;
  height: 350px;
  border: 2px solid red;
  margin-left: 80px;
  margin-top: 30px;
  background-color: rgba(221, 221, 215, 0.902);
}

#viewport__btn {
  width: 200px;
  height: 40px;
  margin-top: 10px;
  margin-left: 160px;
  background-color: orange;
  font-size: 20px;
  font-weight: 700;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="styles.css" />
  <title>Pyramid Generator</title>
</head>

<body>
  <h1>Pyramid Generator</h1>
  <div id="viewport">
    <div id="viewport__display"></div>
    <button id="viewport__btn">Generate</button>
  </div>
  <script src="script.js"></script>
</body>

</html>
Tags:

2

Answers


  1. 0

    Correct two things:

    1- use &nbsp; instead of space character. Multiple spaces are interpreted as a single space.

    2- use <br> instead of n.

    const view = document.getElementById("viewport");
const wincon = document.getElementById("viewport__display");
const genbtn = document.getElementById("viewport__btn");
const character = "!";
const count = 20;
const rows = [];
let inverted = false;

function padRow(rowNumber, rowCount) {
  return (
    '&nbsp;'.repeat(rowCount - rowNumber) +
    character.repeat(2 * rowNumber - 1) +
    '&nbsp;'.repeat(rowCount - rowNumber)
  );
}

for (let i = 1; i <= count; i++) {
  if (inverted) {
    rows.unshift(padRow(i, count));
  } else {
    rows.push(padRow(i, count));
  }
}

let result = "";

for (const row of rows) {
  result = result + "<br>" + row;
}

const output = result;

genbtn.addEventListener("click", () => {
  wincon.innerHTML = output;
});
    @import url("https://fonts.googleapis.com/css2?family=Radio+Canada+Big:ital,wght@0,400..700;1,400..700&display=swap");
body {
  font-family: "Radio Canada Big", sans-serif;
  text-align: center;
  background-color: #ffffff96;
  display: flex;
  flex-flow: column nowrap;
  margin: 0;
  padding: 0;
}

h1 {
  background-color: rgb(0, 187, 255);
}

#viewport {
  width: 500px;
  height: 500px;
  background-color: black;
  margin-left: 400px;
  padding: 10px;
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-start;
}

#viewport__display {
  width: 350px;
  height: 350px;
  border: 2px solid red;
  margin-left: 80px;
  margin-top: 30px;
  background-color: rgba(221, 221, 215, 0.902);
}

#viewport__btn {
  width: 200px;
  height: 40px;
  margin-top: 10px;
  margin-left: 160px;
  background-color: orange;
  font-size: 20px;
  font-weight: 700;
}
    <div id="viewport">
    <div id="viewport__display"></div>
    <button id="viewport__btn">Generate</button>
  </div>
    Login or Signup to reply.
  2. 0

    Add white-space: pre; to the viewport__display

    const view = document.getElementById("viewport");
const wincon = document.getElementById("viewport__display");
const genbtn = document.getElementById("viewport__btn");
const character = "!";
const count = 20;
const rows = [];
let inverted = false;

function padRow(rowNumber, rowCount) {
  return (
    " ".repeat(rowCount - rowNumber) +
    character.repeat(2 * rowNumber - 1) +
    " ".repeat(rowCount - rowNumber)
  );
}

for (let i = 1; i <= count; i++) {
  if (inverted) {
    rows.unshift(padRow(i, count));
  } else {
    rows.push(padRow(i, count));
  }
}

let result = "";

for (const row of rows) {
  result = result + "n" + row;
}

const output = result;

genbtn.addEventListener("click", () => {
  wincon.innerHTML = output;
});
    @import url("https://fonts.googleapis.com/css2?family=Radio+Canada+Big:ital,wght@0,400..700;1,400..700&display=swap");
body {
  font-family: "Radio Canada Big", sans-serif;
  text-align: center;
  background-color: #ffffff96;
  display: flex;
  flex-flow: column nowrap;
  margin: 0;
  padding: 0;
}

h1 {
  background-color: rgb(0, 187, 255);
}

#viewport {
  width: 500px;
  height: 500px;
  background-color: black;
  margin-left: 400px;
  padding: 10px;
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-start;
}

#viewport__display {
  width: 350px;
  height: 350px;
  border: 2px solid red;
  margin-left: 80px;
  margin-top: 30px;
  background-color: rgba(221, 221, 215, 0.902);
  white-space: pre;
}

#viewport__btn {
  width: 200px;
  height: 40px;
  margin-top: 10px;
  margin-left: 160px;
  background-color: orange;
  font-size: 20px;
  font-weight: 700;
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="styles.css" />
  <title>Pyramid Generator</title>
</head>

<body>
  <h1>Pyramid Generator</h1>
  <div id="viewport">
    <div id="viewport__display"></div>
    <button id="viewport__btn">Generate</button>
  </div>
  <script src="script.js"></script>
</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search