Object-Oriented JavaScript Playground

In this example below you will see how to do a Object-Oriented JavaScript Playground with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by 0degreesk, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 0degreesk ©
  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Object-Oriented JavaScript Playground</title>
  
  
  
  
  
</head>

<body>

  
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/0degreesk/object-oriented-javascript-playground-ERapJN */
class Owner {
  constructor(name,address) {
    this.name = name;
    this.address = address;
  }
  
  get phone() {
    return this._phone;
  }
  
  set phone(phone) {
    const phoneNormalized = phone.replace(/[^0-9]/g, '');
    this._phone = phoneNormalized;
  }
}     

class Pet {
        constructor(animal,age,breed,sound) {
          this.animal = animal;
          this.age = age;
          this.breed = breed;
          this.sound = sound;
        }

        get activity() {
          const today = new Date();
          const hour = today.getHours();
          if (hour > 8 && hour <= 20) {
            return 'playing';
          } else {
            return 'sleeping';
          }
        }
        
        get owner() {
          return this._owner;
        }
        
        set owner(owner) {
          this._owner = owner;
          console.log(`setting called: ${owner.name}`);
        }
        
        speak() {
          console.log(this.sound);
        }
      }

const arais = new Pet('cat',5,'white','meow');
arais.owner = new Owner('Robbie','Akron, Ohio');
arais.owner.phone = '330-687-5983';
console.log(arais.owner);


/*
console.log(arais);
console.log(arais.activity);
arais.speak();
arais.speak;
arais.owner = 'Robbie';
console.log(arais.owner);
*/

Comments