toggle heart fully function

seagda · Jan 6, 2021 · a2cb067 · a2cb067
1 parent 94ea366
commit a2cb067
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 22 deletions.
diff --git a/assets/css/article.css b/assets/css/article.css
@@ -53,10 +53,19 @@
 
 .card-content {
     height: 350px;
-    overflow: hidden;
+    overflow-y: scroll;
     display: inline-block;
 }
 
+.card-content::-webkit-scrollbar {
+    width: 0 !important
+}
+
+.card-content {
+    overflow: -moz-scrollbars-none;
+    -ms-overflow-style: none;
+}
+
 .card .card-content .card-title {
     margin-bottom: 0;
 }

diff --git a/assets/css/beer.css b/assets/css/beer.css
@@ -91,7 +91,17 @@
 
 .detail-info {
   height: 250px;
-  overflow-y: hidden;
+  overflow-y: scroll;
+  padding-bottom: 20px;
+}
+
+.detail-info::-webkit-scrollbar { 
+  width: 0 !important 
+}
+
+.detail-info { 
+  overflow: -moz-scrollbars-none; 
+  -ms-overflow-style: none;
 }
 
 .card .card-reveal {

diff --git a/assets/html/beer.html b/assets/html/beer.html
@@ -79,8 +79,8 @@
     <section class="container">
         <section class="nav-content center">
             <ul class="tabs tabs-transparent">
-                <li class="tab"><a class="active" href="#card-container">Find Beer</a></li>
-                <li class="tab"><a href="#my-beer">My Beer</a></li>
+                <li class="tab"><a class="active" id="find-beer-tab" href="#card-container">Find Beer</a></li>
+                <li class="tab"><a id="my-beer-tab" href="#my-beer">My Beer</a></li>
             </ul>
         </section>
         <section class="preloader-wrapper active">

diff --git a/assets/script/beer.js b/assets/script/beer.js
@@ -1,7 +1,6 @@
 $(document).ready(function () {
     var beerStyle;
     var queryURLBeer = `https://data.opendatasoft.com/api/records/1.0/search/?dataset=open-beer-database%40public-us&`;
-    var storedBeerStyle = localStorage.getItem("stored beer style")
     var listBeers = JSON.parse(localStorage.getItem("savedBeer"));
     var listIds = JSON.parse(localStorage.getItem("savedId"));
 
@@ -24,10 +23,20 @@ $(document).ready(function () {
         $('select').formSelect();
     });
 
-    var storedBeer = localStorage.getItem("stored beer")
-
     $(".beer-btn").click(function (event) {
         event.preventDefault();
+        $("#find-beer-tab").addClass("active");
+        $("#card-container").addClass("active");
+        $("#card-container").css("display", "block");
+
+        $(".indicator").css("left", "402px");
+        $(".indicator").css("right", "501px");
+        $(".indicator").css("-webkit-transition", "all 0.6s ease");
+
+        $("#my-beer-tab").removeClass("active");
+        $("#my-beer").removeClass("active");
+        $("#my-beer").css("display", "none");
+
         $(".preloader-wrapper").removeClass("hidden");
         localStorage.setItem("stored beer style", beerStyle);
 
@@ -55,11 +64,31 @@ $(document).ready(function () {
         }
     });
 
-    $(document).on('click', '.fa-heart', function () {
-        console.log("click");
+    $("#my-beer-tab").click(function () {
+        $("#find-beer-tab").removeClass("active");
+        $("#card-container").removeClass("active");
+        $("#card-container").css("display", "none");
+
+        $(".indicator").css("left", "511px");
+        $(".indicator").css("right", "402px");
+        $(".indicator").css("-webkit-transition", "all 0.6s ease");
+
+        $("#my-beer-tab").addClass("active");
+        $("#my-beer").addClass("active");
+        $("#my-beer").css("display", "block");
+    })
+
+    $(document).on("click", ".fa-heart", function () {
         saveBeer($(this));
     });
 
+    // $(document).on("click", ".beer-brewery", function () {
+    //     var brewerName = $(this).text();
+    //     window.location.href = "brewery.html";
+    //     var queryURLBrewery = `https://api.openbrewerydb.org/breweries?by_name=${brewerName}`;
+
+    // });
+
     function fetchAPI(url) {
         $.ajax({
             url: url,
@@ -82,11 +111,10 @@ $(document).ready(function () {
             url: queryURLBeer,
             method: "GET"
         }).then(function (response) {
-            savedBeer = response.records[beerIndex];
-            var beerId = savedBeer.fields.id;
-            var inArr = $.inArray(beerId, listIds);
-
             if (state === "unsave") {
+                savedBeer = response.records[beerIndex];
+                var beerId = savedBeer.fields.id;
+                var inArr = $.inArray(beerId, listIds);
                 var savedIcon = selectedBeer.attr("data-saved");
 
                 selectedBeer.attr("class", savedIcon);
@@ -102,15 +130,15 @@ $(document).ready(function () {
                     }
                 }
             } else {
+                var removedId = listIds[beerIndex];
+                var inArr = $.inArray(removedId, listIds);
                 var unsaveIcon = selectedBeer.attr("data-unsave");
 
                 selectedBeer.attr("class", unsaveIcon);
                 selectedBeer.attr("data-state", "unsave");
 
                 if (inArr !== -1) {
-                    var index = jQuery.inArray(beerId, listIds);
-                    var removedId = listIds[index];
-                    listIds.splice(index, 1);
+                    listIds.splice(beerIndex, 1);
                     for (var i = 0; i < listBeers.length; i++) {
                         if (removedId === listBeers[i].beerId) {
                             listBeers.splice(i, 1);
@@ -241,13 +269,14 @@ $(document).ready(function () {
 
 
         //  append brewery info and link to brewery.html
-        var beerBrewery = $("<a class='link' target='_blank'>").addClass("beer-brewery");
+        var beerBrewery;
         if (cardInfo.fields.name_breweries === undefined) {
             beerBrewery.text(`No brewery on file for ${cardInfo.fields.name}`)
         } else {
-            beerBrewery.text(cardInfo.fields.name_breweries);
-            beerBrewery.attr("href", "brewery.html");
+            beerBrewery = $(`<button class="link beer-brewery" target="_blank">${cardInfo.fields.name_breweries}</button>`);
+            // beerBrewery.attr("href", "brewery.html");
         };
+        // beerBrewery.text(cardInfo.fields.name_breweries);
         beerDetail.append($("<p class='sub'>Brewery: </p>"));
         beerDetail.append(beerBrewery);
     }

diff --git a/assets/script/brewery.js b/assets/script/brewery.js
@@ -7,6 +7,8 @@ $(document).ready(function () {
     breweryState = $(this).val();
   });
 
+  $('select').formSelect();
+
   $(".brewery-btn").click(function (event) {
     event.preventDefault();
     $(".preloader-wrapper").removeClass("hidden");
@@ -40,18 +42,16 @@ $(document).ready(function () {
     }
   });
 
-  $('select').formSelect();
-
   function fetchAPI(url) {
     $.ajax({
       url: url,
       method: "GET"
     }).then(function (response) {
+      console.log(response);
       $(".preloader-wrapper").addClass("hidden");
       for (var i = 0; i < response.length; i++) {
 
         var card = $("<section>").addClass("card horizontal");
-        var cardImage = $("<section>").addClass("card-image");
         var cardStacked = $("<section>").addClass("card-stacked");
         var cardContent = $("<section>").addClass("card-content");