vue and firebase transformation poetry webapp

In this example below you will see how to do a vue and firebase transformation poetry webapp with some HTML / CSS and Javascript

Vue.js makes it incredibly easy to create dynamic web interfaces. Firebase makes it incredibly easy to create a persistent, realtime backend. Using VueFire here to make a dynamic full stack poetry web app. Uses CSS-Grid for UI.

Thumbnail
This awesome code was written by Daniel_Silber-Baker, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Daniel_Silber-Baker ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>vue and firebase transformation poetry webapp</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

    <!-- Vue -->
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>

  <!-- Firebase -->
  <script src="https://gstatic.com/firebasejs/4.0.0/firebase.js"></script>
  <!-- VueFire -->
  <script src="https://unpkg.com/vuefire/dist/vuefire.js"></script>
<link href="https://fonts.googleapis.com/css?family=Oswald:300,500,600,700" rel="stylesheet">
<div id="app">
<div class="container">
<div class="item poemList">
<div class="title">POEMS BY NAME: </div>
<br>
<ul>
<li v-for="poem in poems">
{{poem.title}}
<button id = "delete" @click="removePoem(poem)">Delete</button>
<button id = "show" @click="showPoem(poem)">Show</button>

<!--  <button @click="removePoem(item['.key'])">X</button> -->
</li>
</ul>
</div>
<div class="item theTitle">
<div id="responsive_headline">
The Transformation of silence into langauge and action
<!-- non slabtext -->


<!-- slabtext solution -->
<!--       <span class = "slabtext">The Transformation Of </span>
<span class = "slabtext">Silence </span>
<span class = "slabtext"> Into Language</span>
<span class = "slabtext">And action </span> -->
</div>

</div>
<div class="item writer">


<form id="form" class="form-inline" v-on:submit.prevent="addPoem">
<div class="form-group">
<label for="bookTitle">NAME:</label>
<input type="text" id="bookTitle" class="form-control" v-model="newPoem.title">
</div>
<div class="form-group">
<label for="stageOne">Why do we speak?</label>
<input type="text" id="qOne" class="form-control" v-model="newPoem.stageOne">
</div>

<!--         stage 2 -->
<div class="form-group">
<label for=""> Of what are we afraid?</label>
<input type="text" id="qTwo" class="form-control" v-model="newPoem.stageTwo">
</div>
<!--           stage 3 -->
<div class="form-group">
<label for="">What have we survivied?</label>
<input type="text" id="qThree" class="form-control" v-model="newPoem.stageThree">
</div>
<!--           stage 4 -->
<div class="form-group">
<label for="">How have we-do we resist?</label>
<input type="text" id="qFour" class="form-control" v-model="newPoem.stageFour">
</div>
<!--           stage 5 -->
<div class="form-group">
<label for="">How are we healing?</label>
<input type="text" id="qFive" class="form-control" v-model="newPoem.stageFive">
</div>

  <button id = "add" type="submit" class="btn btn-primary" value="Add Poem"> Add Poem </button>
</form>

</div>
<div id="stage" class="item stage"></div>

</div>

</div>
<!-- end app -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/255459/oridomi.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/Daniel_Silber-Baker/vue-and-firebase-transformation-poetry-webapp-yzKaVe */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}



body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* end reset */

body {
  background-color: #D46A6A;
  display: flex;
  justify-content: center;
  padding: 20px;
/*   ch	Relative to width of the "0" (zero) */
/*   font-size: 1.5ch; */
  font-size: 13px;
  
  font-family: 'oswald';
  color: #FFAAAA;
  
}
.container {
  display: grid;
  width: 95vw;
/*   height: 600px; */
    height: 100vh;
/*   margin: .5em; */
  grid-gap: 1.5em;
  grid-template-columns:
    [main-start sidebar-start] 300px
    [sidebar-end content-start] 1fr
    [column3-start] 1fr
    [content-end main-end];
  grid-template-rows:
    [row1-start] 10vh
    [row2-start] 40vh
    [row3-start] 40vh
    [row4-start] 100px
    [row4-end];

}

/* 
.color-primary-0 { color: #AA3939 }	
 .color-primary-1 { color: #FFAAAA }
.color-primary-2 { color: #D46A6A 
.color-primary-3 { color: #801515 }
 .color-primary-4 { color: #550000 } */

/* colors{
orange: #E09F3E;
red:#540B0E
lighterRed: #9E2A2B
cream: #F7EDAD;
blue:#335C67
} */
.poemList {
  background-color: #9E2A2B;
  text-align:center;
  font-size: 150%;
  grid-column: main-start / sidebar-end;
  grid-row: row3-start / row4-end;
}

.theTitle {
  background-color:#AA3939;
  grid-column: sidebar-start / span 1;
  grid-row: row1-start / row3-start;
/*   letter-spacing: -.2em; */
/*   font-size: 70%; */
/*   width: 110%; */
}

#responsive_headline{
  text-transform: uppercase;
    font-family: 'oswald';
    font-weight: 800;
    width: 80%;
    font-size: 2.7em;
}
.writer {
  background-color: #F7EDAD;
  color:#540B0E;
  font-size: 140%;
  text-align:center;
  grid-column: sidebar-end / content-end;
  grid-row: row3-start / span 2;
}

.stage {
  background-color: #540B0E;
  
  grid-column: content-start/ content-end;
  grid-row: row1-start / span 2;
}



/* OTHER STYLES */



