|
| 1 | +<!DOCTYPE html> |
| 2 | +<html lang="en"> |
| 3 | + |
| 4 | + <head> |
| 5 | + <meta charset="UTF-8"> |
| 6 | + <meta name="viewport" content="width=device-width,initial-scale=1.0"> |
| 7 | + <title>New, This, Prototypes and Classes</title> |
| 8 | + <link rel="stylesheet" href="../base.css"> |
| 9 | + </head> |
| 10 | + |
| 11 | + <body> |
| 12 | + <button class="one">Button 1</button> |
| 13 | + <button class="two">Button 2</button> |
| 14 | + <script> |
| 15 | + const myDate = new Date('August 11, 2025'); |
| 16 | + console.dir(myDate); |
| 17 | + console.log(myDate.getFullYear()); |
| 18 | + |
| 19 | + const names = new Array('wes', 'kait'); |
| 20 | + const wes = new Object({ name: 'wes' }); |
| 21 | + const span = document.createElement('span'); |
| 22 | + |
| 23 | + String.prototype.sarcastic = function () { |
| 24 | + // make sarcastic |
| 25 | + return [...this].map((char, i) => char[`to${i % 2 ? 'Upper' : 'Lower'}Case`]()).join(''); |
| 26 | + const sarcastic = this.split('').map((char, i) => { |
| 27 | + if (i % 2) { |
| 28 | + return char.toUpperCase(); |
| 29 | + } else { |
| 30 | + return char.toLowerCase(); |
| 31 | + } |
| 32 | + }).join(''); |
| 33 | + return sarcastic; |
| 34 | + } |
| 35 | + function Pizza(toppings = [], customer) { |
| 36 | + console.log('Making a pizza'); |
| 37 | + // save the toppings that were passed in, to this instance of pizza |
| 38 | + this.toppings = toppings; |
| 39 | + this.customer = customer; |
| 40 | + this.id = Math.floor(Math.random() * 16777215).toString(16); |
| 41 | + this.slices = 10; |
| 42 | + // this.eat = function () { |
| 43 | + // if (this.slices > 0) { |
| 44 | + // this.slices = this.slices - 1; |
| 45 | + // console.log(`CHOMP you now have ${this.slices} left!`); |
| 46 | + // } else { |
| 47 | + // console.log(`Sorry! No slices left!`); |
| 48 | + // } |
| 49 | + // } |
| 50 | + } |
| 51 | + |
| 52 | + Pizza.prototype.eat = function () { |
| 53 | + if (this.slices > 0) { |
| 54 | + this.slices = this.slices - 1; |
| 55 | + console.log(`CHOMP you now have ${this.slices} left!`); |
| 56 | + } else { |
| 57 | + console.log(`Sorry! No slices left!`); |
| 58 | + } |
| 59 | + } |
| 60 | + |
| 61 | + Pizza.prototype.describe = function () { |
| 62 | + return `This pizza is for ${this.customer} with the toppings ${this.toppings.join(',')} and there are ${this.slices} left!`; |
| 63 | + } |
| 64 | + |
| 65 | + const pepperoniPizza = new Pizza(['pepperoni'], 'Wes Bos'); |
| 66 | + const canadianPizza = new Pizza(['pepperoni', 'mushrooms', 'onion'], 'Kait Bos'); |
| 67 | + |
| 68 | + |
| 69 | + // const button1 = document.querySelector('.one'); |
| 70 | + // const button2 = document.querySelector('.two'); |
| 71 | + |
| 72 | + // function tellMeAboutTheButton() { |
| 73 | + // console.log('outside', this); |
| 74 | + // setTimeout(() => { |
| 75 | + // console.log('inside', this); |
| 76 | + // this.textContent = 'You Clicked Me'; |
| 77 | + // }, 1000); |
| 78 | + // } |
| 79 | + |
| 80 | + // button1.addEventListener('click', tellMeAboutTheButton); |
| 81 | + // button2.addEventListener('click', tellMeAboutTheButton); |
| 82 | + |
| 83 | + |
| 84 | + |
| 85 | + |
| 86 | + </script> |
| 87 | + </body> |
| 88 | + |
| 89 | +</html> |
0 commit comments