sswietoniowski · sswietoniowski · Feb 8, 2024 · Jan 30, 2024 · Jan 30, 2024 · Jan 30, 2024
diff --git a/README.md b/README.md
@@ -6,10 +6,11 @@ This repository contains numerous examples helping to grasp concepts related to:
 
 This repository contains the following sub-directories:
 
-- [css](https://github.com/sswietoniowski/learning-html-and-css-and-javascript/tree/master/css) the CSS examples,
-- [html](https://github.com/sswietoniowski/learning-html-and-css-and-javascript/tree/master/html) the HTML examples,
-- [javascript](https://github.com/sswietoniowski/learning-html-and-css-and-javascript/tree/master/javascript) the JavaScript examples,
-- [projects](https://github.com/sswietoniowski/learning-html-and-css-and-javascript/tree/master/projects) demo projects created using aforementioned technologies & more :-).
+- [css](./css) the CSS examples,
+- [html](./html) the HTML examples,
+- [javascript](./javascript) the JavaScript examples,
+- [projects](./projects) demo projects created using aforementioned technologies & more :-),
+- [hyperskill](./hyperskill/) my solutions to [Hyperskill](https://hyperskill.org) projects from the [Frontend Developer](https://hyperskill.org/tracks/5) track.
 
 ## Learning Resources
 

diff --git a/hyperskill/01_case_converter/01/index.css b/hyperskill/01_case_converter/01/index.css
@@ -0,0 +1,40 @@
+* {
+    box-sizing: border-box;
+}
+
+body {
+    font-family: "Times New Roman", serif;
+}
+
+.title {
+    font-size: 32px;
+    font-weight: bold;
+}
+
+.text {
+    margin-top: 16px;
+    float: left;
+    width: 100%;
+}
+
+#textarea {
+    font-size: 16px;
+    padding: 16px;
+    border: 1px solid black;
+    width: 100%; max-width: 100%;
+    height: 100px;
+}
+
+button {
+    margin-top: 16px;
+    font-size: 16px;
+    background-color: white;
+    color: black;
+    border: 2px solid lightcoral;
+    border-radius: 8px;
+}
+
+button:hover {
+    background-color: lightcoral;
+    color: white;
+}
diff --git a/hyperskill/01_case_converter/01/index.html b/hyperskill/01_case_converter/01/index.html
@@ -0,0 +1,74 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Case Converter</title>
+    <link rel="stylesheet" type="text/css" href="index.css">
+</head>
+<body>
+    <div class="title">Case Converter</div>
+    <div class="text">
+        <label for="textarea"></label>
+        <textarea id="textarea" onkeyup="adjustHeight(this)"></textarea>
+    </div>
+    <div class="buttons">
+        <button id="upper-case" onclick="upperCase()">Upper Case</button>
+        <button id="lower-case" onclick="lowerCase()">Lower Case</button>
+        <button id="proper-case" onclick="properCase()">Proper Case</button>
+        <button id="sentence-case" onclick="sentenceCase()">Sentence Case</button>
+        <button id="save-text-file" onclick="saveTextFile()">Save Text File</button>
+    </div>
+    <script>
+        const element = document.getElementById("textarea");
+
+        const upperCase = () => {
+            element.value = element.value.toUpperCase();
+        }
+        const lowerCase = () => {
+            element.value = element.value.toLowerCase();
+        }
+
+        String.prototype.toProperCase = function() {
+            return this.replace(
+                /\w\S*/g,
+                word => word.charAt(0).toUpperCase() + word.substr(1).toLowerCase()
+            );
+        }
+
+        const properCase = () => {
+            element.value = element.value.toProperCase();
+        }
+
+        String.prototype.toSentenceCase = function() {
+            return this.toLowerCase().replace(
+                /(^\w|\.\s*\w)/gi,
+                firstLetterOfASentence => firstLetterOfASentence.toUpperCase()
+            );
+        }
+
+        const sentenceCase = () => {
+            element.value = element.value.toSentenceCase();
+        }
+
+        const download = (filename, text) => {
+            let element = document.createElement('a');
+            element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
+            element.setAttribute('download', filename);
+            element.style.display = 'none';
+            document.body.appendChild(element);
+            element.click();
+            document.body.removeChild(element);
+        }
+
+        const saveTextFile = () => {
+            const textFileName = "text.txt";
+            download(textFileName, element.value);
+        }
+
+        const adjustHeight = (element) => {
+            element.style.height = "25px";
+            element.style.height = (element.scrollHeight) + "px";
+        }
+    </script>
+</body>
+</html>
diff --git a/hyperskill/01_case_converter/02/index.css b/hyperskill/01_case_converter/02/index.css
@@ -0,0 +1,40 @@
+* {
+    box-sizing: border-box;
+}
+
+body {
+    font-family: "Times New Roman", serif;
+}
+
+.title {
+    font-size: 32px;
+    font-weight: bold;
+}
+
+.text {
+    margin-top: 16px;
+    float: left;
+    width: 100%;
+}
+
+#textarea {
+    font-size: 16px;
+    padding: 16px;
+    border: 1px solid black;
+    width: 100%; max-width: 100%;
+    height: 100px;
+}
+
+button {
+    margin-top: 16px;
+    font-size: 16px;
+    background-color: white;
+    color: black;
+    border: 2px solid lightcoral;
+    border-radius: 8px;
+}
+
+button:hover {
+    background-color: lightcoral;
+    color: white;
+}
diff --git a/hyperskill/01_case_converter/02/index.html b/hyperskill/01_case_converter/02/index.html
@@ -0,0 +1,74 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Case Converter</title>
+    <link rel="stylesheet" type="text/css" href="index.css">
+</head>
+<body>
+    <div class="title">Case Converter</div>
+    <div class="text">
+        <label for="textarea"></label>
+        <textarea id="textarea" onkeyup="adjustHeight(this)"></textarea>
+    </div>
+    <div class="buttons">
+        <button id="upper-case" onclick="upperCase()">Upper Case</button>
+        <button id="lower-case" onclick="lowerCase()">Lower Case</button>
+        <button id="proper-case" onclick="properCase()">Proper Case</button>
+        <button id="sentence-case" onclick="sentenceCase()">Sentence Case</button>
+        <button id="save-text-file" onclick="saveTextFile()">Save Text File</button>
+    </div>
+    <script>
+        const element = document.getElementById("textarea");
+
+        const upperCase = () => {
+            element.value = element.value.toUpperCase();
+        }
+        const lowerCase = () => {
+            element.value = element.value.toLowerCase();
+        }
+
+        String.prototype.toProperCase = function() {
+            return this.replace(
+                /\w\S*/g,
+                word => word.charAt(0).toUpperCase() + word.substr(1).toLowerCase()
+            );
+        }
+
+        const properCase = () => {
+            element.value = element.value.toProperCase();
+        }
+
+        String.prototype.toSentenceCase = function() {
+            return this.toLowerCase().replace(
+                /(^\w|\.\s*\w)/gi,
+                firstLetterOfASentence => firstLetterOfASentence.toUpperCase()
+            );
+        }
+
+        const sentenceCase = () => {
+            element.value = element.value.toSentenceCase();
+        }
+
+        const download = (filename, text) => {
+            let element = document.createElement('a');
+            element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
+            element.setAttribute('download', filename);
+            element.style.display = 'none';
+            document.body.appendChild(element);
+            element.click();
+            document.body.removeChild(element);
+        }
+
+        const saveTextFile = () => {
+            const textFileName = "text.txt";
+            download(textFileName, element.value);
+        }
+
+        const adjustHeight = (element) => {
+            element.style.height = "25px";
+            element.style.height = (element.scrollHeight) + "px";
+        }
+    </script>
+</body>
+</html>
diff --git a/hyperskill/01_case_converter/03/index.css b/hyperskill/01_case_converter/03/index.css
@@ -0,0 +1,40 @@
+* {
+    box-sizing: border-box;
+}
+
+body {
+    font-family: "Times New Roman", serif;
+}
+
+.title {
+    font-size: 32px;
+    font-weight: bold;
+}
+
+.text {
+    margin-top: 16px;
+    float: left;
+    width: 100%;
+}
+
+#textarea {
+    font-size: 16px;
+    padding: 16px;
+    border: 1px solid black;
+    width: 100%; max-width: 100%;
+    height: 100px;
+}
+
+button {
+    margin-top: 16px;
+    font-size: 16px;
+    background-color: white;
+    color: black;
+    border: 2px solid lightcoral;
+    border-radius: 8px;
+}
+
+button:hover {
+    background-color: lightcoral;
+    color: white;
+}
diff --git a/hyperskill/01_case_converter/03/index.html b/hyperskill/01_case_converter/03/index.html
@@ -0,0 +1,74 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Case Converter</title>
+    <link rel="stylesheet" type="text/css" href="index.css">
+</head>
+<body>
+    <div class="title">Case Converter</div>
+    <div class="text">
+        <label for="textarea"></label>
+        <textarea id="textarea" onkeyup="adjustHeight(this)"></textarea>
+    </div>
+    <div class="buttons">
+        <button id="upper-case" onclick="upperCase()">Upper Case</button>
+        <button id="lower-case" onclick="lowerCase()">Lower Case</button>
+        <button id="proper-case" onclick="properCase()">Proper Case</button>
+        <button id="sentence-case" onclick="sentenceCase()">Sentence Case</button>
+        <button id="save-text-file" onclick="saveTextFile()">Save Text File</button>
+    </div>
+    <script>
+        const element = document.getElementById("textarea");
+
+        const upperCase = () => {
+            element.value = element.value.toUpperCase();
+        }
+        const lowerCase = () => {
+            element.value = element.value.toLowerCase();
+        }
+
+        String.prototype.toProperCase = function() {
+            return this.replace(
+                /\w\S*/g,
+                word => word.charAt(0).toUpperCase() + word.substr(1).toLowerCase()
+            );
+        }
+
+        const properCase = () => {
+            element.value = element.value.toProperCase();
+        }
+
+        String.prototype.toSentenceCase = function() {
+            return this.toLowerCase().replace(
+                /(^\w|\.\s*\w)/gi,
+                firstLetterOfASentence => firstLetterOfASentence.toUpperCase()
+            );
+        }
+
+        const sentenceCase = () => {
+            element.value = element.value.toSentenceCase();
+        }
+
+        const download = (filename, text) => {
+            let element = document.createElement('a');
+            element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
+            element.setAttribute('download', filename);
+            element.style.display = 'none';
+            document.body.appendChild(element);
+            element.click();
+            document.body.removeChild(element);
+        }
+
+        const saveTextFile = () => {
+            const textFileName = "text.txt";
+            download(textFileName, element.value);
+        }
+
+        const adjustHeight = (element) => {
+            element.style.height = "25px";
+            element.style.height = (element.scrollHeight) + "px";
+        }
+    </script>
+</body>
+</html>
diff --git a/hyperskill/01_case_converter/README.md b/hyperskill/01_case_converter/README.md
@@ -0,0 +1,7 @@
+# Case Converter
+
+My solution to the project [Case Converter](https://hyperskill.org/projects/193?track=5) on [Hyperskill](https://hyperskill.org).
+
+Each stage of the project is in a separate folder.
+
+![Case Converter](./img/case_converter.png)
diff --git a/hyperskill/01_case_converter/img/case_converter.png b/hyperskill/01_case_converter/img/case_converter.png