.item {
/*   background-color: #1EAAFC; */
/*   color: #ffffff; */
  
  border-radius: 4px;

}

/*individual element  styles*/

.lineHolder{
/*    border:  2px solid white; */
   display: inline-block;
   width: 55%;
   margin-left: 15vw;
   height: 8vh;
  margin: 1.5ch
}

.textContainer{
  position:absolute;
margin: 0;
  display: inline-block;
  font-size: 150%;
  width: 25vw;
   height: 5vh;
}
.promptHolder{
float: left;
font-size: 80%;
/*   border:  2px solid black; */
/*   background-color: #444; */
   display: inline-block;
   width: 25vw;
   height: 5vh;

}



li{
 
}
p{
line-height: .9em;
padding: .2em;

}

input{

  margin: .5em;
  height: 25px;
  width: 35vw;
  font-size: 80%
}

label{
  
  display: block;
}

button{
  
  background-color: #335C67;
/*   color: #FFAAAA; */
 
  color: #f4f4f4;
  height: 5vh;
  width: 30%;
  border: none;
  outline: none;
  margin: .5ch;
  
}

button:hover {
 box-shadow: .5ch .5ch .5ch #fcfcfc;
  border: 2px solid #f4f4f4;
  
}

#add{
  width: 80%;
  height: 5vh;
}

#delete{
  background-color: #D62828;
}

#show{
  background-color: #003049;
  
}

/*Downloaded from https://www.codeseek.co/Daniel_Silber-Baker/vue-and-firebase-transformation-poetry-webapp-yzKaVe */
/* global Vue, firebase */
let config = {
apiKey: "AIzaSyBdE-iB5O2hcURVf2bH2ac0XOd-FEIZaA4",
authDomain: "vue-database-3411c.firebaseapp.com",
databaseURL: "https://vue-database-3411c.firebaseio.com",
projectId: "vue-database-3411c",
storageBucket: "vue-database-3411c.appspot.com",
messagingSenderId: "660447029173"
};

let db = firebase.initializeApp(config).database();
// let db = app.database()
let poemsRef = db.ref("poems");
// export default {
//   name: 'app',
//   firebase: {
//     poems: poemsRef
//   },

//   data () {
//     return {
//       newPoem: {
//           title: '',
//           lines: ''
//       }
//     }
//   },

//create an array of the questions
var prompts = [
"Why do we speak?",
"Of what are we afraid?",
"What have we survivied?",
"How have we-do we resist?",
"How are we healing?"
];

var app = new Vue({
el: "#app",
data: {
newPoem: {
title: "",
stageOne: "",
stageTwo: "",
stageThree: "",
stageFour: "",
stageFive: ""
}
},
firebase: {
poems: poemsRef
},

methods: {
addPoem: function() {
poemsRef.push(this.newPoem);

this.newPoem.title = "";
this.newPoem.stageOne = "";
this.newPoem.stageTwo = "";
this.newPoem.stageThree = "";
this.newPoem.stageFour = "";
this.newPoem.stageFive = "";

var everythingSelector = $("#stage");
everythingSelector.empty()
/* create structure for new poems*/
var daPoem = app.poems[app.poems.length - 1];

var prompts = [
"Why do we speak?",
"Of what are we afraid?",
"What have we survivied?",
"How have we-do we resist?",
"How are we healing?"
];

var responses = [
daPoem.stageOne,
daPoem.stageTwo,
daPoem.stageThree,
daPoem.stageFour,
daPoem.stageFive
];

responses.forEach(function(thing, index) {
/* call function for writing poems to DOM*/
  
  creator(thing, index)
  
});


},
removePoem: function(poem) {
poemsRef.child(poem[".key"]).remove();
},
showPoem: function(poem) {
console.log(poemsRef)
  
// console.log(poem);
var everythingSelector = $("#stage");
everythingSelector.empty()
var prompts = [
"Why do we speak?",
"Of what are we afraid?",
"What have we survivied?",
"How have we-do we resist?",
"How are we healing?"
];

var poemResponses = [
poem.stageOne,
poem.stageTwo,
poem.stageThree,
poem.stageFour,
poem.stageFive
];

poemResponses.forEach(function(thing, index) {
  
  creator(thing, index)

});
}
}
});


function creator (thing, index){
var everythingSelector = $("#stage");
// everythingSelector.empty()

var lineHolder = document.createElement("div");

lineHolder.id += "holder" + index;
lineHolder.className += "lineHolder";

var promptHolder = document.createElement("div");
promptHolder.className += "promptHolder";

var promptText = document.createElement("p");
promptValue = document.createTextNode(prompts[index]);

promptText.appendChild(promptValue);

promptHolder.append(promptText);

lineHolder.append(promptHolder);

//create a text element from thing
var textContainer = document.createElement("div");
textContainer.className += "textContainer";
textContainer.id += "textContainer" + index;
//create a text element with the prompt
var newDiv = document.createElement("p");

// newDiv.id('thing'+index)
var newContent = document.createTextNode(thing);
//apend them both to lineHolder

newDiv.appendChild(newContent);
textContainer.append(newDiv);
lineHolder.append(textContainer);
everythingSelector.append(lineHolder);
  
}

/* Create button animation for hover and click */

$( "#show" ).hover(
  function(){
   $( '#show' ).css("background-color", "#444" );
  },
  function(){
   $( this ).css("border", "20px solid #fcfcfc" );
})

Comments