Lab: Shape Up

by Christy

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Lab: Shape Up</title>
    <!-- link css -->
  </head>

  <body>
    <div class="container">
      <div class="rectangle">
        <div>
          <input type="number" placeholder="enter height">
          <input type="number" placeholder="enter width">
          <button id="rbtn">Insert</button>
        </div>
      </div>
      <div class="square">
        <div>
          <input type="number" placeholder="enter side length">
          <button id="sbtn">Insert</button>
        </div>
      </div>
      <div class="circle">
        <div>
          <input type="number" placeholder="enter radius">
          <button id="cbtn">Insert</button>
        </div>
      </div>
      <div class="isosc">
        <div>
          <input type="number" placeholder="enter height">
          <button id='ibtn'>Insert</button>
        </div>
      </div>
			
			
			<ul class="list-group">
  <li class="list-group-item active" id="shape name">Cras justo odio</li>
  <li class="list-group-item" id="width">Dapibus ac facilisis in</li>
  <li class="list-group-item" id="height">Morbi leo risus</li>
  <li class="list-group-item" id="radius">Porta ac consectetur ac</li>
  <li class="list-group-item" id="area">Vestibulum at eros</li>
	<li class="list-group-item" id="perimeter">Vestibulum at eros</li>
</ul>
			
    </div>


    <!-- script jQuery  -->
    <!-- script js -->
  </body>

</html>

CSS

.container {
	width: 600px;
	height: 600px;
	background-color: lightgrey;
}

.rectangle {
  width: 200px;
  height: 100px;
  background: red;
  float: left;
  display: flex;
  align-items: center;
  justify-content: center;
}

.square {
  height: 100px;
  background: yellow;
  float: left;
  display: flex;
  align-items: center;
  justify-content: center;
}

.circle {
  width: 100px;
  height: 100px;
  background: blue;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  float: left;
  display: flex;
  align-items: center;
  justify-content: center;
}

.isosc {
  width: 0;
  height: 0;
  border-bottom: 100px solid green;
  border-right: 100px solid transparent;
  float: left;
  display: flex;
  align-items: center;
  justify-content: center;
}

input {
  display: block;
}

button {}

JavaScript

$(document).ready(function() {



  $("input[placeholder]").each(function() {
    $(this).attr('size', $(this).attr('placeholder').length);
  });


	class Shape (height){
		this.height = height
	}

	class Circle extends Shape (height) {
		super
		
	}
	
	class Square extends Shape(height){
	
	}
	
	class Rectangle extends Shape (height, width) {
		super
		this.width = width
	}

	class Isosceles extends Shape (height) {
		
	}


})