HTML CSS JS - Triangle Pattern - Inverted Triangle Tower

HTML CSS JS - Triangle Pattern - Inverted Triangle Tower - THINHPHAM

Author - thinhphamvn

June 29, 2023

HTML CSS JS - Triangle Pattern - Inverted Triangle Tower - THINHPHAM

Result

Code

Rewrite the code according to the image below

If it doesn’t work, don’t worry, you can refer to the code below:

  <!--
  ThinhPham Youtube Channel
  youtube.com/thinhphamvn
  -->
  <!DOCTYPE html>
  <html>
  <head>
    <title>
      Triangle Pattern 9 -
      Inverted Triangle Tower
    </title>
    <link
      rel="stylesheet" 
      href="style.css"
    >
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #000c18;
        color: greenyellow;
        text-shadow: 0px 0px 8px
        greenyellow;
        font-size: 20px;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <script>
      let n = 9;
      let string = "";
      for (let i = n; i >= 1; i--) {
        for (let j = n; j >= 1; j--) {
          if (i >= j) {
            if (j % 2 == 0) {
              string += "* ";
            }
            else {
              string += "# ";
            }
          }
          else {
            string += " ";
          }
        }
        string += "<br>";
      }
      document.write(
        `<pre>${string}</pre>`);
  </script>
  </body>
  </html>

<!--
  ThinhPham Youtube Channel
  youtube.com/thinhphamvn
-->
<!DOCTYPE html>
<html>
<head>
  <title>
    Triangle Pattern 9 -
    Inverted Triangle Tower
  </title>
  <link
    rel="stylesheet" 
    href="style.css"
  >
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #000c18;
      color: greenyellow;
      text-shadow: 0px 0px 8px
      greenyellow;
      font-size: 20px;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <script>
    let n = 9;
    let string = "";
    for (let i = n; i >= 1; i--) {
      for (let j = n; j >= 1; j--) {
        if (i >= j) {
          if (j % 2 == 0) {
            string += "* ";
          }
          else {
            string += "# ";
          }
        }
        else {
          string += " ";
        }
      }
      string += "<br>";
    }
    document.write(
      `<pre>${string}</pre>`);
</script>
</body>
</html>