Done, working site

billhammond-dev · Jan 8, 2020 · 3ee1e3a · 3ee1e3a
1 parent 957e5f9
commit 3ee1e3a
Show file tree

Hide file tree

Showing 6 changed files with 228 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <link rel="stylesheet" type="text/css" href="style.css">
+        <meta charset='UTF-8'>
+        <title>64-Decoder</title>
+        <script src="script.js" defer></script>
+    </head>
+
+    <body>
+        <div class="top-row">
+            <div class="top-row__left"></div>
+            <div class="top-row__center"><h1>Base64-Decoder</h1></div>
+            <div class="top-row__right"></div>
+        </div>
+        <div class="body-row">
+            <div class="body-row__top">
+                <div class="body-row__input">
+                    <textarea data-input class="input-text">Paste base64 data here</textarea>
+                </div>
+                <div class="body-row__output">
+                    <textarea data-output class="output-text">Message will decode in this window</textarea>
+                </div>
+            </div>
+            <div class="body-row__bottom">
+                <div class="bottom-half">
+                    <div class="bottom-text"><h2>Paste Input</h2></div>
+                    <div><img data-trash src="resources\img\trash.svg"></div>
+                </div>
+                <div class="bottom-half">
+                    <div class="bottom-text"><h2>Output</h2></div>
+                    <div><img data-copy src="resources\img\copy.svg"></div>
+                </div>
+            </div>
+        </div>
+    </body>
+
+</html>
diff --git a/resources/img/copy.svg b/resources/img/copy.svg
diff --git a/resources/img/rabbit.svg b/resources/img/rabbit.svg
diff --git a/resources/img/trash.svg b/resources/img/trash.svg
diff --git a/script.js b/script.js
@@ -0,0 +1,57 @@
+const inputText = document.querySelector('[data-input]');
+const outputText = document.querySelector('[data-output]');
+const trash = document.querySelector('[data-trash]');
+const copyClip = document.querySelector('[data-copy]');
+var undecodedMessage = '';
+
+//event listeners
+inputText.addEventListener('click', clearInputText);
+inputText.addEventListener('paste', inputMessage);
+trash.addEventListener('click', () => {
+    clearInputText();
+    clearOutputText();
+});
+copyClip.addEventListener('click', copyToClip);
+
+
+//functions
+
+function clearInputText() {
+    inputText.value = '';
+}
+
+function clearOutputText() {
+    outputText.value = '';
+}
+
+function inputMessage() {
+    clearInputText();
+    clearOutputText();
+    let paste = (event.clipboardData || window.clipboardData).getData('text');
+    undecodedMessage = paste;
+    decodeMessage(undecodedMessage);
+}
+
+function decodeMessage(undecodedMessage) {
+    // set output text to whatever our decode fn rets
+    outputText.value = b64DecodeUnicode(undecodedMessage);
+}
+
+function copyToClip() {
+    copyClip.innerHTML="";
+    var tempInput = document.createElement("input");
+    tempInput.style = "position: absolute; left: -1000px; top: -1000px";
+    tempInput.value = outputText.value;
+    document.body.appendChild(tempInput);
+    tempInput.select();
+    document.execCommand("copy");
+    document.body.removeChild(tempInput);
+}
+
+// base64 to UTF8, fn that works on older browsers
+function b64DecodeUnicode(str) {
+    return decodeURIComponent(Array.prototype.map.call(atob(str), function(c) {
+        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)
+    }).join(''));
+}
+
diff --git a/style.css b/style.css
@@ -0,0 +1,129 @@
+* {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+}
+
+body {
+    background: linear-gradient(to bottom, #999, #888);
+    height: 100vh;
+}
+
+h1 {
+    color: #ff6600d8;
+    text-shadow: 1px 1px 1px #000;
+    font-size: 4vh;
+    font-weight: 900;
+    font-family: sans-serif;
+}
+
+h2 {
+    color: rgb(11, 38, 61);
+    text-shadow: -1px 0 #999, 0 1px #999, 1px 0 #999, 0 -1px #999;
+    font-size: 2.75vh;
+}
+
+
+.top-row {
+    display: flex;
+    height: 5vh;
+    background-color: #999;
+    margin: 0 20px 10px 20px;
+    justify-content: space-between;
+}
+
+.top-row__center {
+    flex-basis: 25%;
+    text-align: center;
+    vertical-align: top;
+}
+
+
+
+.body-row {
+    border: solid 3px rgb(23, 83, 133);
+    height: 92vh;
+    margin: 0 10px 10px 10px;
+    border-radius: 20px;
+    display: flex;
+    padding: 20px;
+    flex-direction: column;
+    background: linear-gradient(to bottom, #999, #377797b0);
+}
+
+.body-row__top {
+    display: flex;
+    flex: 1;
+}
+
+.body-row__top div {
+    margin: 25px;
+    border: solid 1px rgb(17, 56, 88, .85);
+    border-radius: 20px;
+    flex: 1;
+    padding: 5px;
+    background-color: rgb(217, 237, 255);
+}
+
+.body-row__input,
+.body-row__output {
+    display: flex;
+}
+
+.input-text {
+    overflow:hidden;
+    overflow-y: auto;
+    background-color: rgb(217, 237, 255);
+    border: 0;
+    height: auto;
+    width: 100%;
+    resize: none;
+    outline: none;
+    padding: 10px;
+}
+
+.output-text {
+    overflow:hidden;
+    overflow-y: auto;
+    background-color: rgb(217, 237, 255);
+    border: 0;
+    height: auto;
+    width: 100%;
+    resize: none;
+    outline: none;
+    padding: 10px; 
+}
+
+.body-row__bottom {
+    display: flex;
+    justify-content: space-around;
+}
+
+.bottom-half {
+    display: flex;
+    width: 40%;
+}
+
+
+
+.bottom-text {
+    flex: 1;
+}
+
+.body-row__bottom img {
+    height: 3vh;
+}
+
+.body-row__bottom img:hover {
+    border: solid 1.5px #999;
+}
+
+.body-row__bottom img:active {
+    border: solid 1.5px #999;
+    background-color: #e74c3c;
+    padding: 3px;
+}
+
+
+
+