I wrote some HTML code and I want to host this HTML page containing JavaScript as well as CSS. The main problem is I want to create separate files for JavaScript and CSS. I know how it works in localhost, but since I am using Firebase, I don't know how to proceed.
P.S: I have prior knowledge of HTML, CSS and JavaScript, but almost zero knowledge about Firebase.
Code:
<!DOCTYPE html>
<html>
<head>
<title>noname</title>
<!--<link rel="stylesheet" type="text/css"href="C:\first\public\noname.css">-->
<style type="text/css">
input{
resize: none;
border-radius: 5px;
size: 50px;
height: 100%;
}
#main{
text-align: center;
padding: 20px;
border: 5px solid;
width: 50%;
background-color: #c2e5ef;
background-clip: border-box;
}
.button{
color: #fff;
background-color: #3fb2bf;
margin: 10px 2px;
border: none;
font-size: 20px;
width: 100px;
height: 50px;
border-radius: 15px
}
#login-div{
text-align: center;
}
#logout-div{
text-align: center;
}
</style>
</head>
<body>
<div id="main">
<div id="login-div">
<label><b style="font-size: 20px;">Username:<input type="text" name="username" id="username" placeholder="Enter Username"><br>
</label>
<br>
<label>Password:<input type="text" name="password" id="password" placeholder="Enter Password"></label><br>
<input type="button" name="login" value="Login" class="button" onclick="login()">
</div>
<div id="logout-div">
<p>you are logged in</p>
<input type="button" name="logout" value="Logout" class="button" onclick="logout()">
</div>
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase.js"></script>
<script type="text/javascript">
var config = {
apiKey: "AIzaSyDf4ndBB-CXJwaYVLXXQacFmX3O9eZbUZk",
authDomain: "first-b14b2.firebaseapp.com",
databaseURL: "https://first-b14b2.firebaseio.com",
projectId: "first-b14b2",
storageBucket: "first-b14b2.appspot.com",
messagingSenderId: "103220354303"
};
firebase.initializeApp(config);
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
// User is signed in.
document.getElementById("login-div").style.display="none";
document.getElementById("logout-div").style.display="block";
} else {
// No user is signed in.
document.getElementById("login-div").style.display="block";
document.getElementById("logout-div").style.display="none";
}
});
function login(){
var email=document.getElementById("username").value;
var pass=document.getElementById("password").value;
firebase.auth().signInWithEmailAndPassword(email, pass).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
window.alert("error");
// ...
});
}
function logout(){
firebase.auth().signOut().then(function() {
// Sign-out successful.
}).catch(function(error) {
// An error happened.
});
}
</script>
</div>
</body>
</html>
There's really nothing Firebase specific about this. You just create three separate files: index.html, main.js, and style.css, and then link them together.
The style.css is simplest, so let's start with that:
input{
resize: none;
border-radius: 5px;
size: 50px;
height: 100%;
}
#main{
text-align: center;
padding: 20px;
border: 5px solid;
width: 50%;
background-color: #c2e5ef;
background-clip: border-box;
}
.button{
color: #fff;
background-color: #3fb2bf;
margin: 10px 2px;
border: none;
font-size: 20px;
width: 100px;
height: 50px;
border-radius: 15px
}
#login-div{
text-align: center;
}
#logout-div{
text-align: center;
}
Next up we take the JavaScript out of the HMTL and put it into main.js:
var config = {
apiKey: "AIzaSyDf4ndBB-CXJwaYVLXXQacFmX3O9eZbUZk",
authDomain: "first-b14b2.firebaseapp.com",
databaseURL: "https://first-b14b2.firebaseio.com",
projectId: "first-b14b2",
storageBucket: "first-b14b2.appspot.com",
messagingSenderId: "103220354303"
};
firebase.initializeApp(config);
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
// User is signed in.
document.getElementById("login-div").style.display="none";
document.getElementById("logout-div").style.display="block";
} else {
// No user is signed in.
document.getElementById("login-div").style.display="block";
document.getElementById("logout-div").style.display="none";
}
});
function login(){
var email=document.getElementById("username").value;
var pass=document.getElementById("password").value;
firebase.auth().signInWithEmailAndPassword(email, pass).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
window.alert("error");
// ...
});
}
function logout(){
firebase.auth().signOut().then(function() {
// Sign-out successful.
}).catch(function(error) {
// An error happened.
});
}
And finally that leaves us with only the index.html, where we added two imports for style.css and main.js:
<!DOCTYPE html>
<html>
<head>
<title>noname</title>
<link rel="stylesheet" type="text/css"href="style.css">
</head>
<body>
<div id="main">
<div id="login-div">
<label><b style="font-size: 20px;">Username:<input type="text" name="username" id="username" placeholder="Enter Username"><br>
</label>
<br>
<label>Password:<input type="text" name="password" id="password" placeholder="Enter Password"></label><br>
<input type="button" name="login" value="Login" class="button" onclick="login()">
</div>
<div id="logout-div">
<p>you are logged in</p>
<input type="button" name="logout" value="Logout" class="button" onclick="logout()">
</div>
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase.js"></script>
<script src="main.js"></script>
</div>
</body>
</html>
You'll note that the imports are done with just their filename, instead of full paths. Doing so-called relative imports like that allow the import to work locally and when the site is deployed.
Don't open the file from disk in your browser, as that is bound to lead to all kinds of problems as you start adding more advanced code. Instead run firebase serve from a command prompt to serve the file locally (and firebase deploy to deploy it to Firebase Hosting).