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

Revisions

  1. leamsigc created this gist Dec 28, 2017.
    190 changes: 190 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,190 @@
    <!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>
    52 changes: 52 additions & 0 deletions jsbin.buxetud.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,52 @@
    *{
    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);
    }
    31 changes: 31 additions & 0 deletions jsbin.buxetud.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,31 @@
    //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