shorthand-property-names/index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ShortHand Property Names</title>
  <link rel="stylesheet" href="css/styles.css">
</head>

<body>
  <main>
    <h1>
      La mejor. <br>
      Para los mejores
    </h1>
    <div class="hero">
      <div class="wrapper">
        <div class="hero-content">
          <div class="mac"></div>
          <div class="app">
            <p>
              <strong>
                Precio:
              </strong>
              <span id="price">-</span>
            </p>
            <p>
              <strong>
                Precio oferta:
              </strong>
              <span id="offer">-</span>
            </p>
            <p>
              <strong>
                Precio Final:
              </strong>
              <span id="final-price">-</span>
            </p>
            <button class="button" id="make-offer">Regatear</button>
          </div>
        </div>
      </div>
    </div>
  </main>

  <script>
    const price = 2700
    const macbook = {
      price,
      // getPrice: function() {

      // },
      get finalPrice() {
        return this.price * 1.16
      },
      set offer(offer) {
        this.price -= offer
      },
      getPrice() {
        console.log(this.price)
      },
      *discount(offer) {
        let price = this.finalPrice
        while (true) {
          yield price -= offer
        }
      }
    }

    window.price.textContent = macbook.price
    macbook.offer = 500
    window.offer.textContent = macbook.price
    window['final-price'].textContent = macbook.finalPrice

    const makeAnOffer = macbook.discount(15)
    window['make-offer'].addEventListener('click', () => {
      window['final-price'].textContent = makeAnOffer.next().value
    })
  </script>
</body>

</html>