Part 1: Playing with Vue Syntax - SOLUTION

Step 1

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://unpkg.com/vue"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css">
</head>
<body>
<div id="app" class="ui container">
  <h1 class="ui center aligned header">HostelVue</h1>
  <div class="ui cards">


    <div class="card">
      <div class="content">
        <div class="right floated meta">{{ hostel.price.amount }}{{ hostel.price.currency }}</div>
        <div class="header">{{ hostel.name }}</div>
      </div>
      <div class="content">
        <div class="meta">{{ hostel.location }}</div>
        <div class="description">
            {{ hostel.description }}
        </div>
      </div>
    </div>


  </div>
</div>
<script>
var app = new Vue({
  el: '#app',
  data: {
    hostel: {
      name: 'Happy Hostel',
      location: 'Berlin',
      price: {
        amount: 12,
        currency: '€'
      },
      description: 'Laboriosam est doloremque et sunt iure. Tenetur fugiat non ut autem repellat qui qui. Tempore pariatur exercitationem tempora. Laborum ut qui sed enim recusandae voluptas voluptas rerum accusantium.'
    }
  }
})
</script>
</body>
</html>

Step 2

<div id="app" class="ui container">
  <h1 class="ui center aligned header">HostelVue</h1>
  <div class="ui cards">


      <div class="card" v-show="hostel.isActive">
        <div class="content">
          <div class="right floated meta">{{ hostel.price.amount }}{{ hostel.price.currency }}</div>
          <div class="header">{{ hostel.name }}</div>
        </div>
        <div class="content">
          <div class="meta">
            {{ hostel.location }}
            <i v-if="hostel.bonus.hasFreeWifi" class="wifi icon"></i>
            <i v-if="hostel.bonus.hasFreeBreakfast" class="coffee icon"></i>
            <i v-if="hostel.bonus.hasTv" class="desktop icon"></i>
            <i v-if="hostel.bonus.hasBar" class="bar icon"></i>
          </div>
          <div class="description">
              {{ hostel.description }}
          </div>
        </div>
        <div v-if="hostel.availability" class="ui orange bottom attached button">
          Book now
        </div>
        <div v-else class="ui bottom attached disabled button">
          Too late!
        </div>
      </div>


  </div>
</div>
<script>
var app = new Vue({
  el: '#app',
  data: {
    hostel: {
      name: 'Happy Hostel',
      location: 'Berlin',
      price: {
        amount: 12,
        currency: '€'
      },
      description: 'Laboriosam est doloremque et sunt iure. Tenetur fugiat non ut autem repellat qui qui. Tempore pariatur exercitationem tempora. Laborum ut qui sed enim recusandae voluptas voluptas rerum accusantium.',
      bonus: {
        hasFreeWifi: false,
        hasTv: false,
        hasFreeBreakfast: false,
        hasBar: true
      },
      rating: 88,
      availability: false,
      isActive: true
    }
  }
})
</script>

Step 3

<div id="app" class="ui container">
  <h1 class="ui center aligned header">HostelVue</h1>
  <div class="ui cards">


      <div class="card" v-for="hostel in hostels" v-show="hostel.isActive">
        <div class="content">
          <div class="right floated meta">{{ hostel.price.amount }}{{ hostel.price.currency }}</div>
          <div class="header">{{ hostel.name }}</div>
        </div>
        <div class="content">
          <div class="meta">
            {{ hostel.location }}
            <i v-if="hostel.bonus.hasFreeWifi" class="wifi icon"></i>
            <i v-if="hostel.bonus.hasFreeBreakfast" class="coffee icon"></i>
            <i v-if="hostel.bonus.hasTv" class="desktop icon"></i>
            <i v-if="hostel.bonus.hasBar" class="bar icon"></i>
          </div>
          <div class="description">
              {{ hostel.description }}
          </div>
        </div>
        <div v-if="hostel.availability" class="ui orange bottom attached button">
          Book now
        </div>
        <div v-else class="ui bottom attached disabled button">
          Too late!
        </div>
      </div>


  </div>
