| <template> | |
| <div class="home-container"> | |
| <Search v-if="filters" :filters="filters" /> | |
| <Recommendations :dataRec="dataRec" /> | |
| <TabCard :dataFav="dataFav" :topSellers="topSellers" /> | |
| <ModalChat :profileChat="profileChat"/> | |
| </div> | |
| </template> | |
| <script> | |
| import Vue from 'vue' |
| <!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"> | |
| <title>PokeDate</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <link href="https://fonts.googleapis.com/css?family=Open+Sans|Press+Start+2P|Roboto&display=swap" rel="stylesheet"> |
| const pokeday = document.getElementById('pokeday') | |
| const pokebithday = document.getElementById("date-pick"); | |
| const clickbtn = document.getElementById("search-btn") | |
| let userIdPokemon = '' | |
| let userBirthday = null | |
| //Get The user ID with parsing the Date. | |
| const getUserId = () => { | |
| //Get the Value from the input | |
| userBirthday = pokebithday.value |
| //This Function 'watch' if the input is null or a date. | |
| const searchPoke = () => { | |
| getUserId() | |
| if (userBirthday == null || userBirthday == '') { | |
| alert('Selecciona una fecha'); | |
| return false; | |
| } else { | |
| getPokemon() | |
| } | |
| } |
| //Const from date. | |
| const pokebithday = document.getElementById("date-pick"); | |
| //Function to convert date into day Number. | |
| const getUserId = () => { | |
| //Get the Value from the input | |
| let userBirthday = pokebithday.value | |
| // use Date.parse() to convert a string representation of a date, and returns the number of milliseconds. | |
| let parseDate = Date.parse(userBirthday) | |
| //Slice the year from the input and set the fist day of Year. | |
| let startOfYear = userBirthday.slice(0, 4) + '-01-01' |
| //Function to Fetch the API | |
| const getPokemon = () => { | |
| //You can use name, number, type, or ability in the url. | |
| //Example: pokemon/ditto/, pokemon/1/, type/3/ or ability/4/. | |
| fetch(`https://pokeapi.co/api/v2/pokemon/25/`) | |
| .then(response => response.json()) | |
| .then(data => { | |
| console.log(data) | |
| }) | |
| } |
