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>