How to create a text editor using JavaScript and HTML

Hey, developers welcome to Day 86 of our 90Days 90Projects challenge. And today in this challenge we are going to Create a Responsive Text Editor using HTML CSS and JavaScript.

So to run this code you just need to copy the HTML and CSS code and run it into your code Editor. 

Preview

How to create a text editor using JavaScript and HTML, raju webdev, geeks help, Text editor in JavaScript source code, Simple rich text editor JavaScript, Text editor JavaScript, JavaScript text editor online, How to create rich text editor in HTML, How to make a text editor in HTML, Rich text editor in HTML


HTML Code

index.html

<!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">
    <title> Style Change using JS </title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
        integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <h2> Geeks Help Text Editor </h2>
        <div class="top-area">
            <ul>
                <li id="bold">B</li>
                <li id="italic">I</li>
                <li id="underline">U</li>
                <li id="strike"><i class="fa-solid fa-strikethrough"></i></li>
                <li id="case"><img src="/font-case.png" alt=""></li>
                <li id="left"><i class="fa-solid fa-align-left"></i></li>
                <li id="right"><i class="fa-solid fa-align-right"></i></li>
                <li id="center"><i class="fa-solid fa-align-center"></i></li>
                <li id="justify"><i class="fa-solid fa-align-justify"></i></li>
                <li id="fonts">
                    <div>
                        <span>F</span>
                        <i id="increase" class="fa-solid fa-arrow-up"></i>
                        <i id="decrease" class="fa-solid fa-arrow-down"></i>
                    </div>
                </li>
            </ul>
        </div>
        <div class="content-area">
            <textarea id="textInputArea" name="inputArea" value="raju"
                placeholder="Enter text here to edit..."></textarea>
        </div>
    </div>
</body>
<script src="editor.js"></script>

</html>




CSS Code

style.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

.container {
    border: 2px solid rgba(86, 83, 83, 0.401);
    border-radius: 5px;
    padding: 10px;
    display: block;
    width: 90%;
    margin: 10px auto;
}

.container h2 {
    text-align: center;
    margin: 15px auto;
    color: #e65b00;
}

.top-area ul {
    border: 1px dashed rgb(211, 196, 196);
    border-radius: 5px;
    padding: 5px 10px;
    list-style: none;
    align-items: center;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.top-area ul li {
    cursor: pointer;
    font-size: 18px;
    padding: 10px;
    text-align: center;
}

.top-area ul li img {
    height: 15px;
}

.active {
    background-color: rgba(135, 207, 235, 0.655);
    border-radius: 5px;
}

#color {
    width: auto;
    height: auto;
}

.content-area {
    margin: 10px 0;
    width: 100%;
}

.content-area textarea {
    width: 100%;
    resize: none;
    border: 1px solid black;
    border-radius: 5px;
    outline: none;
    padding: 10px;
    height: 200px;
    font-size: 14px;
}

#fonts {
    height: auto;
    width: auto;
}

#fonts div {
    height: auto;
    width: auto;
    display: flex;
    font-size: 12px;
    align-items: center;
}

#fonts span {
    height: auto;
    width: auto;
    font-size: 20px;
    font-weight: bold;
    margin-right: 5px;
}

#fonts i {
    height: auto;
    width: auto;
    margin: 2px;
}

.bold {
    font-weight: bold;
}

.italic {
    font-style: italic;
}

.underline {
    text-decoration: underline;
}

.case {
    text-transform: uppercase;
}

.strike {
    text-decoration: line-through;
}

.alignLeft {
    text-align: left;
}

.alignRight {
    text-align: right;
}

.alignCenter {
    text-align: center;
}

.alignJustify {
    text-align: justify;
}



JavaScript

editor.js

const boldBtn = document.getElementById('bold');
const italicBtn = document.getElementById('italic');
const strikeBtn = document.getElementById('strike');
const underlineBtn = document.getElementById('underline');
const caseBtn = document.getElementById('case');
const leftBtn = document.getElementById('left');
const rightBtn = document.getElementById('right');
const centerBtn = document.getElementById('center');
const justifyBtn = document.getElementById('justify');
const increaseBtn = document.getElementById('increase');
const decreaseBtn = document.getElementById('decrease');
let textArea = document.getElementById('textInputArea');

let lists = document.querySelectorAll('li');
Array.from(lists).forEach(function (listItem) {
    listItem.addEventListener('click', function () {
        listItem.classList.toggle('active');
    })
});

boldBtn.addEventListener('click', function () {
    textArea.classList.toggle('bold');
});

italicBtn.addEventListener('click', function () {
    textArea.classList.toggle('italic');
});

underlineBtn.addEventListener('click', function () {
    textArea.classList.toggle('underline');
});

strikeBtn.addEventListener('click', function () {
    textArea.classList.toggle('strike');
});

caseBtn.addEventListener('click', function () {
    textArea.classList.toggle('case');
});

leftBtn.addEventListener('click', function () {
    textArea.classList.toggle('alignLeft');
});

rightBtn.addEventListener('click', function () {
    textArea.classList.toggle('alignRight');
});

centerBtn.addEventListener('click', function () {
    textArea.classList.toggle('alignCenter');
});

justifyBtn.addEventListener('click', function () {
    textArea.classList.toggle('alignJustify');
});

let size = 14;
increaseBtn.addEventListener('click', function () {
    let textAreaValue = textArea.value;
    size = size + 1;
    textArea.style.fontSize = size + 'px';
});

decreaseBtn.addEventListener('click', function () {
    let textAreaValue = textArea.value;
    size = size - 1;
    textArea.style.fontSize = size + 'px';
});


Learn HTML- Learn Now

Learn CSS- Learn Now

Visit our 90Days, 90Projects Page- Visit Now

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad