Skip to content

fix JS for filters #116

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Feb 16, 2023
Merged

fix JS for filters #116

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
61aabb5
fix JS for filters
estelle Feb 14, 2023
b97095e
variables
estelle Feb 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
217 changes: 145 additions & 72 deletions modules/filters.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,149 +31,222 @@
</head>
<body>
<article>
<img src="assets/george_floyd_memorial_sm.jpg" width="600" height="400"
alt="A colorful memorial honoring George Floyd and the Black Lives Matter movement" />
<img
src="assets/george_floyd_memorial_sm.jpg"
width="600"
height="400"
alt="A colorful memorial honoring George Floyd and the Black Lives Matter movement"
/>
<form>
<fieldset>
<legend>Select your filters</legend>
<label>
<input type="range" name="blur"
value="0" min="0" max="1" step="0.1" />
<input
type="range"
name="blur"
value="0"
min="0"
max="1"
step="0.1"
/>
blur()
</label>
<label>
<input type="range" name="brightness"
value="1" min="0" max="2" step="0.1" />
<input
type="range"
name="brightness"
value="1"
min="0"
max="2"
step="0.1"
/>
brightness()
</label>
<label>
<input type="range" name="contrast"
value="1" min="0" max="2" step="0.1" />
<input
type="range"
name="contrast"
value="1"
min="0"
max="2"
step="0.1"
/>
contrast()
</label>
<label>
<input type="range" name="dropShadow"
value="0" min="-1" max="1" step="0.1" />
<input
type="range"
name="dropShadow"
value="0"
min="-1"
max="1"
step="0.1"
/>
drop-shadow()
</label>
<label>
<input type="range" name="grayscale"
value="0" min="0" max="1" step="0.1" />
<input
type="range"
name="grayscale"
value="0"
min="0"
max="1"
step="0.1"
/>
grayscale()
</label>
<label>
<input type="range" name="hueRotate"
value="0" min="-1" max="1" step="0.1" />
<input
type="range"
name="hueRotate"
value="0"
min="-1"
max="1"
step="0.1"
/>
hue-rotate()
</label>
<label>
<input type="range" name="invert"
value="0" min="0" max="1" step="0.1" />
<input
type="range"
name="invert"
value="0"
min="0"
max="1"
step="0.1"
/>
invert()
</label>
<label>
<input type="range" name="opacity"
value="1" min="0" max="1" step="0.1" />
<input
type="range"
name="opacity"
value="1"
min="0"
max="1"
step="0.1"
/>
opacity()
</label>
<label>
<input type="range" name="saturate"
value="1" min="0" max="2" step="0.1" />
<input
type="range"
name="saturate"
value="1"
min="0"
max="2"
step="0.1"
/>
saturate()
</label>
<label>
<input type="range" name="sepia"
value="0" min="0" max="1" step="0.1" />
<input
type="range"
name="sepia"
value="0"
min="0"
max="1"
step="0.1"
/>
sepia()
</label>
<button type="reset">Reset</button>
</fieldset>
</form>
</article>

<pre><output></output></pre>

<p>Image by <cite>DigitalNomad</cite></p>

<script>
const image = document.querySelector("img");
const controls = document.querySelectorAll("input");
const resetValues = new Array();
const output = document.querySelector("output");

for (control of controls) {
resetValues.push(control.value);
control.addEventListener( "change", () => {
changeCSS();
}, false );
control.addEventListener(
"change",
() => {
/* do function */
changeCSS();
},
false
);
}
document.querySelector("button").addEventListener( "click", () => {
setTimeout(() => {
document.querySelector("button").addEventListener(
"click",
() => {
setTimeout(function () {
changeCSS();
}, 50);
},
false
);

function changeCSS() {
image.setAttribute("style", "filter: " +
blur() +
brightness() +
contrast() +
dropShadow() +
grayscale() +
hueRotate() +
invert() +
opacity() +
saturate() +
sepia()
);
let currentFilter =
"filter: " +
blur() +
brightness() +
contrast() +
dropShadow() +
grayscale() +
hueRotate() +
invert() +
opacity() +
saturate() +
sepia() +
";";
image.setAttribute("style", currentFilter);
output.innerText = currentFilter;
}

function blur() {
const blurValue = document.getElementsByName("blur")[0];
return `blur(${blurValue.value}rem) `;
let blurValue = document.getElementsByName("blur")[0].value;
return blurValue == "0" ? "" : `blur(${blurValue}rem) `;
}

function brightness() {
const brightnessValue = document.getElementsByName("brightness")[0];
return `brightness(${brightnessValue.value}) `;
let brightnessValue = document.getElementsByName("brightness")[0].value;
return brightnessValue.toString() === "1"
? ""
: `brightness(${brightnessValue}) `;
}

function contrast() {
const contrastValue = document.getElementsByName("contrast")[0];
return `contrast(${contrastValue.value}) `;
let contrastValue = document.getElementsByName("contrast")[0].value;
return contrastValue == 1 ? "" : `contrast(${contrastValue}) `;
}

function dropShadow() {
const dropShadowValue = document.getElementsByName("dropShadow")[0];
return `drop-shadow(${dropShadowValue.value}rem ${dropShadowValue.value}rem 0rem orange) `;
let dropShadowValue = document.getElementsByName("dropShadow")[0].value;
return dropShadowValue == 0
? ""
: `drop-shadow(${dropShadowValue}rem ${dropShadowValue}rem 0rem orange) `;
}

function grayscale() {
const grayscaleValue = document.getElementsByName("grayscale")[0];
return `grayscale(${grayscaleValue.value}) `;
let grayscaleValue = document.getElementsByName("grayscale")[0].value;
return grayscaleValue == 0 ? "" : `grayscale(${grayscaleValue}) `;
}

function hueRotate() {
const hueRotateValue = document.getElementsByName("hueRotate")[0];
return `hue-rotate(${hueRotateValue.value}turn) `;
let hueRotateValue = document.getElementsByName("hueRotate")[0].value;
return hueRotateValue == 0
? ""
: `hue-rotate(${hueRotateValue}turn) `;
}

function invert() {
const invertValue = document.getElementsByName("invert")[0];
return `invert(${invertValue.value) `;
let invertValue = document.getElementsByName("invert")[0].value;
return invertValue == 0 ? "" : `invert(${invertValue}) `;
}

function opacity() {
const opacityValue = document.getElementsByName("opacity")[0];
return `opacity(${opacityValue.value}) `;
let opacityValue = document.getElementsByName("opacity")[0].value;
return opacityValue == 1 ? "" : `opacity(${opacityValue}) `;
}

function saturate() {
const saturateValue = document.getElementsByName("saturate")[0];
return `saturate(${saturateValue.value}) `;
let saturateValue = document.getElementsByName("saturate")[0].value;
return saturateValue == 1 ? "" : `saturate(${saturateValue}) `;
}

function sepia() {
const sepiaValue = document.getElementsByName("sepia")[0];
return `sepia(${sepiaValue.value}) `;
let sepiaValue = document.getElementsByName("sepia")[0].value;
return sepiaValue == 0 ? "" : `sepia(${sepiaValue})`;
}
</script>
<p>Image by <cite>DigitalNomad</cite></p>
</body>
</html>