Merge pull request #196 from Shreyasb1015/text-editor

Text-Editor Added
shrey141102 · Jan 4, 2024 · cb231d9 · cb231d9
2 parents 76d779e + 5e51f10
commit cb231d9
Show file tree

Hide file tree

Showing 7 changed files with 333 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -36,6 +36,7 @@
 - Stopwatch
 - Temperature Converter
 - Text-to-Speech
+- Text-Editor
 - Tic Tac Toe
 - Time Zone Converter
 - To-Do

diff --git a/Text-Editor/Images/demo.png b/Text-Editor/Images/demo.png
diff --git a/Text-Editor/README.md b/Text-Editor/README.md
@@ -0,0 +1,49 @@
+
+# Text-Editor
+
+A simple text editor created using HTML, CSS, and JavaScript. This editor allows you to perform various text formatting and styling operations.
+
+## Features
+
+### Formatting Options
+- **Bold Text**: Click the **B** button to make the selected text bold.
+- **Superscript Text**:You can also write in Superscript format.
+- **Subscript Text**: You can also write in Subscript format.
+
+### Lists
+- **Ordered List**: Create numbered lists by clicking the numbered list button.
+- **Unordered List**: Create bulleted lists with the bullet list button.
+
+### Undo and Redo
+- **Undo**: Reverse your last action using the undo button.
+- **Redo**: Restore your undone action with the redo button.
+
+### Hyperlinks
+- **Create Link**: Highlight text and click the link button to insert or edit a hyperlink.
+- **Remove Link**: Remove an existing hyperlink by selecting text and clicking the unlink button.
+
+### Alignment
+- **Left Align**: Align text to the left with the align-left button.
+- **Center Align**: Center-align text using the align-center button.
+- **Right Align**: Right-align text with the align-right button.
+- **Justify**: Fully justify text with the align-justify button.
+
+### Spacing
+- **Indent**: Increase the indentation of text using the indent button.
+- **Outdent**: Decrease the indentation of text with the outdent button.
+
+### Advanced Formatting
+- **Heading Size**: Choose the heading size from the dropdown menu.
+- **Font Family**: Select the font family from the dropdown menu.
+- **Font Size**: Choose the font size from the dropdown menu.
+- **Font Color**: Pick a font color using the color input.
+- **Highlight Color**: Choose a highlight color using the color input.
+## Implementation Examples
+
+![Demo](./Images/demo.png)
+
+
+
+
+
+
diff --git a/Text-Editor/index.html b/Text-Editor/index.html
@@ -0,0 +1,95 @@
+<!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">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
+    <link rel="stylesheet" href="style.css">
+    <title>Text-Editor</title>
+</head>
+
+<body>
+
+    <div class="container">
+        <div class="options">
+            <button id="bold" class="option-button format">
+                <i class="fa-solid fa-bold"></i>
+            </button>
+            <button id="superscript" class="option-button script">
+                <i class="fa-solid fa-superscript"></i>
+            </button>
+            <button id="subscript" class="option-button script">
+                <i class="fa-solid fa-subscript"></i>
+            </button>
+
+            <button id="insertOrderedList" class="option-button">
+                <div class="fa-solid fa-list-ol"></div>
+            </button>
+            <button id="insertUnorderedList" class="option-button">
+                <i class="fa-solid fa-list"></i>
+            </button>
+
+            <button id="undo" class="option-button">
+                <i class="fa-solid fa-rotate-left"></i>
+            </button>
+            <button id="redo" class="option-button">
+                <i class="fa-solid fa-rotate-right"></i>
+            </button>
+
+            <button id="createLink" class="adv-option-button">
+                <i class="fa fa-link"></i>
+            </button>
+            <button id="unlink" class="option-button">
+                <i class="fa fa-unlink"></i>
+            </button>
+
+            <button id="justifyLeft" class="option-button align">
+                <i class="fa-solid fa-align-left"></i>
+            </button>
+            <button id="justifyCenter" class="option-button align">
+                <i class="fa-solid fa-align-center"></i>
+            </button>
+            <button id="justifyRight" class="option-button align">
+                <i class="fa-solid fa-align-right"></i>
+            </button>
+            <button id="justifyFull" class="option-button align">
+                <i class="fa-solid fa-align-justify"></i>
+            </button>
+            <button id="indent" class="option-button spacing">
+                <i class="fa-solid fa-indent"></i>
+            </button>
+            <button id="outdent" class="option-button spacing">
+                <i class="fa-solid fa-outdent"></i>
+            </button>
+            <select id="formatBlock" class="adv-option-button">
+                <option value="H1">H1</option>
+                <option value="H2">H2</option>
+                <option value="H3">H3</option>
+                <option value="H4">H4</option>
+                <option value="H5">H5</option>
+                <option value="H6">H6</option>
+            </select>
+            <select id="fontName" class="adv-option-button"></select>
+            <select id="fontSize" class="adv-option-button"></select>
+
+            <div class="input-wrapper">
+                <input type="color" id="foreColor" class="adv-option-button">
+                <label for="foreColor">Font Color</label>
+            </div>
+            <div class="input-wrapper">
+                <input type="color" id="backColor" class="adv-option-button">
+                <label for="backColor">Highlight Color</label>
+            </div>
+
+        </div>
+        <div id="text-input" contenteditable="true"></div>
+    </div>
+
+    <script src="script.js"></script>
+
+
+</body>
+
+</html>
diff --git a/Text-Editor/script.js b/Text-Editor/script.js
@@ -0,0 +1,96 @@
+let optionsButtons = document.querySelectorAll(".option-button");
+let advancedOptionButton = document.querySelectorAll(".adv-option-button");
+let fontName = document.getElementById("fontName");
+let fontSizeRef = document.getElementById("fontSize");
+let writingArea = document.getElementById("text-input");
+let linkButton = document.getElementById("createLink");
+let alignButtons = document.querySelectorAll(".align");
+let spacingButtons = document.querySelectorAll(".spacing");
+let formatButtons = document.querySelectorAll(".format");
+let scriptButtons = document.querySelectorAll(".script");
+
+let fontList = [
+    "Arial",
+    "Verdana",
+    "Times New Roman",
+    "Garamond",
+    "Georgia",
+    "Courier New",
+    "Cursive",
+];
+
+const intializer = () => {
+    highlighter(alignButtons, true);
+    highlighter(spacingButtons, true);
+    highlighter(formatButtons, false);
+    highlighter(scriptButtons, true);
+
+    fontList.map((value) => {
+        let option = document.createElement("option");
+        option.value = value;
+        option.innerHTML = value;
+        fontName.appendChild(option);
+    });
+
+    for (let i = 1; i <= 7; i++) {
+        let option = document.createElement("option");
+        option.value = i;
+        option.innerHTML = i;
+        fontSizeRef.appendChild(option);
+    }
+
+    fontSizeRef.value = 3;
+};
+
+const modifyText = (command, defaultUi, value) => {
+    document.execCommand(command, defaultUi, value);
+};
+
+optionsButtons.forEach((button) => {
+    button.addEventListener("click", () => {
+        modifyText(button.id, false, null);
+    });
+});
+
+advancedOptionButton.forEach((button) => {
+    button.addEventListener("change", () => {
+        modifyText(button.id, false, button.value);
+    });
+});
+
+linkButton.addEventListener("click", () => {
+    let userLink = prompt("Enter a URL?");
+    if (/http/i.test(userLink)) {
+        modifyText(linkButton.id, false, userLink);
+    } else {
+        userLink = "http://" + userLink;
+        modifyText(linkButton.id, false, userLink);
+    }
+});
+
+const highlighter = (className, needsRemoval) => {
+    className.forEach((button) => {
+        button.addEventListener("click", () => {
+            if (needsRemoval) {
+                let alreadyActive = false;
+                if (button.classList.contains("active")) {
+                    alreadyActive = true;
+                }
+                highlighterRemover(className);
+                if (!alreadyActive) {
+                    button.classList.add("active");
+                }
+            } else {
+                button.classList.toggle("active");
+            }
+        });
+    });
+};
+
+const highlighterRemover = (className) => {
+    className.forEach((button) => {
+        button.classList.remove("active");
+    });
+};
+
+window.onload = intializer();
diff --git a/Text-Editor/style.css b/Text-Editor/style.css
@@ -0,0 +1,87 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+
+*{
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+}
+
+body{
+    background-color: #33f4b0;
+}
+
+.container{
+    background-color: #fff;
+    width: 90vmin;
+    padding: 50px 30px;
+    position: absolute;
+    transform: translate(-50%, -50%);
+    left: 50%;
+    top: 50%;
+    border-radius: 10px;
+    box-shadow: 0 25px 50px rgba(7, 20, 35, 0.2);
+}
+
+.options{
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 15px;
+}
+
+button{
+    width: 28px;
+    height: 28px;
+    display: grid;
+    place-items: center;
+    border-radius: 3px;
+    border: none;
+    background-color: #fff;
+    outline: none;
+    color: #020929;
+    cursor: pointer;
+}
+
+select{
+    padding: 7px;
+    border: 1px solid #020929;
+    border-radius: 3px;
+    cursor: pointer;
+}
+
+.options label,
+.options select{
+    font-family: 'Poppins', sans-serif;
+}
+
+input[type="color"]{
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    background-color: transparent;
+    width: 40px;
+    height: 28px;
+    border: none;
+    cursor: pointer;
+}
+
+input[type="color"]::-webkit-color-swatch{
+    border-radius: 15px;
+    box-shadow: 0 0 0 2px #fff, 0 0 0 3px #020929;
+}
+
+input[type="color"]::-moz-color-swatch{
+    border-radius: 15px;
+    box-shadow: 0 0 0 2px #fff, 0 0 0 3px #020929;
+}
+
+#text-input{
+    margin-top: 10px;
+    border: 1px solid #ddd;
+    padding: 20px;
+    height: 50vh;
+}
+
+.active{
+    background-color: #e0e9ff;
+}
diff --git a/script.js b/script.js
@@ -337,7 +337,6 @@ const projects = [
     image:
       'https://images.squarespace-cdn.com/content/v1/5509b13ce4b07f1f960ce802/1556758087399-ZUI9UEFSV9Y9JR5PZF1I/image-asset.jpeg',
   },
-
   {
     title: "Chess Game",
     discription: "Immerse yourself in the strategic world of chess with our Chess Game web application. Sharpen your skills, challenge opponents, and enjoy the timeless game of kings, all in a user-friendly online environment.",
@@ -359,6 +358,11 @@ const projects = [
     link: "Flappy-bird/index.html", 
     image: "https://imageio.forbes.com/blogs-images/ccuster/files/2014/02/flappybird.jpg?height=400&width=711&fit=bounds" 
   },
+  { title: "Text-Editor",
+    discription: "This is a simple text editor made using HTML, CSS and JS,which has features like bold,italic,underline,font-size,font-family,font-color,background-color,save and clear.", 
+    link: "Text-Editor/index.html", 
+    image: "https://img.freepik.com/free-vector/hand-drawn-essay-illustration_23-2150268421.jpg?w=740&t=st=1704262791~exp=1704263391~hmac=aee5b752fe168a85e20a6db35cafd9f429b2161b62cb7a6fe19621caeb0c1072" 
+  },
   { title: "Connect 4",
     discription: "This is a simple implementation of the Connect 4 game using HTML, CSS, and JavaScript.", 
     link: "Connect4/index.html",