Javascript Criar uma lista de cores um Array

Lipeco · 15 de outubro de 2020

Boa dia, estou começando agora no javascript, gostaria de saber como eu faria por exemplo, uma lista de cores, tipo, criaria um array cores e eu listaria essas cores, azul, amarelo e verde.

Quando eu listar essas cores eu teria a opção de clicar em cima da cor e ao clicar em cima da cor, abrir uma janela com uma imagem relacionada a cor. Ou seja, gostaria de clicar em uma opção da lista e abrir uma imagem, não estou conseguindo fazer isso, alguém poderia dar uma luz?

Agradeço.

Adriano_web · 16 de outubro de 2020

9 horas atrás, Lipeco disse:

Boa dia, estou começando agora no javascript, gostaria de saber como eu faria por exemplo, uma lista de cores, tipo, criaria um array cores e eu listaria essas cores, azul, amarelo e verde.

Quando eu listar essas cores eu teria a opção de clicar em cima da cor e ao clicar em cima da cor, abrir uma janela com uma imagem relacionada a cor. Ou seja, gostaria de clicar em uma opção da lista e abrir uma imagem, não estou conseguindo fazer isso, alguém poderia dar uma luz?

Agradeço.

@Lipeco

Não sei se entendi muito o que você quer realmente, mas vou tentar mostrar com o pouco que entendi.

Se você quer criar caixas mostrando informações das cores você poderia criar uma lista no HTML e nos elementos <li> que ela contém você poderia usar um ouvinte de tratamento de evento JavaScript para chamar uma função que mostraria uma caixa com as especificações da cor selecionada.

Caso você queira que apareça uma paleta de cores também daria, você teria de utilizar o elemento <input type="color">. Veja um exemplo abaixo:

<head>
  <style>
    /* Cria declarações pré-definidas para todos os 
     elementos usando o seletor global "*" */
    * {
      border: 0;
      box-sizing: border-box;
      font-family: Arial, sans-serif;
      line-height: 1.5;
      margin: 0;
      padding: 0;
    }
    
    /* Agrupando 3 seletores para receber declarações */
    #mod1, #mod2, #mod3 {
      display: none;  /* Oculta todas as divs modais */
      margin: 0 auto;  /* Centraliza as divs no meio da página */
      margin-top: 35px;  /* Cria um espaço no topo das divs */
      height: 320px;  /* Define a altura das divs */   
      width: 750px;  /* Define a largura das divs */
    }
  </style>
</head>
<body>
  <ul> 
    <!-- Note que o argumento da função infoCor é "event" uma propriedade do objeto global "window" -->
    <li onclick="infoCor(event)">Azul</li>
    <li onclick="infoCor(event)">Vermelho</li>
    <li onclick="infoCor(event)">Amarelo</li>
  </ul>
  <div id="mod1"> 
    <input type="color" name="cor" value="#0000ff">
    <!-- Aqui vai as especificações sobre a cor Azul
     Poderia também usar o <img src=""> para exibir uma imagem -->
  </div>
  <div id="mod2">
    <input type="color" name="cor" value="#ff0000">
    <!-- Aqui vai as especificações sobre a cor Azul
     Poderia também usar o <img src=""> para exibir uma imagem -->
  </div>
  <div id="mod3">
    <input type="color" name="cor" value="#00ff00">
    <!-- Aqui vai as especificações sobre a cor Azul
     Poderia também usar o <img src=""> para exibir uma imagem -->
  </div>
  <script>
    // Armazena 3 variáveis em cache para utiliza-las depois no código
    var modal1 = document.getElementById("mod1"); 
    var modal2 = document.getElementById("mod2");
    var modal3 = document.getElementById("mod3");
    
    // Cria uma função com o nome de "infoCor" e com 
    // um parâmetro "e" sinalizando um argumento "event"
    function infoCor(e) {
      // Se o conteúdo do elemento que recebeu o evento for igual a "Azul" 
      if (e.target.innerHTML === "Azul") { 
        // Exibe o modal1 que mostra informações da cor azul.
        modal1.style.display = "block"; 
        modal2.style.display = "none";
        modal3.style.display = "none";
      // Se o conteúdo do elemento que recebeu o evento for igual a "Vermelho" 
      } else if (e.target.innerHTML === "Vermelho") {
        // Exibe o modal2 que mostra informações da cor vermelho.
        modal1.style.display = "none";
        modal2.style.display = "block";
        modal3.style.display = "none";
      // Se o conteúdo do elemento que recebeu o evento for igual a "Verde" 
      } else if (e.target.innerHTML === "Verde") {
        // Exibe o modal3 que mostra informações da cor verde.
        modal1.style.display = "none";
        modal2.style.display = "none";
        modal3.style.display = "block";
      }
    }
  </script>
