Last course final assignment - Akash Deeep

by Alex Cowan

HTML

<!-- The core Firebase JS SDK is always required and must be listed first -->
 <script src="https://www.gstatic.com/firebasejs/7.14.2/firebase-app.js"></script>
 <script src="https://www.gstatic.com/firebasejs/7.14.2/firebase-auth.js"></script>
 <!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#available-libraries -->
 <script src="https://www.gstatic.com/firebasejs/7.14.2/firebase-analytics.js"></script>


 <script>
   // Your web app's Firebase configuration
   var firebaseConfig = {
     apiKey: "AIzaSyD9VjOmZ4QWyAUi1Me3TPoCdp3Om5h5N2Q",
     authDomain: "hvac-coursera.firebaseapp.com",
     databaseURL: "https://hvac-coursera.firebaseio.com",
     projectId: "hvac-coursera",
     storageBucket: "hvac-coursera.appspot.com",
     messagingSenderId: "438797956683",
     appId: "1:438797956683:web:fc05a3c735c6746375bfce",
     measurementId: "G-5NX59H5013"
   };
   // Initialize Firebase
   firebase.initializeApp(firebaseConfig);
   firebase.analytics();

 </script>

 <div class="top-bar">
   <button id="home" class="menubut">Home </button>
   <button id="partsearch" class="menubut">Partsearch </button>
   <button id="help" class="menubut">Help </button>
   <button id="login" class="loginbut" onclick="handle_auth()" style="width:auto;">Sign-in </button>
 </div>

 <div id="search-page">
   <div id="type-search">
     <div id="search-box">

       Search
       <input id="search-part" type="text" name="parts-search" placeholder="Enter Part Number from {A01,A02,A03,A04}" size=30>

       <div class="image-upload">
         <label for="file-input">
           <img src="https://freepiktures.com/wp-content/uploads/edd/2019/08/Camera-Icon-PNG-715x544.png" alt="PCB board" height="25" width="42" style="vertical-align:bottom" />
         </label>
         <input id="file-input" type="file" />
       </div>



     </div>
   </div>
   <div id="advance-search">
     Advance Search
     <select id="filter-mfr">
    ...

CSS

.top-bar {
  background-color: #002D45;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 110%;
  text-align: center;
}

.menubut {
  background-color: #002D45;
  border: none;
  color: white;
  font-weight: bold;
}

#login {
  float: right;
  background-color: #002D45;
  border: none;
  color: white;
  font-weight: bold;
}

#type-search {
  padding: 30px;
  margin-left: 50px;
}

#search-box1 {
  margin-left: auto;
  margin-right: 0;
  padding: 10px;
}

#search-result {
  margin: 0 auto;
  text-align: center;
}

#search-page {
  margin: 0 auto;
  text-align: center;
}

#search-again {
  border: solid 1px;
  float: right;
  background-color: white;

}

#advance-search {
  margin-left: 50px;
}

.button {
  background-color: #002D45;
  border: #002D45;
  color: white;
  padding: 10px 20px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  left: 250px;
  top: 200px;
  margin-top: 30px;
}

button:hover {
  opacity: 0.8;
}

.catalog-part {
  margin: 2px;
  padding: 0px 5px;
  float: left;
  border-style: solid;
  border-color: #808285;
  border-width: 1px;
  width: 150px;
  height: 200px;
  line-height: 200px;
  display: table-cell;
  position: relative;
  border-top-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  background-color: white;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: 0.5s ease;
  background-color: #f4f4f4;
  display: inline-table;
}

img.part {
  height: 100%;
  width: 100%;
}

#result-filter {
  padding: 20px;
  border-width: 1px;
  border-color: #808285;
}

#result-summary {
  display: inline;
  text-align: center;
  position: absolute;
  left: 50%;
}

#result-display {
  background-color: #ffd2ba;
  display: inline-block;
  margin: 0 auto;
}

#sortby {
  float: left;
}


.image-upload>input {
  display: none;
}

.image-upload {
  display:...

JavaScript

//Link to the example sheet is here: https://docs.google.com/spreadsheets/d/1vhxAiBER8aFJg7MpNnANoLvXq4ETOQQ_qYIf1FFhWEU/edit#gid=0
//Sheet id is: 1vhxAiBER8aFJg7MpNnANoLvXq4ETOQQ_qYIf1FFhWEU

var url = "https://spreadsheets.google.com/feeds/list/1vhxAiBER8aFJg7MpNnANoLvXq4ETOQQ_qYIf1FFhWEU/1/public/values?alt\u003djson";

$.getJSON(url, function(data) {
  var output = "";
  $.each(data.feed.entry, function(index, value) {
    var $partsDiv = $("<div/>");
    $partsDiv.addClass('catalog-part');
      $partsDiv.attr({
      'number': value.gsx$partnumber.$t,
      'Image_URL': value.gsx$imageurl.$t,
      'mfr': value.gsx$manufacturer.$t,
      'model': value.gsx$model.$t,
      'part': value.gsx$type.$t,
      'Price': value.gsx$price.$t,
      'Availability': value.gsx$availability.$t,
      'Orders_T30_Days': value.gsx$orderst30days.$t
    });

    var imgurl = value.gsx$imageurl.$t;
    var img = $('<img />').attr({
      'src': (imgurl)
    })

    $partsDiv.prepend(img);
    // $('#parts-content').prepend(output);
    $('#parts-content').append($partsDiv);
  });
});


$("#search-page").hide(); //default view after clicking on run
  $("#result-page").hide();
  $("#home-page").show();
  $("#help-page").hide();

  $("#home").click(function() { //what happens when you click on Home in the topbar
    $("#search-page").hide();
    $("#result-page").hide();
    $("#home-page").show();
    $("#help-page").hide();
  });
  $("#partsearch").click(function() { //screen to show after clicking partsearch
    $("#search-page").show();
    $("#result-page").hide();
    $("#home-page").hide();
    $("#help-page").hide();
  });
  $("#help").click(function() { //screen to show after clicking on help in topbar
    $("#search-page").hide();
    $("#result-page").hide();
    $("#home-page").hide();
    $("#help-page").show();
  });
  $("#submit-btn").click(function() { //clicking on submit button
    $("#search-page").hide();
    $("#result-page").show();
   ...