Anitime

.block

height: 1000
border: yes

App.js

var request = new XMLHttpRequest();

function get_time(duration){
    console.log(duration);
    let total = 0;
    if (duration.includes(" min per ep") ){
        total = parseInt(duration.replace(" min. per ep.",""), 10);
        console.log("yes");
    }
    return total;
}
Vue.component('anime-select', {
    props:["preview","title","episodes","id"],
    data: function(){
        return {
            back:false,
            watched: 0
        }
    },
    template: `<div class="flip-card">
                <div class="flip-card-inner" v-bind:class="{ flip: back }">
                    <div class="anime-box flip-card-front" v-on:click="toogle">
                        <img class="anime-img" v-bind:src="preview"/>
                        <h3 class="anime-title">{{title}}</h3>
                    </div>
                    <div class="episodes-box flip-card-back">
                        <h3>How many episodes have you watched?</h3>
                        <div class="four-column-grid">
                            <h3 class="btn" v-on:click="substract">-</h3><h3 class="eps">{{watched}}/{{episodes}}</h3><h3 class="btn" v-on:click="add">+</h3>
                        </div>
                            <div class="two-column-grid bottom">
                                <h3 class="btn" v-on:click="toogle">Cancel</h3><h3 v-on:click="add_anime" class="btn" >Add</h3>
                            </div>
                    </div>
                </div>
              </div>`,
    methods: {
        toogle : function(){
            this.back = !this.back;
        },
        add: function(){
            if(this.watched<this.episodes){
                this.watched = this.watched+1;
            }
        },
        substract: function(){
            if(this.watched>0){
                this.watched = this.watched-1;
            }
        },
        add_anime: function(){
            let obj = {"id":this.id,"watched":this.watched};
            this.$emit("add",this.id,this.watched);
            this.toogle();
        }
    }
  })

  Vue.component('anime-added', {
    props:["id","title","preview","watched","duration"],
    data: function(){
        return {
            back:false
        }
    },
    template: `<div class="flip-card">
                <div class="flip-card-inner" v-bind:class="{ flip: back }">
                    <div class="anime-box flip-card-front" v-on:click="toogle">
                        <img class="anime-img" v-bind:src="preview"/>
                        <h3 class="anime-title">{{title}}</h3>
                    </div>
                <div class="episodes-box flip-card-back">
                    <h3>You have spent {{duration*watched}} minutes watching {{title}}</h3>
                    <div class="two-column-grid bottom">
                        <h3 class="btn" v-on:click="toogle">Delete</h3>
                    </div>
                </div>
                </div>
                </div>`,
    methods: {
        toogle : function(){
            this.back = !this.back;
        }
    }
  })

var app = new Vue({
    el: '#app',
    data: {
      search: '',
      animes: null,
      added: [],
      total:0,
      submited: false,
      last_search: null
    },
    methods: {
        submit: function (e) {
            this.anime = null;
            this.submited = true;
            this.last_search = this.search;
            axios
            .get('https://api.jikan.moe/v3/search/anime?q='+this.search+"&limit=15")
            .then(response => (this.animes = response["data"]["results"]))
        },
        add: function(id,watched){
            axios
            .get('https://api.jikan.moe/v3/anime/'+id)
            .then(response => (
                obj = new Object,
                obj["title"] = response["data"]["title"],
                obj["watched"] = watched,
                obj["preview"] = response["data"]["image_url"],
                obj["duration"] = get_time(response["data"]["duration"]),
                this.total = this.total + obj["duration"]*watched,
                this.added.push(obj)
            ))
        }
      }
  })

index.html

<html lang="en">

<head>
    <meta charset="utf-8">
    <title>AniTime</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
</head>

<body>
    <div class="container" id="app">
        <nav>
            <h3 class="title">How much time have you <strike>wasted</strike> spent watching anime?</h3>
            <a class="title align-right" href="http://">
                <h3>About</h3>
            </a>
        </nav>
        <form v-on:submit.prevent="submit">
            <input v-model="search" type="text" placeholder="What animes have you watched?">
        </form>
        <div class="two-column-grid">
            <div class="left-column">
                <h4 class="results" v-if="submited">Results for {{last_search}}</h4>
                <div class="grid-container">
                    <template v-for="anime in animes">
                        <anime-select v-on:add="add" v-bind:id=anime.mal_id v-bind:title=anime.title v-bind:episodes=anime.episodes
                            v-bind:preview=anime.image_url />
                    </template>
                </div>
            </div>
            <div class="right-column"> 
                <h4 class="results">You have added {{added.length}} animes to your list <span v-if="total>0">and you have spent {{total}} minutes watching anime</span></h4>
                <div class="grid-container">
                    <template v-for="(anime,index) in added">
                        <anime-added v-bind:id=index v-bind:title=anime.title v-bind:watched=anime.watched
                            v-bind:preview=anime.preview v-bind:duration=anime.duration></anime-added>
                    </template>
                </div>
            </div>
        </div>

    </div>
</body>
<script src="App.js"></script>
</html>

style.css

@import url('https://fonts.googleapis.com/css?family=Lato');

body{
    background: linear-gradient(to right, #4762F0, #44A5E5) repeat scroll 0% 0%;
    font-family: 'Lato', sans-serif;
}

nav{
    display: flex;
}
.row{
    display: flex;
    align-items: center;
}

.two-column-grid{
    display: grid;
    grid-template-columns: 50% 50%;
}
.left-column{
    margin-right: 50px; 
}

.right-column{
    margin-left: 50px; 
}
.four-column-grid{
    display: grid;
    grid-template-columns: 25% 50% 25%;
}
.flex{
    display: flex;
}
.grid-container{
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(120px, 1fr));
}

.anime-title{
    background-color: rgba(0,0,0,.5);
    width: 100%;
    position: absolute;
    bottom: 10px;
    
}

.anime-box:hover{
    font-size:14px !important;
}

.anime-box{
    color: white ;
    position: relative;
    border-radius: 5px;
    font-size: 10px;
    text-align: center;
    transition-property: font-size;
    transition-duration: 0.3s;
    box-shadow: 5px 5px 5px black;
    border-radius: 5px;
    cursor: pointer;
}

.episodes-box{
    color: white ;
    position: relative;
    border-radius: 5px;
    font-size: 10px;
    text-align: center;
    border-radius: 5px;
    box-shadow: 5px 5px 5px black;
}

.anime-img{
  width: 100%;
  height: 100%;
  border-radius: 5px;
}

.container{
    width: 80%;
    margin: 0 auto;
}

input{
    width: 100%;
    font-size: 18px;
}

.title{
    color: white;
    flex-grow: 1;
}

.eps{
    vertical-align: middle;
    font-size: 14px;
}
.btn{
    font-size:14px;
    cursor: pointer;
}
.results{
    color: white;
}


.align-right{
    text-align: right;
}

.flip-card {
    background-color: transparent;
    height: 200px;
    margin: 5px;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
  }
  
  /* This container is needed to position the front and back side */
  .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
  }
  
  /* Do an horizontal flip when you move the mouse over the flip box container */
  .flip {
    transform: rotateY(180deg);
  }

  .no-flip{
      transform: rotateY(180deg);
  }
  
  /* Position the front and back side */
  .flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 5px;
  }
  
  /* Style the back side */
  .flip-card-back {
    background-color: #44A5E5;
    transform: rotateY(180deg);
  }