From 73a5c7fae9ffbe9ada721148c8c454a643aceebe Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Sun, 20 Feb 2022 16:11:50 +0100 Subject: chore!: restructure repo I separated public files from the config/dev files. It improves repo readability. I also moved dotenv helper to public/inc directory and extract the Matomo tracker in the same directory. --- .../js-small-apps/css-border-previewer/README.md | 13 + .../js-small-apps/css-border-previewer/app.js | 847 +++++++++++++++++++++ .../js-small-apps/css-border-previewer/index.html | 625 +++++++++++++++ .../js-small-apps/css-border-previewer/style.css | 181 +++++ 4 files changed, 1666 insertions(+) create mode 100644 public/projects/js-small-apps/css-border-previewer/README.md create mode 100644 public/projects/js-small-apps/css-border-previewer/app.js create mode 100644 public/projects/js-small-apps/css-border-previewer/index.html create mode 100644 public/projects/js-small-apps/css-border-previewer/style.css (limited to 'public/projects/js-small-apps/css-border-previewer') diff --git a/public/projects/js-small-apps/css-border-previewer/README.md b/public/projects/js-small-apps/css-border-previewer/README.md new file mode 100644 index 0000000..24a4566 --- /dev/null +++ b/public/projects/js-small-apps/css-border-previewer/README.md @@ -0,0 +1,13 @@ +# CSS Border Previewer + +An app to preview how a shapes looks when you change CSS border properties. + +You can find more details about the implementation here: https://github.com/florinpop17/app-ideas/blob/master/Projects/1-Beginner/Border-Radius-Previewer.md but I have decided to not limit myself to border-radius. + +## Preview + +You can see a live preview here: https://demo.armandphilippot.com/#css-border-previewer + +## License + +This project is open-source and available under the [MIT License](../LICENSE). diff --git a/public/projects/js-small-apps/css-border-previewer/app.js b/public/projects/js-small-apps/css-border-previewer/app.js new file mode 100644 index 0000000..583703d --- /dev/null +++ b/public/projects/js-small-apps/css-border-previewer/app.js @@ -0,0 +1,847 @@ +/** + * Retrieve the border color property name depending on direction. + * @param {String} direction - Either `top`, `right`, `left` or `bottom`. + * @returns {String} The CSS property name. + */ +function getBorderColorProperty(direction) { + let borderColorProperty; + + switch (direction) { + case "top": + borderColorProperty = "borderTopColor"; + break; + case "right": + borderColorProperty = "borderRightColor"; + break; + case "bottom": + borderColorProperty = "borderBottomColor"; + break; + case "left": + borderColorProperty = "borderLeftColor"; + break; + default: + borderColorProperty = "borderColor"; + break; + } + + return borderColorProperty; +} + +/** + * Retrieve the border style property name depending on direction. + * @param {String} direction - Either `top`, `right`, `bottom` or `left`. + * @returns {String} The CSS property name. + */ +function getBorderStyleProperty(direction) { + let borderStyleProperty; + + switch (direction) { + case "top": + borderStyleProperty = "borderTopStyle"; + break; + case "right": + borderStyleProperty = "borderRightStyle"; + break; + case "bottom": + borderStyleProperty = "borderBottomStyle"; + break; + case "left": + borderStyleProperty = "borderLeftStyle"; + break; + default: + borderStyleProperty = "borderStyle"; + break; + } + + return borderStyleProperty; +} + +/** + * Retrieve the border width property name depending on direction. + * @param {String} direction - Either `top`, `right`, `left` or `bottom`. + * @returns {String} The CSS property name. + */ +function getBorderWidthProperty(direction) { + let borderWidthProperty; + + switch (direction) { + case "top": + borderWidthProperty = "borderTopWidth"; + break; + case "right": + borderWidthProperty = "borderRightWidth"; + break; + case "bottom": + borderWidthProperty = "borderBottomWidth"; + break; + case "left": + borderWidthProperty = "borderLeftWidth"; + break; + default: + borderWidthProperty = "borderWidth"; + break; + } + + return borderWidthProperty; +} + +/** + * Apply the custom border to an element. + * @param {HTMLElement} el - Apply border to this element. + * @param {String} property - Either `color`, `style` or `width`. + * @param {String} value - The value to apply. + * @param {String} [direction] - Either `top`, `right`, `bottom` or `left`. + */ +function setBorder(el, property, value, direction = null) { + let borderProperty; + + switch (property) { + case "color": + borderProperty = getBorderColorProperty(direction); + break; + case "style": + borderProperty = getBorderStyleProperty(direction); + break; + case "width": + borderProperty = getBorderWidthProperty(direction); + default: + break; + } + + el.style[borderProperty] = value; +} + +/** + * Apply the custom border radius to an element. + * @param {HTMLElement} el - Apply border radius to this element. + * @param {String} firstRadius - The first radius value. + * @param {String} [secondRadius] - The second radius value. + * @param {String} [x] - The horizontal direction: either `right` or `left`. + * @param {String} [y] - The vertical direction: either `top` or `bottom`. + */ +function setBorderRadius(el, firstRadius, secondRadius, x = null, y = null) { + const direction = `${x}-${y}`; + const value = `${firstRadius}${secondRadius ? ` / ${secondRadius}` : ""}`; + let borderRadiusProperty; + + switch (direction) { + case "left-top": + borderRadiusProperty = "borderTopLeftRadius"; + break; + case "right-top": + borderRadiusProperty = "borderTopRightRadius"; + break; + case "left-bottom": + borderRadiusProperty = "borderBottomLeftRadius"; + break; + case "right-bottom": + borderRadiusProperty = "borderBottomRightRadius"; + break; + default: + borderRadiusProperty = "borderRadius"; + break; + } + + el.style[borderRadiusProperty] = value; +} + +/** + * Display the corresponding border settings. + * @param {String} string - Either `common` or `individual`. + */ +function toggleBorderSettingsDisplay(string) { + const allBordersFieldset = document.getElementById("fieldset-borders"); + const topBorderFieldset = document.getElementById("fieldset-border-top"); + const rightBorderFieldset = document.getElementById("fieldset-border-right"); + const bottomBorderFieldset = document.getElementById( + "fieldset-border-bottom" + ); + const leftBorderFieldset = document.getElementById("fieldset-border-left"); + + if (string === "common") { + allBordersFieldset.style.display = ""; + topBorderFieldset.style.display = "none"; + rightBorderFieldset.style.display = "none"; + bottomBorderFieldset.style.display = "none"; + leftBorderFieldset.style.display = "none"; + } else { + allBordersFieldset.style.display = "none"; + topBorderFieldset.style.display = ""; + rightBorderFieldset.style.display = ""; + bottomBorderFieldset.style.display = ""; + leftBorderFieldset.style.display = ""; + } +} + +/** + * Display the corresponding border-radius settings. + * @param {String} string - Either `common` or `individual`. + */ +function toggleBorderRadiusSettingsDisplay(string) { + const allBordersRadiusFieldset = document.getElementById( + "fieldset-borders-radius" + ); + const topLeftBorderRadiusFieldset = document.getElementById( + "fieldset-border-top-left-radius" + ); + const topRightBorderRadiusFieldset = document.getElementById( + "fieldset-border-top-right-radius" + ); + const bottomLeftBorderRadiusFieldset = document.getElementById( + "fieldset-border-bottom-left-radius" + ); + const bottomRightBorderRadiusFieldset = document.getElementById( + "fieldset-border-bottom-right-radius" + ); + + if (string === "common") { + allBordersRadiusFieldset.style.display = ""; + topLeftBorderRadiusFieldset.style.display = "none"; + topRightBorderRadiusFieldset.style.display = "none"; + bottomLeftBorderRadiusFieldset.style.display = "none"; + bottomRightBorderRadiusFieldset.style.display = "none"; + } else { + allBordersRadiusFieldset.style.display = "none"; + topLeftBorderRadiusFieldset.style.display = ""; + topRightBorderRadiusFieldset.style.display = ""; + bottomLeftBorderRadiusFieldset.style.display = ""; + bottomRightBorderRadiusFieldset.style.display = ""; + } +} + +/** + * Print the generated code into the given element. + * @param {HTMLElement} el - The element where to print generated code. + */ +function printCode(el) { + const code = document.querySelector(".result__code"); + let codeOutput = ` +.box {\n`; + + for (const property of el.style) { + codeOutput += `\t${property}: ${el.style[property]};\n`; + } + + codeOutput += "}"; + code.textContent = codeOutput; +} + +/** + * Check which type of settings is checked. + * @param {String} radioValue - The input radio value. + * @returns {Boolean} True if is individual; false if is common. + */ +function isIndividualSettings(radioValue) { + return radioValue === "true" ? true : false; +} + +/** + * Set all borders to a given element. + * @param {HTMLElement} el - Apply border to this element. + */ +function setCommonBorder(el) { + const allBordersColorInput = document.getElementById("borders-color"); + const allBordersStyleSelect = document.getElementById("borders-style"); + const allBordersUnitSelect = document.getElementById("borders-unit"); + const allBordersWidthInput = document.getElementById("borders-width"); + + setBorder(el, "color", allBordersColorInput.value); + setBorder(el, "style", allBordersStyleSelect.value); + setBorder( + el, + "width", + `${allBordersWidthInput.value}${allBordersUnitSelect.value}` + ); + + allBordersColorInput.addEventListener("input", () => { + setBorder(el, "color", allBordersColorInput.value); + printCode(el); + }); + + allBordersStyleSelect.addEventListener("input", () => { + setBorder(el, "style", allBordersStyleSelect.value); + printCode(el); + }); + + allBordersUnitSelect.addEventListener("input", () => { + setBorder( + el, + "width", + `${allBordersWidthInput.value}${allBordersUnitSelect.value}` + ); + printCode(el); + }); + + allBordersWidthInput.addEventListener("input", () => { + setBorder( + el, + "width", + `${allBordersWidthInput.value}${allBordersUnitSelect.value}` + ); + printCode(el); + }); +} + +/** + * Set the top border to the given element. + * @param {HTMLElement} el - Apply the top border to this element. + */ +function setTopBorder(el) { + const topBorderColorInput = document.getElementById("border-top-color"); + const topBorderStyleSelect = document.getElementById("border-top-style"); + const topBorderUnitSelect = document.getElementById("border-top-unit"); + const topBorderWidthInput = document.getElementById("border-top-width"); + + setBorder(el, "color", topBorderColorInput.value, "top"); + setBorder(el, "style", topBorderStyleSelect.value, "top"); + setBorder( + el, + "width", + `${topBorderWidthInput.value}${topBorderUnitSelect.value}`, + "top" + ); + + topBorderColorInput.addEventListener("input", () => { + setBorder(el, "color", topBorderColorInput.value, "top"); + printCode(el); + }); + + topBorderStyleSelect.addEventListener("input", () => { + setBorder(el, "style", topBorderStyleSelect.value, "top"); + printCode(el); + }); + + topBorderUnitSelect.addEventListener("input", () => { + setBorder( + el, + "width", + `${topBorderWidthInput.value}${topBorderUnitSelect.value}`, + "top" + ); + printCode(el); + }); + + topBorderWidthInput.addEventListener("input", () => { + setBorder( + el, + "width", + `${topBorderWidthInput.value}${topBorderUnitSelect.value}`, + "top" + ); + printCode(el); + }); +} + +/** + * Set the right border to the given element. + * @param {HTMLElement} el - Apply the right border to this element. + */ +function setRightBorder(el) { + const rightBorderWidthInput = document.getElementById("border-right-width"); + const rightBorderUnitSelect = document.getElementById("border-right-unit"); + const rightBorderStyleSelect = document.getElementById("border-right-style"); + const rightBorderColorInput = document.getElementById("border-right-color"); + + setBorder(el, "color", rightBorderColorInput.value, "right"); + setBorder(el, "style", rightBorderStyleSelect.value, "right"); + setBorder( + el, + "width", + `${rightBorderWidthInput.value}${rightBorderUnitSelect.value}`, + "right" + ); + + rightBorderColorInput.addEventListener("input", () => { + setBorder(el, "color", rightBorderColorInput.value, "right"); + printCode(el); + }); + + rightBorderStyleSelect.addEventListener("input", () => { + setBorder(el, "style", rightBorderStyleSelect.value, "right"); + printCode(el); + }); + + rightBorderUnitSelect.addEventListener("input", () => { + setBorder( + el, + "width", + `${rightBorderWidthInput.value}${rightBorderUnitSelect.value}`, + "right" + ); + printCode(el); + }); + + rightBorderWidthInput.addEventListener("input", () => { + setBorder( + el, + "width", + `${rightBorderWidthInput.value}${rightBorderUnitSelect.value}`, + "right" + ); + printCode(el); + }); +} + +/** + * Set the bottom border to the given element. + * @param {HTMLElement} el - Apply the bottom border to this element. + */ +function setBottomBorder(el) { + const bottomBorderWidthInput = document.getElementById("border-bottom-width"); + const bottomBorderUnitSelect = document.getElementById("border-bottom-unit"); + const bottomBorderStyleSelect = document.getElementById( + "border-bottom-style" + ); + const bottomBorderColorInput = document.getElementById("border-bottom-color"); + + setBorder(el, "color", bottomBorderColorInput.value, "bottom"); + setBorder(el, "style", bottomBorderStyleSelect.value, "bottom"); + setBorder( + el, + "width", + `${bottomBorderWidthInput.value}${bottomBorderUnitSelect.value}`, + "bottom" + ); + + bottomBorderColorInput.addEventListener("input", () => { + setBorder(el, "color", bottomBorderColorInput.value, "bottom"); + printCode(el); + }); + + bottomBorderStyleSelect.addEventListener("input", () => { + setBorder(el, "style", bottomBorderStyleSelect.value, "bottom"); + printCode(el); + }); + + bottomBorderUnitSelect.addEventListener("input", () => { + setBorder( + el, + "width", + `${bottomBorderWidthInput.value}${bottomBorderUnitSelect.value}`, + "bottom" + ); + printCode(el); + }); + + bottomBorderWidthInput.addEventListener("input", () => { + setBorder( + el, + "width", + `${bottomBorderWidthInput.value}${bottomBorderUnitSelect.value}`, + "bottom" + ); + printCode(el); + }); +} + +/** + * Set the left border to the given element. + * @param {HTMLElement} el - Apply the left border to this element. + */ +function setLeftBorder(el) { + const leftBorderWidthInput = document.getElementById("border-left-width"); + const leftBorderUnitSelect = document.getElementById("border-left-unit"); + const leftBorderStyleSelect = document.getElementById("border-left-style"); + const leftBorderColorInput = document.getElementById("border-left-color"); + + setBorder(el, "color", leftBorderColorInput.value, "left"); + setBorder(el, "style", leftBorderStyleSelect.value, "left"); + setBorder( + el, + "width", + `${leftBorderWidthInput.value}${leftBorderUnitSelect.value}`, + "left" + ); + + leftBorderColorInput.addEventListener("input", () => { + setBorder(el, "color", leftBorderColorInput.value, "left"); + printCode(el); + }); + + leftBorderStyleSelect.addEventListener("input", () => { + setBorder(el, "style", leftBorderStyleSelect.value, "left"); + printCode(el); + }); + + leftBorderUnitSelect.addEventListener("input", () => { + setBorder( + el, + "width", + `${leftBorderWidthInput.value}${leftBorderUnitSelect.value}`, + "left" + ); + printCode(el); + }); + + leftBorderWidthInput.addEventListener("input", () => { + setBorder( + el, + "width", + `${leftBorderWidthInput.value}${leftBorderUnitSelect.value}`, + "left" + ); + printCode(el); + }); +} + +/** + * Set all borders radius to the given element. + * @param {HTMLElement} el - Apply the border radius to this element. + */ +function setCommonBorderRadius(el) { + const borderCommonFirstRadius = document.getElementById( + "borders-first-radius" + ); + const borderCommonFirstRadiusUnit = document.getElementById( + "borders-first-radius-unit" + ); + const borderCommonSecondRadius = document.getElementById( + "borders-second-radius" + ); + const borderCommonSecondRadiusUnit = document.getElementById( + "borders-second-radius-unit" + ); + let firstRadius = `${borderCommonFirstRadius.value}${borderCommonFirstRadiusUnit.value}`; + let secondRadius = borderCommonSecondRadius.value + ? `${borderCommonSecondRadius.value}${borderCommonSecondRadiusUnit.value}` + : null; + + setBorderRadius(el, firstRadius, secondRadius); + + borderCommonFirstRadius.addEventListener("input", () => { + firstRadius = `${borderCommonFirstRadius.value}${borderCommonFirstRadiusUnit.value}`; + setBorderRadius(el, firstRadius, secondRadius); + printCode(el); + }); + + borderCommonFirstRadiusUnit.addEventListener("input", () => { + firstRadius = `${borderCommonFirstRadius.value}${borderCommonFirstRadiusUnit.value}`; + setBorderRadius(el, firstRadius, secondRadius); + printCode(el); + }); + + borderCommonSecondRadius.addEventListener("input", () => { + secondRadius = borderCommonSecondRadius.value + ? `${borderCommonSecondRadius.value}${borderCommonSecondRadiusUnit.value}` + : null; + setBorderRadius(el, firstRadius, secondRadius); + printCode(el); + }); + + borderCommonSecondRadiusUnit.addEventListener("input", () => { + secondRadius = borderCommonSecondRadius.value + ? `${borderCommonSecondRadius.value}${borderCommonSecondRadiusUnit.value}` + : null; + setBorderRadius(el, firstRadius, secondRadius); + printCode(el); + }); +} + +/** + * Set the top left border-radius to the given element. + * @param {HTMLElement} el - Apply the top left border-radius to this element. + */ +function setTopLeftBorderRadius(el) { + const borderTopLeftFirstRadius = document.getElementById( + "border-top-left-first-radius" + ); + const borderTopLeftFirstRadiusUnit = document.getElementById( + "border-top-left-first-radius-unit" + ); + const borderTopLeftSecondRadius = document.getElementById( + "border-top-left-second-radius" + ); + const borderTopLeftSecondRadiusUnit = document.getElementById( + "border-top-left-second-radius-unit" + ); + let firstRadius = `${borderTopLeftFirstRadius.value}${borderTopLeftFirstRadiusUnit.value}`; + let secondRadius = borderTopLeftSecondRadius.value + ? `${borderTopLeftSecondRadius.value}${borderTopLeftSecondRadiusUnit.value}` + : null; + + setBorderRadius(el, firstRadius, secondRadius, "left", "top"); + + borderTopLeftFirstRadius.addEventListener("input", () => { + firstRadius = `${borderTopLeftFirstRadius.value}${borderTopLeftFirstRadiusUnit.value}`; + setBorderRadius(el, firstRadius, secondRadius, "left", "top"); + printCode(el); + }); + + borderTopLeftFirstRadiusUnit.addEventListener("input", () => { + firstRadius = `${borderTopLeftFirstRadius.value}${borderTopLeftFirstRadiusUnit.value}`; + setBorderRadius(el, firstRadius, secondRadius, "left", "top"); + printCode(el); + }); + + borderTopLeftSecondRadius.addEventListener("input", () => { + secondRadius = borderTopLeftSecondRadius.value + ? `${borderTopLeftSecondRadius.value}${borderTopLeftSecondRadiusUnit.value}` + : null; + setBorderRadius(el, firstRadius, secondRadius, "left", "top"); + printCode(el); + }); + + borderTopLeftSecondRadiusUnit.addEventListener("input", () => { + secondRadius = borderTopLeftSecondRadius.value + ? `${borderTopLeftSecondRadius.value}${borderTopLeftSecondRadiusUnit.value}` + : null; + setBorderRadius(el, firstRadius, secondRadius, "left", "top"); + printCode(el); + }); +} + +/** + * Set the top right border-radius to the given element. + * @param {HTMLElement} el - Apply the top right border-radius to this element. + */ +function setTopRightBorderRadius(el) { + const borderTopRightFirstRadius = document.getElementById( + "border-top-right-first-radius" + ); + const borderTopRightFirstRadiusUnit = document.getElementById( + "border-top-right-first-radius-unit" + ); + const borderTopRightSecondRadius = document.getElementById( + "border-top-right-second-radius" + ); + const borderTopRightSecondRadiusUnit = document.getElementById( + "border-top-right-second-radius-unit" + ); + const firstRadius = `${borderTopRightFirstRadius.value}${borderTopRightFirstRadiusUnit.value}`; + const secondRadius = borderTopRightSecondRadius.value + ? `${borderTopRightSecondRadius.value}${borderTopRightSecondRadiusUnit.value}` + : null; + + setBorderRadius(el, firstRadius, secondRadius, "right", "top"); + + borderTopRightFirstRadius.addEventListener("input", () => { + firstRadius = `${borderTopRightFirstRadius.value}${borderTopRightFirstRadiusUnit.value}`; + setBorderRadius(el, firstRadius, secondRadius, "right", "top"); + printCode(el); + }); + + borderTopRightFirstRadiusUnit.addEventListener("input", () => { + firstRadius = `${borderTopRightFirstRadius.value}${borderTopRightFirstRadiusUnit.value}`; + setBorderRadius(el, firstRadius, secondRadius, "right", "top"); + printCode(el); + }); + + borderTopRightSecondRadius.addEventListener("input", () => { + secondRadius = borderTopRightSecondRadius.value + ? `${borderTopRightSecondRadius.value}${borderTopRightSecondRadiusUnit.value}` + : null; + setBorderRadius(el, firstRadius, secondRadius, "right", "top"); + printCode(el); + }); + + borderTopRightSecondRadiusUnit.addEventListener("input", () => { + secondRadius = borderTopRightSecondRadius.value + ? `${borderTopRightSecondRadius.value}${borderTopRightSecondRadiusUnit.value}` + : null; + setBorderRadius(el, firstRadius, secondRadius, "right", "top"); + printCode(el); + }); +} + +/** + * Set the bottom left border-radius to the given element. + * @param {HTMLElement} el - Apply bottom left border-radius to this element. + */ +function setBottomLeftBorderRadius(el) { + const borderBottomLeftFirstRadius = document.getElementById( + "border-bottom-left-first-radius" + ); + const borderBottomLeftFirstRadiusUnit = document.getElementById( + "border-bottom-left-first-radius-unit" + ); + const borderBottomLeftSecondRadius = document.getElementById( + "border-bottom-left-second-radius" + ); + const borderBottomLeftSecondRadiusUnit = document.getElementById( + "border-bottom-left-second-radius-unit" + ); + const firstRadius = `${borderBottomLeftFirstRadius.value}${borderBottomLeftFirstRadiusUnit.value}`; + const secondRadius = borderBottomLeftSecondRadius.value + ? `${borderBottomLeftSecondRadius.value}${borderBottomLeftSecondRadiusUnit.value}` + : null; + + setBorderRadius(el, firstRadius, secondRadius, "left", "bottom"); + + borderBottomLeftFirstRadius.addEventListener("input", () => { + firstRadius = `${borderBottomLeftFirstRadius.value}${borderBottomLeftFirstRadiusUnit.value}`; + setBorderRadius(el, firstRadius, secondRadius, "left", "bottom"); + printCode(el); + }); + + borderBottomLeftFirstRadiusUnit.addEventListener("input", () => { + firstRadius = `${borderBottomLeftFirstRadius.value}${borderBottomLeftFirstRadiusUnit.value}`; + setBorderRadius(el, firstRadius, secondRadius, "left", "bottom"); + printCode(el); + }); + + borderBottomLeftSecondRadius.addEventListener("input", () => { + secondRadius = borderBottomLeftSecondRadius.value + ? `${borderBottomLeftSecondRadius.value}${borderBottomLeftSecondRadiusUnit.value}` + : null; + setBorderRadius(el, firstRadius, secondRadius, "left", "bottom"); + printCode(el); + }); + + borderBottomLeftSecondRadiusUnit.addEventListener("input", () => { + secondRadius = borderBottomLeftSecondRadius.value + ? `${borderBottomLeftSecondRadius.value}${borderBottomLeftSecondRadiusUnit.value}` + : null; + setBorderRadius(el, firstRadius, secondRadius, "left", "bottom"); + printCode(el); + }); +} + +/** + * Set the bottom right border-radius to the given element. + * @param {HTMLElement} el - Apply bottom right border-radius to this element. + */ +function setBottomRightBorderRadius(el) { + const borderBottomRightFirstRadius = document.getElementById( + "border-bottom-right-first-radius" + ); + const borderBottomRightFirstRadiusUnit = document.getElementById( + "border-bottom-right-first-radius-unit" + ); + const borderBottomRightSecondRadius = document.getElementById( + "border-bottom-right-second-radius" + ); + const borderBottomRightSecondRadiusUnit = document.getElementById( + "border-bottom-right-second-radius-unit" + ); + const firstRadius = `${borderBottomRightFirstRadius.value}${borderBottomRightFirstRadiusUnit.value}`; + const secondRadius = borderBottomRightSecondRadius.value + ? `${borderBottomRightSecondRadius.value}${borderBottomRightSecondRadiusUnit.value}` + : null; + + setBorderRadius(el, firstRadius, secondRadius, "right", "bottom"); + + borderBottomRightFirstRadius.addEventListener("input", () => { + firstRadius = `${borderBottomRightFirstRadius.value}${borderBottomRightFirstRadiusUnit.value}`; + setBorderRadius(el, firstRadius, secondRadius, "right", "bottom"); + printCode(el); + }); + + borderBottomRightFirstRadiusUnit.addEventListener("input", () => { + firstRadius = `${borderBottomRightFirstRadius.value}${borderBottomRightFirstRadiusUnit.value}`; + setBorderRadius(el, firstRadius, secondRadius, "right", "bottom"); + printCode(el); + }); + + borderBottomRightSecondRadius.addEventListener("input", () => { + secondRadius = borderBottomRightSecondRadius.value + ? `${borderBottomRightSecondRadius.value}${borderBottomRightSecondRadiusUnit.value}` + : null; + setBorderRadius(el, firstRadius, secondRadius, "right", "bottom"); + printCode(el); + }); + + borderBottomRightSecondRadiusUnit.addEventListener("input", () => { + secondRadius = borderBottomRightSecondRadius.value + ? `${borderBottomRightSecondRadius.value}${borderBottomRightSecondRadiusUnit.value}` + : null; + setBorderRadius(el, firstRadius, secondRadius, "right", "bottom"); + printCode(el); + }); +} + +/** + * Display a message inside the given element. + * @param {HTMLElement} el - The element where to print the message. + * @param {String} msg - The message to display. + * @param {Number} [duration] - The message duration. + */ +function printMessage(el, msg, duration = 1000) { + const backupContent = el.textContent; + + el.textContent = msg; + setTimeout(() => (el.textContent = backupContent), duration); +} + +/** + * Copy code to the clipboard. + */ +function copyCode() { + const code = document.querySelector(".result__code"); + navigator.clipboard.writeText(code.textContent); +} + +/** + * Listen the button copy to clipboard. + */ +function listenCopyCodeBtn() { + const btn = document.getElementById("copy-code"); + + btn.addEventListener("click", () => { + copyCode(); + printMessage(btn, "Copied to clipboard!"); + }); +} + +/** + * Initialize borders settings and borders. + * @param {String} radioValue - The input radio value. + * @param {HTMLElement} el - The element where to apply borders. + */ +function initBorders(radioValue, el) { + if (isIndividualSettings(radioValue)) { + toggleBorderSettingsDisplay("individual"); + setTopBorder(el); + setRightBorder(el); + setBottomBorder(el); + setLeftBorder(el); + } else { + toggleBorderSettingsDisplay("common"); + setCommonBorder(el); + } +} + +/** + * Initialize border-radius settings and border-radius. + * @param {String} radioValue - The input radio value. + * @param {HTMLElement} el - The element where to apply border-radius. + */ +function initBordersRadius(radioValue, el) { + if (isIndividualSettings(radioValue)) { + toggleBorderRadiusSettingsDisplay("individual"); + setTopLeftBorderRadius(el); + setTopRightBorderRadius(el); + setBottomLeftBorderRadius(el); + setBottomRightBorderRadius(el); + } else { + toggleBorderRadiusSettingsDisplay("common"); + setCommonBorderRadius(el); + } +} + +/** + * Initialize the app. + */ +function init() { + const box = document.querySelector(".box"); + const borderPropertyRadio = document.querySelectorAll( + 'input[name="border-property"]' + ); + const borderRadiusPropertyRadio = document.querySelectorAll( + 'input[name="border-radius-property"]' + ); + + for (const radio of borderPropertyRadio) { + if (radio.checked) initBorders(radio.value, box); + radio.addEventListener("change", () => initBorders(radio.value, box)); + } + + for (const radio of borderRadiusPropertyRadio) { + if (radio.checked) initBordersRadius(radio.value, box); + radio.addEventListener("change", () => initBordersRadius(radio.value, box)); + } + + printCode(box); + listenCopyCodeBtn(); +} + +init(); diff --git a/public/projects/js-small-apps/css-border-previewer/index.html b/public/projects/js-small-apps/css-border-previewer/index.html new file mode 100644 index 0000000..bf16fa5 --- /dev/null +++ b/public/projects/js-small-apps/css-border-previewer/index.html @@ -0,0 +1,625 @@ + + + + + + + CSS Border Previewer + + + +
+

