![\"An](\"https:\/\/mastertrend.info\/wp-content\/uploads\/2025\/01\/Crea-Tu-Primera-Aplicacion-Web-Una-App-de-Notas-Sencilla.png\" "\\"\\"")
<\/picture><\/figure>\nIt also counts characters and words, which is a good introduction to string (text) manipulation. Of course, the app is very simple\u2014that's the point! But with this tutorial, you'll learn the basics of developing a web app, and then the world will be your oyster. \ud83e\uddaa\ud83d\udcbb<\/p>\n
How Are You Going to Build It?<\/h2>\n
Although web applications are very diverse, they typically involve three main technologies: HTML, CSS, and JavaScript. It's essential that you understand their roles before you begin. \ud83d\udcda<\/p>\n
- \n
- HTML: Hypertext Markup Language allows you to define the structure of your content. With it, you can mark up text based on its meaning, indicating whether it's a paragraph, a heading, or an item in a list, for example.<\/li>\n
- CSS: Cascading Style Sheets allow you to style your content. Using this language, you can color a paragraph green, make all your links bold, or position a sidebar next to your main article. \ud83c\udfa8<\/li>\n
- JavaScript: With this programming language, you can add functionality to your website. You can make buttons show or hide parts of your document when clicked, or implement a full-featured word processor or video game. \ud83c\udfae<\/li>\n<\/ul>\n
He website.dev<\/a> (escrito por miembros del equipo de Chrome) y MDN, la Red de Desarrolladores de Mozilla, son dos excelentes fuentes de informaci\u00f3n sobre tecnolog\u00edas web fundamentales.<\/p>\n
![\"The](\"https:\/\/mastertrend.info\/wp-content\/uploads\/2025\/01\/1736598858_798_Crea-Tu-Primera-Aplicacion-Web-Una-App-de-Notas-Sencilla.png\" "\\"\\"")
<\/picture><\/figure>\nThe Structure of the App<\/h2>\n
The app you'll build will consist of three simple files: index.html, styles.css, and script.js. \ud83d\uddc2\ufe0f<\/p>\n
There are no special requirements to run the app; you just need a web browser. There's no backend functionality, so you don't need a scripting language like PHP or a local web server. Once you're done, you can open the index.html file directly in your browser<\/a> and everything will work out. \ud83d\ude0a<\/p>\n
It's important to mention that this app saves your text without writing it to a specific file on disk, since JavaScript can't access the file system. It uses the Web Storage API, a powerful alternative to cookies. \ud83c\udf6a\ud83d\udcbe<\/p>\n
How to Build the Note Taker<\/h2>\n
Create the following three files in the same directory and then open index.html in a web browser. Alternatively, you can download the files from this GitHub repository<\/a>. \ud83d\udce5<\/p>\n
Building the Structure with HTML<\/h3>\n
The index.html file defines the structure of your app's content in HTML. It includes references to the other two files so a browser can combine them into the final product.<\/p>\n
Like all HTML documents, the top-level structure includes a head section containing metadata and a body section containing the actual content that will appear on the page:<\/p>\n
html<\/span>>\r\n<html<\/span>><\/span>\r\n<head<\/span>><\/span>\r\n ...\r\nhead<\/span>><\/span><\/code><\/pre>\n<body<\/span>><\/span>
\n…
\nbody<\/span>><\/span>
\nhtml<\/span>><\/span><\/p>\n<\/code><\/pre>\n<\/code><\/pre>\nThe metadata in the head is very brief, with just a page title (which appears in your browser's title bar) and a reference to the styles.css file:<\/p>\n
<title<\/span>><\/span>Texttitle<\/span>><\/span>\r\n <link<\/span> rel<\/span>="stylesheet"<\/span> href<\/span>="styles.css"<\/span> \/><\/span>\r\n<\/code><\/pre>\nThe body is more complicated, but there are only a few important parts:<\/p>\n
<div<\/span> id<\/span>="counter"<\/span>><\/span>\r\n words: <span<\/span> id<\/span>="words"<\/span>><\/span>0span<\/span>><\/span>\r\n \/ characters: <span<\/span> id<\/span>="chars"<\/span>><\/span>0span<\/span>><\/span>\r\n div<\/span>><\/span><\/code><\/pre>\n<textarea<\/span> id<\/span>=\u00abtext\u00bb<\/span> autofocus<\/span>=\u00ab1\u00bb<\/span>><\/span>textarea<\/span>><\/span><\/p>\n
<\/code><\/pre>\n<script<\/span> src<\/span>=\u00abscript.js\u00bb<\/span>><\/span>script<\/span>><\/span><\/p>\n
<\/code><\/pre>\n<\/code><\/pre>\nThe div element contains the app's word and character count. It will be located at the top of the web app and will update whenever the text changes.<\/p>\n
Note the id attributes, which are vital to the operation. The value of an id must be unique so the app can use it to identify a specific element. Doing this can help us style these elements and also target them when adding functionality.<\/p>\n
The textarea is a built-in form element that allows you to type simple text in a browser. With the autofocus attribute, it's ready to type as soon as the page loads. Finally, the page references the JavaScript file, script.js.<\/p>\n
At this point, you can open the index.html file in a browser. It won't do anything right now, and it won't even look good, but it's helpful to test your app at each stage to make sure the basics work as you expect.<\/p>\n
![\"A](\"https:\/\/mastertrend.info\/wp-content\/uploads\/2025\/01\/1736598858_678_Crea-Tu-Primera-Aplicacion-Web-Una-App-de-Notas-Sencilla.png\" "\\"\\"")
<\/picture><\/figure>\nMaking Them Look Good With CSS<\/h3>\n
CSS allows you to style parts of your web page by targeting those parts and specifying values for properties like font-size and background-color. This sample app doesn't need a very refined design because its interface is so basic. However, we can smooth out the rough edges with a touch of style. \ud83c\udfa8\u2728<\/p>\n
First, style the body to define the overall design:<\/p>\n
body<\/span> {\r\n margin<\/span>: 0;\r\n padding<\/span>: 0;\r\n display<\/span>: grid<\/span>;\r\n min-height<\/span>: 100vh<\/span>;\r\n grid-template-rows<\/span>: min-content<\/span> 1fr<\/span>;\r\n}\r\n<\/code><\/pre>\nEste CSS utiliza la disposici\u00f3n en cuadr\u00edcula para posicionar los conteos de palabras y caracteres en una fila estrecha sobre el textarea. La propiedad grid-template-rows especifica que la fila del conteo debe ser lo m\u00e1s corta posible (min-content) y el textarea debe llenar el espacio restante (1fr).<\/p>\n
The counter row has a basic style to differentiate it from the rest of the text, mainly through its background:<\/p>\n
#counter<\/span> {\r\n font-family<\/span>: sans-serif<\/span>;\r\n background-color<\/span>: #f7f7f7<\/span>;\r\n text-align<\/span>: center<\/span>;\r\n width<\/span>: 100%;\r\n padding<\/span>: 0.5em<\/span> 0;\r\n}\r\n<\/code><\/pre>\nFinally, the text area is styled to display legible text with plenty of room to breathe. The line separating the counts from the text is actually the top border of this text area.<\/p>\n
textarea<\/span> {\r\n width<\/span>: 100%;\r\n height<\/span>: 100%;\r\n font-size<\/span>: 16pt<\/span>;\r\n padding<\/span>: 1in<\/span>;\r\n box-sizing<\/span>: border-box<\/span>;\r\n outline<\/span>: 0;\r\n border<\/span>: none<\/span>;\r\n border-top<\/span>: 1px<\/span> solid<\/span> #999<\/span>;\r\n}<\/code><\/pre>\n![\"The](\"https:\/\/mastertrend.info\/wp-content\/uploads\/2025\/01\/1736598859_152_Crea-Tu-Primera-Aplicacion-Web-Una-App-de-Notas-Sencilla.png\" "\\"\\"")
<\/picture><\/figure>\nAdding Functionality with JavaScript<\/h3>\n
With the structure and style in place, you're ready to add functionality: the code that makes this simple app actually do something. \ud83d\udee0\ufe0f<\/p>\n
Before you start writing even the simplest code, it's a good idea to understand what you want it to do. In this case, there are just a couple of general requirements:<\/p>\n
- \n
- Save the entered text and reload it when necessary.<\/li>\n
- Update character and word counts to provide real-time statistics. \ud83d\udcca<\/li>\n<\/ul>\n
Both requirements involve updating elements in the document. So the script begins by obtaining references to these nodes using the getElementById method:<\/p>\n
const<\/span> words = document<\/span>.getElementById("words"<\/span>);\r\nconst<\/span> chars = document<\/span>.getElementById("chars"<\/span>);\r\nconst<\/span> textarea = document<\/span>.getElementById("text"<\/span>);\r\n<\/code><\/pre>\nNote that words, chars, and text are the IDs of their respective elements in the document, assigned in the HTML file with the id attribute.<\/p>\n
Next, we need the app to react when the text is changed:<\/p>\n
textarea.addEventListener("input"<\/span>, function<\/span>(ev<\/span>) <\/span>{ localStorage.setItem("text"<\/span>, ev.target.value); update_counts(ev.target.value); });\r\n<\/code><\/pre>\nAn event listener is a function that JavaScript will automatically execute when a certain event occurs. In this case, we attach a listener to the textarea node, which executes when the "input" event occurs. That is, when someone interacts with the textarea.<\/p>\n
Next, we use the Web Storage API to save the current contents of the textarea, which comes from ev.target.value. In this structure, ev is an object representing the event that triggered the listener, ev.target is the node that received the event, and ev.target.value is the text of that textarea.<\/p>\n
The setItem method takes two parameters: a key name to associate with the data and the actual data to store.<\/p>\n
Next, we call update_counts(), passing the same text. We'll explain that function in a moment.<\/p>\n
Now that we're saving the text, you'll want to load it again when the app opens or reloads. We can take care of that using another listener:<\/p>\n
window<\/span>.addEventListener("load"<\/span>, function<\/span>(ev<\/span>) <\/span>{\r\n var<\/span> text = localStorage.getItem("text"<\/span>); textarea.value = text; update_counts(text); });\r\n<\/code><\/pre>\nThis listener handles the load event that occurs on the window object, a top-level representation of the browser window. When the window loads, a call to getItem() returns the stored text value from local storage. This code then sets the value of the textarea to the loaded text and, like the previous listener, calls update_counts() with this text.<\/p>\n
The remaining work is done in the update_counts() function which looks like this:<\/p>\n
function<\/span>\u00a0update_counts<\/span>(text<\/span>) <\/span>{ chars.innerHTML = text.length; words.innerHTML = text.split(' '<\/span>).length; }\r\n<\/code><\/pre>\nUnlike a textarea, regular text doesn't have a value property, so we set the innerHTML property instead. The length property of a string is a simple read-only property that gives us the number of characters.<\/p>\n
text.split(' ') splits the string at the space characters, returning the result as an array of strings. Like strings, arrays have a length property that gives the number of elements in an array.<\/p>\n
If you test this code, however, you might notice a couple of errors:<\/p>\n
- \n
- It will not count a word by itself on a line correctly, as there are no space characters around it.<\/li>\n
- With no text at all, it will report a single word because of how split works.<\/li>\n<\/ol>\n
To solve the first problem, you can split on a regular expression (\\s means "a blank character") instead of a space. To solve the second, filter out empty strings from the result:<\/p>\n
words.innerHTML = text.split(\/\\s\/<\/span>).filter(function<\/span>(n<\/span>) <\/span>{ return<\/span> n != ''<\/span>; }).length;\r\n<\/code><\/pre>\nIf you don't fully understand that line, check out the MDN pages for split<\/a> and filter<\/a>.<\/p>\n
![\"The](\"https:\/\/mastertrend.info\/wp-content\/uploads\/2025\/01\/1736598859_129_Crea-Tu-Primera-Aplicacion-Web-Una-App-de-Notas-Sencilla.png\" "\\"\\"")
<\/picture><\/figure>\n
\n