test 2018

just to try out jsfiddle again after a long while

by Andy Bulka

HTML

<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout">tutorial on GRID css</a>
<div class="wrapper">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
  <div class="five">Five</div>
  <div class="six">Six</div>
</div>

<h1>My own auto expanding text area</h1>
<div id="container">
  <textarea id="txtarea" cols="50" rows="5">
    text box with padding and margin inside a fixed width div.
    how do I made the text box auto-fit nicely inside the div?
  </textarea>
</div>

CSS

#container {
  background: yellow;
  height: 15em;
  padding:25px;
}
textarea {
  width:100%;
  height: 100%;  
  border:1px solid blue
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}
.wrapper > div {
  border: 2px solid rgb(233,171,88);
  border-radius: 5px;
  background-color: rgba(233,171,88,.5);
  padding: 1em;
  color: #d9480f;
}
.one {
  grid-column: 1 / 3;
  grid-row: 1;
}
.two { 
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}

JavaScript

class A {
	constructor(x, y) {
  	this.x = x
    this.y = y
    this.z = x + y
  }
  report() {
  	console.log('hey OO is cool', this.z)
  }
}

$(document).ready(function () {
  let a = new A(1,2)
	console.log('hi there', a)
  a.report()
})