diff --git a/README.md b/README.md index 55c6964..cf68bf5 100644 --- 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 new file mode 100644 index 0000000..92d737b Binary files /dev/null and b/Text-Editor/Images/demo.png differ diff --git a/Text-Editor/README.md b/Text-Editor/README.md new file mode 100644 index 0000000..36444ac --- /dev/null +++ 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 new file mode 100644 index 0000000..0a55f5a --- /dev/null +++ b/Text-Editor/index.html @@ -0,0 +1,95 @@ + + + + + + + + + + Text-Editor + + + + +
+
+ + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+
+ + +
+ +
+
+
+ + + + + + + \ No newline at end of file diff --git a/Text-Editor/script.js b/Text-Editor/script.js new file mode 100644 index 0000000..88cb3f0 --- /dev/null +++ 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(); \ No newline at end of file diff --git a/Text-Editor/style.css b/Text-Editor/style.css new file mode 100644 index 0000000..5ea9477 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/script.js b/script.js index d4e2c81..5fa7393 100644 --- 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",