How to create Notepad using JavaScript?

Contributed by Hizbullah Watandost

Coding is my passion

Code for Notepad:

HTML form design:

<!DOCTYPE html>
<html>
<head>
<title>
SICSR Online Notepad
</title>
<!–Css part–>
<style>
.table{border:2px solid red;
width:1000px;
height:700px;
}

#head{
height:20px;
width:130px;
background-color:teal;
font-size:+2;
text-align:center;
font-weight:bold;
color:white
}

#td2{
height:10px;
width:140px;
text-align: center;
}
</style>

</head>

<body>

<marquee>
<b><font color=”DarkRed”>Welcome to Afghan Online Notepad</font></b>
</marquee>

<center>
<table class=”table”>
<tr id=”head”>
<td>
<font color=”DarkRed” size=’+3′><b>Decorate Your Text</b></font>
<hr color=”gray”>
</td>
</tr>

<tr>
<td >
<center>
<table style=”background-color:teal”>
<tr>
<td id=”td2″><h3>Font Color</h3></td>
<td id=”td2″><h3>Font Size</h3></td>
<td id=”td2″><h3>Font Style</h3></td>
<td id=”td2″><h3>Font Family</h3></td>
<td id=”td2″><h3>Alignment</h3></td>
<td id=”td2″><h3>Font BK-color</h3></td>
</tr>

<tr>
<td>
<form name=”decoration”>
<center>
<select style=”width:130px;background-color:gray” name=”mycolor” onChange=”color()”>
<option value=”Red” name=”Red”>Red</option>
<option value=”Blue” name=”Blue”>Blue</option>
<option value=”Green” name=”Green”>Green</option>
<option value=”Yellow” name=”Yellow”>Yellow</option>
<option value=”Orange” name=”Orange”>Orange</option>
<option value=”Pink” name=”Pink”>Pink</option>
<option value=”Purple” name=”Purple”>Purple</option>
<option value=”White” name=”White”>White</option>
<option value=”DarkRed” name=”DarkRed”>DarkRed</option>
<option value=”Black” name=”Black”>Black</option>
<option value=”Brown” name=”Brown”>Brown</option>
</select>
</center>
</td>

<td>
<center>
<select name=”font_size” style=”width:130px;background-color:gray” onChange=”txtsize()”>
<option value=”1″ name=”1″>1</option>
<option value=”2″ name=”2″>2</option>
<option value=”3″ name=”3″>3</option>
<option value=”4″ name=”4″>4</option>
<option value=”5″ name=”5″>5</option>
<option value=”6″ name=”6″>6</option>
<option value=”7″ name=”7″>7</option>
<option value=”8″ name=”8″>8</option>
<option value=”9″ name=”9″>9</option>
<option value=”10″ name=”10″>10</option>
<option value=”11″ name=”11″>11</option>
<option value=”12″ name=”12″>12</option>
<option value=”13″ name=”13″>13</option>
<option value=”14″ name=”14″>14</option>
<option value=”15″ name=”15″>15</option>
<option value=”16″ name=”16″>16</option>
<option value=”17″ name=”17″>17</option>
<option value=”18″ name=”18″>8</option>
<option value=”19″ name=”19″>19</option>
<option value=”20″ name=”20″>20</option>
<option value=”21″ name=”21″>21</option>
<option value=”22″ name=”22″>22</option>
<option value=’23’ name=”23″>23</option>
<option value=”24″ name=”24″>24</option>
<option value=”25″ name=”25″>25</option>
<option value=”26″ name=”26″>26</option>
<option value=”27″ name=”27″>27</option>
<option value=”28″ name=”28″>28</option>
<option value=”29″ name=”29″>29</option>
<option value=”30″ name=”30″>30</option>
<option value=”31″ name=”31″>31</option>
<option value=”32″ name=”32″>32</option>
<option value=”33″ name=”33″>33</option>
<option value=”34″ name=”34″>34</option>
<option value=”35″ name=”35″>35</option>
<option value=”36″ name=”36″>36</option>
<option value=”37″ name=”37″>37</option>
<option value=”38″ name=”38″>38</option>
<option value=”39″ name=”39″>39</option>
<option value=”40″ name=”40″>40</option>

