Skip to content

Commit 5104ae4

Browse files
dipikabhdipikabh
authored
Merge pull request mdn#116 from estelle/filterfix
fix JS for filters
2 parents 27fda0e + b97095e commit 5104ae4

File tree

1 file changed

+145
-72
lines changed

1 file changed

+145
-72
lines changed

‎modules/filters.html‎

Lines changed: 145 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -31,149 +31,222 @@
3131
</head>
3232
<body>
3333
<article>
34-
<img src="assets/george_floyd_memorial_sm.jpg" width="600" height="400"
35-
alt="A colorful memorial honoring George Floyd and the Black Lives Matter movement" />
34+
<img
35+
src="assets/george_floyd_memorial_sm.jpg"
36+
width="600"
37+
height="400"
38+
alt="A colorful memorial honoring George Floyd and the Black Lives Matter movement"
39+
/>
3640
<form>
3741
<fieldset>
3842
<legend>Select your filters</legend>
3943
<label>
40-
<input type="range" name="blur"
41-
value="0" min="0" max="1" step="0.1" />
44+
<input
45+
type="range"
46+
name="blur"
47+
value="0"
48+
min="0"
49+
max="1"
50+
step="0.1"
51+
/>
4252
blur()
4353
</label>
4454
<label>
45-
<input type="range" name="brightness"
46-
value="1" min="0" max="2" step="0.1" />
55+
<input
56+
type="range"
57+
name="brightness"
58+
value="1"
59+
min="0"
60+
max="2"
61+
step="0.1"
62+
/>
4763
brightness()
4864
</label>
4965
<label>
50-
<input type="range" name="contrast"
51-
value="1" min="0" max="2" step="0.1" />
66+
<input
67+
type="range"
68+
name="contrast"
69+
value="1"
70+
min="0"
71+
max="2"
72+
step="0.1"
73+
/>
5274
contrast()
5375
</label>
5476
<label>
55-
<input type="range" name="dropShadow"
56-
value="0" min="-1" max="1" step="0.1" />
77+
<input
78+
type="range"
79+
name="dropShadow"
80+
value="0"
81+
min="-1"
82+
max="1"
83+
step="0.1"
84+
/>
5785
drop-shadow()
5886
</label>
5987
<label>
60-
<input type="range" name="grayscale"
61-
value="0" min="0" max="1" step="0.1" />
88+
<input
89+
type="range"
90+
name="grayscale"
91+
value="0"
92+
min="0"
93+
max="1"
94+
step="0.1"
95+
/>
6296
grayscale()
6397
</label>
6498
<label>
65-
<input type="range" name="hueRotate"
66-
value="0" min="-1" max="1" step="0.1" />
99+
<input
100+
type="range"
101+
name="hueRotate"
102+
value="0"
103+
min="-1"
104+
max="1"
105+
step="0.1"
106+
/>
67107
hue-rotate()
68108
</label>
69109
<label>
70-
<input type="range" name="invert"
71-
value="0" min="0" max="1" step="0.1" />
110+
<input
111+
type="range"
112+
name="invert"
113+
value="0"
114+
min="0"
115+
max="1"
116+
step="0.1"
117+
/>
72118
invert()
73119
</label>
74120
<label>
75-
<input type="range" name="opacity"
76-
value="1" min="0" max="1" step="0.1" />
121+
<input
122+
type="range"
123+
name="opacity"
124+
value="1"
125+
min="0"
126+
max="1"
127+
step="0.1"
128+
/>
77129
opacity()
78130
</label>
79131
<label>
80-
<input type="range" name="saturate"
81-
value="1" min="0" max="2" step="0.1" />
132+
<input
133+
type="range"
134+
name="saturate"
135+
value="1"
136+
min="0"
137+
max="2"
138+
step="0.1"
139+
/>
82140
saturate()
83141
</label>
84142
<label>
85-
<input type="range" name="sepia"
86-
value="0" min="0" max="1" step="0.1" />
143+
<input
144+
type="range"
145+
name="sepia"
146+
value="0"
147+
min="0"
148+
max="1"
149+
step="0.1"
150+
/>
87151
sepia()
88152
</label>
89153
<button type="reset">Reset</button>
90154
</fieldset>
91155
</form>
92156
</article>
157+
158+
<pre><output></output></pre>
159+
160+
<p>Image by <cite>DigitalNomad</cite></p>
161+
93162
<script>
94163
const image = document.querySelector("img");
95164
const controls = document.querySelectorAll("input");
96-
const resetValues = new Array();
165+
const output = document.querySelector("output");
97166

