Skip to content

Instantly share code, notes, and snippets.

@leamsigc

leamsigc/index.html

Created December 28, 2017 03:39
Show Gist options
  • Save leamsigc/9df2ac144263e96066238d9527c56e1f to your computer and use it in GitHub Desktop.
Save leamsigc/9df2ac144263e96066238d9527c56e1f to your computer and use it in GitHub Desktop.
Download ZIP
Prototype inheritance // source https://jsbin.com/buxetud
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Prototype inheritance</title>
<style id="jsbin-css">
*{
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html ,
body{
font-size:16px;
font-family: 'Lato', sans-serif;
background: tomato;
color: #f2f2f2;
text-align: center;
min-height: 100vh;
}
body{
display: flex;
justify-content: center;
align-items: center;
padding: 0 10px;
}
h1{
background: yellow;
color:#333;
text-transform: uppercase;
font-weight: 800;
font-size: 1.5rem;
line-height: 150%;
-webkit-transition: all 0.5s ;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s ;
-o-transition: all 0.5s ;
transition: all 0.5s;
}
.container{
padding: 40px;
outline: #fff 1px solid;
border-radius:5px;
overflow: hidden;
}
.container:hover h1{
background: #333;
color:yellow;
font-size: 1.6rem;
-webkit-transform:scale(1.2) rotate(1turn) ;
-moz-transform:scale(1.2) rotate(1turn) ;
-ms-transform: scale(1.2) rotate(1turn);
-o-transform: scale(1.2) rotate(1turn);
transform: scale(1.2) rotate(1turn);
}
</style>
</head>
<body>
<div class="container">
<h1>Prototype Inheritance !</h1>
</div>
<script id="jsbin-javascript">
//Person constructor
function Person(firstName,lastName){
this.firstName = firstName;
this.lastName = lastName;
}
//person greating
Person.prototype.greeting = function(){
return `Welcome to the the jungle ${this.firstName} ${this.lastName}`;
}
const ismael = new Person('ismael','Garcia');
console.log(ismael);
console.log(ismael.greeting());
//costumer contructor
function Costumer(firtsName,lastName,phone,member){
Person.call(this,firtsName,lastName);
//always the first parameter is this and then we call the stuff that we nedd
this.phone = phone;
this.member = member;
}
//create a costumer
// const costumer
</script>
<script id="jsbin-source-css" type="text/css">*{
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html ,
body{
font-size:16px;
font-family: 'Lato', sans-serif;
background: tomato;
color: #f2f2f2;
text-align: center;
min-height: 100vh;
}
body{
display: flex;
justify-content: center;
align-items: center;
padding: 0 10px;
}
h1{
background: yellow;
color:#333;
text-transform: uppercase;
font-weight: 800;
font-size: 1.5rem;
line-height: 150%;
-webkit-transition: all 0.5s ;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s ;
-o-transition: all 0.5s ;
transition: all 0.5s;
}
.container{
padding: 40px;
outline: #fff 1px solid;
border-radius:5px;
overflow: hidden;
}
.container:hover h1{
background: #333;
color:yellow;
font-size: 1.6rem;
-webkit-transform:scale(1.2) rotate(1turn) ;
-moz-transform:scale(1.2) rotate(1turn) ;
-ms-transform: scale(1.2) rotate(1turn);
-o-transform: scale(1.2) rotate(1turn);
transform: scale(1.2) rotate(1turn);
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">//Person constructor
function Person(firstName,lastName){
this.firstName = firstName;
this.lastName = lastName;
}
//person greating
Person.prototype.greeting = function(){
return `Welcome to the the jungle ${this.firstName} ${this.lastName}`;
}
const ismael = new Person('ismael','Garcia');
console.log(ismael);
console.log(ismael.greeting());
//costumer contructor
function Costumer(firtsName,lastName,phone,member){
Person.call(this,firtsName,lastName);
//always the first parameter is this and then we call the stuff that we nedd
this.phone = phone;
this.member = member;
}
//create a costumer
// const costumer</script></body>
</html>
Raw
jsbin.buxetud.css
*{
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html ,
body{
font-size:16px;
font-family: 'Lato', sans-serif;
background: tomato;
color: #f2f2f2;
text-align: center;
min-height: 100vh;
}
body{
display: flex;
justify-content: center;
align-items: center;
padding: 0 10px;
}
h1{
background: yellow;
color:#333;
text-transform: uppercase;
font-weight: 800;
font-size: 1.5rem;
line-height: 150%;
-webkit-transition: all 0.5s ;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s ;
-o-transition: all 0.5s ;
transition: all 0.5s;
}
.container{
padding: 40px;
outline: #fff 1px solid;
border-radius:5px;
overflow: hidden;
}
.container:hover h1{
background: #333;
color:yellow;
font-size: 1.6rem;
-webkit-transform:scale(1.2) rotate(1turn) ;
-moz-transform:scale(1.2) rotate(1turn) ;
-ms-transform: scale(1.2) rotate(1turn);
-o-transform: scale(1.2) rotate(1turn);
transform: scale(1.2) rotate(1turn);
}
Raw
jsbin.buxetud.js
//Person constructor
function Person(firstName,lastName){
this.firstName = firstName;
this.lastName = lastName;
}
//person greating
Person.prototype.greeting = function(){
return `Welcome to the the jungle ${this.firstName} ${this.lastName}`;
}
const ismael = new Person('ismael','Garcia');
console.log(ismael);
console.log(ismael.greeting());
//costumer contructor
function Costumer(firtsName,lastName,phone,member){
Person.call(this,firtsName,lastName);
//always the first parameter is this and then we call the stuff that we nedd
this.phone = phone;
this.member = member;
}
//create a costumer
// const costumer
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment