Bookmark

A way to save links across devices

by Jay Angelo Valmocina

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

<div class="container">
     <div id="app">
         <div class="card-header">
            <header>bookmark</header>
         </div>
          <div class="card-form">
             <div class="field">
                   <input type="text" class="input" id="name" placeholder="Title"/> 
             </div> <br>
              <div class="field">
                  <input type="text" class="input" id="link" placeholder="Link">
                </div><br>
                <button id="save">Save</button>
            </div> <br>
          
            <section>
            </section>
        </div>
    </div>
    	<script src="https://www.gstatic.com/firebasejs/5.3.0/firebase-app.js"></script>
		<script src="https://www.gstatic.com/firebasejs/5.3.0/firebase-database.js"></script>

CSS

@import url('https://fonts.googleapis.com/css?family=Indie+Flower');
@import url('https://fonts.googleapis.com/css?family=Pacifico');
@import url('https://fonts.googleapis.com/css?family=Krub');
body{
    background:#ECF0F1;
}

a {

  text-decoration: none;
  color: #444;
}

.card-header {
  color: grey;
  background-color: white;
  width: 50%;
  margin: auto;
  padding: 1em;
}
header {
  font-family: 'Pacifico', cursive;
  font-size: 15pt;
}
 
 .field {
   background: white;
   margin: auto;
   display: flex;
}

 #save {
   margin-top: 5pt;
   padding: 0.5em;
   background-color: #2ed573;
   color: white;
   border: 1pt solid #2ed573;
   border-radius: 2pt;
   font-family: 'Indie Flower', cursive;
   width: 100%;
   font-size: 12px;
   
 }
.input {
  padding: 1em;
  border: 1pt solid white;
  font-family: 'Krub', sans-serif;
  flex-grow: 1;
  font-size: 12pt;
  box-sizing: border-box;
  color: grey;
}

.delete {  
    color: #e74c3c;
    cursor: pointer;
    float: right;
    font-weight: bold;
}



.card-form {
    width: 50%;
    padding:1em;
    border-bottom-right-radius: 1ch;
    border-bottom-left-radius: 1ch;
    background-color: white;
    z-index: auto;
    margin: auto;
}

.list {
    width: 100%;
    padding: 2em;
    background-color: white;
    z-index: auto;
    box-sizing: border-box;
    border-radius: 0.5ch;
    margin-bottom: 1em;
    font-family: 'Indie Flower', cursive;
}

section {
    padding: 1em;   
    width: 50%;
    margin: auto;
}

JavaScript

// Initialize Firebase
  var config = {
    apiKey: "AIzaSyA2nitCsJVmj_5EYFa4pJtZX58lAj1chCw",
    authDomain: "learntools-2c585.firebaseapp.com",
    databaseURL: "https://learntools-2c585.firebaseio.com",
    projectId: "learntools-2c585",
    storageBucket: "learntools-2c585.appspot.com",
    messagingSenderId: "443185504444"
  };

  firebase.initializeApp(config);

  let db = firebase.database();


class Sycle {
    constructor(root){
        this.state = [];
        this.root = root;
        this.link = root.querySelector('#link');
        this.name = root.querySelector('#name');
        this.section = root.querySelector('section');
        this.favorite = root.querySelector('.nav-favorite');
        this.button = root.querySelector('button');
        this.list = root.querySelector('.list')
        this.items = {};

        this.template = '<% _.each(state, (x,y) => { %>\
                            <div class="list">\
                                  <i class="delete far fa-trash-alt" delete-id="<%- y %>"></i>\
                                <a class="title" href="<%- x.link %>"><%- _.truncate(x.title, {"length":30}) %></a>\
                            </div>\
                        <% }) %>';

        this.button.addEventListener('click', (e) => {
            e.preventDefault();
            const name = this.name.value;
            const link = this.link.value;
            this.addName(name, link);
            this.name.value = "";
            this.link.value = "";
        });


        this.section.addEventListener('click', e => {
            const id = e.target.getAttribute('delete-id');
            if(!id) return;
            this.removeItem(id);
            alert("Deleted!");
        });
      
        this.whenCreated();
    }

    

    addName(title, link){
        if(title != "" && link != ""){
            db.ref('/learn').push({
                 title: title,
                 link: link
             });
            this.updateUI(this.template,...