TypeScript

by osuzhang

HTML

<div id="app"></div>
<div id="text">
  <p>Any kind of content here. Such as
  &lt;p&gt;, &lt;table&gt;. You name it!</p>
</div>

<div class="shadowbox">
  <p>Here's a very interesting note displayed in a
  lovely shadowed box.</p>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
  text-align: center;
}

#text {
  background: #fff;
  border-radius: 50px;
  padding: 2px;
  transition: all 1s;
  text-align: top;
}


.shadowbox {
  width: 115em;
  border: 1px solid #333;
  box-shadow: 8px 8px 5px #444;
  padding: 8px 12px;
  background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
}

TypeScript

class Person {
  firstName: string;
  lastName:  string;
}

function greeter(person: Person) {
  return "Hello, " + person.firstName + " " + person.lastName;
}

let user = {
	firstName: "Dean",
  lastName:  "Chang"
};

document.querySelector("#app").innerHTML = greeter(user);