CSS Border Previewer

+
+
+
+
+
+
+
+ Global settings +
+ Control border property separately? + + + + +
+
+ Control border radius property separately? + + + + +
+
+
+ Borders settings +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ Border-top settings +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ Border-right settings +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ Border-bottom settings +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ Border-left settings +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ Border-radius settings +
+

First radius:

+ + + + +
+
+

Second radius:

+ + + + +
+
+
+ Border-top-left-radius settings +
+

First radius:

+ + + + +
+
+

Second radius:

+ + + + +
+
+
+ Border-top-right-radius settings +
+

First radius:

+ + + + +
+
+

Second radius:

+ + + + +
+
+
+ + Border-bottom-left-radius settings + +
+

First radius:

+ + + + +
+
+

Second radius:

+ + + + +
+
+
+ + Border-bottom-right-radius settings + +
+

First radius:

+ + + + +
+
+

Second radius:

+ + + + +
+
+
+
+ 
+          
+
+ +
+
+ + + + diff --git a/public/projects/js-small-apps/css-border-previewer/style.css b/public/projects/js-small-apps/css-border-previewer/style.css new file mode 100644 index 0000000..458d31c --- /dev/null +++ b/public/projects/js-small-apps/css-border-previewer/style.css @@ -0,0 +1,181 @@ +*, +*::after, +*::before { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + background: #fff; + color: #000; + font-family: Arial, Helvetica, sans-serif; + font-size: 1rem; + line-height: 1.618; + display: flex; + flex-flow: column nowrap; + min-height: 100vh; +} + +.header, +.footer, +.result { + width: min(calc(100vw - 2rem), calc(1200px - 2rem)); + margin-left: auto; + margin-right: auto; +} + +.preview, +.settings { + width: min(calc(100vw - 2rem), calc(1200px / 2 - 2rem)); + margin-left: auto; + margin-right: auto; +} + +@media screen and (min-width: 1200px) { + .preview { + margin-right: 0; + } + + .settings { + margin-left: 0; + } +} + +.header { + padding: 2rem 0 3rem; + text-align: center; +} + +.branding { + color: hsl(219, 64%, 35%); +} + +.main { + flex: 1; + display: flex; + flex-flow: row wrap; + gap: 1rem; + margin: auto; +} + +.preview { + border: 1px solid #ccc; + padding: 3rem; + position: relative; +} + +.box { + border: 1px solid #000; + width: 100%; + height: 20vh; + position: sticky; + top: 3rem; +} + +.result { + max-width: 100%; +} + +.result__pre { + background: #333; + color: #fff; + min-height: 20rem; + margin: 1rem auto; + padding: 0 1rem; + overflow-x: auto; + tab-size: 4; +} + +.result .btn { + margin: auto; +} + +@media screen and (min-width: 1440px) { + .result__pre { + margin: 1rem 0; + } +} + +.footer { + margin-top: 2rem; + padding: 1rem 0; +} + +.copyright { + font-size: 0.9rem; + text-align: center; +} + +.form p { + font-weight: 600; +} + +.form__fieldset { + border-color: hsl(219, 64%, 35%); + margin-bottom: 1rem; + padding: 0.5rem 1rem 1rem; +} + +.form__fieldset--flex { + display: flex; + flex-flow: row wrap; + gap: 1rem; +} + +.form__legend { + color: hsl(219, 64%, 35%); + font-size: 0.9rem; + font-weight: 600; + text-transform: uppercase; + padding: 0 0.5rem; +} + +.form__item--flex { + display: flex; + flex-flow: column wrap; +} + +.form__item:not(.form__item--flex) + * { + margin-top: 1rem; +} + +.form__input, +.form__select { + font-family: inherit; + font-size: inherit; + line-height: inherit; +} + +.form__input { + padding: 0.2rem 0.5rem; +} + +.form__select { + padding: 0.4rem 0.5rem; +} + +.btn { + background: #fff; + border: 2px solid hsl(219, 64%, 35%); + box-shadow: 1px 1px 2px hsl(219, 64%, 15%), 0 0 2px 1px hsl(219, 64%, 15%); + color: hsl(219, 64%, 35%); + font-family: inherit; + font-size: inherit; + font-weight: 600; + line-height: inherit; + display: block; + padding: 0.5rem; + cursor: pointer; + transition: all 0.15s ease-in-out 0s; +} + +.btn:hover, +.btn:focus { + background: hsl(219, 64%, 35%); + color: #fff; +} + +.btn:active { + transform: translateX(1px) translateY(1px); +} -- cgit v1.2.3