Hey everyone. Welcome, to today’s tutorial. In today’s tutorial, we will learn how to create an app to truncate text to the desired number of characters. We build this project using HTML, CSS and Javascript.
In this project, we have two textareas. The first is for the user to input a desired string or paragraph. The second textarea is where we display the truncated text. Also, this textarea is only read-only.
Next, we have a number input field to input the length of characters we wish to have. Finally, a button to truncate text and a button to copy text to the clipboard.
Video Tutorial:
If you prefer to learn by watching a video tutorial rather than reading this blog post you can check out the video down below. Also, subscribe to my youtube channel where I post new tutorials every alternate day.
Project Folder Structure:
Before we start to code let us take a look at the project folder structure. We create a project folder called – ‘Truncate Text App’. Within this folder, we have three files. These files are index.html, style.css and script.js. The first file is the HTML document, the next is the stylesheet and the last file is the script file.
HTML:
We begin with the HTML code. Copy the text below and paste it into your HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Truncate Text App</title>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="txtareas">
<div>
<label for="input-text">Input Text:</label>
<textarea
id="input-text"
rows="5"
placeholder="Enter Text Here..."
></textarea>
</div>
<div>
<label for="output-text">Output Text:</label>
<textarea
id="output-text"
rows="5"
placeholder="Output text will be displayed here..."
></textarea>
</div>
</div>
<input type="number" value="10" id="len" />
<button id="truncate">Truncate</button>
<button id="copy">Copy</button>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
Â
CSS:
Next copy and paste the CSS code provided to you below and paste it into your stylesheet.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background-color: #1dd2a2;
}
.container {
background-color: #ffffff;
border-radius: 0.8em;
width: 95%;
max-width: 43.75em;
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
padding: 5em 2em;
}
.txtareas {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1em;
}
label {
color: #02001f;
font-weight: 600;
}
.txtareas div {
display: flex;
flex-direction: column;
}
.txtareas textarea {
resize: none;
border: 1px solid #02001f;
border-radius: 0.3em;
margin: 1em 0 2em 0;
padding: 0.8em;
}
#len {
width: 5em;
padding: 0.8em 1em;
border: 1px solid #02001f;
border-radius: 0.5em;
}
#truncate,
#copy {
padding: 0.8em 1em;
border-radius: 0.5em;
border: none;
background-color: #1dd2a2;
cursor: pointer;
}
@media screen and (max-width: 600px) {
.txtareas {
grid-template-columns: 1fr;
}
}
Â
Javascript:
We finally implement the functionality of this app using javascript. We do it in the following steps:
- Create Initial References
- Add click event listener to truncate button.
- Get the length inputted by the user.
- Check if the length is not empty.
- Check if the length is greater than 0 and the input text length is greater than len.
- Implement function to copy to clipboard.
let inputText = document.getElementById("input-text");
let outputText = document.getElementById("output-text");
let truncateBtn = document.getElementById("truncate");
let copyBtn = document.getElementById("copy");
truncateBtn.addEventListener("click", () => {
let len = parseInt(document.getElementById("len").value);
//If input length is NOT empty
if (len) {
//Validate input length and input text
//If valid
if (len > 0 && inputText.value.length > len) {
outputText.value = inputText.value.slice(0, len);
}
//If NOT valid
else {
outputText.value = inputText.value;
}
}
//If input length is empty
else {
outputText.value = "";
alert("Please fill the length input");
}
});
//Copy Button
copyBtn.addEventListener("click", () => {
navigator.clipboard.writeText(`${outputText.value}`);
});
Â
That’s all for this tutorial. If you face any issues while creating this code you can download the source code by clicking on the ‘Download Code’ button below. Also, If you have any queries, suggestions or feedback you can comment below.
