From 0ece818774a5a9cca2b82b4d41e5fbdcdef0a1af Mon Sep 17 00:00:00 2001 From: zakgarchad22 Date: Thu, 7 Dec 2023 23:30:25 +0200 Subject: [PATCH 1/3] api practice completed 07/12 23:30 --- APIManager.js | 30 ++++++++++++++++++++++-- Renderer.js | 36 +++++++++++++++++++++++++++- index.html | 65 +++++++++++++++++++++++++++++++++++---------------- main.js | 14 +++++++++++ style.css | 2 +- 5 files changed, 123 insertions(+), 24 deletions(-) diff --git a/APIManager.js b/APIManager.js index 493c6d60..5bcb9372 100644 --- a/APIManager.js +++ b/APIManager.js @@ -1,7 +1,33 @@ //This is the class that will manage all your APIs -class APIManager { +class APIManager +{ constructor() { this.data = {} } -} + + fetchData(callback) + { + Promise.all([ + $.get('https://randomuser.me/api/?results=7'), + $.get('https://api.kanye.rest/'), + $.get(`https://pokeapi.co/api/v2/pokemon/${Math.floor(Math.random() * 950)}`), + $.get('https://baconipsum.com/api/?type=meat') + ]).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) + } + + if(callback){ + callback(this.data) + } + + }) + } +} \ No newline at end of file diff --git a/Renderer.js b/Renderer.js index 6c2cb903..ffdc5e92 100644 --- a/Renderer.js +++ b/Renderer.js @@ -1,4 +1,38 @@ class Renderer { + renderMainUser(userobject) { + const source = $("#meanUser-template").html() + const template = Handlebars.compile(source) + const newHTML = template( userobject ) + $(".user-container").html(newHTML) + } -} \ No newline at end of file + renderQuote(quote) { + const source = $("#quote-template").html() + const template = Handlebars.compile(source) + const newHTML = template({ quote }) + $(".quote-container").html(newHTML) + } + + renderPokemon(pokemon) { + const source = $("#pokemon-template").html() + const template = Handlebars.compile(source) + const newHTML = template({pokemon }) + $(".pokemon-container").html(newHTML) + } + renderMeat(meat) { + const source = $("#meat-template").html() + const template = Handlebars.compile(source) + const newHTML = template({meat}) + $(".meat-container").html(newHTML) + } + + renderFriends(friends) { + const source = $("#friends-template").html() + const template = Handlebars.compile(source) + const newHTML = template({ friends }) + $(".friends-container").html(newHTML) + } + } + + \ No newline at end of file diff --git a/index.html b/index.html index c27bda4e..9c5db0e8 100644 --- a/index.html +++ b/index.html @@ -8,27 +8,52 @@ - + + + + + - -
-
-
-
-
-
-
-
-

Friends

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

Friends

+
-
- +
+
+ + +
+
+ - + + + + + + + \ No newline at end of file diff --git a/main.js b/main.js index e69de29b..046781d8 100644 --- a/main.js +++ b/main.js @@ -0,0 +1,14 @@ + + +const apiManager = new APIManager() +const render = new Renderer() + +//callback function +apiManager.fetchData(function(data){ + + render.renderMainUser(data.meanUser) + render.renderQuote(data.kanyeQuote) + render.renderPokemon(data.pokemon) + render.renderMeat(data.meat) + render.renderFriends(data.friends) +}) \ No newline at end of file diff --git a/style.css b/style.css index 8ed298e7..2be3906f 100644 --- a/style.css +++ b/style.css @@ -125,4 +125,4 @@ button { .meat-text { padding: 1vw; font-size: 1vmax; -} +} \ No newline at end of file From 61c7516a947ca0cc53ce14913a86b3161727114a Mon Sep 17 00:00:00 2001 From: zakgarchad22 Date: Sun, 10 Dec 2023 13:54:51 +0200 Subject: [PATCH 2/3] add some extensions --- APIManager.js | 17 +++++++++++--- Renderer.js | 11 ++++++++- index.html | 27 +++++++++++++++++++--- main.js | 64 ++++++++++++++++++++++++++++++++++++++++++++++++--- style.css | 44 +++++++++++++++++++++++++++++++---- 5 files changed, 149 insertions(+), 14 deletions(-) diff --git a/APIManager.js b/APIManager.js index 5bcb9372..17a33fef 100644 --- a/APIManager.js +++ b/APIManager.js @@ -1,9 +1,8 @@ -//This is the class that will manage all your APIs - class APIManager { constructor() { this.data = {} + this.saves = {} } fetchData(callback) @@ -23,11 +22,23 @@ class APIManager meat: data[3][0], friends: users.results.slice(1) } - + this.saveNewData() if(callback){ callback(this.data) } }) } + getData() + { + return this.saves + } + saveNewData() + { + this.saves = this.data + + + } + + } \ No newline at end of file diff --git a/Renderer.js b/Renderer.js index ffdc5e92..ce45db18 100644 --- a/Renderer.js +++ b/Renderer.js @@ -1,5 +1,7 @@ class Renderer { + + renderMainUser(userobject) { const source = $("#meanUser-template").html() const template = Handlebars.compile(source) @@ -30,9 +32,16 @@ class Renderer { renderFriends(friends) { const source = $("#friends-template").html() const template = Handlebars.compile(source) - const newHTML = template({ friends }) + const newHTML = template({ friends }) $(".friends-container").html(newHTML) } + + rendersaveFriends(items) { + const source = $("#saveFriends-template").html() + const template = Handlebars.compile(source) + const newHTML = template({items}) + $(".saveFriends-container").html(newHTML) + } } \ No newline at end of file diff --git a/index.html b/index.html index 9c5db0e8..7243cdba 100644 --- a/index.html +++ b/index.html @@ -4,10 +4,10 @@ API Project + - @@ -16,7 +16,17 @@
+
+ + + +
+ +
+
+ +
@@ -28,8 +38,11 @@

Friends

- - + + + + +
@@ -37,6 +50,7 @@

Friends

+ + \ No newline at end of file diff --git a/main.js b/main.js index 046781d8..3ab96b21 100644 --- a/main.js +++ b/main.js @@ -3,12 +3,70 @@ const apiManager = new APIManager() const render = new Renderer() -//callback function -apiManager.fetchData(function(data){ +let currentData = JSON.parse(localStorage.getItem('userData')) || [] +let savedFirendsData = JSON.parse(localStorage.getItem('firendsData')) || [] +let items = [] +$(document).on("click", "#btnGen", function () { + + + apiManager.fetchData(function(data){ + + render.renderMainUser(data.meanUser) + render.renderQuote(data.kanyeQuote) + render.renderPokemon(data.pokemon) + render.renderMeat(data.meat) + render.renderFriends(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(function(data){ + render.renderMainUser(data.meanUser) render.renderQuote(data.kanyeQuote) render.renderPokemon(data.pokemon) render.renderMeat(data.meat) render.renderFriends(data.friends) -}) \ No newline at end of file + render.rendersaveFriends(items) +}) + diff --git a/style.css b/style.css index 2be3906f..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; @@ -125,4 +126,39 @@ button { .meat-text { padding: 1vw; font-size: 1vmax; -} \ No newline at end of file +} + +.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 From 060bf631335ee3ffb967bda0335d28ba0453d342 Mon Sep 17 00:00:00 2001 From: zakgarchad22 Date: Tue, 12 Dec 2023 14:00:41 +0200 Subject: [PATCH 3/3] add some fix and clean code --- APIManager.js | 41 ++++++++++++++----------------- Renderer.js | 68 ++++++++++++++++++++------------------------------- main.js | 34 ++++++++++++-------------- 3 files changed, 60 insertions(+), 83 deletions(-) diff --git a/APIManager.js b/APIManager.js index 17a33fef..fb52ad2e 100644 --- a/APIManager.js +++ b/APIManager.js @@ -2,16 +2,25 @@ class APIManager { constructor() { this.data = {} - this.saves = {} + this.currentUser = {} + } - fetchData(callback) + fetchData() { - Promise.all([ - $.get('https://randomuser.me/api/?results=7'), - $.get('https://api.kanye.rest/'), - $.get(`https://pokeapi.co/api/v2/pokemon/${Math.floor(Math.random() * 950)}`), - $.get('https://baconipsum.com/api/?type=meat') + 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] @@ -22,23 +31,9 @@ class APIManager meat: data[3][0], friends: users.results.slice(1) } - this.saveNewData() - if(callback){ - callback(this.data) - } - + }) } - getData() - { - return this.saves - } - saveNewData() - { - this.saves = this.data - - - } +} -} \ No newline at end of file diff --git a/Renderer.js b/Renderer.js index ce45db18..bc230966 100644 --- a/Renderer.js +++ b/Renderer.js @@ -1,47 +1,33 @@ - class Renderer { - - renderMainUser(userobject) { - const source = $("#meanUser-template").html() - const template = Handlebars.compile(source) - const newHTML = template( userobject ) - $(".user-container").html(newHTML) - } + renderContent(classHTML, ID, data) { + const source = $(`#${ID}`).html() + const template = Handlebars.compile(source) + const newHTML = template(data) + $(`.${classHTML}`).html(newHTML) + } - renderQuote(quote) { - const source = $("#quote-template").html() - const template = Handlebars.compile(source) - const newHTML = template({ quote }) - $(".quote-container").html(newHTML) - } - - renderPokemon(pokemon) { - const source = $("#pokemon-template").html() - const template = Handlebars.compile(source) - const newHTML = template({pokemon }) - $(".pokemon-container").html(newHTML) - } - renderMeat(meat) { - const source = $("#meat-template").html() - const template = Handlebars.compile(source) - const newHTML = template({meat}) - $(".meat-container").html(newHTML) - } + renderMainUser(userobject) { + this.renderContent('user-container', 'meanUser-template', userobject) + } - renderFriends(friends) { - const source = $("#friends-template").html() - const template = Handlebars.compile(source) - const newHTML = template({ friends }) - $(".friends-container").html(newHTML) - } + renderQuote(quote) { + this.renderContent('quote-container', 'quote-template', { quote }) + } - rendersaveFriends(items) { - const source = $("#saveFriends-template").html() - const template = Handlebars.compile(source) - const newHTML = template({items}) - $(".saveFriends-container").html(newHTML) - } + renderPokemon(pokemon) { + this.renderContent('pokemon-container', 'pokemon-template', { pokemon }) } - - \ No newline at end of file + + renderMeat(meat) { + this.renderContent('meat-container', 'meat-template', { meat }) + } + + renderFriends(friends) { + this.renderContent('friends-container', 'friends-template', { friends }) + } + + rendersaveFriends(items) { + this.renderContent('saveFriends-container', 'saveFriends-template', { items }) + } +} diff --git a/main.js b/main.js index 3ab96b21..bf5d7a10 100644 --- a/main.js +++ b/main.js @@ -9,19 +9,17 @@ let items = [] $(document).on("click", "#btnGen", function () { - apiManager.fetchData(function(data){ - - render.renderMainUser(data.meanUser) - render.renderQuote(data.kanyeQuote) - render.renderPokemon(data.pokemon) - render.renderMeat(data.meat) - render.renderFriends(data.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(items) }) -}) - - +} +) $(document).on("click", "#btnSave", function () { currentData = apiManager.data localStorage.setItem('userData', JSON.stringify(currentData)) @@ -58,15 +56,13 @@ $(document).on("click", ".renderObject", function () { }) +apiManager.fetchData().then(() => { - -apiManager.fetchData(function(data){ - - render.renderMainUser(data.meanUser) - render.renderQuote(data.kanyeQuote) - render.renderPokemon(data.pokemon) - render.renderMeat(data.meat) - render.renderFriends(data.friends) - render.rendersaveFriends(items) + 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) })