<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <title>OOJS: Task 2</title>
    <link rel="stylesheet" href="../styles.css" />
  </head>

  <body>

    <section class="preview">

    </section>

  </body>
</html>
      p {
        color: purple;
        margin: 0.5em 0;
      }

      * {
        box-sizing: border-box;
      }

class Shape {

    name;
    sides;
    sideLength;
    
    constructor(name, sides, sideLength) {
        this.name = name;
        this.sides = sides;
        this.sideLength = sideLength;
    }
    calcPerimeter() {
        const perimeter = `${this.sideLength * this.sides}`;
            console.log(`The perimeter of this ${this.name} is ${perimeter}`);
        }
    }

class Square extends Shape {
     
    constructor(sideLength){
       super('square',4,sideLength)
    }
    
    calcArea() {
      const area = `${this.sideLength * this.sideLength}`;
      console.log(`This is a ${this.name} and its area is ${area}`);
    }
}

const checkShape = new Square(10);
checkShape.calcArea();
checkShape.calcPerimeter();
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.