active-fox-2018 · ariesptn · Feb 10, 2019
diff --git a/index.html b/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Arie Septian</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" type="text/css" media="screen" href="style/main.css" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
+
+    <script src="script/main.js"></script>
+</head>
+<body>
+    <header>
+        <h1>Arie Septian</h1>
+        <h2>A Nice Guy</h2>
+    </header>
+    <img src="https://picsum.photos/g/200/200" alt="random image" class="picture" />
+    <div class="description">
+        A young, handsome, and passionate man with a lot of talent and loved by everyone in the entire world.
+    </div>
+    <span class="description">
+        <a href="https://www.facebook.com/arie.septian" target="_blank" class="fa fa-facebook"></a>
+        <a href="https://www.twitter.com/ariesptn" target="_blank" class="fa fa-twitter"></a>
+        <a href="https://plus.google.com/+arie" target="_blank" class="fa fa-google"></a>
+        <a href="https://www.linkedin.com/in/arie" target="_blank" class="fa fa-linkedin"></a>
+        <a href="https://www.youtube.com/user/arie" target="_blank" class="fa fa-youtube"></a>
+        <a href="https://www.instagram.com/arie" target="_blank" class="fa fa-instagram"></a>
+    </span>
+    <footer>© Arie Septian</footer>
+</body>
+</html>
diff --git a/script/main.js b/script/main.js
diff --git a/script/textconverter.js b/script/textconverter.js
@@ -0,0 +1,95 @@
+function convertText() {
+    let inputText = document.getElementById('inputText').value
+    let text = inputText + ''
+
+    if (document.getElementById('radioToUpperCase').checked) {
+        text = text.toUpperCase()
+    } else if (document.getElementById('radioToLowerCase').checked) {
+        text = text.toLowerCase()
+    } else if (document.getElementById('radioSwapCase').checked) {
+        text = swapCase(text)
+    }
+
+    if (document.getElementById('checkboxReplace').checked) {
+        let find = document.getElementById('textReplaceFrom').value
+        let replace = document.getElementById('textReplaceTo').value
+        text = replaceText(text, find, replace)
+    }
+
+    if (document.getElementById('checkboxReverse').checked) {
+        text = reverseText(text)
+    }
+
+    if (document.getElementById('checkboxShuffle').checked) {
+        text = shuffleText(text)
+    }
+
+    if (document.getElementById('checkboxRepeat').checked) {
+        let repeat = parseInt(document.getElementById('numberRepeat').value)
+        if (isNaN(repeat)) {
+            repeat = 1
+        }
+        text = repeatText(text, repeat)
+    }
+    document.getElementById('outputText').value = text
+}
+
+function deleteText() {
+    document.getElementById('inputText').value = ''
+    document.getElementById('outputText').value = ''
+}
+
+function swapCase(text) {
+    let output = ''
+    for (let s of text) {
+        if (s === s.toLowerCase()) {
+            output += s.toUpperCase()
+        } else if (s === s.toUpperCase()) {
+            output += s.toLowerCase()
+        }
+    }
+    return output
+}
+
+function replaceText(text, find, replace) {
+    let output = text + ''
+    if (find === '') {
+        return text
+    }
+    while (output.indexOf(find) > -1) {
+        output = output.replace(find, replace)
+    }
+    return output
+}
+
+function reverseText(text) {
+    let output = ''
+    for (let s of text) {
+        output = s + output
+    }
+    return output
+}
+
+function shuffleText(text) {
+    let output = ''
+    for (let s of text) {
+        let n = Math.round(Math.random())
+        if (n) {
+            output += s
+        } else {
+            output = s + output
+        }
+    }
+    return output
+}
+
+function repeatText(text, repeat) {
+    let output = ''
+    if (repeat < 1) {
+        repeat = 1
+    }
+    for (let i = 0; i < repeat; i++) {
+        output += text + '\n'
+    }
+    return output
+}
diff --git a/script/tsconfig.json b/script/tsconfig.json
@@ -0,0 +1,16 @@
+{
+    "compilerOptions": {
+        "target": "es2018",
+        "sourceMap": true,
+        //"strict": true,
+        "noImplicitAny": true,
+        "noImplicitReturns": true,
+        "noImplicitThis": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "strictBindCallApply": true,
+        "strictFunctionTypes": true,
+        "strictNullChecks": true,
+        "strictPropertyInitialization": true,
+    }
+}
diff --git a/style/main.css b/style/main.css
@@ -0,0 +1,49 @@
+@import url('https://fonts.googleapis.com/css?family=Quicksand');
+body{
+    text-align:center;
+    background-color: #000000;
+    background-image: url("https://www.transparenttextures.com/patterns/black-linen-2.png");
+    font-family: 'Quicksand', sans-serif;
+}
+header, .description{
+    color: #c0c0c0;
+    background-color: #20202080;
+    margin: 1em;
+    padding: 1em;
+    border-width: 1em;
+    border-color: #303030;
+    border-style: solid;
+    border-radius: 1em;
+}
+.picture{
+    border-width: 1em;
+    border-color: #303030;
+    border-style: solid;
+    border-radius: 1em;
+}
+.fa {
+    border-radius: 50%;
+    padding: 1em;
+    font-size: 1em;
+    width: 1em;
+    text-align: center;
+    text-decoration: none;
+    margin: 1em;
+    color: #c0c0c0;
+    background-color: #303030;
+}
+.fa:hover {
+    opacity: 0.5;
+}
+footer{
+    color: #a0a0a0;
+}
+textarea, input, button{
+    border-radius: 1em;
+    font-size: 1em;
+    color: #c0c0c0;
+    background-color: #303030;
+}
+textarea{
+    width: 100%;
+}
diff --git a/textconverter.html b/textconverter.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Arie Septian</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" type="text/css" media="screen" href="style/main.css" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
+
+    <script src="script/main.js"></script>
+    <script src="script/textconverter.js"></script>
+</head>
+
+<body>
+    <header>
+        <h1>Arie Septian</h1>
+        <h2>A Nice Guy</h2>
+    </header>
+    <div class="description">
+        Text Converter<br>
+        <textarea id="inputText" cols="1024" rows="10"></textarea><br>
+        <button id="buttonConvert" type="button">Convert</button>
+        <button id="buttonDeleteText" type="button">Delete Text</button><br>
+        <input type="radio" id="radioNoCaseChange" name="radioCase" checked><label for="radioNoCaseChange">No Case
+            Change</label><br>
+        <input type="radio" id="radioToUpperCase" name="radioCase"><label for="radioToUpperCase">To Upper Case</label><br>
+        <input type="radio" id="radioToLowerCase" name="radioCase"><label for="radioToLowerCase">To Lower Case</label><br>
+        <input type="radio" id="radioSwapCase" name="radioCase"><label for="radioSwapCase">Swap Case</label><br>
+        <input type="checkbox" id="checkboxReplace"><label for="checkboxReplace">Replace</label>
+        <input type="text" id="textReplaceFrom">with<input type="text" id="textReplaceTo"><br>
+        <input type="checkbox" id="checkboxReverse"><label for="checkboxReverse">Reverse</label><br>
+        <input type="checkbox" id="checkboxShuffle"><label for="checkboxShuffle">Shuffle</label><br>
+        <input type="checkbox" id="checkboxRepeat"><label for="checkboxRepeat">Repeat</label>
+        <input type="number" id="numberRepeat" min="1" max="100" value="2">times<br>
+        <textarea id="outputText" cols="30" rows="10" readonly></textarea>
+    </div>
+    <span class="description">
+        <a href="https://www.facebook.com/arie.septian" target="_blank" class="fa fa-facebook"></a>
+        <a href="https://www.twitter.com/ariesptn" target="_blank" class="fa fa-twitter"></a>
+        <a href="https://plus.google.com/+arie" target="_blank" class="fa fa-google"></a>
+        <a href="https://www.linkedin.com/in/arie" target="_blank" class="fa fa-linkedin"></a>
+        <a href="https://www.youtube.com/user/arie" target="_blank" class="fa fa-youtube"></a>
+        <a href="https://www.instagram.com/arie" target="_blank" class="fa fa-instagram"></a>
+    </span>
+    <footer>© Arie Septian</footer>
+    <script>
+        document.getElementById("buttonConvert").addEventListener("click", convertText)
+        document.getElementById("buttonDeleteText").addEventListener("click", deleteText)
+    </script>
+</body>
+
+</html>