</select>
</center>
</td>

<td>
<center>
<button style=”width:40px;background-color:gray;border:none”type=”button” onClick=”bold()”>
<b>B</b>
</button>
<button style=”width:40px;background-color:gray;border:none” type=”button” onClick=”italic()”>
<i>I</i>
</button>
<button style=”width:40px;background-color:gray;border:none”type=”button” onClick=”underline()”>
<u>U</u>
</button>
</center>
</td>

<td>
<center>
<select style=”width:130px;background-color:gray” name=”font_family” onChange=”fontfamily()”>
<option value=”Verdena” name=”Verdena”>Verdena</option>
<option value=”Time New Roman” name=”Time New Roman”>Time New Roman</option>
<option value=”Arial” name=”Arial”>Arial</option>
<option value=”Comic Sans MS” name=”Comic Sans MS”>Comic Sans MS</option>
<option value=”Impact” name=”Impact”>Orange</option>
<option value=”Georgia” name=”Georgia”>Georgia</option>
<option value=”Lucida Sans Unicode” name=”Lucida Sans Unicode”>Lucida Sans Unicode</option>
<option value=”Trebuchet MS” name=”Trebuchet MS”>Trebuchet MS</option>
<option value=”Tahoma” name=”Tahoma”>Tahoma</option>
<option value=” Webdings” name=”Webdings”>Webdings</option>
<option value=”Marlett” name=”Marlett”>Marlett</option>
</select>
</center>
</td>

<td>
<center>
<button type=”button” style=”background-color:gray;border:none”>
<font size=”1″ onClick=”left()”>left</font>
</button>
<button type=”button” style=”background-color:gray;border:none”>
<font size=”1″ onClick=”center()”>Center</font>
</button>
<button type=”button” style=”background-color:gray;border:none”>
<font size=”1″ onClick=”right()”>Right</font>
</button>
</center>
</td>

<td>
<center>
<select style=”width:130px;background-color:gray” name=”bgcolor” onChange=”backgroundcolor()”>
<option value=”Red” name=”Red”>Red</option>
<option value=”Blue” name=”Blue”>Blue</option>
<option value=”Green” name=”Green”>Green</option>
<option value=”Yellow” name=”Yellow”>Yellow</option>
<option value=”Orange” name=”Orange”>Orange</option>
<option value=”Pink” name=”Pink”>Pink</option>
<option value=”Purple” name=”Purple”>Purple</option>
<option value=”White” name=”White”>White</option>
<option value=”DarkRed” name=”DarkRed”>DarkRed</option>
<option value=”Black” name=”Black”>Black</option>
<option value=”Brown” name=”Brown”>Brown</option>
</select>
</center>
</td>
</tr>
</table>
</center>
<hr color=”red”>
</td>
</tr>
<tr>
<td>

<input id=”title” name=”title” type=”text” style=”height:40px;width:1000px;border:none” placeholder=”Write the title here”><br><br>
<textarea id=”text_body” cols=”140″ rows=”30″ style=”border:none;” name=’body’>Write the body here
</textarea>
</form>
</td>
</tr>
</center>
</table>

</body>
</html>

Code for JavaScript:

This JavaScript code should be pasted in head part.

<!–Javascript part–>
<script>
function color(){
var font_color=document.decoration.mycolor.value
var check=prompt(“In which part do you want to apply the decoration? title,body or both parts”)
var font_color=document.decoration.mycolor.value
if(check==”title” || check==”Title”)
document.getElementById(‘title’).style.color=font_color;
else if (check==”body” || check==”Body”)
document.getElementById(‘text_body’).style.color=font_color;
else {
document.getElementById(‘title’).style.color=font_color;
document.getElementById(‘text_body’).style.color=font_color;
}
}

function txtsize(){
var fontsize=document.decoration.font_size.value
fontsize=fontsize+”px”
alert(“You can only apply font-size decoration on title”)
document.getElementById(‘title’).style.fontSize=fontsize;

}
function bold(){
var check=prompt(“In which part do you wanna apply the decoration? title,body or both parts”)
if (check==”title” || check==”Title”)
document.getElementById(‘title’).style.fontWeight=”bold”
else if(check==”body” || check==”Body”)
document.getElementById(‘text_body’).style.fontWeight=”bold”
else{
document.getElementById(‘title’).style.fontWeight=”bold”
document.getElementById(‘text_body’).style.fontWeight=”bold”
}
}

