MDN OOJS3 Skill test

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<p id=display>Hello World</p>
  
</body>
</html>

JavaScript

class Shape{
  constructor(name,sides,sideLength){
    this.name = name;
    this.sides = sides;
    this.sideLength = sideLength;
  }
  calcPerimeter(){
    return this.sides * this.sideLength
  }
}

class Square extends Shape {
  constructor(sideLength){
    super(); //super(sideLength) console.log(square) gives { name: 'square', sides: 4, sideLength: undefined }

  this.name = 'square';
  this.sides = 4;
  this.sideLength = sideLength;
  }

  calcArea(){
  return this.sideLength * this.sideLength
  }
}
let square = new Square(5)


const paragraph = document.getElementById('display');
paragraph.textContent ='calc area: ' + square.calcArea() + ' calc peri: ' + square.calcPerimeter()