<file_sep># Color's Editor :art:

Aplicação desenvolvida para o trabalho prático do Módulo 01 do Bootcamp Desenvolvimento Fullstack disponibilizado pelo Instituto de Gestão e Tecnologia da Informação - IGTI. Visando desenvolver as habilidades em JavaScript, HTML e CSS e manipulação do DOM, desenvolveu-se uma aplicação que realiza a alteração de cores em elementos através da seleção dos valores via input's do tipo range.
As cores seguem o formato RGB.

<hr>

<p align="center">
  <img width="900px" src="https://github.com/ChristopherHauschild/colors-editor-bootcamp-fullstack/blob/master/CE.gif?raw=true"/>
</p>

## Linguagens e Tecnologias utilizadas: :computer:
<ul>
  <li> HTML </li>
  <li> CSS </li>
  <li> JavaScript </li>
</ul>

## Instalação: :rocket:

Como se trata de uma página Web local, basta abrir o arquivo ```index.html``` no browser de preferência.

Aconselha-se a utilização do live-server, um servidor com auto refresh. 

Para instalar basta seguir o comando ```npm install live-server```. E então rodar ```live-server``` na pasta raíz.

Esse procedimento pode ser realizado ainda através da extensão Live Server no VSCode.

### Maiores informações: :pencil:

As demais atividades e projetos desenvolvidos durante o Bootcamp podem ser encontradas neste <a href="https://github.com/ChristopherHauschild/bootcamp-fullstack-igti">link</a>

<hr>

Desenvolvido em frente ao :computer: por <NAME>
<file_sep>window.addEventListener('load', start)

let count = 0
let inputRed = null
let inputGreen = null
let inputBlue = null

function start() {
  inputRed = document.querySelector('#inputRed')
  inputRed.addEventListener('change', colorRedDiv)

  inputGreen = document.querySelector('#inputGreen')
  inputGreen.addEventListener('change', colorGreenDiv)

  inputBlue = document.querySelector('#inputBlue')
  inputBlue.addEventListener('change', colorBlueDiv)
  
  buttonDark = document.querySelector('.dark')
  buttonDark.addEventListener('click', enabledDark)
}

function colorRedDiv(event) {
  let valueRed = document.querySelector('#valueRed') 
  valueRed.classList.add("inputActive")
  valueRed.value = event.target.value

  valueRed.addEventListener('change', setColors())
}

function colorGreenDiv(event) {
  let valueGreen = document.querySelector('#valueGreen') 
  valueGreen.classList.add("inputActive")
  valueGreen.value = event.target.value

  valueGreen.addEventListener('change', setColors())
}


function colorBlueDiv(event) {
  let valueBlue = document.querySelector('#valueBlue') 
  valueBlue.classList.add("inputActive")
  valueBlue.value = event.target.value

  valueBlue.addEventListener('change', setColors())
}

function setColors(R, G, B) {
  let R = valueRed.value
  let G = valueGreen.value
  let B = valueBlue.value

  let square = document.querySelector('.square')
  square.style.backgroundColor = `rgb(${R}, ${G}, ${B})`

  let h1 = document.querySelector('h1')
  h1.style.color = `rgb(${R}, ${G}, ${B})`

  let container = document.querySelector('.container')
  container.style.boxShadow = `1px 2px 2px 0px rgb(${R}, ${G}, ${B})`

}

function enabledDark(event) {
  count++
  
  body = document.querySelector('body')
  if (count % 2 !== 0) {
    body.style.background = 'radial-gradient(circle, rgba(88,85,85,1) 0%, rgba(32,35,42,1) 100%)'
    buttonDark.textContent = 'Light'
    buttonDark.style.border = '2px solid yellow'
    let container = document.querySelector('.container')
    container.style.boxShadow = '3px 3px 3px 0px #fff'
  } else {
    console.log('ei')
    body.style.background = '#0002'
    buttonDark.textContent = 'Dark'
    buttonDark.style.border = '1px solid #0001'
  }
  
}