98167
for (control of controls) {
99-
resetValues.push(control.value);
100-
control.addEventListener( "change", () => {
101-
changeCSS();
102-
}, false );
168+
control.addEventListener(
169+
"change",
170+
() => {
171+
/* do function */
172+
changeCSS();
173+
},
174+
false
175+
);
103176
}
104-
document.querySelector("button").addEventListener( "click", () => {
105-
setTimeout(() => {
177+
document.querySelector("button").addEventListener(
178+
"click",
179+
() => {
180+
setTimeout(function () {
106181
changeCSS();
107182
}, 50);
108183
},
109184
false
110185
);
111186

112187
function changeCSS() {
113-
image.setAttribute("style", "filter: " +
114-
blur() +
115-
brightness() +
116-
contrast() +
117-
dropShadow() +
118-
grayscale() +
119-
hueRotate() +
120-
invert() +
121-
opacity() +
122-
saturate() +
123-
sepia()
124-
);
188+
let currentFilter =
189+
"filter: " +
190+
blur() +
191+
brightness() +
192+
contrast() +
193+
dropShadow() +
194+
grayscale() +
195+
hueRotate() +
196+
invert() +
197+
opacity() +
198+
saturate() +
199+
sepia() +
200+
";";
201+
image.setAttribute("style", currentFilter);
202+
output.innerText = currentFilter;
125203
}
126-
127204
function blur() {
128-
const blurValue = document.getElementsByName("blur")[0];
129-
return `blur(${blurValue.value}rem) `;
205+
let blurValue = document.getElementsByName("blur")[0].value;
206+
return blurValue == "0" ? "" : `blur(${blurValue}rem) `;
130207
}
131-
132208
function brightness() {
133-
const brightnessValue = document.getElementsByName("brightness")[0];
134-
return `brightness(${brightnessValue.value}) `;
209+
let brightnessValue = document.getElementsByName("brightness")[0].value;
210+
return brightnessValue.toString() === "1"
211+
? ""
212+
: `brightness(${brightnessValue}) `;
135213
}
136-
137214
function contrast() {
138-
const contrastValue = document.getElementsByName("contrast")[0];
139-
return `contrast(${contrastValue.value}) `;
215+
let contrastValue = document.getElementsByName("contrast")[0].value;
216+
return contrastValue == 1 ? "" : `contrast(${contrastValue}) `;
140217
}
141-
142218
function dropShadow() {
143-
const dropShadowValue = document.getElementsByName("dropShadow")[0];
144-
return `drop-shadow(${dropShadowValue.value}rem ${dropShadowValue.value}rem 0rem orange) `;
219+
let dropShadowValue = document.getElementsByName("dropShadow")[0].value;
220+
return dropShadowValue == 0
221+
? ""
222+
: `drop-shadow(${dropShadowValue}rem ${dropShadowValue}rem 0rem orange) `;
145223
}
146-
147224
function grayscale() {
148-
const grayscaleValue = document.getElementsByName("grayscale")[0];
149-
return `grayscale(${grayscaleValue.value}) `;
225+
let grayscaleValue = document.getElementsByName("grayscale")[0].value;
226+
return grayscaleValue == 0 ? "" : `grayscale(${grayscaleValue}) `;
150227
}
151-
152228
function hueRotate() {
153-
const hueRotateValue = document.getElementsByName("hueRotate")[0];
154-
return `hue-rotate(${hueRotateValue.value}turn) `;
229+
let hueRotateValue = document.getElementsByName("hueRotate")[0].value;
230+
return hueRotateValue == 0
231+
? ""
232+
: `hue-rotate(${hueRotateValue}turn) `;
155233
}
156-
157234
function invert() {
158-
const invertValue = document.getElementsByName("invert")[0];
159-
return `invert(${invertValue.value) `;
235+
let invertValue = document.getElementsByName("invert")[0].value;
236+
return invertValue == 0 ? "" : `invert(${invertValue}) `;
160237
}
161-
162238
function opacity() {
163-
const opacityValue = document.getElementsByName("opacity")[0];
164-
return `opacity(${opacityValue.value}) `;
239+
let opacityValue = document.getElementsByName("opacity")[0].value;
240+
return opacityValue == 1 ? "" : `opacity(${opacityValue}) `;
165241
}
166-
167242
function saturate() {
168-
const saturateValue = document.getElementsByName("saturate")[0];
169-
return `saturate(${saturateValue.value}) `;
243+
let saturateValue = document.getElementsByName("saturate")[0].value;
244+
return saturateValue == 1 ? "" : `saturate(${saturateValue}) `;
170245
}
171-
172246
function sepia() {
173-
const sepiaValue = document.getElementsByName("sepia")[0];
174-
return `sepia(${sepiaValue.value}) `;
247+
let sepiaValue = document.getElementsByName("sepia")[0].value;
248+
return sepiaValue == 0 ? "" : `sepia(${sepiaValue})`;
175249
}
176250
</script>
177-
<p>Image by <cite>DigitalNomad</cite></p>
178251
</body>
179252
</html>

0 commit comments

Comments
 (0)