// |< >|< |< let flt=m='', val=1; function filtering(){ let img = $("img.original"); val = $('input').val(); val*= flt=='blur' ?.5 :flt=='brightness'|| flt=='contrast'|| flt=='hue-rotate' ?3 :1; if(flt=='drop-shadow'){ $('label').html( `filter: ${flt}( ${val}px ${val}px ${val/2}px black );` ); $('#fgr').css( { filter:flt+`( ${val}px ${val}px ${val/2}px black )` } ); }else{ $('label').html( `filter: ${flt}(${val+m});` ); img.css( {filter:flt+`(${val+m})`} ); } } onload=()=>{ let filters = [ "blur", "opacity", "brightness", "contrast", "grayscale", "sepia", "saturate", "hue-rotate", "invert", "drop-shadow" ]; for(let i of filters){ val = 1; val*= i== 'opacity'||i=='brightness'|| i=='contrast'||i=='hue-rotate'|| i=='saturate' ?50 :i=='grayscale'||i=='sepia'|| i=='invert'?100:1; m = i=='blur' ?'px' :i=='saturate' ?'' :i=='hue-rotate'?'deg':'%'; let btn = $(` ${i}

`); $('div').append(btn); $(`.${i}`).click(()=>{ window.navigator.vibrate(20); flt = i; m = flt=='blur' ?'px' :flt=='saturate' ?'' :flt=='hue-rotate'?'deg':'%'; filtering(); }) } let txt = eff = ""; add.onclick = function(){ window.navigator.vibrate(20); eff = ` ${flt}(${val+m})`; txt += eff; label(); } rem.onclick = function(){ window.navigator.vibrate(20); txt = txt.slice(0,-eff.length); label(); } function label(){ document.querySelector('label'). innerHTML = "filter:"+txt+';'; $(".original").css({filter:txt}) } }

jQ filters