Introducción al proyecto: en este artículo, aprenderemos cómo crear una aplicación de JavaScript de editor de texto simple donde podemos manipular la entrada del usuario en diferentes estilos, editar la entrada, poner mayúsculas, etc. muchas operaciones de string. Veamos la implementación.
Acercarse:
- Cree botones para realizar operaciones en texto en div.
- Crea un área de texto en div usando la etiqueta de área de texto .
- Selecciona elementos usando el método document.getElementById .
- Luego cambie el CSS usando JavaScript.
index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Text Editor</title>
<!--Bootstrap Cdn -->
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
integrity=
"sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous">
<!-- fontawesome cdn For Icons -->
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css"
integrity=
"sha512-PgQMlq+nqFLV4ylk1gwUOgm6CtIIXkKwaIHp/PAIWHzig/lKZSEGKEysh0TCVbHJXCLN7WetD8TFecIky75ZfQ=="
crossorigin="anonymous" />
<link rel="stylesheet"
href=
"https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
integrity=
"sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p"
crossorigin="anonymous" />
<!--Internal CSS start-->
<style>
h1 {
padding-top: 40px;
padding-bottom: 40px;
text-align: center;
color: #957dad;
font-family: 'Montserrat', sans-serif;
}
section {
padding: 5%;
padding-top: 0;
height: 100vh;
}
.side {
margin-left: 0;
}
button {
margin: 10px;
border-color: #957dad !important;
color: #888888 !important;
margin-bottom: 25px;
}
button:hover {
background-color: #fec8d8 !important;
}
textarea {
padding: 3%;
border-color: #957dad;
border-width: thick;
}
.flex-box {
display: flex;
justify-content: center;
}
</style>
<!--Internal CSS End-->
</head>
<!--Body start-->
<body>
<section class="">
<h1 class="shadow-sm">TEXT EDITOR</h1>
<div class="flex-box">
<div class="row">
<div class="col">
<!-- Adding different buttons for
different functionality-->
<!--onclick attribute is added to give
button a work to do when it is clicked-->
<button type="button"
onclick="f1()"
class=" shadow-sm btn btn-outline-secondary"
data-toggle="tooltip"
data-placement="top"
title="Bold Text">
Bold</button>
<button type="button"
onclick="f2()"
class="shadow-sm btn btn-outline-success"
data-toggle="tooltip"
data-placement="top"
title="Italic Text">
Italic</button>
<button type="button"
onclick="f3()"
class=" shadow-sm btn btn-outline-primary"
data-toggle="tooltip"
data-placement="top"
title="Left Align">
<i class="fas fa-align-left"></i></button>
<button type="button"
onclick="f4()"
class="btn shadow-sm btn-outline-secondary"
data-toggle="tooltip"
data-placement="top"
title="Center Align">
<i class="fas fa-align-center"></i></button>
<button type="button"
onclick="f5()"
class="btn shadow-sm btn-outline-primary"
data-toggle="tooltip"
data-placement="top"
title="Right Align">
<i class="fas fa-align-right"></i></button>
<button type="button"
onclick="f6()"
class="btn shadow-sm btn-outline-secondary"
data-toggle="tooltip"
data-placement="top"
title="Uppercase Text">
Upper Case</button>
<button type="button"
onclick="f7()"
class="btn shadow-sm btn-outline-primary"
data-toggle="tooltip"
data-placement="top"
title="Lowercase Text">
Lower Case</button>
<button type="button"
onclick="f8()"
class="btn shadow-sm btn-outline-primary"
data-toggle="tooltip"
data-placement="top"
title="Capitalize Text">
Capitalize</button>
<button type="button"
onclick="f9()"
class="btn shadow-sm btn-outline-primary side"
data-toggle="tooltip"
data-placement="top"
title="Tooltip on top">
Clear Text</button>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-md-3 col-sm-3">
</div>
<div class="col-md-6 col-sm-9">
<div class="flex-box">
<textarea id="textarea1"
class="input shadow"
name="name"
rows="15"
cols="100"
placeholder="Your text here ">
</textarea>
</div>
</div>
<div class="col-md-3">
</div>
</div>
</section>
<br>
<br>
<h6 style="text-align:center;">Priyansh Jha 2021.</h6>
<!--External JavaScript file-->
<script src="home.js"></script>
</body>
</html>
Explicación del código HTML: aquí agregamos diferentes botones en el documento, que obtendrán el poder de realizar algunas tareas que le damos con la ayuda de JavaScript. Hemos agregado botones para cambiar el peso de la fuente de la string de entrada, el estilo de fuente, la alineación del texto de la string y vamos a transformar la string usando el modelo de objeto del documento. Hemos agregado algunos CSS básicos para embellecer el documento, puede usar diferentes propiedades de CSS para que se vea mejor. Y en la parte inferior del código HTML, hemos agregado un campo de texto donde el usuario puede escribir la string de entrada. Entonces, estamos listos con todo el diseño y la estructura de nuestro proyecto, ahora todo lo que tenemos que hacer es darle poderes usando JavaScript. Porque ahora tenemos un cuadro de texto y múltiples botones para aplicar diferentes estilos en la entrada de string.
home.js
function f1() {
//function to make the text bold using DOM method
document.getElementById("textarea1").style.fontWeight = "bold";
}
function f2() {
//function to make the text italic using DOM method
document.getElementById("textarea1").style.fontStyle = "italic";
}
function f3() {
//function to make the text alignment left using DOM method
document.getElementById("textarea1").style.textAlign = "left";
}
function f4() {
//function to make the text alignment center using DOM method
document.getElementById("textarea1").style.textAlign = "center";
}
function f5() {
//function to make the text alignment right using DOM method
document.getElementById("textarea1").style.textAlign = "right";
}
function f6() {
//function to make the text in Uppercase using DOM method
document.getElementById("textarea1").style.textTransform = "uppercase";
}
function f7() {
//function to make the text in Lowercase using DOM method
document.getElementById("textarea1").style.textTransform = "lowercase";
}
function f8() {
//function to make the text capitalize using DOM method
document.getElementById("textarea1").style.textTransform = "capitalize";
}
function f9() {
//function to make the text back to normal by removing all the methods applied
//using DOM method
document.getElementById("textarea1").style.fontWeight = "normal";
document.getElementById("textarea1").style.textAlign = "left";
document.getElementById("textarea1").style.fontStyle = "normal";
document.getElementById("textarea1").style.textTransform = "capitalize";
document.getElementById("textarea1").value = " ";
}
Explicación del código JavaScript:
Aquí estamos seleccionando elementos usando DOM. Luego estamos usando el método document.getElementById para seleccionar un elemento en particular y luego, después de seleccionar el elemento específico usando su nombre de ID, estamos manipulando su CSS a través de JavaScript. Por último, hemos creado una función que hace que todo vuelva a la normalidad, donde descarta todas las propiedades aplicadas usando los botones que proporcionamos.
Producción:
Imagen de pantalla de salida
Hay muchas más funciones que puede agregar a este proyecto, como cambiar el tamaño de fuente, contar la cantidad de letras, palabras dentro del área de texto, cambiar el estilo de fuente y muchas más. Pruébalo.
Puede acceder al código fuente desde Github y ver un ejemplo en ejecución de este proyecto haciendo clic aquí .
Publicación traducida automáticamente
Artículo escrito por priyanshjha99 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA