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
+
+
+
+
+
+
\ No newline at end of file