W10 done

w10/app.js

@@ -0,0 +1,118 @@
+/** @type {HTMLElement} */
+let beforeImage = null;
+
+/** @type {HTMLImageElement} */
+let imageHolder = null;
+
+/** @type {HTMLInputElement} */
+let inputText = null;
+
+/** @type {HTMLInputElement} */
+let inputFontSize = null;
+
+/** @type {HTMLInputElement} */
+let inputColor = null;
+
+/** @type {HTMLInputElement} */
+let inputUnsplashID = null;
+
+/**
+* 
+* @param {Object} data 
+* @returns {String}
+*/
+const encodeQueryData = function (data) {
+    const ret = [];
+    for (let d in data) {
+        ret.push(encodeURIComponent(d) + "=" + encodeURIComponent(data[d]));
+    }
+    return ret.join("&");
+}
+
+const setCurrentWizardPage = function(callee) {
+    const current = parseInt(callee.getAttribute("wizardCurrent"));
+    const next = parseInt(callee.getAttribute("wizardNext"));
+    
+    console.log(!inputText.validity.valid)
+    if (current === 1 && !inputText.validity.valid) {
+        inputText.reportValidity();
+        return;
+    }
+    if (current === 2 && (!inputFontSize.validity.valid || !inputColor.validity.valid)) {
+        if (!inputFontSize.validity.valid) {
+            inputFontSize.reportValidity();
+        }
+        if (!inputColor.validity.valid) {
+            inputColor.reportValidity();
+        }
+        return;
+    }
+    if (current === 3 && !inputUnsplashID.validity.valid) {
+        inputUnsplashID.reportValidity();
+        return;
+    }
+    
+    document.querySelectorAll("[wizardPage]").forEach(page => {
+        const pageIdx = parseInt(page.getAttribute("wizardPage"));
+        page.hidden = pageIdx !== next;
+    });
+    
+    if (next === 4) {
+        loadImage();
+    }
+}
+
+
+/**
+* 
+* @param {String} text 
+* @param {Number} fontSize 
+* @param {Number} fontWeight 
+* @param {String} color 
+* @param {String?} backgroundImage 
+* @returns {String}
+*/
+const endpointTpl = (text, fontSize, color="#FFFFFF", backgroundImageId="random") => "https://img.bruzu.com/?" + encodeQueryData({
+    backgroundImage:  `https://source.unsplash.com/${backgroundImageId}/500x500?hash=${Date.now()}`,
+    "a.text": text,
+    "a.color": color,
+    "a.fontFamily": "Poppins",
+    "a.fontSize": fontSize,
+    "a.width": 450,
+});
+
+const loadImage = async function () {
+    const text = inputText.value;
+    const fontSize = parseInt(inputFontSize.value);
+    const color = inputColor.value;
+    const backgroundImageId = inputUnsplashID.value;
+
+    const imageUri = endpointTpl(text, fontSize, color, backgroundImageId);
+    try {
+        const resp = await fetch(imageUri);
+        const imageBlob = await resp.blob();
+        const imageObjectURL = URL.createObjectURL(imageBlob);
+
+        beforeImage.hidden = true
+        imageHolder.children[0].src = imageObjectURL;
+        imageHolder.hidden = false;
+        
+    } catch (e) {
+        alert(`Произошла ошибка: ${e}`);
+        location.reload();
+    }
+}
+
+
+const init = function () {
+    beforeImage = document.getElementById("beforeImage");
+    imageHolder = document.getElementById("imageHolder");
+    inputText = document.getElementById("inputText");
+    inputFontSize = document.getElementById("inputFontSize");
+    inputColor = document.getElementById("inputColor");
+    inputUnsplashID = document.getElementById("inputUnsplashID");
+    
+    document.querySelectorAll("[wizardNext]").forEach(e => e.addEventListener("click", setCurrentWizardPage.bind(window, e)))
+}
+
+document.addEventListener("DOMContentLoaded", init);