Making Stuff Happen with Javascript (Prototype 4)
This supports a software dev. class for businesspeople that you can find here: https://www.alexandercowan.com/making-html-manageable And a case you can find here: https://www.alexandercowan.com/making-html-manageable
by sk8wt
HTML
<script src="https://www.gstatic.com/firebasejs/4.12.0/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyACTvbOPsMoV4EoTN_vxi-Nq8ribbtFy5o",
authDomain: "fir-auth-demo-6a122.firebaseapp.com",
databaseURL: "https://fir-auth-demo-6a122.firebaseio.com",
projectId: "fir-auth-demo-6a122",
storageBucket: "fir-auth-demo-6a122.appspot.com",
messagingSenderId: "569930070547"
};
firebase.initializeApp(config);
</script>
<div class="top-bar">
<ul class="nav-list">
<li><a href="#">Home</a></li>
<li><a href="#">Parts</a></li>
<li><a href="#">Search</a></li>
<li><a href="#">Help</a></li>
<li id="test"><a href="#">Login</a></li>
</ul>
<div id="search-box">
<input type="text" name="parts-search" placeholder="Mfg., Model, or Part Number" size=30>
</div>
</div>
<div id="toggle-search">
<img src="https://www.alexandercowan.com/wp-content/uploads/2018/01/show-hide-icon.png" alt="search control toggle">
</div>
<div id="search-controls">
<div id="result-sort">
Sort By
<select>
<option value="None">Popularity</option>
<option value="Acme">Price</option>
<option value="Bacme">Manufacturer</option>
</select>
</div>
<div id="filter-parts">
Search By
<select id="dd-mfr">
<option value="All">Manufacturer</option>
<option value="Acme">Acme</option>
<option value="Bacme">Bacme</option>
<option value="Cacme">Cacme</option>
<option value="Dacme">Dacme</option>
</select>
<select id="dd-model">
<option value="All">Model</option>
<option value="TooCool">TooCool</option>
<option value="TooHot">TooHot</option>
<option value="JustRight">JustRight</option>
<option value="Coolerator">Coolerator</option>
</select>
<select>
<option value="All">Type</option>
<option value="Sniggler">Sniggler</option>
<option value="Wiggler">Wiggler</option>
<option value="Jiggler">Jiggler</option>
<option...CSS
.top-bar, #search-box, .nav-list li, .nav-list a {
background-color: #002D45;
font-family:Proxima Nova,helvetica neue,helvetica,sans-serif;
font-weight: bold;
font-size: 110%;
color: #ffffff;
}
.top-bar {
color: #FFFFFF;
height: 40px;
margin: 0px;
padding: 10px;
display: flex;
align-items: center;
}
.nav-list {
list-style-type: none;
padding: 0;
display: inline;
}
.nav-list li {
float: left;
}
.nav-list a {
display: inline;
padding: 8px;
text-decoration: none;
}
#search-box {
margin-left:auto;
margin-right:0;
padding: 10px;
}
#toggle-search {
position: relative;
padding: 5px 0px;
height: 100%;
width: 100%;
}
#toggle-search img {
margin-left: 94%;
}
#search-controls {
background-color: #ffffff;
padding: 5px 15px 15px 15px;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-size: 70%;
display: flex;
align-items: center;
}
#filter-parts {
float: right;
margin-left: auto;
margin-right: 0;
padding-right: 5px;
}
.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;
}
.catalog-part img {
height: auto;
vertical-align: middle;
width: 100%;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #f4f4f4;
display: inline-table;
}
.catalog-part:hover .overlay {
opacity: .75;
}
p {
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
line-height: 1;
overflow: scroll;
}
.catalog-part p {
vertical-align: middle;
text-align: center;
color: black;
display: table-cell;
vertical-align: middle;
font-size: 80%;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
}JavaScript
//Code That Deals with Users Signing In
$("#test").on("click", function() {
var user = firebase.auth().currentUser;
//for more on this function, see https://firebase.google.com/docs/auth/web/manage-users for a reference on this (section: 'Get the currently signed-in user')
if (!user) {
//if the user variable is null/false, then …
var username = prompt("Please enter your email", "Email Here");
var password = prompt("Please enter your password", "Password Here");
// User is signed in.**JT, by this you mean 'Below we sign in the user?'
firebase.auth().signInWithEmailAndPassword(username, password).catch(function(error) {
// for more on this function, see https://firebase.google.com/docs/auth/web/password-auth
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// ...
alert("Error found: " + errorMessage);
});
} else {
// No user is signed in.**JT: I'm probably mixing this up, but isn't this the code for signing out the user?
firebase.auth().signOut().then(function() {
// Sign-out successful.
alert("Sign out success.");
}).catch(function(error) {
// An error happened.
alert("Something went wrong.");
});
$("#test").text("Login");
}
});
//Code That Deals with Checking Whether Users are Signed In
//This is an observer that will wait for the firebase user object to change auth state.
//This is the recommended way to detect when you log in, as it will check upon page load.
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
// User is signed in.
alert("Welcome " + user.email + "!");
$("#test").text("Logout " + user.email);
} else {
// No user is signed in.
}
});
$("#search-btn").on("click", function() {
//On new search, start w/ all parts to start
$('.catalog-part').show();
//Code to filter by Manufacturer
var selmfr = $('#dd-mfr').find(':selected').val(); //JQuery event for...