Javascript – How to create Notepad with HTML, CSS and JS

ASH

3 years ago

In this post we will create a simple notepad using only JavaScript, HTML and CSS. Notepad will be having options of changing text style to bold, italic & normal. User will be able to add a title to their file and also can download with their name. This will be also a responsive design so we will be able to adjust the sizes according to device sizes.

Here’s a link to the blog post on Creating and Downloading Text files in JavaScript.

DOWNLOAD SOURCE CODE

In the your folder create three files like below:

index.html
style.css
script.js

And edit each of the files as the code shown below:

index.html:

<html>
<head>
<link rel='stylesheet' href='style.css' />
</head>
<body>

<div class="main">
<div class="main-container">

<div class="header">
<input type="text" class="txtHeader" id="txtHeader" placeholder="Enter title here"/>
&nbsp;
</div>

<div class="content">
<textarea class="txtContent" id="txtContent"></textarea>
</div>

<div class="options">
<center>
<button onclick="downloadFile()" class="btn btn-download">DOWNLOAD</button>
<button onclick="changeStyle('b')" class="btn1"><b>B</b></button>
<button onclick="changeStyle('i')" class="btn1"><i>i</i></button>
<button onclick="changeStyle('u')" class="btn1">u</button>
<button onclick="changeStyle('n')" class="btn1">n</button>
</center>
</div>

</div>
</div>
</div>
</body>
<script src='script.js' ></script>
</html>

The design is pretty simple and self explanatory. You can also include a strikeout button if you need and code in your JavaScript. Also do try to tweak a design a bit.

style.css:

body
{
font-family: Arial, Helvetica, sans-serif;
}
.main
{
background-color: #fff;
height: 100%;
padding: 20px;
}

.main-container
{
border:1px solid #246ded;
width:100%;
height: 100%;
}
.header
{
background-color: #246ded;
height: 7%;
width: 100%;
padding: 5px 0px;
}

.content
{
background-color: #fff;
height: 84%;
width: 100%;
border-bottom: 1px #141414 dotted;
}

.options
{
height: 7%;
width:100%;
padding: 5px;
}

::placeholder
{
color:#fff;
}
.txtHeader
{
font-size: 25px;
height: 100%;
background-color: transparent;
color:#fff;
font-family: Verdana, Geneva, Tahoma, sans-serif;
border:none;
text-align: center;
margin: auto;
display: block;
}

.txtHeader:focus,.txtHeader:hover
{
border:none;
background-color: #fff;
color:#246ded;
}

.txtContent
{
height: 100%;
width: 100%;
color:#141414;
background-color: #fff;
word-wrap: break-word;
font-family: Arial, Helvetica, sans-serif;
padding: 10px;
font-size: 18px;
border:none;
outline: none;
}

.txtContent:focus,.txtContent:hover
{
border:none !important;
background-color: #f7f7f7;
}

.btn
{
padding: 5px;
margin: 2px;
background-color: #246ded;
color:#fff;
font-size: 18px;
border-radius:5px;
border:none;
}

.btn:focus,.btn:hover
{

background-color: #fff;
color:#246ded;
border:1px #246ded solid;
}

script.js:

var fileName = document.getElementById("txtHeader");
var fileContent = document.getElementById("txtContent");

fileName.value="";
fileContent.value="";
function downloadFile()
{
if(fileName.value === "" || fileContent.value ==="")
window.alert("Please enter File name and content");
else
{
var e = fileContent.value;
var c = document.createElement("a");
c.download = fileName.value + ".txt";
var t = new Blob([e], {
type: "text/plain"
});
c.href = window.URL.createObjectURL(t);
c.click();
}
}

function changeStyle(propertyName)
{
switch(propertyName)
{
case "b":
if(fileContent.style.fontWeight === "bold")
fileContent.style.fontWeight = "normal";
else
fileContent.style.fontWeight = "bold";
break;
case "i":
if(fileContent.style.fontStyle === "italic")
fileContent.style.fontStyle = "normal";
else
fileContent.style.fontStyle = "italic";
break;
case "n":
fileContent.style.fontWeight = "normal";
fileContent.style.fontStyle = "normal";
fileContent.style.textDecoration = "none";
break;
case "u":
if(fileContent.style.textDecoration === "underline")
fileContent.style.textDecoration = "none";
else
fileContent.style.textDecoration = "underline"
break;

}
}

Download button calls the function downloadFile(). This function first checks if the user has enter the title and file content, if not it will simple show a JavaScript alert window asking users to enter notepad file name and its content. Once the content and title is present, the notepad file will be created and downloaded.

Bold, Italic and underline button calls a switch function i.e. changeStyle(propertyName) and it simply changes the style of the text of the textArea as per the button pressed.

You can download the source code for free from the link below and tweak it as per your requirement. Thank you for reading.

Share this: