Elevationacademy · zakgarchad22 · Dec 7, 2023 · Dec 10, 2023 · Dec 12, 2023
diff --git 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
@@ -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 })
+  }
 
-}
+  rendersaveFriends(items) {
+    this.renderContent('saveFriends-container', 'saveFriends-template', { items })
+  }
+}
diff --git a/index.html b/index.html
@@ -4,31 +4,77 @@
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <title>API Project</title>
+    <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
-    <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
-
+    <script src="https://code.jquery.com/jquery-3.3.1.js" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.js"></script>
+    <script src="renderer.js"></script>
+    <script src="APIManager.js"></script>
+    <script src="main.js"></script>
 </head>
-
 <body>
-    <div class="container">	
-        <div class="user-container"></div>	
-        <div class="quote-container"></div>	
-        <div class="content-container">	
-            <div class="pokemon-container"></div>	
-            <div class="meat-container"></div>	
-        </div>	
-        <div class="friends">	
-            <h4>Friends</h4>	
-            <div class="friends-container">	
-            </div>	
-        </div>	
-        <div class="buttons">	
-            <button>Load User Data</button>	
-            <button>Display User</button>	
-        </div>	
+  <div class="container">
+
+    <div class="user-container"></div>
+
+
+
+    <div class="dropdown">
+        <button id="btnToggleDropdown">Friends</button>
+        <div class="saveFriends-container dropdown-content"></div>
     </div>
-</body>
 
-</html>
+
+    <div class="quote-container"></div>	
+    <div class="content-container">	
+        <div class="pokemon-container"></div>	
+        <div class="meat-container"></div>	
+    </div>	
+    <div class="friends">	
+        <h4>Friends</h4>	
+        <div class="friends-container">	
+        </div>	
+    </div>	
+    <div class="buttons">	
+        <button id="btnGen">Generate User</button>
+        <button id="btnSave">Save User Page</button>
+        <button id="btnLoad">Load User Page</button>
+        <button id="btnSavedFirends">Saved friends</button>
+
+    </div>	
+  </div>
+
+
+  <script id="meanUser-template" type="text/x-handlebars-template">
+    <img src="{{picture.medium}}" id="profile-pic">
+    {{name.first}} {{name.last}}
+
+  </script>
+      <script id="quote-template" type="text/x-handlebars-template">
+        <p>Favorite quote : </p> {{quote}}
+    </script>
+    <script id="pokemon-template" type="text/x-handlebars-template">
+        <img src="{{pokemon.sprites.back_default}}" id="pokemon-image">
+        <div id="pokemon-text">{{pokemon.name}}</div>
+
+    </script>
+    <script id="meat-template" type="text/x-handlebars-template">
+        <div id="meat-text">About me</div>
+        <p>{{meat}}</p>
+    </script>
+    <script id="friends-template" type="text/x-handlebars-template">
+        {{#each friends}}
+            <p>{{name.first}} {{name.last}}</p>
+        {{/each}}
+    </script>
+    <script id="saveFriends-template" type="text/x-handlebars-template">
+
+        {{#each items}}
+            <li class="renderObject" data-index="{{@index}}">{{this.meanUser.name.first}}</li>
+        {{/each}}
+    </script>
+
+</body>
+</html>
diff --git 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
@@ -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;
+  }