function italic(){
var check=prompt(“In which part do you wanna apply the decoration? title,body or both parts”)
if (check==”title” || check==”Title”)
document.getElementById(‘title’).style.fontStyle=”italic”
else if(check==”body” || check==”Body”)
document.getElementById(‘text_body’).style.fontStyle=”italic”
else{
document.getElementById(‘title’).style.fontStyle=”italic”
document.getElementById(‘text_body’).style.fontStyle=”italic”
}
}

function underline(){
var check=prompt(“In which part do you wanna apply the decoration? title,body or both parts”)
if (check==”title” || check==”Title”)
document.getElementById(‘title’).style.textDecoration=”underline”
else if(check==”body” || check==”Body”)
document.getElementById(‘text_body’).style.textDecoration=”underline”
else{
document.getElementById(‘title’).style.textDecoration=”underline”
document.getElementById(‘text_body’).style.textDecoration=”underline”
}
}

function fontfamily(){
var font_family=document.decoration.font_family.value
var check=prompt(“In which part do you wanna apply the decoration? title,body or both parts”)
if (check==”title” || check==”Title”)
document.getElementById(‘title’).style.fontFamily=font_family
else if(check==”body” || check==”Body”)
document.getElementById(‘text_body’).style.fontFamily=font_family
else{
document.getElementById(‘title’).style.fontFamily=font_family
document.getElementById(‘text_body’).style.fontFamily=font_family
}
}

function left(){
var check=prompt(“In which part do you wanna apply the decoration? title,body or both parts”)
if (check==”title” || check==”Title”)
document.getElementById(‘title’).style.textAlign=”left”;
else if(check==”body” || check==”Body”)
document.getElementById(‘text_body’).style.textAlign=”left”;
else{
document.getElementById(‘title’).style.textAlign=”left”;
document.getElementById(‘text_body’).style.textAlign=”left”;
}
}

function center(){
var check=prompt(“In which part do you wanna apply the decoration? title,body or both parts”)
if (check==”title” || check==”Title”)
document.getElementById(‘title’).style.textAlign=”center”;
else if(check==”body” || check==”Body”)
document.getElementById(‘text_body’).style.textAlign=”center”;
else{
document.getElementById(‘title’).style.textAlign=”center”;
document.getElementById(‘text_body’).style.textAlign=”center”;
}
}

function right(){
var check=prompt(“In which part do you wanna apply the decoration? title,body or both parts”)
if (check==”title” || check==”Title”)
document.getElementById(‘title’).style.textAlign=”right”;
else if(check==”body” || check==”Body”)
document.getElementById(‘text_body’).style.textAlign=”right”;
else{
document.getElementById(‘title’).style.textAlign=”right”;
document.getElementById(‘text_body’).style.textAlign=”right”;
}
}

function backgroundcolor(){
var background_color=document.decoration.bgcolor.value
var check=prompt(“In which part do you want to apply the decoration? title,body or both parts”)
if(check==”title” || check==”Title”)
document.getElementById(‘title’).style.backgroundColor=background_color;
else if (check==”body” || check==”Body”)
document.getElementById(‘text_body’).style.backgroundColor=background_color;
else {
document.getElementById(‘title’).style.backgroundColor=background_color;
document.getElementById(‘text_body’).style.backgroundColor=background_color;
}
}

</script>

Output of the above code:

Output for notepad

How to use this Notepad:

1)Write some text in head section.

2)Write some text in body section.

to change the font color of the text/background color/the font family/alignment use the drop down menus provided .

3)When you select any of the value from the menu , an alert box appears to change the text/background color/the font family/alignment of the text in head section “Type (title) in the alert box”.

4) When you select any of the value from the menu , an alert box appears to change the text/background color/the font family/alignment of the text in body section “Type (body) in the alert box”.

 

 

Leave a Reply

Your email address will not be published.