From 288b76afea11fa1ea90a9f31a2630534a301502e Mon Sep 17 00:00:00 2001 From: Eduardo Velasques Date: Thu, 8 Jun 2023 21:56:26 +0000 Subject: [PATCH] Produtos com AJAX. --- contact.html | 3 +- index.html | 3 +- produtos.html | 87 +++++++++++++++++++++++++++++++++++++++ projects.html | 1 + scripts/main.js | 48 +++++++++++++++++---- styles/_header.less | 13 +++--- styles/_variables.less | 3 ++ styles/blocks/_table.less | 32 +++++++------- 8 files changed, 159 insertions(+), 31 deletions(-) create mode 100644 produtos.html create mode 100644 styles/_variables.less diff --git a/contact.html b/contact.html index 0e411d8..fe69538 100644 --- a/contact.html +++ b/contact.html @@ -18,6 +18,7 @@
  • Home
  • Projetos
  • Contato
    • +
  • Produtos
    • @@ -33,7 +34,7 @@
    - +
    diff --git a/index.html b/index.html index 2b307a6..ba812f9 100644 --- a/index.html +++ b/index.html @@ -18,6 +18,7 @@
  • Home
  • Projetos
  • Contato
    • +
  • Produtos
    • @@ -33,7 +34,7 @@

    O teu problema resolvido na web com alta performance.

    Trabalho com diversas tecnologias, mas estas são as minhas preferidas:

    -
      +
      • HTML5
      • CSS3
      • LESS
        • diff --git a/produtos.html b/produtos.html new file mode 100644 index 0000000..06143ac --- /dev/null +++ b/produtos.html @@ -0,0 +1,87 @@ + + + + Tritão + + + + + + +
        + + +
        +
        +
        +
        +

        Produtos

        +
        +
        +
        + + + + + + + + + + +
        ProdutoCategoria
        + +

        +
        +
        +
        + +
        + + +
        +
        + + +
        + + +
        +
        +
        +
        + © 2023 Tritão +
        + + diff --git a/projects.html b/projects.html index 7836e27..9a1f77f 100644 --- a/projects.html +++ b/projects.html @@ -18,6 +18,7 @@
      • Home
      • Projetos
      • Contato
        • +
      • Produtos
      diff --git a/scripts/main.js b/scripts/main.js index 54887d7..077088d 100644 --- a/scripts/main.js +++ b/scripts/main.js @@ -1,11 +1,41 @@ -//alert('Ola do JavaScript'); -/** -console.warn('Alerta de teste...'); -console.error('Aconteceu um erro!'); -console.log('Mensagem de log geral...'); -*/ - -const logo = document.querySelector('div.logo'); -logo.style.border = '2px solid yellow'; +const tecnologiasPreferidasList = `HTML5 +CSS3 +LESS +JavaScript +ReactJS +Netuno +PostgreSQL +Linux +GIT`.split('\n'); + +console.info('Minhas tecnologias preferidas:', tecnologiasPreferidasList); + +if (document.getElementById('tecnologiasPreferidas')) { + document.getElementById('tecnologiasPreferidas').innerHTML = '
    • '+ tecnologiasPreferidasList.join('
    • ') + '
      • '; +} + +function processaBackend(url, callback) { + const http = new XMLHttpRequest(); + http.onreadystatechange = function() { + if (this.readyState == 4) { + console.log('Foi no BACKEND e VOLTOU!'); + console.warn('Resposta do BACKEND em STRING: ', this.responseText); + const dados = JSON.parse(this.responseText); + if (callback) { + callback(dados); + } + } + }; + console.log('CHAMA O BACKEND!!!!'); + http.open("GET", url, true); + http.send(); + console.log('ENVIOU!!!!') + return 'JSON..' +} + + +function criarProduto() { + alert('Vai Criar o Produto...'); +} diff --git a/styles/_header.less b/styles/_header.less index 8add001..51ca825 100644 --- a/styles/_header.less +++ b/styles/_header.less @@ -1,3 +1,6 @@ + +@import "./_variables.less"; + /* Header styling */ header { background-color: #333333; @@ -12,7 +15,7 @@ header { @media (min-width: 400px) and (max-width: 800px) { header { - background-color: red; + background-color: @minhaCorBase; } } @@ -38,15 +41,15 @@ nav ul li { } nav ul li a { - color: #12A89D; + color: @minhaCorBase; text-decoration: none; padding: 10px; border-radius: 5px; } nav ul li a.active { - background-color: #12A89D; - box-shadow: 0 0 2px #12A89D; + background-color: darken(@minhaCorBase, 30%); + box-shadow: 0 0 2px @minhaCorBase; color: #d1f9e9; } @@ -54,6 +57,6 @@ nav ul li a:hover { transition: 0.5s ease-in; color: #d1f9e9; background-color: #222222; - box-shadow: 0 0 10px 5px #12A89D; + box-shadow: 0 0 10px 5px @minhaCorBase; } diff --git a/styles/_variables.less b/styles/_variables.less new file mode 100644 index 0000000..db5e4ea --- /dev/null +++ b/styles/_variables.less @@ -0,0 +1,3 @@ + +@minhaCorBase: #12A89D; + diff --git a/styles/blocks/_table.less b/styles/blocks/_table.less index a73ab7e..375eaff 100644 --- a/styles/blocks/_table.less +++ b/styles/blocks/_table.less @@ -1,22 +1,24 @@ table { border: solid 1px #12A89D; -} -table a { - color: #12A89D; - text-decoration: none; - font-weight: bold; -} + a { + color: #12A89D; + text-decoration: none; + font-weight: bold; + } -table > thead > tr, -table > tfoot > tr { - background-color: #d1f9e9; -} + > thead, + > tfoot { + > tr { + background-color: orange; + } + } -table > thead > tr > th, -table > tfoot > tr > th, -table > tbody > tr > td { - text-align: left; - padding: 10px; + > thead > tr > th, + > tfoot > tr > th, + > tbody > tr > td { + text-align: left; + padding: 10px; + } }