From 4f17e4941eec757b60cadb1b126b9fabcb580dcc Mon Sep 17 00:00:00 2001 From: Julia Date: Fri, 24 Sep 2021 21:23:29 +0200 Subject: [PATCH] very barebones; will improve soon --- app.js | 30 ++++++++++++++++++++++++++++++ index.html | 28 ++++++++++++++++++++++++++++ 2 files changed, 58 insertions(+) create mode 100644 app.js create mode 100644 index.html diff --git a/app.js b/app.js new file mode 100644 index 0000000..4841e65 --- /dev/null +++ b/app.js @@ -0,0 +1,30 @@ +document.getElementById(`imageInput`).onchange = event => +{ + document.getElementById(`imagePreview`).src = URL.createObjectURL(event.target.files[0]); +} + +var filters = { + invert: [0, `%`], + "hue-rotate": [0, `deg`] +} + +let updateFilters = () => { + var stringified = []; + Object.entries(filters).forEach(entry => { + stringified.push(`${entry[0]}(${entry[1].join(``)})`); + }); + console.log(document.getElementById(`imagePreview`).style.filter = stringified.join(` `)); +} + +document.getElementById(`imageInvert`).onchange = event => +{ + filters.invert[0] = event.target.checked ? 100 : 0; + updateFilters(); +} + +document.getElementById(`imageHue`).onchange = event => +{ + filters[`hue-rotate`][0] = event.target.value + document.getElementById(`imageHueValue`).innerText = `${filters[`hue-rotate`].join(``)}`; + updateFilters(); +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..709a1c0 --- /dev/null +++ b/index.html @@ -0,0 +1,28 @@ + + + + + + hue rainbow thing + + +

hue rainbow thing

+
+ File Picker + +
+
+ Preview + +
+
+ Settings + +
+ + + +
+ + + \ No newline at end of file