JSFiddle - React, Tailwind, and code Playground

by dvdgdnjsph

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-focus/2.1.0/vue-focus.js"></script>

  <body>
      <div id="app">
          <!--
               MODAL TEMPLATES
             -->

          <modal id="register-modal" v-show="registerShow" :newuser="newuser" :registerComplete="registerComplete">
              <div slot="info">
                  <div id="register-message-incomplete" v-show="!registerComplete">
                      <h3>register</h3>
                  </div>
              </div>
              <div slot="inputs">
                  <div class="row">
                      <input type="email" v-model="newuser.email" placeholder="email"/>
                  </div>
                  <div class="row">
                      <input type="password" v-model="newuser.password" placeholder="password"/>
                  </div>

              </div>
              <div slot="buttons">
                  <div class="col-md-6" v-show="!registerComplete">
                      <button class="btn btn-primary" @click.prevent="register">submit</button>
                  </div>
                  <div class="col-md-6">
                      <button class="btn btn-secondary" @click.prevent="cancelRegister">cancel</button>
                  </div>
              </div>
          </modal>


          <modal id="tag-modal" v-show="tagModal" :newtag="newtag">
              <div slot="info">
                  <h3>create tag</h3>
              </div>
              <div slot="inputs">
                  <label for="get-tag-name">name: </label><input v-model="newtag.name" type="text" id="get-tag-name"/>
                  <label for="get-should-be">should be:...

CSS

body h1 {
    font-family: Cormorant Garamond, Times New Roman, serif;
    color: white;
    font-size: 22px;

}

#app {
    height: 100%;
    width: 100%;
    position: absolute;
    background-image: url("../media/paper-texture.jpg");
}

#front-page {
    position: absolute;
    height: 100%;
    width: 63%;
    left: 0px;
    border-color: white;
    border-thickness: 2px;
    background: rgba(255, 255, 255, 0.5);    

}

#top {
    position: absolute;
    height: 15%;
    width: 100%;
    top: 0px;
    left: 0px;
}

#tags {
    position: absolute;
    height: 20%;
    width: 100%;
    top: 0px;
    background: rgba(0, 0, 0, 0.2);
}

#banner {
    position: absolute;
    height: 80%;
    width: 100%;
    bottom: 0px;
    background: rgba(0, 0, 0, 0.9);
}

#title {
    position: absolute;
    top: 0px;
    left: 10px;
    padding-bottom: 10px;
    
}

#content {
    position: absolute;
    height: 85%;
    width: 100%;
    bottom: 0px;

}

.disabled {
  color: orange;
}
#side-bar {
    position: absolute;
    background: rgba(0, 0, 0, 0.5);
    height: 100%;
    width: 37%;
    right: 0px;
}

#side-top {
    position: absolute;
    height: 37%;
    width: 100%;
    background: rgba(255, 255, 255, 0.1);
    top: 0px;
}

#top-left {
    position: absolute;
    height: 100%;
    width: 37%;
    background: white;
    left: 0px;
}

#profile {
    position: absolute;
    height: 63%;
    width: 100%;
    top: 0px;
    background-color: grey;
}

#log-in {
    

}

.pac-container {
    z-index: 9999;
}

#find {
    position: absolute;
    height: 37%;
    width: 50%;
    bottom: 0px;
    left: 0px;
    background-color: black;
    text-align: center;    
}

#post {
    position: absolute;
    height: 37%;
    width: 50%;
    bottom: 0px;
    right: 0px;
    background-color: black;
    text-align: center;

}

.cost {
    text-align: center;
}

#top-right {
    right: 0px;
    top: 0px;
    position: absolute;
    height: 100%;
    width: 63%;
    background-color:...

JavaScript

Vue.component('article-comp', {
    template: "#article-template",
    props: ['article'],
    data: function() {
        return {
            upvoted: false,
            downvoted: false
        };
    },
    methods: {
        upVote: function() {
            this.upvoted = !this.upvoted;
            this.downvoted = false;
            articlesRef.child(this.article['.key']).update({"upVotes":this.article.upVotes+1});
            console.log(this.article['.key']);
            
        },
        downVote: function() {
            this.downvoted = !this.downvoted;
            this.upvoted = false;
            articlesRef.child(this.article['.key']).update({"downVotes":this.article.downVotes+1});

        }
    },
    computed: {
        votes: function() {
            var votes = this.article.upVotes - this.article.downVotes;
            if (this.upvoted) {
                return votes + 1;
            } else if (this.downvoted) {
                return votes - 1;
            } else {
                return votes;
            }

        }
    }
});


Vue.component('modal', {
    template: "#modal-template",
    props: ['newtag', 'newoffer', 'newarticle']
});


Vue.component('offer', {
    template: "#offer-template",
    
});

Vue.component('tag', {
    templates: '<li><span class="tag tag-pill">{{ tag.name }}</span></li>',
    props: ['tag']
    
    
});


Vue.component('register', {
    template: "#register-template",
    props: ['newuser', 'registerComplete', 'registerShow'],
    methods: {
        register: function () {
            firebase.auth().createUserWithEmailAndPassword(this.newuser.email, this.newuser.password).catch(function(error) {
                // Handle Errors here.
                var errorCode = error.code;
                var errorMessage = error.message;
                // ...
            });
            console.log("adding user");
            var user = firebase.auth().currentUser;    
            var userRef = database.ref('users/' +...