For efficient use of Firebase, ensure to separate your HTML, JavaScript, and CSS code

Question

For efficient use of Firebase, ensure to separate your HTML, JavaScript, and CSS code

I have a HTML page that includes JavaScript and CSS, but I want to host it on Firebase with separate files for JavaScript and CSS. While I understand how to do this locally, I'm unsure about the process when using Firebase.

P.S: Although I have experience with HTML, CSS, and JavaScript, my knowledge of Firebase is limited.

Code:

<!DOCTYPE html>
<html>
<head>
  <title>noname</title>
  <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) {
            document.getElementById("login-div").style.display="none";
            document.getElementById("logout-div").style.display="block";
          } else {
            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) {
                var errorCode = error.code;
                var errorMessage = error.message;

                window.alert("error");
            });
        }

        function logout(){
            firebase.auth().signOut().then(function() {
            }).catch(function(error) {
            });
        }
     </script>
  </div>    
 </body>
</html>

javascript html css firebase firebase-hosting

Answer 1

Answer №1

Creating a Firebase project involves setting up three distinct files: index.html, main.js, and style.css. These files need to be linked together properly for the project to function.

Let's start with the style.css file:

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;
}

The JavaScript functionalities are then transferred from the HTML file to the main.js file:

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.
    });
}

Finally, the remaining content goes into the index.html file. Make sure to import both the 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>

Note that using relative imports for files like style.css and main.js enables the project to work locally and when deployed.
To avoid issues, refrain from opening the file directly in your browser. Instead, use firebase serve to host the file locally and firebase deploy for deployment on Firebase Hosting.

Answer 2

Creating a Firebase project involves setting up three distinct files: index.html, main.js, and style.css. These files need to be linked together properly for the project to function.

Let's start with the style.css file:

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;
}

The JavaScript functionalities are then transferred from the HTML file to the main.js file:

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.
    });
}

Finally, the remaining content goes into the index.html file. Make sure to import both the 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>

Note that using relative imports for files like style.css and main.js enables the project to work locally and when deployed.
To avoid issues, refrain from opening the file directly in your browser. Instead, use firebase serve to host the file locally and firebase deploy for deployment on Firebase Hosting.

For efficient use of Firebase, ensure to separate your HTML, JavaScript, and CSS code

Answer №1

Similar questions

What is the best way to customize the appearance of radio buttons to have distinct backgrounds when selected and unselected?

The Bootstrap validator triggers the form submission only after the second click

Is there a way to align a div to the center of the BODY element instead of its parent in

Retrieve the highchart data from a PHP database table

Activate the class when clicked

What is the best way to execute a script on the homepage just one time?

What is the best way to customize the styles of Material UI V5 Date Pickers?

Tips for designing a button that can execute a JavaScript function repeatedly

Enhance Your Website with a jQuery Plugin for Dynamic Updates to ElementsgetPost

Utilization of Chrome browser extensions within Chrome applications

Transform JSON data into a string separated by commas with an array embedded within

Unable to update div CSS using button click functionality

Blocked the loading of scripts due to non-compliance with the Content Security Policy directive

Determining the positioning of a tablet with a JavaScript algorithm

Angular Material -md-grid-list display layout

Discover the method for retrieving the upcoming song's duration with jplayer

Transform a PDF document into a Google Doc utilizing the capabilities of the Google Drive API version 3

What is the best way to arrange card-columns in a horizontal order?

PHP code for displaying images on the same level

Achieving a Banner-Like Background Image Using CSS