notas storage

HTML

CSS

*,*:before,*:after {box-sizing: border-box;}
* {margin:0;padding:0;text-decoration: none;list-style-type: none;outline: none;}
html {background: #00000d;color: #8798A5;font-family: trebuchet ms;}
body {width: 800px;max-width: calc(100% - 20px);margin: 0 auto;}
.gen {background: #141D26;margin-bottom: 1.5rem;box-shadow: 2px 3px 3px rgba(0,0,0,0.52);padding: 10px;border-radius: 8px;margin-top: 1.5rem;}
input, select, button, textarea {background: transparent;color: #8798A5;border: 1px solid #1b2836;border-radius: 8px;padding: .6rem .5rem;}
select option {background: #1b2836;}
a {color: #A9894F;}
a:hover {transition: all .3s !important;color: white;}
h1 {display: flex;align-items: center;justify-content: space-between;margin: 0 0 10px 0;font-size: 1.4rem;}
.form {display: flex;}
.form input {flex: 5;}
.form button {flex: 1;}
#saveBUTTON {border-radius: 0 8px 8px 0;}
#noteINPUT {border-right: none;border-radius: 8px 0 0 8px;}
button:hover, input:focus, select:focus, textarea:focus select:hover {background: #1b2836;transition: all .3s;}
button, select {cursor: pointer;}
#notes {display: flex;flex-direction: column;border-radius: 10px;overflow: hidden;}
.note {display: flex;background: #111922;gap: 5px;border-bottom: 1px solid #00000d21;}
.noteContent {display: flex;align-items: center;padding: 5px 0;}
.buttons {display: flex;gap: 5px;margin-left: auto;}
.id, .buttons > span {color: #a47642;min-width: 35px;display: flex;justify-content: center;background: #00000d45;padding: 4px 2px;align-items: center;user-select: none;}
.buttons > span {background: transparent;color: #777;text-shadow: 1px 1px 3px #00000d;min-width: 25px;}
.buttons > span:hover {background: #00000d;transition: all .3s !important;cursor: pointer;}
.buttons .hide {opacity: 0;transform: translateX(100%);transition: all 0.3s ease-in-out;}
.buttons:hover .hide {opacity: 1;transform: translateX(0);}
.id {position: relative;}
.id .copy {position: absolute;top: 50%;left: -100%;transform: translateY(-50%);transition: all 0.3s ease-in-out;}
.id:hover .copy {left: 50%;transform: translate(-50%, -50%);cursor: pointer;}
.id .index {visibility: visible;}
.id:hover .index {visibility: hidden;}
.checkmark__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#7ac142;fill:none;animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards}
.checkmark{width:25px;height:25px;border-radius:50%;display:block;stroke-width:2;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 0 none;animation:fill .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both}
.cross {animation-name:fillred, scale!important;}
.cross .checkmark__circle {stroke:#BE1E2D!important;}
.checkmark__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards}
@keyframes stroke{100%{stroke-dashoffset:0}}
@keyframes scale{0%,100%{transform:none}50%{transform:scale3d(1.1,1.1,1)}}
@keyframes fill{100%{box-shadow:inset 0 0 0 30px #7ac142}}
@keyframes fillred{100%{box-shadow:inset 0 0 0 30px #BE1E2D}}

JavaScript

class LocalStorage {
    constructor(key) {this.key = key;}
  
    modify(index, value) {
      let values = this.values;
      index === -1
      ? values.push(value)
      : value
      ? (values[index] = value)
      : values.splice(index, 1);
      localStorage.setItem(this.key, JSON.stringify(values));
    }
  
    removeAll() {localStorage.removeItem(this.key);}
    findIndex(key, value) {return this.values.findIndex(key && value ? obj => obj[key] === value : item => item === key);}
    move(index, direction) {
      const values = this.values;
      const newIndex = (index + direction + values.length) % values.length;
      const [item] = values.splice(index, 1);
      values.splice(newIndex, 0, item);
      localStorage.setItem(this.key, JSON.stringify(values));
    }
    get values() {return JSON.parse(localStorage.getItem(this.key)) || [];}
}

const notesLS = new LocalStorage('notes');

const saveBUTTON = document.getElementById('saveBUTTON');
const notesDIV = document.getElementById('notes');
const notesH1 = document.getElementById('notesH');
const notification = document.querySelector("#notification");

function generateID() {
    let array = new Uint32Array(1);
    window.crypto.getRandomValues(array);
    return array[0].toString(36);
}

function retINDEX(id) {
    let index = notesLS.findIndex('id', id);
    return index
}

saveBUTTON.addEventListener('click', (e) => {
    e.preventDefault();
    let noteINPUT = document.getElementById('noteINPUT');
    let id = noteINPUT.dataset.id || generateID();
    let note = noteINPUT.value;
    if (!note) {return}
    let index = retINDEX(id);
    let data = {id, note}
    notesLS.modify(index, data)
    noteINPUT.value = '';
    noteINPUT.removeAttribute('data-id')
    alertthis('Saved!')
    appendNotes()
});

notas storage

Puede cambiar código para ver el resultado

Resultado ↓

No hay comentarios:

Publicar un comentario