Created
January 10, 2019 16:37
-
-
Save GasparCorrea/fb1080fcb9a59b57e7fda559bbcf196f to your computer and use it in GitHub Desktop.
Anitime
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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) | |
)) | |
} | |
} | |
}) | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<title>Anime Time</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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@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); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment