Os usuários devem ser capazes de:
- Veja o layout ideal para o aplicativo, dependendo do tamanho da tela do dispositivo
- LocalStorage para salvar o estado atual no navegador que persiste quando o navegador é atualizado.
- Criar, ler, atualizar e excluir comentários
- Marcação HTML5 semântica
- CSS
- Flexbox
- Grid
- javaScript vanilla
Html - > A tag template por default mantém o conteúdo oculto
<template> Olá </template>Envia conteúdo para armazenamento da pagina e exibe ao carregar
document.addEventListener ("DOMContentLoaded", function () {
if (!localStorage.getItem("dados")) {
localStorage.setItem("dados", JSON.stringify(data));
}})Metodo cloneNode -> clona toda a subarvore, incluindo nós filhos e assim adicionar o conteudo do objeto
var commentNode = template.content.cloneNode(true);
commentNode.querySelector(".usr-name").textContent = element.user.username;Desconstruindo o objeto e inserindo o valor digitado no content
return { ...commentData, content: element.value };Gera um id dinâmico
function uuid() {
// Retorna um número randômico entre 0 e 15.
function randomDigit() {
// Se o browser tiver suporte às bibliotecas de criptografia, utilize-as;
if (crypto && crypto.getRandomValues) {
// Cria um array contendo 1 byte:
var rands = new Uint8Array(1);
// Popula o array com valores randômicos
crypto.getRandomValues(rands);
// Retorna o módulo 16 do único valor presente (%16) em formato hexadecimal
return (rands[0] % 16).toString(16);
} else {
// Caso não, utilize random(), que pode ocasionar em colisões (mesmos valores
// gerados mais frequentemente):
return ((Math.random() * 16) | 0).toString(16);
}
}Explorar o JSON