diff --git a/APIManager.js b/APIManager.js index 493c6d60..fb52ad2e 100644 --- a/APIManager.js +++ b/APIManager.js @@ -1,7 +1,39 @@ -//This is the class that will manage all your APIs - -class APIManager { +class APIManager +{ constructor() { this.data = {} + this.currentUser = {} + + } + + fetchData() + { + const numberUsers = 7 + + const randomUserApi = `https://randomuser.me/api/?results=${numberUsers}` + const kanyeApi = 'https://api.kanye.rest/' + const pokemonApi = `https://pokeapi.co/api/v2/pokemon/${Math.floor(Math.random() * 950)}` + const meatApi = 'https://baconipsum.com/api/?type=meat' + + return Promise.all([ + + $.get(randomUserApi), + $.get(kanyeApi), + $.get(pokemonApi), + $.get(meatApi) + ]).then(data => + { + const users = data[0] + this.data = { + meanUser: users.results[0], + kanyeQuote: data[1].quote, + pokemon: data[2], + meat: data[3][0], + friends: users.results.slice(1) + } + + }) } + } + diff --git a/Renderer.js b/Renderer.js index 6c2cb903..bc230966 100644 --- a/Renderer.js +++ b/Renderer.js @@ -1,4 +1,33 @@ - class Renderer { + + renderContent(classHTML, ID, data) { + const source = $(`#${ID}`).html() + const template = Handlebars.compile(source) + const newHTML = template(data) + $(`.${classHTML}`).html(newHTML) + } + + renderMainUser(userobject) { + this.renderContent('user-container', 'meanUser-template', userobject) + } + + renderQuote(quote) { + this.renderContent('quote-container', 'quote-template', { quote }) + } + + renderPokemon(pokemon) { + this.renderContent('pokemon-container', 'pokemon-template', { pokemon }) + } + + renderMeat(meat) { + this.renderContent('meat-container', 'meat-template', { meat }) + } + + renderFriends(friends) { + this.renderContent('friends-container', 'friends-template', { friends }) + } -} \ No newline at end of file + rendersaveFriends(items) { + this.renderContent('saveFriends-container', 'saveFriends-template', { items }) + } +} diff --git a/index.html b/index.html index c27bda4e..7243cdba 100644 --- a/index.html +++ b/index.html @@ -4,31 +4,77 @@ API Project + - - + + + + + - -
-
-
-
-
-
-
-
-

Friends

-
-
-
-
- - -
+
+ +
+ + + +
+ +
- - + +
+
+
+
+
+
+

Friends

+
+
+
+
+ + + + + +
+
+ + + + + + + + + + + \ No newline at end of file diff --git a/main.js b/main.js index e69de29b..bf5d7a10 100644 --- a/main.js +++ b/main.js @@ -0,0 +1,68 @@ + + +const apiManager = new APIManager() +const render = new Renderer() + +let currentData = JSON.parse(localStorage.getItem('userData')) || [] +let savedFirendsData = JSON.parse(localStorage.getItem('firendsData')) || [] +let items = [] +$(document).on("click", "#btnGen", function () { + + + apiManager.fetchData().then(() => { + render.renderMainUser(apiManager.data.meanUser) + render.renderQuote(apiManager.data.kanyeQuote) + render.renderPokemon(apiManager.data.pokemon) + render.renderMeat(apiManager.data.meat) + render.renderFriends(apiManager.data.friends) + render.rendersaveFriends(items) + }) + +} +) +$(document).on("click", "#btnSave", function () { + currentData = apiManager.data + localStorage.setItem('userData', JSON.stringify(currentData)) +}) +$(document).on("click", "#btnLoad", function () { + + render.renderMainUser(currentData.meanUser) + render.renderQuote(currentData.kanyeQuote) + render.renderPokemon(currentData.pokemon) + render.renderMeat(currentData.meat) + render.renderFriends(currentData.friends) + render.rendersaveFriends(items) + +}) +$(document).on("click", "#btnSavedFirends", function () { + + + items.push(apiManager.data) + localStorage.setItem('firendsData', JSON.stringify(items)) + render.rendersaveFriends(items) + +}) + +$(document).on("click", ".renderObject", function () { + const index = $(this).data("index") + const item = items[index] + + render.renderMainUser(item.meanUser) + render.renderQuote(item.kanyeQuote) + render.renderPokemon(item.pokemon) + render.renderMeat(item.meat) + render.renderFriends(item.friends) + + +}) + +apiManager.fetchData().then(() => { + + render.renderMainUser(apiManager.data.meanUser) + render.renderQuote(apiManager.data.kanyeQuote) + render.renderPokemon(apiManager.data.pokemon) + render.renderMeat(apiManager.data.meat) + render.renderFriends(apiManager.data.friends) + render.rendersaveFriends(apiManager.items) +}) + diff --git a/style.css b/style.css index 8ed298e7..63f44c55 100644 --- a/style.css +++ b/style.css @@ -21,7 +21,7 @@ body { grid-row: 1; grid-column: 1; font-size: 25px; - background-color: #3498db; + background-color: #3498db; padding: 1vmax; box-shadow: 1px 1px 3px black; border-bottom-right-radius: 4px; @@ -33,14 +33,15 @@ body { vertical-align: middle; } -#profile-pic { + #profile-pic { display: inline-block; width: 100px; height: 100px; border-radius: 50%; background-size: 100%; vertical-align: middle; -} + +} .quote-container { grid-row: 2; @@ -126,3 +127,38 @@ button { padding: 1vw; font-size: 1vmax; } + +.dropdown { + position: relative; + display: inline-block; + } + + .dropdown button { + background-color: #177b28; + color: white; + border: none; + cursor: pointer; + } + + .dropdown:hover .dropdown-content { + display: block; + } + + .dropdown-content { + display: none; + } + + .dropdown-content li { + padding: 5px 5px; + width: 50px; + cursor: pointer; + } + + .dropdown-content li:hover { + + background-color: #60d8e8; + } + + .dropdown-content:empty { + display: none; + } \ No newline at end of file