Separate HTML, JavaScript and CSS when using Firebase

Question

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>

css import

Gerardo BLANCO
– Gerardo BLANCO

2018-01-30 17:10:48 +00:00
Commented Jan 30, 2018 at 17:10 — Gerardo BLANCO
– Gerardo BLANCO, Commented Jan 30, 2018 at 17:10
js import

Gerardo BLANCO
– Gerardo BLANCO

2018-01-30 17:12:15 +00:00
Commented Jan 30, 2018 at 17:12 — Gerardo BLANCO
– Gerardo BLANCO, Commented Jan 30, 2018 at 17:12

Frank van Puffelen · Accepted Answer · 2018-01-30 17:25:28Z

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

Thanks Frank.....I probably downvoted by mistake....so ignore that....but yes the problem was solved.

Collectives™ on Stack Overflow

Separate HTML, JavaScript and CSS when using Firebase

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related