Vue Jokes

by Renan Ribeiro Brando

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
<div id="app">
  <div class="container" v-for="joke in jokes">
    <joke :joke="joke"/>
  </div>
  <button @click="getJoke" text="Add Joke">Add Joke</button>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

.container {
  margin: 16px;
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 300px;
  margin: 0 auto;
  padding: 16px;
  text-align: center;
  font-family: arial;
}

button {
  border: none;
  outline: 0;
  padding: 12px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: 100%;
  font-size: 18px;
}

button:hover {
  opacity: 0.7;
}

.joke {
  margin: 16px;
}

Vue

Vue.component('joke', {
	props:["joke"],
  data: {
  
  },
  template: `
  	<div class="card">
      <img :src="joke.icon_url" alt="Chuck Icon" style="width:20%">
      <h1>#FunJoke</h1>
      <p class="joke">{{joke.value}}</p>
      <p><button @click="destroy">Remove</button></p>
    </div>
  `,
  methods: {
  	removeTextBlock () {
      this.$emit('remove', this.joke.id);
    },
  }
});

new Vue({
  el: "#app",
  data: {
    jokes: [], 
  },
  methods: {
  	getJoke: function(){
    	axios.get("https://api.chucknorris.io/jokes/random").then((response)=>{
      this.jokes.push(response.data);
      })
    },
    removeJoke: function(toRemove){
    	for (joke of this.jokes){
      	if(joke.id == toRemove.id )
        	this.jokes.slice(this.jokes, this.jokes.findIndex((a)=>{
          		return a == joke.id
          	})
          )
      }
    }
  }
})