1 files changed, 625 insertions, 0 deletions
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 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>CSS Border Previewer</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <header class="header">
+      <h1 class="branding">CSS Border Previewer</h1>
+    </header>
+    <main class="main">
+      <div class="preview">
+        <div class="box"></div>
+      </div>
+      <form action="#" method="POST" class="settings form">
+        <fieldset class="form__fieldset">
+          <legend class="form__legend">Global settings</legend>
+          <div class="form__item">
+            Control border property separately?
+            <input
+              type="radio"
+              name="border-property"
+              id="border-property-no"
+              value="false"
+              checked
+            />
+            <label for="border-property-no">No</label>
+            <input
+              type="radio"
+              name="border-property"
+              id="border-property-yes"
+              value="true"
+            />
+            <label for="border-property-yes">Yes</label>
+          </div>
+          <div class="form__item">
+            Control border radius property separately?
+            <input
+              type="radio"
+              name="border-radius-property"
+              id="border-radius-property-no"
+              value="false"
+              checked
+            />
+            <label for="border-radius-property-no">No</label>
+            <input
+              type="radio"
+              name="border-radius-property"
+              id="border-radius-property-yes"
+              value="true"
+            />
+            <label for="border-radius-property-yes">Yes</label>
+          </div>
+        </fieldset>
+        <fieldset
+          id="fieldset-borders"
+          class="form__fieldset form__fieldset--flex"
+        >
+          <legend class="form__legend">Borders settings</legend>
+          <div class="form__item form__item--flex">
+            <label for="borders-width">Width</label>
+            <input
+              type="number"
+              name="borders-width"
+              id="borders-width"
+              size="3"
+              value="1"
+              class="form__input"
+            />
+          </div>
+          <div class="form__item form__item--flex">
+            <label for="borders-unit" class="form__label">Unit</label>
+            <select name="borders-unit" id="borders-unit" class="form__select">
+              <option value="px" selected>px</option>
+              <option value="cm">cm</option>
+              <option value="em">em</option>
+              <option value="rem">rem</option>
+            </select>
+          </div>
+          <div class="form__item form__item--flex">
+            <label for="borders-style">Style</label>
+            <select
+              name="borders-style"
+              id="borders-style"
+              class="form__select"
+            >
+              <option value="none">None</option>
+              <option value="dashed">Dashed</option>
+              <option value="dotted">Dotted</option>
+              <option value="double">Double</option>
+              <option value="groove">Groove</option>
+              <option value="hidden">Hidden</option>
+              <option value="inset">Inset</option>
+              <option value="outset">Outset</option>
+              <option value="ridge">Ridge</option>
+              <option value="solid" selected>Solid</option>
+            </select>
+          </div>
+          <div class="form__item form__item--flex">
+            <label for="borders-color">Color</label>
+            <input
+              type="color"
+              name="borders-color"
+              id="borders-color"
+              value="#000000"
+              class="form__input form__input--color"
+            />
+          </div>
+        </fieldset>
+        <fieldset
+          id="fieldset-border-top"
+          class="form__fieldset form__fieldset--flex"
+        >
+          <legend class="form__legend">Border-top settings</legend>
+          <div class="form__item form__item--flex">
+            <label for="border-top-width">Width</label>
+            <input
+              type="number"
+              name="border-top-width"
+              id="border-top-width"
+              size="3"
+              value="1"
+              class="form__input"
+            />
+          </div>
+          <div class="form__item form__item--flex">
+            <label for="border-top-unit" class="form__label">Unit</label>
+            <select
+              name="border-top-unit"
+              id="border-top-unit"
+              class="form__select"
+            >
+              <option value="px" selected>px</option>
+              <option value="cm">cm</option>
+              <option value="em">em</option>
+              <option value="rem">rem</option>
+            </select>
+          </div>
+          <div class="form__item form__item--flex">
+            <label for="border-top-style">Style</label>
+            <select
+              name="border-top-style"
+              id="border-top-style"
+              class="form__select"
+            >
+              <option value="none">None</option>
+              <option value="dashed">Dashed</option>
+              <option value="dotted">Dotted</option>
+              <option value="double">Double</option>
+              <option value="groove">Groove</option>
+              <option value="hidden">Hidden</option>
+              <option value="inset">Inset</option>
+              <option value="outset">Outset</option>
+              <option value="ridge">Ridge</option>
+              <option value="solid" selected>Solid</option>
+            </select>
+          </div>
+          <div class="form__item form__item--flex">
+            <label for="border-top-color">Color</label>
+            <input
+              type="color"
+              name="border-top-color"
+              id="border-top-color"
+              value="#000000"
+              class="form__input form__input--color"
+            />
+          </div>
+        </fieldset>
+        <fieldset
+          id="fieldset-border-right"
+          class="form__fieldset form__fieldset--flex"
+        >
+          <legend class="form__legend">Border-right settings</legend>
+          <div class="form__item form__item--flex">
+            <label for="border-right-width">Width</label>
+            <input
+              type="number"
+              name="border-right-width"
+              id="border-right-width"
+              size="3"
+              value="1"
+              class="form__input"
+            />
+          </div>
+          <div class="form__item form__item--flex">
+            <label for="border-right-unit" class="form__label">Unit</label>
+            <select
+              name="border-right-unit"
+              id="border-right-unit"
+              class="form__select"
+            >
+              <option value="px" selected>px</option>
+              <option value="cm">cm</option>
+              <option value="em">em</option>
+              <option value="rem">rem</option>
+            </select>
+          </div>
+          <div class="form__item form__item--flex">
+            <label for="border-right-style">Style</label>
+            <select
+              name="border-right-style"
+              id="border-right-style"
+              class="form__select"
+            >
+              <option value="none">None</option>
+              <option value="dashed">Dashed</option>
+              <option value="dotted">Dotted</option>
+              <option value="double">Double</option>
+              <option value="groove">Groove</option>
+              <option value="hidden">Hidden</option>
+              <option value="inset">Inset</option>
+              <option value="outset">Outset</option>
+              <option value="ridge">Ridge</option>
+              <option value="solid" selected>Solid</option>
+            </select>
+          </div>
+          <div class="form__item form__item--flex">
+            <label for="border-right-color">Color</label>
+            <input
+              type="color"
+              name="border-right-color"
+              id="border-right-color"
+              value="#000000"
+              class="form__input form__input--color"
+            />
+          </div>
+        </fieldset>
+        <fieldset
+          id="fieldset-border-bottom"
+          class="form__fieldset form__fieldset--flex"
+        >
+          <legend class="form__legend">Border-bottom settings</legend>
+          <div class="form__item form__item--flex">
+            <label for="border-bottom-width">Width</label>
+            <input
+              type="number"
+              name="border-bottom-width"
+              id="border-bottom-width"
+              size="3"
+              value="1"
+              class="form__input"
+            />
+          </div>
+          <div class="form__item form__item--flex">
+            <label for="border-bottom-unit" class="form__label">Unit</label>
+            <select
+              name="border-bottom-unit"
+              id="border-bottom-unit"
+              class="form__select"
+            >
+              <option value="px" selected>px</option>
+              <option value="cm">cm</option>
+              <option value="em">em</option>
+              <option value="rem">rem</option>
+            </select>
+          </div>
+          <div class="form__item form__item--flex">
+            <label for="border-bottom-style">Style</label>
+            <select
+              name="border-bottom-style"
+              id="border-bottom-style"
+              class="form__select"
+            >
+              <option value="none">None</option>
+              <option value="dashed">Dashed</option>
+              <option value="dotted">Dotted</option>
+              <option value="double">Double</option>
+              <option value="groove">Groove</option>
+              <option value="hidden">Hidden</option>
+              <option value="inset">Inset</option>
+              <option value="outset">Outset</option>
+              <option value="ridge">Ridge</option>
+              <option value="solid" selected>Solid</option>
+            </select>
+          </div>
+          <div class="form__item form__item--flex">
+            <label for="border-bottom-color">Color</label>
+            <input
+              type="color"
+              name="border-bottom-color"
+              id="border-bottom-color"
+              value="#000000"
+              class="form__input form__input--color"
+            />
+          </div>
+        </fieldset>
+        <fieldset
+          id="fieldset-border-left"
+          class="form__fieldset form__fieldset--flex"
+        >
+          <legend class="form__legend">Border-left settings</legend>
+          <div class="form__item form__item--flex">
+            <label for="border-left-width">Width</label>
+            <input
+              type="number"
+              name="border-left-width"
+              id="border-left-width"
+              size="3"
+              value="1"
+              class="form__input"
+            />
+          </div>
+          <div class="form__item form__item--flex">
+            <label for="border-left-unit" class="form__label">Unit</label>
+            <select
+              name="border-left-unit"
+              id="border-left-unit"
+              class="form__select"
+            >
+              <option value="px" selected>px</option>
+              <option value="cm">cm</option>
+              <option value="em">em</option>
+              <option value="rem">rem</option>
+            </select>
+          </div>
+          <div class="form__item form__item--flex">
+            <label for="border-left-style">Style</label>
+            <select
+              name="border-left-style"
+              id="border-left-style"
+              class="form__select"
+            >
+              <option value="none">None</option>
+              <option value="dashed">Dashed</option>
+              <option value="dotted">Dotted</option>
+              <option value="double">Double</option>
+              <option value="groove">Groove</option>
+              <option value="hidden">Hidden</option>
+              <option value="inset">Inset</option>
+              <option value="outset">Outset</option>
+              <option value="ridge">Ridge</option>
+              <option value="solid" selected>Solid</option>
+            </select>
+          </div>
+          <div class="form__item form__item--flex">
+            <label for="border-left-color">Color</label>
+            <input
+              type="color"
+              name="border-left-color"
+              id="border-left-color"
+              value="#000000"
+              class="form__input form__input--color"
+            />
+          </div>
+        </fieldset>
+        <fieldset id="fieldset-borders-radius" class="form__fieldset">
+          <legend class="form__legend">Border-radius settings</legend>
+          <div class="form__item">
+            <p>First radius:</p>
+            <label for="borders-first-radius">Value</label>
+            <input
+              type="number"
+              name="borders-first-radius"
+              id="borders-first-radius"
+              class="form__input"
+            />
+            <label for="borders-first-radius-unit" class="form__label"
+              >Unit</label
+            >
+            <select
+              name="borders-first-radius-unit"
+              id="borders-first-radius-unit"
+              class="form__select"
+            >
+              <option value="px" selected>px</option>
+              <option value="%">%</option>
+              <option value="em">em</option>
+              <option value="rem">rem</option>
+            </select>
+          </div>
+          <div class="form__item">
+            <p>Second radius:</p>
+            <label for="borders-second-radius">Value</label>
+            <input
+              type="number"
+              name="borders-second-radius"
+              id="borders-second-radius"
+              class="form__input"
+            />
+            <label for="borders-second-radius-unit" class="form__label"
+              >Unit</label
+            >
+            <select
+              name="borders-second-radius-unit"
+              id="borders-second-radius-unit"
+              class="form__select"
+            >
+              <option value="px" selected>px</option>
+              <option value="%">%</option>
+              <option value="em">em</option>
+              <option value="rem">rem</option>
+            </select>
+          </div>
+        </fieldset>
+        <fieldset id="fieldset-border-top-left-radius" class="form__fieldset">
+          <legend class="form__legend">Border-top-left-radius settings</legend>
+          <div class="form__item">
+            <p>First radius:</p>
+            <label for="border-top-left-first-radius">Value</label>
+            <input
+              type="number"
+              name="border-top-left-first-radius"
+              id="border-top-left-first-radius"
+              class="form__input"
+            />
+            <label for="border-top-left-first-radius-unit" class="form__label"
+              >Unit</label
+            >
+            <select
+              name="border-top-left-first-radius-unit"
+              id="border-top-left-first-radius-unit"
+              class="form__select"
+            >
+              <option value="px" selected>px</option>
+              <option value="%">%</option>
+              <option value="em">em</option>
+              <option value="rem">rem</option>
+            </select>
+          </div>
+          <div class="form__item">
+            <p>Second radius:</p>
+            <label for="border-top-left-second-radius">Value</label>
+            <input
+              type="number"
+              name="border-top-left-second-radius"
+              id="border-top-left-second-radius"
+              class="form__input"
+            />
+            <label for="border-top-left-second-radius-unit" class="form__label"
+              >Unit</label
+            >
+            <select
+              name="border-top-left-second-radius-unit"
+              id="border-top-left-second-radius-unit"
+              class="form__select"
+            >
+              <option value="px" selected>px</option>
+              <option value="%">%</option>
+              <option value="em">em</option>
+              <option value="rem">rem</option>
+            </select>
+          </div>
+        </fieldset>
+        <fieldset id="fieldset-border-top-right-radius" class="form__fieldset">
+          <legend class="form__legend">Border-top-right-radius settings</legend>
+          <div class="form__item">
+            <p>First radius:</p>
+            <label for="border-top-right-first-radius">Value</label>
+            <input
+              type="number"
+              name="border-top-right-first-radius"
+              id="border-top-right-first-radius"
+              class="form__input"
+            />
+            <label for="border-top-right-first-radius-unit" class="form__label"
+              >Unit</label
+            >
+            <select
+              name="border-top-right-first-radius-unit"
+              id="border-top-right-first-radius-unit"
+              class="form__select"
+            >
+              <option value="px" selected>px</option>
+              <option value="%">%</option>
+              <option value="em">em</option>
+              <option value="rem">rem</option>
+            </select>
+          </div>
+          <div class="form__item">
+            <p>Second radius:</p>
+            <label for="border-top-right-second-radius">Value</label>
+            <input
+              type="number"
+              name="border-top-right-second-radius"
+              id="border-top-right-second-radius"
+              class="form__input"
+            />
+            <label for="border-top-right-second-radius-unit" class="form__label"
+              >Unit</label
+            >
+            <select
+              name="border-top-right-second-radius-unit"
+              id="border-top-right-second-radius-unit"
+              class="form__select"
+            >
+              <option value="px" selected>px</option>
+              <option value="%">%</option>
+              <option value="em">em</option>
+              <option value="rem">rem</option>
+            </select>
+          </div>
+        </fieldset>
+        <fieldset
+          id="fieldset-border-bottom-left-radius"
+          class="form__fieldset"
+        >
+          <legend class="form__legend">
+            Border-bottom-left-radius settings
+          </legend>
+          <div class="form__item">
+            <p>First radius:</p>
+            <label for="border-bottom-left-first-radius">Value</label>
+            <input
+              type="number"
+              name="border-bottom-left-first-radius"
+              id="border-bottom-left-first-radius"
+              class="form__input"
+            />
+            <label
+              for="border-bottom-left-first-radius-unit"
+              class="form__label"
+              >Unit</label
+            >
+            <select
+              name="border-bottom-left-first-radius-unit"
+              id="border-bottom-left-first-radius-unit"
+              class="form__select"
+            >
+              <option value="px" selected>px</option>
+              <option value="%">%</option>
+              <option value="em">em</option>
+              <option value="rem">rem</option>
+            </select>
+          </div>
+          <div class="form__item">
+            <p>Second radius:</p>
+            <label for="border-bottom-left-second-radius">Value</label>
+            <input
+              type="number"
+              name="border-bottom-left-second-radius"
+              id="border-bottom-left-second-radius"
+              class="form__input"
+            />
+            <label
+              for="border-bottom-left-second-radius-unit"
+              class="form__label"
+              >Unit</label
+            >
+            <select
+              name="border-bottom-left-second-radius-unit"
+              id="border-bottom-left-second-radius-unit"
+              class="form__select"
+            >
+              <option value="px" selected>px</option>
+              <option value="%">%</option>
+              <option value="em">em</option>
+              <option value="rem">rem</option>
+            </select>
+          </div>
+        </fieldset>
+        <fieldset
+          id="fieldset-border-bottom-right-radius"
+          class="form__fieldset"
+        >
+          <legend class="form__legend">
+            Border-bottom-right-radius settings
+          </legend>
+          <div class="form__item">
+            <p>First radius:</p>
+            <label for="border-bottom-right-first-radius">Value</label>
+            <input
+              type="number"
+              name="border-bottom-right-first-radius"
+              id="border-bottom-right-first-radius"
+              class="form__input"
+            />
+            <label
+              for="border-bottom-right-first-radius-unit"
+              class="form__label"
+              >Unit</label
+            >
+            <select
+              name="border-bottom-right-first-radius-unit"
+              id="border-bottom-right-first-radius-unit"
+              class="form__select"
+            >
+              <option value="px" selected>px</option>
+              <option value="%">%</option>
+              <option value="em">em</option>
+              <option value="rem">rem</option>
+            </select>
+          </div>
+          <div class="form__item">
+            <p>Second radius:</p>
+            <label for="border-bottom-right-second-radius">Value</label>
+            <input
+              type="number"
+              name="border-bottom-right-second-radius"
+              id="border-bottom-right-second-radius"
+              class="form__input"
+            />
+            <label
+              for="border-bottom-right-second-radius-unit"
+              class="form__label"
+              >Unit</label
+            >
+            <select
+              name="border-bottom-right-second-radius-unit"
+              id="border-bottom-right-second-radius-unit"
+              class="form__select"
+            >
+              <option value="px" selected>px</option>
+              <option value="%">%</option>
+              <option value="em">em</option>
+              <option value="rem">rem</option>
+            </select>
+          </div>
+        </fieldset>
+      </form>
+      <div class="result">
+        <pre class="result__pre">
+          <code class="result__code"></code>
+        </pre>
+        <button id="copy-code" class="btn">Copy to the clipboard</button>
+      </div>
+    </main>
+    <footer class="footer">
+      <p class="copyright">CSS Border Previewer. MIT 2021. Armand Philippot.</p>
+    </footer>
+    <script src="app.js"></script>
+  </body>
+</html>