Add files via upload

ashish-makes · Aug 9, 2023 · f3a9507 · f3a9507
1 parent 10390d1
commit f3a9507
Show file tree

Hide file tree

Showing 3 changed files with 251 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Basic Text Editor</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+<main class="container">
+    <div class="tools-area">
+        <button id="bold" class="tools-btn"><i class="fa-solid fa-bold"></i></button>
+        <button id="italic" class="tools-btn"><i class="fa-solid fa-italic"></i></button>
+        <button id="underline" class="tools-btn"><i class="fa-solid fa-underline"></i></button>
+        <button id="strikethrough" class="tools-btn"><i class="fa-solid fa-strikethrough"></i></button>
+        <button id="justifyLeft" class="tools-btn"><i class="fa-solid fa-align-right"></i></button>
+        <button id="justifyRight" class="tools-btn"><i class="fa-solid fa-align-left"></i></button>
+        <button id="justifyFull" class="tools-btn"><i class="fa-solid fa-align-justify"></i></button>
+        <button id="justifyCenter" class="tools-btn"><i class="fa-solid fa-align-center"></i></button>
+        <button id="unorderedList" class="tools-btn"><i class="fa-solid fa-list-ul"></i></button>
+        <button id="increaseFontSize" class="tools-btn"><i class="fa-solid fa-plus"></i></button>
+        <button id="decreaseFontSize" class="tools-btn"><i class="fa-solid fa-minus"></i></button>
+
+        <button id="copyBtn" class="tools-btn"><i class="fa-regular fa-clipboard"></i></button>
+        <button id="resetBtn" class="tools-btn"><i class="fa-solid fa-rotate-right"></i></button>
+    </div>
+    <div class="txt-area">
+        <div contentEditable class="text" id="text" placeholder="start typing your text to play with..." rows="20"></div>
+        <div style="text-align: center; margin-top: 10px;"></div>
+    </div>
+</main>
+
+<a href='https://github.com/ashish-makes' target='_blank'><div class='ashish-credits'>
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M3.25 10.0298C3.25 7.3293 5.61914 5.25 8.4 5.25C9.83347 5.25 11.0948 5.92214 12 6.79183C12.9052 5.92214 14.1665 5.25 15.6 5.25C18.3809 5.25 20.75 7.3293 20.75 10.0298C20.75 11.8797 19.9611 13.5064 18.8682 14.8815C17.7771 16.2543 16.35 17.4193 14.9835 18.366C14.4615 18.7276 13.9335 19.0611 13.4503 19.3072C12.9965 19.5383 12.4747 19.75 12 19.75C11.5253 19.75 11.0035 19.5383 10.5497 19.3072C10.0665 19.0611 9.53846 18.7276 9.01653 18.366C7.65005 17.4193 6.22287 16.2543 5.13182 14.8815C4.03888 13.5064 3.25 11.8797 3.25 10.0298ZM8.4 6.75C6.32075 6.75 4.75 8.2791 4.75 10.0298C4.75 11.4333 5.34579 12.74 6.30609 13.9482C7.26828 15.1588 8.56292 16.2269 9.87074 17.133C10.3656 17.4758 10.8317 17.7675 11.2305 17.9706C11.6586 18.1886 11.9067 18.25 12 18.25C12.0933 18.25 12.3414 18.1886 12.7695 17.9706C13.1683 17.7675 13.6344 17.4758 14.1293 17.133C15.4371 16.2269 16.7317 15.1588 17.6939 13.9482C18.6542 12.74 19.25 11.4333 19.25 10.0298C19.25 8.2791 17.6792 6.75 15.6 6.75C14.4058 6.75 13.2908 7.46342 12.5946 8.36892C12.4526 8.55356 12.2329 8.66176 12 8.66176C11.7671 8.66176 11.5474 8.55356 11.4054 8.36892C10.7092 7.46342 9.59415 6.75 8.4 6.75Z" fill="black"/>
+    </svg>
+    <span style="margin-top: .1rem;" class='text'>A project by <span class='name' style='font-weight: 500;'>ashish<span></span>
+</div></a>
+
+<script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,73 @@
+document.addEventListener("DOMContentLoaded", function () {
+  const boldButton = document.getElementById("bold");
+  const underlineButton = document.getElementById("underline");
+  const italicButton = document.getElementById("italic");
+  const strikethroughButton = document.getElementById("strikethrough");
+  const justifyRightButton = document.getElementById("justifyRight");
+  const justifyLeftButton = document.getElementById("justifyLeft");
+  const justifyCenterButton = document.getElementById("justifyCenter");
+  const justifyFullButton = document.getElementById("justifyFull");
+  const unorderedListButton = document.getElementById("unorderedList");
+  const increaseFontSizeButton = document.getElementById("increaseFontSize");
+  const decreaseFontSizeButton = document.getElementById("decreaseFontSize");
+  const copyButton = document.getElementById("copyBtn");
+  const resetButton = document.getElementById("resetBtn");
+
+  boldButton.addEventListener("click", function () {
+    document.execCommand("bold", false, null);
+  });
+
+  italicButton.addEventListener("click", function () {
+    document.execCommand("italic", false, null);
+  });
+
+  underlineButton.addEventListener("click", function () {
+    document.execCommand("underline", false, null);
+  });
+
+  strikethroughButton.addEventListener("click", function () {
+    document.execCommand("strikethrough", false, null);
+  });
+
+  justifyRightButton.addEventListener("click", function () {
+    document.execCommand("justifyRight", false, null);
+  });
+
+  justifyLeftButton.addEventListener("click", function () {
+    document.execCommand("justifyLeft", false, null);
+  });
+
+  justifyCenterButton.addEventListener("click", function () {
+    document.execCommand("justifyCenter", false, null);
+  });
+
+  justifyFullButton.addEventListener("click", function () {
+    document.execCommand("justifyFull", false, null);
+  });
+
+  unorderedListButton.addEventListener("click", function () {
+    document.execCommand("insertUnorderedList", false, null);
+  });
+
+  increaseFontSizeButton.addEventListener("click", function () {
+    const currentSize = parseInt(getComputedStyle(text).fontSize, 10);
+    text.style.fontSize = (currentSize + 1) + "px";
+  });
+
+  decreaseFontSizeButton.addEventListener("click", function () {
+    const currentSize = parseInt(getComputedStyle(text).fontSize, 10);
+    text.style.fontSize = (currentSize - 1) + "px";
+  });
+
+  copyButton.addEventListener("click", function () {
+    const allText = text.innerText;
+    if (allText) {
+        navigator.clipboard.writeText(allText);
+    }
+});
+
+  resetButton.addEventListener("click", function () {
+    text.innerHTML = "";
+  });
+
+});
diff --git a/style.css b/style.css
@@ -0,0 +1,134 @@
+/* Google Fonts */
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap');
+
+*{
+	font-family: 'Poppins';
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+	scroll-behavior: smooth;
+	scroll-padding-top: 2rem;
+}
+
+body{
+	color: #0e2045;
+	background: #fff;
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+}
+
+main {
+    flex: 1;
+    position: absolute;
+    top: 50%; 
+    left: 50%; 
+    transform: translate(-50%, -50%); 
+}
+
+img{
+	width: 100%;
+}
+
+section{
+	padding: 3rem 0 2rem;
+}
+
+a{
+	text-decoration: none;
+	color: #0e2045;
+}
+
+.container{
+	max-width: 1024px;
+	margin: auto;
+	width: 100%;
+}
+
+.btn {
+    background-color: #eaeaea;
+    border: none;
+    padding: 8px 20px 8px 20px;
+    border-radius: 50px;
+    cursor: pointer;
+}
+
+.btn:hover{
+    box-shadow: 0 5px 30px 0 rgba(0,0,0,.05);
+    transition: .3s ease;
+}
+
+.btn:active {
+    scale: 95%;
+}
+
+.tools-btn {
+    background-color: #fff;
+    border: none;
+    padding: 8px 20px 8px 20px;
+    border-radius: 6px;
+    cursor: pointer;
+    margin: 2px;
+}
+
+.tools-btn:hover {
+    background-color: #eaeaea;
+}
+
+.tools-btn:active:hover {
+    background-color: #e1e0e0;
+}
+
+.tools-area {
+    background-color: #f8f9fa;
+    width: 100%;
+    padding: 20px;
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+}
+
+.txt-area .text {
+    width: 100%;
+    height: 400px;
+    resize: none;
+    border-bottom-left-radius: 8px;
+    border-bottom-right-radius: 8px;
+    border: 3px solid #eaeaea;
+    border-top-color: #f8f9fa;
+    background-color: #fff;
+    outline: none;
+    padding: 10px 12px 10px 12px;
+}
+
+/* Ashish Credits */
+
+.ashish-credits {
+    background-color: #fff;
+    border: 2px solid #e7e9eb;
+    font-size: smaller;
+    padding: .5rem .5rem;
+    width: 200px;
+    display: flex;
+    column-gap: .3rem;
+    justify-content: center;
+    border-radius: 50px;
+    box-shadow: 0 5px 30px 0 rgba(0,0,0,.05);
+    z-index: 9999;
+    position: fixed;
+    bottom: 1rem;
+    right: 1rem;
+}
+
+.ashish-credits .icon {
+    color: #8710d8
+}
+
+
+/* Making the Website Responsive */
+
+@media (max-width: 1000px){
+	.container{
+		margin: 0 auto;
+		width: 90%;
+	}
+}