</body>

washalbano · 16 de outubro de 2020

Olá!
Seriam necessários no mínimo dois dados:
1) a cor
2) a imagem que deverá ser aberta.

Por isso, acredito que seria melhor resolver com um objeto, ao invés de um array.

segue sugestão

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Array Cores Abrir Imagem</title>
  <style>
      * {
          box-sizing: border-box;
          transition: all 300ms ease;
          text-decoration: none;
      }

      html, body {
          margin: 0;
          padding: 0;
      }

      body,
      .app,
      .app-header,
      main,
      .app-footer,
      .modal,
      .modal-body {
          display: flex;
      }

      body {
          background-color: #eee;
          min-height: 100vh;
          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
      }

      .app {
          flex-direction: column;
          flex: 1;
      }

      main {
          flex: 1;
          padding: 12px;
          flex-direction: column;
      }

      .app-header,
      .app-footer {
          height: 55px;
          justify-content: center;
          align-items: center;
          background-color: #fff;
          color: rgba(0, 0, 0, .5);
      }

      .app-header {
          border-bottom: thin solid #ddd;
      }

      .app-footer {
          border-top: thin solid #ddd;
      }

      .app-header a {
          display: inline-block;
          padding: 6px 12px;
          margin: 0 6px;
          border-radius: 4px;
          background-color: transparent;
      }

      a:hover,
      a:focus {
          background-color: rgba(221, 72, 20, .2);
          color: rgba(221, 72, 20, 1);
      }

      .modal {
          width: 320px;
          height: 320px;
          margin: 0 auto;
          padding: 12px;
          border-radius: 4px;
          background-color: #fff;
          box-shadow: 1px 1px 5px rgba(0, 0, 0, .3);
      }

      .modal-body {
          flex: 1;
      }

      .modal-body img {
          border-radius: 4px;
      }
  </style>
</head>
<body>
<div class="app">
  <header class="app-header"></header>
  <main>
    <div class="modal">
      <div class="modal-body"></div>
    </div>
  </main>
  <footer class="app-footer">
    <small>&copy; 2020</small>
  </footer>
</div>
<script>
    // APP element
    let APP       = document.querySelector('div.app'),
        appHeader = document.querySelector('header.app-header'),
        modalBody = document.querySelector('div.modal-body'),

        // COLORS OBJECT
        colors    = {
            'Amarelo': {
                hex : 'FFD700',
                name: 'imagem-amarelo.jpg',
            },
            'Verde'  : {
                hex : '228B22',
                name: 'imagem-verde.jpg',
            },
            'Azul'   : {
                hex : '0000FF',
                name: 'imagem-azul.jpg',
            }
        };


    // MODAL OPEN
    function modalOpen(e) {
        e.preventDefault();

        modalBody.innerHTML = '<img src="https://via.placeholder.com/294/' + this.dataset.hex + '/FFFFFF?text=' + this.dataset.href + '" alt="' + this.dataset.href + '">';
    }

    // ALIMENTAR O ARRAY LINKS
    // para cada index em colors
    for (let i in colors) {

        // cria o elemento a
        var a = document.createElement('a');
        a.dataset.href = colors[i].name
        a.dataset.hex = colors[i].hex
        a.href = '#'
        a.target = 'modal'
        a.innerText = i
        a.addEventListener('click', modalOpen);

        // adiciona o anchor ao array links
        appHeader.appendChild(a);
    }
</script>
</body>
</html>

Faça as adequações necessárias para adequar à sua realidade.

para acrescentar outro link, no objeto colors acrescente:

'Vermelho' : {
   hex : '8B0000',
   name: 'imagem-vermelho.jpg',
}

Entrar

Javascript Criar uma lista de cores um Array

Posts recomendados

Lipeco

Link para o comentário

Compartilhar em outros sites

Adriano_web

Link para o comentário

Compartilhar em outros sites

washalbano

Link para o comentário

Compartilhar em outros sites

Crie uma conta ou entre para comentar

Criar uma conta

Entrar

Quem está navegando aqui 0 usuários estão online

Últimos tópicos

Livros

Cursos

Conteúdo recente

Sobre o Clube do Hardware

Direitos autorais

Mais

Fórum

Atividades

Artigos

Análises

Livros

Cursos