</div>
<script>
var app = new Vue({
  el: '#app',
  data: {
    hostels: [{
      name: 'Happy Hostel',
      location: 'Berlin',
      price: {
        amount: 12,
        currency: '€'
      },
      description: 'Laboriosam est doloremque et sunt iure. Tenetur fugiat non ut autem repellat qui qui. Tempore pariatur exercitationem tempora. Laborum ut qui sed enim recusandae voluptas voluptas rerum accusantium.',
      bonus: {
        hasFreeWifi: false,
        hasTv: false,
        hasFreeBreakfast: false,
        hasBar: true
      },
      rating: 88,
      availability: true,
      isActive: true
    },{
      name: 'WunderLand',
      location: 'Dublin',
      price: {
        amount: 24,
        currency: '€'
      },
      description: 'Nulla vero eveniet autem perferendis. Esse est itaque esse assumenda odit enim. Perspiciatis non omnis fugit officia omnis quia distinctio consequatur voluptatem. Necessitatibus ipsa sunt autem ducimus facilis.',
      bonus: {
        hasFreeWifi: true,
        hasTv: true,
        hasFreeBreakfast: false,
        hasBar: true
      },
      rating: 95,
      availability: true,
      isActive: true
    },{
      name: 'Unknown Hostel',
      location: 'Dublin',
      price: {
        amount: 24,
        currency: '€'
      },
      description: 'Repellat et aliquid sit ab nemo et qui veniam dignissimos. Ducimus explicabo ut. Error expedita commodi. Nihil in est voluptatem molestiae consequatur rerum ex.',
      bonus: {
        hasFreeWifi: true,
        hasTv: false,
        hasFreeBreakfast: false,
        hasBar: true
      },
      rating: 77,
      availability: true,
      isActive: false
    },{
      name: 'Medium Hostel',
      location: 'Berlin',
      price: {
        amount: 5,
        currency: '€'
      },
      description: 'Aliquid id ad optio dignissimos modi.',
      bonus: {
        hasFreeWifi: false,
        hasTv: true,
        hasFreeBreakfast: false,
        hasBar: false
      },
      rating: 54,
      availability: true,
      isActive: true
    }]
  }
})
</script>

Step Bonus

<div id="app" class="ui container">
  <h1 class="ui center aligned header">HostelVue</h1>

  <form class="ui form">
    <div class="field">
      <input type="text" placeholder="filter by name" v-model="userSearch">
    </div>
  </form>
  <br>

  <div class="ui cards">
    <div class="card" v-for="hostel in hostelsShown" v-show="hostel.isActive">
      <div class="content">
        <div class="right floated meta">{{ hostel.price.amount }}{{ hostel.price.currency }}</div>
        <div class="header">{{ hostel.name }}</div>
      </div>
      <div class="content">
        <div class="meta">
          {{ hostel.location }}
          <i v-if="hostel.bonus.hasFreeWifi" class="wifi icon"></i>
          <i v-if="hostel.bonus.hasFreeBreakfast" class="coffee icon"></i>
          <i v-if="hostel.bonus.hasTv" class="desktop icon"></i>
          <i v-if="hostel.bonus.hasBar" class="bar icon"></i>
        </div>
        <div class="description">
            {{ hostel.description }}
        </div>
      </div>
      <div v-if="hostel.availability" class="ui orange bottom attached button">
        Book now
      </div>
      <div v-else class="ui bottom attached disabled button">
        Too late!
      </div>
    </div>


  </div>
</div>
<script>
var app = new Vue({
  el: '#app',
  data: {
    userSearch: '',
    hostels: [{
      name: 'Happy Hostel',
      location: 'Berlin',
      price: {
        amount: 12,
        currency: '€'
      },
      description: 'Laboriosam est doloremque et sunt iure. Tenetur fugiat non ut autem repellat qui qui. Tempore pariatur exercitationem tempora. Laborum ut qui sed enim recusandae voluptas voluptas rerum accusantium.',
      bonus: {
        hasFreeWifi: false,
        hasTv: false,
        hasFreeBreakfast: false,
        hasBar: true
      },
      rating: 88,
      availability: true,
      isActive: true
    },{
      name: 'WunderLand',
      location: 'Dublin',
      price: {
        amount: 24,
        currency: '€'
      },
      description: 'Nulla vero eveniet autem perferendis. Esse est itaque esse assumenda odit enim. Perspiciatis non omnis fugit officia omnis quia distinctio consequatur voluptatem. Necessitatibus ipsa sunt autem ducimus facilis.',
      bonus: {
        hasFreeWifi: true,
        hasTv: true,
        hasFreeBreakfast: false,
        hasBar: true
      },
      rating: 95,
      availability: true,
      isActive: true
    },{
      name: 'Unknown Hostel',
      location: 'Dublin',
      price: {
        amount: 24,
        currency: '€'
      },
      description: 'Repellat et aliquid sit ab nemo et qui veniam dignissimos. Ducimus explicabo ut. Error expedita commodi. Nihil in est voluptatem molestiae consequatur rerum ex.',
      bonus: {
        hasFreeWifi: true,
        hasTv: false,
        hasFreeBreakfast: false,
        hasBar: true
      },
      rating: 77,
      availability: true,
      isActive: false
    },{
      name: 'Medium Hostel',
      location: 'Berlin',
      price: {
        amount: 5,
        currency: '€'
      },
      description: 'Aliquid id ad optio dignissimos modi.',
      bonus: {
        hasFreeWifi: false,
        hasTv: true,
        hasFreeBreakfast: false,
        hasBar: false
      },
      rating: 54,
      availability: true,
      isActive: true
    }]
  },
  computed: {
    hostelsShown () {
      return this.hostels.filter(hostel => hostel.name.toLowerCase().includes(this.userSearch))
    }
  }
})
</script>

results matching ""

    No results matching ""