From 61aabb52a78662727ffaf6be3abab9a22d2436ab Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Tue, 14 Feb 2023 15:25:29 -0800 Subject: [PATCH 1/2] fix JS for filters --- modules/filters.html | 222 +++++++++++++++++++++++++++++-------------- 1 file changed, 150 insertions(+), 72 deletions(-) diff --git a/modules/filters.html b/modules/filters.html index cb6c6290..d9684dee 100644 --- a/modules/filters.html +++ b/modules/filters.html @@ -31,78 +31,153 @@

A colorful memorial honoring George Floyd and the Black Lives Matter movement

Select your filters - + blur() - + brightness() - + contrast() - + drop-shadow() - + grayscale() - + hue-rotate() - + invert() - + opacity() - + saturate() - + sepia()

+ +

Image by DigitalNomad

+ -

Image by DigitalNomad

From b97095e3823790f1226d27d74e75a8db57536c0f Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Tue, 14 Feb 2023 15:34:00 -0800 Subject: [PATCH 2/2] variables --- modules/filters.html | 25 ++++++++++--------------- 1 file changed, 10 insertions(+), 15 deletions(-) diff --git a/modules/filters.html b/modules/filters.html index d9684dee..b6af49fe 100644 --- a/modules/filters.html +++ b/modules/filters.html @@ -203,54 +203,49 @@ } function blur() { let blurValue = document.getElementsByName("blur")[0].value; - return blurValue == "0" ? "" : "blur(" + blurValue + "rem) "; + return blurValue == "0" ? "" : `blur(${blurValue}rem) `; } function brightness() { let brightnessValue = document.getElementsByName("brightness")[0].value; return brightnessValue.toString() === "1" ? "" - : "brightness(" + brightnessValue + ") "; + : `brightness(${brightnessValue}) `; } function contrast() { let contrastValue = document.getElementsByName("contrast")[0].value; - return contrastValue == 1 ? "" : "contrast(" + contrastValue + ") "; + return contrastValue == 1 ? "" : `contrast(${contrastValue}) `; } function dropShadow() { let dropShadowValue = document.getElementsByName("dropShadow")[0].value; return dropShadowValue == 0 ? "" - : "drop-shadow(" + - dropShadowValue + - "rem " + - dropShadowValue + - "rem " + - "0rem orange) "; + : `drop-shadow(${dropShadowValue}rem ${dropShadowValue}rem 0rem orange) `; } function grayscale() { let grayscaleValue = document.getElementsByName("grayscale")[0].value; - return grayscaleValue == 0 ? "" : "grayscale(" + grayscaleValue + ") "; + return grayscaleValue == 0 ? "" : `grayscale(${grayscaleValue}) `; } function hueRotate() { let hueRotateValue = document.getElementsByName("hueRotate")[0].value; return hueRotateValue == 0 ? "" - : "hue-rotate(" + hueRotateValue + "turn) "; + : `hue-rotate(${hueRotateValue}turn) `; } function invert() { let invertValue = document.getElementsByName("invert")[0].value; - return invertValue == 0 ? "" : "invert(" + invertValue + ") "; + return invertValue == 0 ? "" : `invert(${invertValue}) `; } function opacity() { let opacityValue = document.getElementsByName("opacity")[0].value; - return opacityValue == 1 ? "" : "opacity(" + opacityValue + ") "; + return opacityValue == 1 ? "" : `opacity(${opacityValue}) `; } function saturate() { let saturateValue = document.getElementsByName("saturate")[0].value; - return saturateValue == 1 ? "" : "saturate(" + saturateValue + ") "; + return saturateValue == 1 ? "" : `saturate(${saturateValue}) `; } function sepia() { let sepiaValue = document.getElementsByName("sepia")[0].value; - return sepiaValue == 0 ? "" : "sepia(" + sepiaValue + ") "; + return sepiaValue == 0 ? "" : `sepia(${sepiaValue})`; }