Lyrics Search

Sobre • Tecnologias • Features • O que aprendi

💡 Sobre

Este é um buscador de letras de músicas criado utilizando como base a aula do professor Roger Melo. Onde eu pude aprender vários conceitos e apliquei algumas features.

🛠 Tecnologias

Esse projeto foi desenvolvido com as seguintes tecnologias:

JavaScript
HTML/CSS

API

lyrics

⚙ Features

Estilização "descontraida" (Parallax)
Pre-loader ao fazer requisições
Botão para voltar ao escolher uma letra
Mobile

✍ O que eu aprendi ?

Regex (Expressões Regulares)

Neste projeto pude aplicar o conceito de expressões regulares na prática com a utilização da função replace:

var lyric = data.lyric.replace(/(\r\n|\r|\n)/g, '<br>)

O exemplo acima substitui todo caractere (/g) que for um \r (return carrier), \n (line-feed), ou \r\n (return carrier seguido de um line-feed), por uma tag html <br>.
\r : Caractere que retornar o cursor para o começo da linha
\n : Quebra de linha

Destructuring

Como o nome já diz - "desestruturação" - o destructuring é um recurso implementado no ES6 que possibilita desestruturar objetos e arrays. Quando utilizado, facilita na produtividade, usabilidade, e legibilidade do código, principalmente quando usado em argumentos de funções:

loja = {
  nome: 'Moda Verão',
  produtos: {
    camisas: {
      cores: ['azul', 'preto', 'vermelho']
    },
    bermudas: {
      cores: ['amarelo', 'vermelho', 'cinza']
    }
  }
};

const { nome, produtos: { camisas: { cores } } } = loja;

console.log(name); // 'Moda Verão'
console.log(cores); // ['azul', 'preto', 'vermelho']

Exemplo no projeto

Cross-origin resource sharing (CORS)

O CORS é uma especificação do W3C que diz se um determinado recurso pode ou não ser acessado por outros domínios fora do próprio domínio ao qual pertence: