neumorphismm/index.js at main · Daniel200347/neumorphismm · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
const inputSize = document.querySelector('[data-input-range-size]')
const divisionExample = document.querySelector('[data-name-box]')
const inputColor = document.querySelector('[data-input-color]')
const inputTextColor = document.querySelector('[data-input-text-color]')
const body = document.body
const inputRadius = document.querySelector('[data-input-range-radius]')
const inputDistance = document.querySelector('[data-input-range-distance]')
const inputDistanceValue = document.querySelector('[data-input-range-distance]')
const inputIntensity = document.querySelector('[data-input-range-intensity]')
const configuration = document.querySelector('[data-name-configuration]')

inputRadius.addEventListener('input', (event) => {
    const value = event.target.value
    divisionExample.style.borderRadius = `${value}px`;
})


function inputSizeHandler() {
    const value = inputSize.value
    divisionExample.style.width = `${value}px`;
    divisionExample.style.height = `${value}px`;
    inputRadius.setAttribute('max', Math.round(`${value / 2}`))
    inputDistanceValue.value = `${value / 20}`;
}

inputSizeHandler();

inputSize.addEventListener('input', inputSizeHandler)

inputColor.addEventListener('input', (event) => {
    const value = event.target.value
    inputTextColor.value = value
    body.style.backgroundColor = value;
})

function outputDistanceHandler() {
    const value = inputDistance.value
    divisionExample.style.boxShadow = `${value}px ${value}px ${value * 2}px #45556c, ${-value}px ${-value}px ${value * 2}px #7591b8`
    configuration.style.boxShadow = `${value}px ${value}px ${value * 2}px #45556c, ${-value}px ${-value}px ${value * 2}px #7591b8`
}

inputDistance.addEventListener('input', outputDistanceHandler)

outputDistanceHandler()

function outputIntensityHandler() {
    const value = inputIntensity.value
    divisionExample.style.opacity = `${value - 0.01}`
}

outputIntensityHandler()

inputIntensity.addEventListener('input', outputIntensityHandler)

inputDistance.addEventListener('click')
inputDistance.addEventListener('mousemove')