note list

index.html

<h2>Notes App</h2>
<button class="fab" id="myBtn">+</button>
<simple-form-modal-component></simple-form-modal-component>
<note-list-component></note-list-component>

note-list.markdown

note list

A Pen by Edward Lance Lorilla on CodePen.

License.

script.js

class NoteListComponent extends HTMLElement {
  constructor() {
    super();
    
    this._notes = JSON.parse(this.getAttribute('notes')) || [];
    this.root = this.attachShadow({mode: 'open'});
    this.root.innerHTML = this.render();
  }
  
  render() {
    let noteElements = '';
    this._notes.map(
    (note) => {
      noteElements += `
      <div class="note">
      <p><strong>${note.title}</strong> ${note.description}</p>
      </div>`;
    }
      );
    
    return `
    ${this.getStyle()}
    ${noteElements}`;
  }
  
  get notes(){
    return this._notes;
  }
  
  set notes(newValue) {
    this._notes = newValue;
    this.root.innerHTML = this.render();
  }
  
  getStyle() {
    return `
    <style>
    .note {
    background-color: #ffffcc;
    border-left: 6px solid #ffeb3b;
    }
    div {
    margin: 5px 0px 5px;
    padding: 4px 12px;
    }
    </style>
    `;
  }
}
customElements.define('note-list-component', NoteListComponent);
class SimpleFormModalComponent extends HTMLElement {
  
  constructor() {
    super();
    
    this.root = this.attachShadow({mode: 'open'});
    this.container = document.createElement('div');
    this.container.innerHTML = this.getTemplate();
    this.root.appendChild(this.container.cloneNode(true));
    
    this._open = this.getAttribute('open') || false;
    
    this.modal = this.root.getElementById("myModal");
    this.addBtn = this.root.getElementById("addBtn");
    this.closeBtn = this.root.getElementById("closeBtn");
    
    this.handleAdd = this.handleAdd.bind(this);
    this.handleCancel = this.handleCancel.bind(this);
    
  }
  
  connectedCallback() {
    this.addBtn.addEventListener('click', this.handleAdd);
    this.closeBtn.addEventListener('click', this.handleCancel);
  }
  
  disconnectedCallback () {
    this.addBtn.removeEventListener('click', this.handleAdd);
    this.closeBtn.removeEventListener('click', this.handleCancel);
  }
  
  get open() {
    return this._open;
  }
  
  set open(newValue) {
    this._open = newValue;
    this.showModal(this._open);
  }
  
  handleAdd() {
    const fTitle = this.root.getElementById('ftitle');
    const fDesc = this.root.getElementById('fdesc');
    this.dispatchEvent(new CustomEvent('addEvent', {detail: {title: fTitle.value, description: fDesc.value}}));
    
    fTitle.value = '';
    fDesc.value = '';
    this.open = false;
  }
  
  handleCancel() {
    this.open = false;
  }
  
  showModal(state) {
    if(state) {
      this.modal.style.display = "block";
    } else {
      this.modal.style.display = "none"
    }
  }
  
  getTemplate() {
    return `
    ${this.getStyle()}
    <div id="myModal" class="modal">
    <div class="modal-content">
    <form id="myForm">
    <label for="ftitle">Title:</label><br>
    <input type="text" id="ftitle" name="ftitle"><br>
    <label for="fdesc">Description:</label><br>
    <textarea id="fdesc" name="fdesc" rows="4" cols="50"></textarea><br/>
    <button type="button" id="addBtn">Add</button><button type="button" id="closeBtn">Close</button>
    </form>
    </div>
    </div>`;
  }
  
  getStyle() {
    return `
    <style>
    .modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
    }
    .modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 50%;
    }
    .close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    }
    .close:hover,
    .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
    }
    </style>`;
  }
}
customElements.define('simple-form-modal-component', SimpleFormModalComponent);

const formModal = document.querySelector('simple-form-modal-component');
formModal.addEventListener('addEvent', function(e) {
  const noteList = document.querySelector('note-list-component');
  let notes = noteList.notes;
  
  notes.push({"title": e.detail.title, "description": e.detail.description});
  noteList.notes = notes;
});


const myBtn = document.getElementById('myBtn');
myBtn.addEventListener('click', function() {
  formModal.open = !formModal.open;
});

style.css

.fab {
  width: 50px;
  height: 50px;
  background-color: black;
  border-radius: 50%;
  border: 1px solid black;
  transition: all 0.1s ease-in-out;
  
  font-size: 30px;
  color: white;
  text-align: center;
  line-height: 50px;
  
  position: fixed;
  right: 20px;
  bottom: 20px;
}

.fab:hover {
  box-shadow: 0 6px 14px 0 #666;
  transform: scale(1.05);
}