Untitled

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>project 2</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Karla|Yantramanav|Open+Sans|Roboto:400,900" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>

    * {
        box-sizing: border-box;
        margin: 0;
        outline: 0;
    }

    a,a:link,a:visited,.a:hover,.a:focus,a:active{
        color: inherit;
        text-decoration: none;
    }

    body {
        margin: 0;
    }

    .content {
        margin: 0 auto;
        max-width: 500px;
        padding: 40px;
    }

    h1 {
        font-family: 'Roboto';
        padding: 10px 0;
    }

    .entry,.new,.item {
        padding: 10px 0;
        border-top: 1px solid #e6e6e6;
        position: relative;
    }

    .new {
        display: flex;
        border-bottom: 1px solid #e6e6e6
    }

    .entry p,.item p {
        font-family: 'Yantramanav';
        padding: 0 10px;
    }

    .new input {
        border: 0;
        font-family: 'Yantramanav';
        outline: 0;
        font-size: 16px;
        border: 1px solid #e6e6e6;
        border-right: 0;
        padding: 5px;
    }

    .new button {
        background: #35f;
        color: #fff;
        padding: 5px 8px;
        border: 0;
        font-size: 16px;
        font-family: 'Yantramanav'
    }

    .user .item::before,.entry::before {
        content: '';
        background: #e74c3c;
        height: 2px;
        width: 100%;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        width: 0;
        transition: all 0.3s ease
    }

    .user .item:hover,.entry:hover {
        cursor: pointer;
    }

    .user .item:hover::before,.entry:hover::before {
        width: 100%;
    }

    h2 {
        font-family: 'Roboto';
        padding: 10px 0
    }

    .item {
        padding: 10px 0;
        border-top: 1px solid #e6e6e6;
        position: relative;
    }

    .pro {
        border-bottom: 1px solid #e6e6e6
    }

</style>

</head>
<body>

    <div class="content">
        <h1>Todo</h1>
        <div class="notes">
            <div class="entry">
                <p>Nothing yet :)</p>
            </div>
        </div>
        <div class="new">
            <input type="text" placeholder="Add another task" id="add">
            <button onclick="newTodo()">Submit</button>
        </div>
        <div class="pro">
            <h2>Pro</h2>
            <div class="item">
                <p>Dark mode</p>
            </div>
        </div>
        <div class="user">
            <h2>Account</h2>
            <div class="item">
                <p onclick="signIn()">Sign in</p>
            </div>
        </div>
    </div>


    <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->

      <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
      <script src="https://www.gstatic.com/firebasejs/7.7.0/firebase-app.js"></script>

      <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
      <script src="https://www.gstatic.com/firebasejs/7.7.0/firebase-analytics.js"></script>

      <!-- Add Firebase products that you want to use -->
      <script src="https://www.gstatic.com/firebasejs/7.7.0/firebase-database.js"></script>
      <script src="https://www.gstatic.com/firebasejs/7.7.0/firebase-auth.js"></script>
      <script src="https://www.gstatic.com/firebasejs/7.7.0/firebase-firestore.js"></script>

    <script>
        // Your web app's Firebase configuration
        var firebaseConfig = {
            apiKey: "AIzaSyAN0uz5sGcLzG-JskcSGLg0Ij5KG1nU9as",
            authDomain: "todo-3b3a1.firebaseapp.com",
            databaseURL: "https://todo-3b3a1.firebaseio.com",
            projectId: "todo-3b3a1",
            storageBucket: "todo-3b3a1.appspot.com",
            messagingSenderId: "421815974833",
            appId: "1:421815974833:web:b7e25b468079da609a5b90",
            measurementId: "G-HZBRNZ112R"
        };
        var userId;
        // Initialize Firebase
        firebase.initializeApp(firebaseConfig);
        firebase.analytics();

        function signIn(){
            var provider = new firebase.auth.GoogleAuthProvider();
            firebase.auth().signInWithRedirect(provider);
        }

        firebase.auth().onAuthStateChanged(function(user) {
          if (user) {
              userId = user["uid"];
            firebase.database().ref('users/' + user["uid"] + '/notes').once('value').then(function(snapshot) {
                items = snapshot.val();
                $(".notes").empty();
                for(note in items){
                    append = '<div class="entry" data-key="'+note+'"><p>'+items[note]+'</p></div>';
                    $(".notes").append(append)
                }
            });
          } else {
            firebase.auth().getRedirectResult().then(function(result) {
                if (result.credential) {
                // This gives you a Google Access Token. You can use it to access the Google API.
                    var token = result.credential.accessToken;
                // ...
                }
              // The signed-in user info.
                var user = result.user;
                console.log(user);
                console.log(user["uid"]);
                userId = user["uid"];
                firebase.database().ref('users/' + user["uid"]).once('value').then(function(snapshot) {
                    if(snapshot.val() == null){
                        alert("new");
                        firebase.database().ref('users/' + user["uid"]).set({
                            email: user["email"],
                            photo: user["photoURL"],
                        });
                    } else {
                        firebase.database().ref('users/' + userId + '/notes').once('value').then(function(snapshot) {
                            items = snapshot.val();
                            $(".notes").empty();
                            for(note in items){
                                append = '<div class="entry"><p>'+items[note]+'</p></div>';
                                $(".notes").append(append);
                            }
                        });
                    }
                });

            }).catch(function(error) {
              // Handle Errors here.
                var errorCode = error.code;
                var errorMessage = error.message;
                // The email of the user's account used.
                var email = error.email;
                // The firebase.auth.AuthCredential type that was used.
                var credential = error.credential;
              // ...
            });

          }
        });


        function newTodo(){
            getVal = document.getElementById("add").value;
            firebase.database().ref('users/' + userId + '/notes').push(getVal);
            document.getElementsByClassName("notes")[0].innerHTML += '<div class="entry"><p>'+getVal+'</p></div>';
        }

        function del(e){
            getKey = $(e).data("key");
            firebase.database().ref('users/' + userId + '/notes').child(getKey).remove();
            $(e).hide(200);
        }

        document.addEventListener('click',function(e){
            if(e.target && e.target.className == 'entry'){
                getKey = e.target.getAttribute("data-key");
                firebase.database().ref('users/' + userId + '/notes').child(getKey).remove();
                e.target.style.display = "none";
             }
         });

    </script>

</body>
</html>