JSFiddle - React, Tailwind, and code Playground

by Keyboardguy

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <title>OOJS: Task 2</title>
    <style>
      p {
        color: purple;
        margin: 0.5em 0;
      }

      * {
        box-sizing: border-box;
      }
    </style>
    <link rel="stylesheet" href="../styles.css" />
  </head>

  <body>

    <section class="preview">



    </section>

  </body>
  <script>

  </script>

</html>

JavaScript

class Shape {

  name;
  sides;
  sideLength;

  constructor(name, sides, sideLength) {
    this.name = name;
    this.sides = sides;
    this.sideLength = sideLength;
  }
  
  calcPerimeter() {
    console.log(this.sides * this.sideLength);
  }
}

class Square extends Shape {
  sideLength;

  constructor(sideLength, name="square", sides=4) {
    super(name, sides);
    this.sideLength = sideLength;
  }
  
  calcArea() {
    console.log(this.sideLength * this.sideLength);
  }
}

const square = new Square(5);

square.calcArea();
square.calcPerimeter();