Website development for Myint Moh Thakhin Com., Ltd.

I've recently developed a website for Myint Moh Thakhin Com., Ltd. The website name is www.myintmohthakhin.com . 

Myint Moh Thakhin is one of the best emploment agencies in Myanmar. They help you to find your dream jobs in Japan, Malaysia and Singapore.

Eset Antivirus 

Eset is one of the best Antivirus software. I prefer to use it. We can use it as free trail for 30 days. If you want to try it, please click here.

Website for JM Unity Company Limited

I've recently developed a website for JM Unity Com., Ltd. As a  business website, there are some functions in that website such as admin registration, admin login, create post, create class, student registration, student list, etc. I've also made a video for JM Unity to show how the website works. You can see it in Youtube.

https://www.youtube.com/watch?v=sgTO0LoGlW0

Web service extension with Amog Tech Company Limited

Amog Tech Com., Ltd. makes next one year extension of web service with TNW(Web Service & ICT Solutions) for their company emails and website. It has already been seven years I've been providing Web service to Amog Tech.

I wanna say "Thank you so much" to Amog Tech Com., Ltd.

Free VPN software for computer

1. PaladinVPN

PaladinVPN is one of the best VPN software you can use free of charge. You can use it as freeware for lifetime. Please click here if you wanna download it.

2. Psiphon

Psiphon is also one of the best VPN software you can use free of charge. You can use it as freeware for lifetime. Please click here if you wanna download it.

3. Hotspot Shield

Hotspot Shield is also one of the best VPN software you can use free of charge. You can use it as freeware for lifetime. But it has daily bandwidth limit (500MB). Please click here if you wanna download it.

Malwarebytes antivirus

Malwarebytes antivirus is one of the best antivirus software. You can use it as free version for lifetime. And you can also use it as 14 days free trial for premium service. If you wanna download it, please click here.

Web Service Extension for April Zaw Min Compamy Limited

Today, April Zaw Min company makes next one year extension with TNW(Web Service & ICT Solutions) for their company website.

April Zaw Min company is one of reliable foreign agencies in Myanmar.

For more details, please click here.

Web service extension for corechoicegroup company limited

Core Choice Group makes next one year extension of Web service with TNW (Web Service & ICT Solutions) for their company Website and Business Emails.

It has already been five years that TNW has been providing Web service for Core Choice Group.

Thank you so much.

Recently developed website

I have recently developed one more website for one of my customers. The website name is https://www.phisyangon.com/ .

 If you are looking for the best private school for your children, PHIS Yangon will be the best choice for you.

JavaScript Array Methods

entries()
    Returns a key/value pair Array Iteration Object

every()
    Checks if every element in an array pass a test in a testing function.

fill()
    Fill the elements in an array with a static value.

filter()
    Creates a new array with all elements that pass the test in a testing function.

find()
    Returns the value of the first element in an array that pass the test in a testing function.

findIndex()
    Returns the index of the first element in an array that pass the test in a testing function.

forEach()
    Calls a function once for each array element.

from()
    Creates an array from an object

includes()
    Determines whether an array includes a certain element.

indexOf()
    Search the array for an element and returns its first index.

isArray()
    Determines whether the passed value is an array.

join()
    Joins all elements of an array into a string.

keys()
    Returns a Array Iteration Object, containing the keys of the original array.

lastIndexOf()
    Search the array for an element, starting at the end, and returns its last index.

map()
    Creates a new array with the results for calling a function for each array element.

pop()
    Removes the last element from an array, and returns that element.

push()
    Adds one or more elements to the end of an array, and returns the array's new length.

reduce()
    Reduce the values of an array to a single value(from left-to-right).

reduceRight()
    Reduce the values of an array to a single value(from right-to-left).

reverse()
    Reverses the order of the elements in an array.

shift()
    Removes the first element from an array, and returns that element.

slice()
    Selects a part of an array, and returns the new array.

some()
    Checks if any of the elements in an array passes the test in a testing function.

sort()
    Sorts the elements of an array.

splice()
    Adds/Removes elements to/from an array.

unshift()
    Adds new elements to the beginning of an array, and returns the arrays's new length.

How to sell IT materials in tnwict.com

I've developed an application called SHOP for those who wanna sell their IT materials on the online and for those who are looking for IT materials at Online. I've made the video for those who wanna sell their IT Materials in tnwict.com. Please look it at Youtube by clicking the below link.

https://www.youtube.com/watch?v=mXSO3Fo-fhI

How to change proxy setting in Windows Computer

We can change some proxy settings in Windows computer about using internet. For example, if you are help desk technician and you don't wanna allow the users to use some websites, you can use this proxy settings in Windows. If you are network engineer or network technician, you can configure it in the routers or accept points or servers.

I've explained how to change proxy setting of windows computer in YouTube. Pls click the following link to see it in YouTube.

https://youtu.be/wu8dqE6bjhQ

How to change proxy setting in Mozilla Firefox

Sometimes we may face the problem that internet connection is ok in our computers and we can use internet by other browsers. But we can't use it in Mozilla. At that time, we should check the proxy settings in Mozilla. I've made a video to explain how to change proxy settings. You can see it in YouTube. 

How to check Hard Disk

Sometimes our computers may be working slowly because of hard disk errors. At that time, we should check our hard disks are in good conditions or not. We can check our hard disks by the following ways.

1. We can use chkdsk in the command prompt. To use command prompt, please press windows key and s key together at the same time.
    The system will check hard disk at the next time restart.

2. We can use hard disk sentinel to check the performance and health or a hard disk.
    The performance and health of the first hard disk is in 100%. So, we can use it safely.
    I will insert the next hard disk into the computer. Although performance is in good condition, the health is not in good condition. So, we should not continue to use second hard disk anymore.

I've made a video about it. You can see it in YouTube.

Business Email Service Extension for Knowledge Villa

Today Knowledge Villa Com., Ltd. makes next one year extension of Business Email Service with TNW(Web Service & ICT Solutions) for their company emails. I would like to say "Thank you so much" to Knowledge Villa Com., Ltd.

May Their Business Be Successful More Than Now

Web Service Extension for Amog Tech Com., Ltd.

Today Amog Tech Com., Ltd. makes next one year extension of Web Service with TNW(Web Service & ICT Solutions) for their company website and emails. It has already been five years I have been providing Web Service to Amog Tech Com., Ltd. I would like to say "Thank you so much" to Amog Tech Com., Ltd.

May Their Business Be Successful More Than Now.

AMOG Tech Co., Ltd. was organized and managed by a qualified group who have working experiences for Engineering, Procurement and Construction Projects in the Southeast Asia region. We are an MEP Contractor and also supply Electrical, Instrumentation & Automation Products for a commercial & industrial building in Myanmar.To read more about Amog Tech Com., Ltd.

Input Datetime Local (HTML Objects)

<!DOCTYPE html>
<html>
<head>
<title>Js Code Testing</title>
</head>
<body>
<button onclick = "jsFun()">Try It</button>
<script>
function jsFun(){
var x = document.createElement("INPUT");
x.setAttribute("type", "datetime-local");
document.body.appendChild(x);
}
</script>
</body>
</html>

Input Date (HTML Objects)

<!DOCTYPE html>
<html>
<head>
<title>Js Code Test</title>
</head>
<button onclick = "jsFun()">Try It</button>
<body>
<script>
function jsFun(){
var x = document.createElement("INPUT");
x.setAttribute("type", "date");
document.body.appendChild(x);
}
</script>
</body>
</html>

JS Event Listener 2

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>

<button type = "button" id = "event">Try It</button>
<p id = "demo"></p>
<script>
var x = document.getElementById("event");
x.addEventListener("mouseover", jsFun1);
x.addEventListener("mousedown", jsFun2);
x.addEventListener("mouseout", jsFun3);

function jsFun1(){
document.getElementById("demo").innerHTML += "Mouse Over<br />";
}

function jsFun2(){
document.getElementById("demo").innerHTML += "Mouse Down<br />";
}

function jsFun3(){
document.getElementById("demo").innerHTML += "Mouse Out<br />";
}
</script>
</body>
</html>

JS Event Listener 1

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo">The Date is:</p>
<button type = "button" id = "test">Show Date</button>&nbsp;&nbsp;
<button type = "button" id = "test1">Hide</button>
<script>
document.getElementById("test").addEventListener('click', jsFun);
document.getElementById("test1").addEventListener('click', jsHide);

function jsFun(){
document.getElementById("demo").innerHTML = Date();
}

function jsHide(){
document.getElementById("demo").innerHTML = "";
}

</script>
</body>
</html>

timer (HTML DOM Window)

<!DOCTYPE html>
<html>
<head>
<title>Js Code Testing</title>
</head>
<body>
<button onclick = "startCount()">Start Count</button>
<input type = "text" id = "txt">
<button onclick = "stopCount()">Stop Count</button>
</body>
<script>
var c = 0;
var t;
var myTimer = 0;

function jsFun(){
document.getElementById("txt").value = c;
c++;
t = setTimeout(jsFun, 1000);
}

function startCount(){
if(!myTimer){
myTimer = 1;
jsFun();
}
}

function stopCount(){
myTimer = 0;
clearTimeout(t);
}
</script>
</html>

progressBar (HTML DOM Window)

<!DOCTYPE html>
<html>
<head>
<title>Js Code Testing</title>
<style>
#progressBar{
width: 100%;
height: 30px;
position: relative;
background-color: grey;
}

#myBar{
width: 20px;
height: 30px;
position: absolute;
background-color: green; 
}
</style>
</head>
<body>
<div id = "progressBar">
  <div id = "myBar"></div>
</div><p></p>
<button onclick = "myMove()">Try Now</button>
<script>
function myMove(){
var ele = document.getElementById("myBar");
var width = 0;
var myTime = setInterval(jsFun, 100);
function jsFun(){
if(width == 100){
clearInterval(myTime);
}else{
width ++;
ele.style.width = width + '%';
}
}
}
</script>
</body>
</html>

moveTo (HTML DOM Window)

<!DOCTYPE html>
<html>
<head>
<title>Js Code Testing</title>
</head>
<body>
<button onclick = "openWin()">Open Window</button>
<button onclick = "moveWin()">Move Window</button>
<script>
function openWin(){
myWindow = window.open('', 'myWindow', 'width=300px, height=200px');
myWindow.document.write('hello');
myWindow.document.designMode = "On";
}

function moveWin(){
myWindow.moveTo(500, 300);
myWindow.focus();
}
</script>
</body>
</html>

close (HTML DOM Window)

<!DOCTYPE html>
<html>
<head>
<title>Js Code Testing</title>
</head>
<body>
<div id = "msg"></div>
<button onclick = "openWin()">Open Window</button>
<button onclick = "closeWin()">Close Window</button>
<button onclick = "chkStatus()">Check Status</button>

<script>

var myWin;

function openWin(){
myWin = window.open("", "myWin", "width=300px, height=200px");
}

function closeWin(){
if(myWin){
myWin.close();
}
}

function chkStatus(){
if(!myWin){
document.getElementById("msg").innerHTML = "Window has never been opened.";
}else{
if(myWin.closed){
document.getElementById("msg").innerHTML = "Window has been closed.";
}else{
document.getElementById("msg").innerHTML = "Window stills opend.";
}
}
}

</script>
</body>
</html>

onchange 1 (HTML DOM Events)

<!DOCTYPE html>

<html>
<head>
<title>JS Code Testing</title>
</head>
<body>
<input type = "text" id = "fname" onchange = "jsFun()">
<script>
function jsFun(){
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>
</body>
</html>

onchange (HTML DOM Events)

<!DOCTYPE html>
<html>
<head>
<title>JS Code Testing</title>
</head>
<body>
<select id = "myId" onchange = "jsFun()">
  <option value = "#">Choose Options</option>
  <option value = "Thet">Thet</option>
  <option value = "Naing">Naing</option>
  <option value = "Win">Win</option>
</select>
<p id = "demo"></p>
<script>
function jsFun(){
var x = document.getElementById("myId").value;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>

appendChild() (HTML DOM Elements)

<!DOCTYPE html>
<html>
<head>
<title>JS Code Testing</title>
</head>
<body>
<button onclick = "jsFun()"> + </button>
<script>
function jsFun(){
var para = document.createElement("P");
var txtNode = document.createTextNode("Paragraph");
para.appendChild(txtNode);
document.body.appendChild(para);
}
</script>
</body>
</html>

appendChild() (HTML DOM Elements)

<!DOCTYPE html>
<html>
<head>
<title>JS Code Testing</title>
<style>
#myDiv{
width: 200px;
border: 2px solid red;
padding: 5px;
text-align: center;
}
</style>
</head>
<body>
<button onclick = "jsFun()"> + </button>
<p></p>
<div id = "myDiv">My Example</div>
<script>
function jsFun(){
var para = document.createElement("P");
var txtNode = document.createTextNode("Example");
para.appendChild(txtNode);
document.getElementById("myDiv").appendChild(para);
}
</script>
</body>
</html>

appendChild() (HTML DOM Elements)

<!DOCTYPE html>
<html>
<head>
<title>JS Code Testing</title>
</head>
<body>
<ul id = "myText">
  <li>Thet</li>
  <li>Naing</li>
</ul>

<button onclick = "jsFun()">Try It</button>

<script>
function jsFun(){
var node = document.createElement("LI");
var txtNode = document.createTextNode("Win");
node.appendChild(txtNode);
document.getElementById("myText").appendChild(node);
}
</script>
</body>
</html>

addEventListener() (HTML DOM Elements)

<!DOCTYPE html>
<html>
<head>
<title>JS Code Testing</title>
</head>
<body>
<button id = "myId">Try It</button>
<p id = "demo"></p>
<script>
var x = document.getElementById("myId");
x.addEventListener("mouseover", msOver);
x.addEventListener("click", msClick);
x.addEventListener("mouseout", msOut);

function msOver(){
document.getElementById("demo").innerHTML += "Mouse Over <br />";
}

function msClick(){
document.getElementById("demo").innerHTML += "Mouse Click <br />";
}

function msOut(){
document.getElementById("demo").innerHTML += "Mouse Out <br />";
}
</script>
</body>
</html>

addEventListener() (HTML DOM Elements)

<!DOCTYPE html>
<html>
<head>
<title>JS Code Testing</title>
</head>
<body>
<button id = "myId">Try It</button>
<p id = "demo"></p>
<script>
var p1 = 9;
var p2 = 9;
document.getElementById("myId").addEventListener("click", function(){myFun(p1, p2)});

function myFun(num1, num2){
var x = num1 * num2;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>

addEventListener() (HTML DOM Elements)

<!DOCTYPE html>
<html>
<head>
<title>JS Code Testing</title>
</head>
<body>
<button id = "myId">Try It</button>

<script>
var x = document.getElementById("myId");
x.addEventListener("click", myFun1);
x.addEventListener("click", myFun2);

function myFun1(){
alert("Function1");
}

function myFun2(){
alert("Function2");
}
</script>
</body>
</html>

querySelectorAll() (HTML DOM Document)

<!DOCTYPE html>
<html>
<head>
<title>JS Code Testing</title>
</head>
<body>
<h1 class = "example">Heading</h1>
<p class = "example">Paragraph</p>
<button onclick = "jsFun()">Try It</button>
<script>
function jsFun(){
var i;
var x = document.querySelectorAll(".example");
for(i = 0; i < x.length; i++){
x[i].style.color = "red";
}
}
</script>
</body>
</html>

getElementsByTagName (HTML DOM Document)

<!DOCTYPE html>
<html>
<head>
<title>JS Code Testing</title>
<style>
</style>
</head>
<body>
<ol>
   <li>Example_1</li>
   <li>Example_2</li>
   <li>Example_3</li>
</ol>
<button onclick = "jsFun()">Red</button>
<script>
function jsFun(){
var i;
var x = document.getElementsByTagName("LI");
for(i = 0; i < x.length; i++){
x[i].style.color = "red";
}
}
</script>
</body>
</html>

getElementsByClassName (HTML DOM Document)

<!DOCTYPE html>
<html>
<head>
<title>JS Code Testing</title>
<style>
.Example{
border: 2px solid yellow;
padding: 5px;
width: 100px;
}
</style>
</head>
<body>
<div class = "Example">
Example_1
</div>
<div class = "Example">
Example_2
</div>
<div class = "Example">
Example_3
</div><br />

<button style = "background: red" onclick = "colRed()">Red</button>
<button style = "background: green" onclick = "colYellow()">Green</button>

<script>
function colRed(){
var i;
var x = document.getElementsByClassName("Example");
for(i = 0; i < x.length; i++){
x[i].style.backgroundColor = "red";
x[i].style.color = "white";
}
}

function colYellow(){
var i;
var x = document.getElementsByClassName("Example");
for(i = 0; i < x.length; i++){
x[i].style.backgroundColor = "green";
x[i].style.color = "yellow";
}
}

</script>
</body>
</html>

document.links (HTML DOM Document)

<!DOCTYPE html>
<html>
<head>
<title>JS Code Testing</title>
</head>
<body>
<button onclick = "jsGreen()">Green</button>
<button onclick = "jsRed()">Red</button><br />

<p id = "demo"></p>

<li><a href = "tnwict.com">tnwict.com</a></li>
<li><a href = "tnw87.com">tnw87.com</a></li>
<li><a href = "tnw87.site">tnw87.site</a></li>

<script>
function jsGreen(){
var i;
var x = document.links;
for(i = 0; i < x.length; i ++){
x[i].style.color = "green";
}
}

function jsRed(){
var i;
var x = document.links;
for(i = 0; i < x.length; i++){
x[i].style.color = "red";
}
}

</script>
</body>
</html>

Creating Text Node (HTML DOM Document)

<!DOCTYPE html>
<html>
<head>
<title>JS Code Testing</title>
<style>
#myDiv{
border: 1px solid red;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id = "myDiv">
This is just Testing.
</div>
<button onclick = "jsFun()">+</button>
<script>
function jsFun(){
var para = document.createElement("P");
para.innerHTML = "Paragraph";
document.getElementById("myDiv").appendChild(para);
}
</script>
</body>
</html>

Creating a Calculator with JS

<html>
<head>
<title>Math Fun</title>
<script>
function registerEvents(){
document.mathWiz.operate.addEventListener('click', doTheMath, false);
}
function doTheMath(){
var first = parseInt(document.mathWiz.numberOne.value);
var second = parseInt(document.mathWiz.numberTwo.value);
var operator = document.mathWiz.operator.value;

switch (operator){
case "add":
var answer = first + second;
break;
case "substract":
var answer = first - second;
break;
case "multiply":
var answer = first * second;
break;
case "divide":
var answer = first / second;
break;
}
document.mathWiz.theResult.value = answer;
}
</script>
</head>
<body onload = "registerEvents();">
<form name="mathWiz">
<label>First Number: <input type="number" name="numberOne"></label><br />
<label>Second Number: <input type="number" name="numberTwo"></label><br />
<label>Operator:
<select name = "operator">
<option value="add"> + </option>
<option value="substract"> - </option>
<option value="multiply"> * </option>
<option value="divide"> / </option>
</select>
</label><br />
<input type="button" name="operate" value="Do the Math!"><br />
<label>Result: <input type="number" name="theResult">
</form>
</body>
</html>

JS Timer

<!DOCTYPE html>
<html>
<head>
<title>JS Code Testing</title>
</head>
<body>
<button onclick = "myTimer = setInterval(jsCount, 1000)">Start Count</button>
<button onclick = "clearInterval(myTimer)">Stop Count</button>
<p id = "demo"></p>
<script>
c = 0;
function jsCount(){
document.getElementById("demo").innerHTML = ++c;
}
</script>
</body>
</html>

Creating Readmore Button

<!DOCTYPE html>
<html>
    <head>
        <titile>Code Testing For Read More Function</titile>
        <style>
        	#more{
            display: none;
            }
        </style>
    </head>
<body>
<p>
I am Thet Naing Win. I am 35 years old man. Now I stay in Yangon. I have achieved the BCSc degree and SCN. <span id="dots">.....</span><span id="more">I have passed the matriculation exam in 2003 and I went to Computer University in December 2003.I have finished my studies in Computer University in Sep 2006. I have achieved the BCSc degree in Feb 2007. Since then, i have been supporting the IT services to the customers for their business.</span>
<button id="myBtn" onclick="myFunction()">Read More</button>
</p>
<p>
    I am Thet Naing Win. I am 35 years old man. Now I stay in Yangon. I have achieved the BCSc degree and SCN. <span id="dots">.....</span><span id="more">I have passed the matriculation exam in 2003 and I went to Computer University in December 2003.I have finished my studies in Computer University in Sep 2006. I have achieved the BCSc degree in Feb 2007. Since then, i have been supporting the IT services to the customers for their business.</span>
    <button id="myBtn" onclick="myFunction()">Read More</button>
</p>
<script>
        function myFunction(){
            var dots = document.getElementById("dots");
            var more = document.getElementById("more");
            var btn = document.getElementById("myBtn");
        if(dots.style.display === "none"){
            dots.style.display = "inline";
            more.style.display = "none";
            btn.innerHTML = "Read More";
            
        }else{
            dots.style.display = "none";
            more.style.display = "inline";
            btn.innerHTML = "Read less";
           
        }
    }
</script>
</body>
</html>

Creating Nav Bar

<!DOCTYPE html>
<html>
<head>
<title>JS Code Testing</title>
<style>
body{
margin: 0px;
font-size: 14px;
}

.header{
background-color: grey;
text-align: center;
padding: 12px;
}

#navbar{
overflow: hidden;
background-color: black;
}

#navbar a{
display: block;
float: left;
padding: 16px 32px;
text-decoration: none;
color: white;
}

#navbar a:hover{
background-color: gray;
}

#navbar a:focus{
background-color: green;
}

.content{
padding: 16px;
line-height: 25px;
}

.sticky{
position: fixed;
top: 0px;
width: 100%;
}

.sticky + .content{
padding-top: 60px;
}


</style>
</head>
<body onscroll = "jsFun()">
<div class = "header">
  <h1>Sticy Test</h1>
  <h2>These are codes for Sticky Position</h2>
</div>
<div id = "navbar">
  <a href = "#">Home</a>
  <a href = "#">Computer</a>
  <a href = "#">Network</a>
</div>
<div class = "content">
 <h2>My Paragraph</h2>
 <p>I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win.</p>
 <p>I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win.</p>
 <p>I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win.</p>
 <p>I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win.</p>
 <p>I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win.</p>
 <p>I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win.</p>
 <p>I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win.</p>
 <p> I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win.</p>
 <p> I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win.</p>
 <p>I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. </p>
 <p>I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. </p>
 <p>I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. </p>
 <p>I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. </p>
 <p>I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. </p>
 <p>I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. </p>
 <p>I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. 
</div>
<script>
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;

function jsFun(){
if(window.pageYOffset >= sticky){
navbar.classList.add("sticky");
}else{
navbar.classList.remove("sticky");
}
}
</script>

</body>
</html>

Dropdown Menu

<!DOCTYPE html>
<html>
<head>
<title>JS Code Testing</title>
<style>
.dropdown{
display: inline-block;
position: relative;
}

.dropbtn{
background-color: red;
font-size: 14px;
color: white;
padding: 12px 32px;
cursor: pointer;
border: 2px solid green;
}

.dropbtn:hover, .dropbtn:focus{
background-color: orange;
}

.dropcontent{
display: none;
overflow: auto;
position: absolute;
box-shadow: 0px 2px 1px 3px;
}

.dropcontent a{
display: block;
color: white;
padding: 15px 32px;
text-decoration: none;
background-color: red;
}

.dropcontent a:hover{
background-color: orange;
}

.show{
display: block;
}

</style>
</head>
<body>
<div class = "dropdown">
   <button id = "myBtn" class = "dropbtn">Example</button>
   <div id = "myDrop" class = "dropcontent">
      <a href = "">Example_1</a>
      <a href = "">Example 2</a>
      <a href = "">Example 3</a>
   </div>
</div>

<script>
document.getElementById("myBtn").onclick = function(){jsFun()};

function jsFun(){
document.getElementById("myDrop").classList.toggle("show");
}
</script>
</body>
</html>

Display a Clock

<!DOCTYPE html>
<html>
<head>
<title>JS Code Testing</title>
<script>
function startTime(){
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById("demo").innerHTML = h + ":" + m + ":" + s;
setTimeout(startTime, 500);
}

function checkTime(i){
if(i < 10){i = "0" + 1};
return i;
}
</script>
</head>
<body onload = "startTime()">
<div id = "demo"></div>
</body>
</html>

Converting Celsius to Fahrenheit

<!DOCTYPE html>
<html>
<head>
<title>JS Code Testing</title>
</head>
<body>
<p><input id = "c" onkeyup = "temperature('C')"> degree Celsius.</p>
<p><input id = "f" onkeyup = "temperature('F')"> degree Fahrenheit.</p>
<script>
function temperature(degree){
var x;
if(degree == "C"){
x = document.getElementById("c").value * 9 / 5 + 32;
document.getElementById("f").value = Math.round(x);
}else{
x = (document.getElementById("f").value - 32) * 5 / 9;
document.getElementById("c").value = Math.round(x);
}
}
</script>
</body>
</html>

Change Background Color of Html Elements

<!DOCTYPE html>
<html>
<head>
<title>JS Code Testing</title>
</head>
<body>
<table style = "width:300px; height:100px">
   <tr>
      <td onmouseover = "bgChange(this.style.backgroundColor)";
	      onmouseout = "bgChange('transparent')";
		  style = "background-color:red"></td>
	  <td onmouseover = "bgChange(this.style.backgroundColor)";
	      onmouseout = "bgChange('transparent')";
		  style = "background-color:green"></td>
	  <td onmouseover = "bgChange(this.style.backgroundColor)";
	      onmouseout = "bgChange('transparent')";
		  style = "background-color:yellow"></td>
   </tr>
</table>
<script>
function bgChange(bg){
document.body.style.background = bg;
}
</script>
</body>
</html>

JS Animation

<!DOCTYPE html>
<html>
<head>
<title>JS Code Testing</title>
<style>
#mySlide{
position: relative;
}

li{
position: relative;
list-style: none;
display: block;
float: left;
padding: 0px 10%;
width: auto;
}

@keyframes mymove{
from { left: 0px; }
to { left: 100%; }
}

@-webkit-keyframes{
from { left: 0px; }
to { left: 100%; }
}
</style>
</head>
<body onload = "jsFun()">
<div id = "mySlide">
  <li>Example 1</li>
  <li>Example 2</li>
  <li>Example 3</li>
</div>
<script>
var x = document.getElementsByTagName("LI");
function jsFun(){
for(i = 0; i < x.length; i++){
x[i].style.animation = "20s 5 mymove";
}
}
</script>
</body>
</html>

Switch (JS Statement)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Statement</title>
</head>
<body>
<p id = "demo">What is Today?</p>
<button type = "button" onclick = "jsFunction()">Click Now</button>
<script>
function jsFunction(){
switch(new Date().getDay()){
case 0:
day = "Sunday";
break;

case 1:
day = "Monday";
break;

case 2:
day = "Tuesday";
break;

case 3:
day = "Wednesday";
break;

case 4:
day = "Thursday";
break;

case 5:
day = "Friday";
break;

case 6:
day = "Saturday";
}
document.getElementById("demo").innerHTML ="Today is " + day + ".";
}
</script>
</body>
</html>

If (JS Statement)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Statement</title>
</head>
<body>
<h1>JavaScript Code Testing</h1>
<p id = "demo1"></p>
<p id = "demo2"></p>
<p id = "demo3"></p>
<button type = "button" onclick = "jsFunction()">Try Now</button>
<script>
function jsFunction(){
var you = "I like to swim.";
var me = "I like to swim.";
var youme = "Our hobby is not same.";
if (you == me){
document.getElementById("demo1").innerHTML = you;
document.getElementById("demo2").innerHTML = me;
}else{
document.getElementById("demo3").innerHTML = youme;
}
}
</script>
</body>
</html>

Continue (JS Statement)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo"></p>
<script>
var txt = "", i;
for(i = 0; i < 10; i++){
if (i===5){continue;}
txt += i + "<br />";
}
document.getElementById("demo").innerHTML = txt;
</script>
</body>
</html>

Break (JS Statement)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo"></p>
<script>
var txt = "", i;
for(i = 0; i < 10; i++){
if (i===5){break;}
txt += i + "<br />";
}
document.getElementById("demo").innerHTML = txt;
</script>
</body>
</html>

Random Integer (JS Random)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo">Please click Random for random numbers.</p>
<button type = "button" onclick = "jsRand()">Random</button>
<script>
function jsRand(){
var rand = Math.floor(Math.random() * 4000);
document.getElementById("demo").innerHTML = rand;
}
</script>
</body>
</html>

Proper Random Function (JS Random)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo">Click Random for random numbers.</p>
<button type = "button" onclick = "myRand()">Random</button>
<script>

function myRand(){
var rand = jsRand(100000, 900000);
document.getElementById("demo").innerHTML = rand;
}

function jsRand(min, max){
return Math.floor(Math.random() * (max - min + 1)) + min;
}
</script>
</body>
</html>

Math.sqrt() (JS Math)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo">This is JavaScript Math.sqrt Testing</p>
<button type = "button" onclick = "jsSqrt()">Math Sqrt</button>

<script>
var a = 81;
document.getElementById("demo").innerHTML = a;

function jsSqrt(){
var b = Math.sqrt(a);
document.getElementById("demo").innerHTML = b;
}
</script>
</body>
</html>

Math.round() (JS Math)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo">This is JavaScript Math.round Testing</p>
<button type = "button" onclick = "jsRound()">Math Round</button>

<script>
var a = 4.576;
var b = 4.345;
document.getElementById("demo").innerHTML = a + " and " + b;

function jsRound(){
document.getElementById("demo").innerHTML = Math.round(a) + " and " + Math.round(b);
}
</script>

</body>
</html>

Math.random() (JS Math)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo">This is JavaScript Math.random Testing</p>
<button type = "button" onclick = "jsRandom()">Math Random</button>
<script>
function jsRandom(){
var a = Math.random();
document.getElementById("demo").innerHTML = a;
}
</script>
</body>
</html>

Math.pow() (JS Math)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo">This is JavaScript Math.pow Testing</p>
<button type = "button" onclick = "jsPower()">Math Power</button>

<script>
var a = 9;
var b = 5;
document.getElementById("demo").innerHTML = a + " and " + b;

function jsPower(){
var c = Math.pow(a, b);
document.getElementById("demo").innerHTML = c;
}

</script>
</body>
</html>

Math.PI (JS Math)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo1">This is JavaScript Math.PI Testing</p>
<button type = "button" onclick = "jsPI()">Math PI</button>
<script>
function jsPI(){
var pi = Math.PI;
document.getElementById("demo1").innerHTML = pi;
}
</script>
</body>
</html>

JS While Loop

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo"></p>
<script>
var names = ["Maung Maung", "Aung Aung", "Mya Mya", "Hla Hla"];
var txt, i = 0;
txt = "<ol>";
while(i < names.length){
txt += "<li>" + names[i] + "</li>";
i++;
}
txt += "</ol>";
document.getElementById("demo").innerHTML = txt;
</script>
</body>
</html>

forof (JS For Loop)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo"></p>
<script>
var names = ["Maung Maung", "Aung Aung", "Mya Mya", "Hla Hla"];
var txt;

for(txt of names){
document.write("<li>" + txt + "</li>");
}
</script>
</body>
</html>

for (JS For Loop)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo"></p>
<script>
var names = ["Maung Maung", "Aung Aung", "Mya Mya", "Hla Hla"];
var i, txt;

txt = "<ol>";
for(i=0; i<names.length; i++){
txt += "<li>" + names[i] + "</li>";
}
txt += "</ol>";

document.getElementById("demo").innerHTML = txt;

</script>
</body>
</html>

forin (JS For Loop)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo"></p>
<script>
var names = ["Maung Maung", "Aung Aung", "Mya Mya", "Hla Hla"];
var i, txt;

txt = "<ol>";
for(i in names){
txt += "<li>" + names[i] + "</li>";
}
txt += "</ol>";

document.getElementById("demo").innerHTML = txt;

</script>
</body>
</html>

JS Form Validation

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<script>
function formValidate(){
var x = document.forms["myForm"]["fname"].value;
if(x == ""){
alert("Must fill out in the form");
return false;
}
}
</script>
</body>
<form action = "formvalidate1.html" method = "POST" onsubmit = "return formValidate()" name = "myForm">
<input type = "text" name = "fname">
<input type = "submit" value = "Submit">
</form>
</html>

Throw Statement (JS Errors)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<input id = "demo" type = "text">
<button type = "button" onclick = "jsFun()">Check Input</button>
<p id = "page"></p>
<script>
function jsFun(){
var sms, x;
sms = document.getElementById("page");
sms.innerHTML = "";
x = document.getElementById("demo").value;
try{
if(x == "") throw "empty.";
if(isNaN(x)) throw "not a number.";
x = Number(x);
if(x < 5) throw "too small.";
if(x > 10) throw "too big.";
if(x > 4 && x < 11) throw "OK.";
}
catch (err){
sms.innerHTML = "The input is " + err;
}
}
</script>
</body>
</html>

Finally Statement (JS Errors)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Cdoe Testing</title>
</head>
<body>
<input id = "demo" type = "text">
<button type = "button" onclick = "jsFun()">Check Input</button>
<p id = "page"></p>
<script>
function jsFun(){
var sms, x;
sms = document.getElementById("page");
sms.innerHTML;
x = document.getElementById("demo").value;
try {
if (x == "") throw "empty.";
if (isNaN(x)) throw "not a number.";
x = Number(x);
if(x < 5) throw "too small.";
if(x > 10) throw "too big.";
if(x > 4 && x < 11) throw "OK.";
}

catch (err){
sms.innerHTML = "The Input is " + err;
}

finally{
document.getElementById("demo").value;
}
}
</script>
</body>
</html>

JS Arrow Function

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<button  id = "btn1">Try Now</button>
<p id = "demo1"></p>

<button id = "btn2">Try Now</button>
<p id = "demo2"></p>

<script>
var test1 = function(){
document.getElementById("demo1").innerHTML += this;
}

//window object calls the function
window.addEventListener("load", test1);

//button object calls the function
document.getElementById("btn1").addEventListener("click", test1);

var test2 = () =>{
document.getElementById("demo2").innerHTML += this;
}

//window object calls the function
window.addEventListener("load", test2);

//button object calls the function
document.getElementById("btn2").addEventListener("click", test2);

</script>
</body>
</html>

Inheritance (JS Classes)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo">Inheritance Test</p>
<script>
class Car{
constructor(brand){
this.carname = brand;
}
present(){
return "I have " + this.carname;
}
}

class Model extends Car{
constructor(brand, mod){
super(brand);
this.model = mod;
}
show(){
return this.present() + " and the model is " + this.model + ".";
}
}
var myCar = new Model("Tesla", "2021");
document.getElementById("demo").innerHTML = myCar.show();
</script>
</body>
</html>

Getter and Setter (JS Classes)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo"></p>
<script>
class Car{
constructor(brand){
this.carname = brand;
}
get cnam(){
return this.carname;
}
set cnam(x){
this.carname = x;
}
}
const myCar = new Car["Tesla"];
document.getElementById("demo").innerHTML = myCar;
</script>
</body>
</html>

Creating Object (JS Classes)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id ="demo"></p>
<script>
class Name{
constructor(Name, City){
this.name = Name;
this.city = City;
}
}

var newName = new Name("Thet", "Yangon");
document.getElementById("demo").innerHTML = newName.name + " stays in " + newName.city + ".";

</script>
</body>
</html>

Class Methods (JS Classes)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo">What is your name and age?</p>
<button type = "button" onclick = "jsFun()">Check Name and Age</button>
<script>
function jsFun(){
class Name{
constructor(Name, Year){
this.name = Name;
this.year = Year;
}

age(){
const date = new Date();
return date.getFullYear() - this.year;
}
}

const myName = new Name("Thet", 1987);
document.getElementById("demo").innerHTML = "My name is " + myName.name + " and my age is " + myName.age() + " years old now."; 
}
</script>
</body>
</html>

Reduce() (JS Array Iteration)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo"></p>

<button type = "button" onclick = "jsReduce()">Total</button>&nbsp;&nbsp;
<button type = "button" onclick = "jsReset()">Reset</button>

<script>
var numbers = [302, 428, 49, 92, 84, 70, 80, 10, 3, 200];
var num = numbers.sort(function(a, b){return a - b;}).join("<br/>");
document.getElementById("demo").innerHTML = num;

function jsReset(){
document.getElementById("demo").innerHTML = num;
}

function jsReduce(){
var number2 = numbers.reduce(funReduce);
document.getElementById("demo").innerHTML = number2;
}

function funReduce(total, value){
return total + value;
}


</script>
</body>
</html>

Map() (JS Array Iteration)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo"></p>
<button type = "button" onclick = "jsDouble()">Double</button>&nbsp;&nbsp;
<button type = "button" onclick = "jsReset()">Reset</button>&nbsp;&nbsp;
<button type = "button" onclick = "jsTriple()">Triple</button>
<script>
var numbers = [302, 428, 49, 92, 84, 70, 80, 10, 3, 200];
var num = numbers.sort(function(a, b){return a - b;}).join("<br/>");
document.getElementById("demo").innerHTML = num;


function jsReset(){
document.getElementById("demo").innerHTML = num;
}

function jsDouble(){
number2 = numbers.map(mapDouble).join("<br/>");
document.getElementById("demo").innerHTML = number2;
}

function jsTriple(vlaue){
number3 = numbers.map(mapTriple).join("<br/>");
document.getElementById("demo").innerHTML = number3;
}

function mapDouble(value){
return value*2;
}

function mapTriple(value){
return value*3;
}
</script>
</body>
</html>

Foreach() (JS Array Iteration)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo"></p>
<script>
var txt = "";
var numbers = [302, 428, 49, 92, 84, 70, 80, 10, 3, 200];
var num = numbers.sort(function (a, b){return a - b;});

txt = "<ol>";
num.forEach(jsFunction);

document.getElementById("demo").innerHTML = txt;

function jsFunction(value){
txt += "<li>" + value + "</li><br/><hr/><br/>";
}

txt += "</ol>";

</script>
</body>
</html>

Find() (JS Array Iteration)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo">Find the first number greater than 20</p>

<button type = "button" onclick = "jsFind()">Find > 20</button>&nbsp;&nbsp;
<button type = "button" onclick = "jsReset()">Reset</button>

<script>
var numbers = [302, 428, 49, 92, 84, 70, 80, 10, 3, 200];
var num = numbers.sort(function(a, b){return a - b;}).join("<br/>");
document.getElementById("demo").innerHTML = num;

function jsReset(){
document.getElementById("demo").innerHTML = num;
}

function jsFind(){
var number2 = numbers.find(funFind);
document.getElementById("demo").innerHTML = number2;
}

function funFind(value){
return value > 20;
}


</script>
</body>
</html>

Filter() (JS Array Iteration)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo"></p>
<button type = "button" onclick = "jsFilter()">Less Than 100</button>&nbsp;&nbsp;
<button type = "button" onclick = "jsReset()">Reset</button>

<script>
var numbers = [302, 428, 49, 92, 84, 70, 80, 10, 3, 200];
var num = numbers.sort(function(a, b){return a - b;}).join("<br/>");
document.getElementById("demo").innerHTML = num;

function jsReset(){
document.getElementById("demo").innerHTML = num;
}

function jsFilter(){
number2 = numbers.filter(funFilter).sort(function(a, b){return a - b;}).join("<br/>");
document.getElementById("demo").innerHTML = number2;
}

function funFilter(value){
return value < 100;
}

</script>
</body>
</html>

Website development for April Zaw Min Com., Ltd.

Yesterday I've successfully developed a website for April Zaw Min Com., Ltd. I want to say "Thank you so much" to April Zaw Min Com., Ltd. May their business be successful more than now!

April Zaw Min Com., Ltd is a reliable foreign agency. If you want to know more details, please visit their website (aprilzawmin.com).

Sort() and reverse() numerically (JS Array Sort)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo">Sort Numberically</p>
<button type = "button" onclick = "jsSort()">Sort</button>
<button type = "button" onclick = "jsReverse()">Reverse</button>
<script>
var numbers = [400, 40, 20, 200, 93, 49];
document.getElementById("demo").innerHTML = numbers.join("<br />");

function jsSort(){
var sort = numbers.sort(function(a,b){return a - b;}).join("<br />");
document.getElementById("demo").innerHTML = sort;
}

function jsReverse(){
var reverse = numbers.sort(function(a,b){return b - a;}).join("<br />");
document.getElementById("demo").innerHTML = reverse;
}
</script>
</body>
</html>

Sort() and reverse() alphabetically (JS Array Sort)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo"></p>
<button type = "button" onclick = "jsSort()">Sort</button>&nbsp;&nbsp;
<button type = "button" onclick = "jsReverse()">Reverse</button>
<script>
var cities = ["Yangon", "Mandalay", "Naypyidaw", "Meikhtila", "Bagan"];
document.getElementById("demo").innerHTML = cities.join(" * ");

function jsSort(){
var sort = cities.sort().join(" * ");
document.getElementById("demo").innerHTML = sort;
}

function jsReverse(){
var reverse = cities.reverse().join(" * ");
document.getElementById("demo").innerHTML = reverse;
}
</script>
</body>
</html>

Sort number randomly (JS Array Sort)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo"></p>
<button type = "button" onclick = "jsRandom()">Sort Now</button>
<script>
var numbers = [300, 40, 83, 49, 92, 200, 79];
document.getElementById("demo").innerHTML = numbers.join("<br />");

function jsRandom(){
var random = numbers.sort(function(a, b){return 0.5 - Math.random();});
document.getElementById("demo").innerHTML = random.join("<br />");
}
</script>
</body>
</html>

Math.max and Math.min (JS Array Sort)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo"></p>
<button type = "button" onclick = "findMax()">Find Max</button>
<button type = "button" onclick = "jsReset()">Reset</button>
<button type = "button" onclick = "findMin()">Find Min</button>

<script>
var numbers = [200, 30, 400, 50, 1000, 70, 20, 100];
document.getElementById("demo").innerHTML = numbers.join("<br/>");

function jsMax(arr){
return Math.max.apply(null, arr);
}

function jsMin(arr){
return Math.min.apply(null, arr);
}

function findMax(){
document.getElementById("demo").innerHTML = jsMax(numbers);
}

function findMin(){
document.getElementById("demo").innerHTML = jsMin(numbers);
}

function jsReset(){
document.getElementById("demo").innerHTML = numbers.join("<br />");
}

</script>
</body>
</html>

Find maximum or minimum number (JS Array Sort)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo"></p>
<button type = "button" onclick = "findMax()">Find Max</button>&nbsp;&nbsp;
<button type = "button" onclick = "numReset()">Reset</button>&nbsp;&nbsp;
<button type = "button" onclick = "findMin()">Find Min</button>

<script>
var numbers = [200, 30, 400, 50, 1000, 70, 20, 100];
document.getElementById("demo").innerHTML = numbers.join("<br />");

function jsMax(arr){
var len = arr.length;
var max = -Infinity;
while(len--){
if(arr[len] > max){
max = arr[len];
}
}
return max;
}

function jsMin(arr){
var len = arr.length;
var min = Infinity;
while(len--){
if(arr[len] < min){
min = arr[len];
}
}
return min;
}

function findMax(){
document.getElementById("demo").innerHTML = jsMax(numbers);
}

function findMin(){
document.getElementById("demo").innerHTML = jsMin(numbers);
}

function numReset(){
document.getElementById("demo").innerHTML = numbers.join("<br/>");
}

</script>
</body>
</html>

Array Function

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<button  id = "btn1">Try Now</button>
<p id = "demo1"></p>

<button id = "btn2">Try Now</button>
<p id = "demo2"></p>

<script>
var test1 = function(){
document.getElementById("demo1").innerHTML += this;
}

//window object calls the function
window.addEventListener("load", test1);

//button object calls the function
document.getElementById("btn1").addEventListener("click", test1);

var test2 = () =>{
document.getElementById("demo2").innerHTML += this;
}

//window object calls the function
window.addEventListener("load", test2);

//button object calls the function
document.getElementById("btn2").addEventListener("click", test2);

</script>
</body>
</html>

Objects (JS Arrays)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo"></p>
<script>
var myName = {firstName : "Thet", middleName : "Naing", lastName : "Win"};
document.getElementById("demo").innerHTML = myName.firstName;
</script>
</body>
</html>

Looping Array Element (JS Arrays)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo"></p>
<script>
var cities, clen, text, i;
cities = ["Yangon", "Mandalay", "Naypyidaw", "Meikhtila"];
clen = cities.length;
text = "<ul>";
for(i=0; i<clen; i++){
text += "<li>" + cities[i] + "</li>";
}
text += "</ul>";
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>

Foreach Loop (JS Arrays)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo">forEach Loop</p>
<script>
var cities, text;
cities = ["Yangon", "Mandalay", "Naypyidaw", "Meikhtila"];

text = "<ul>";
cities.forEach(jsFunction);
text+= "</ul>";

function jsFunction(value){
text += "<li>" + value + "</li>";
}

document.getElementById("demo").innerHTML = text;

</script>
</body>
</html>

Creating the Array (JS Arrays)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo1"></p>
<p id = "demo2"></p>
<script>

//good habit in crating array
var a = ["aaa", "bbb", "ccc", "ddd"];
document.getElementById("demo1").innerHTML = a;

//bad habit in creating array
var b = new Array("aaa", "bbb", "ccc", "ddd");
document.getElementById("demo2").innerHTML = b;
</script>
</body>
</html>

Array Elements (JS Arrays)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo1"></p>
<p id = "demo2"></p>
<script>

var a = ["aaa", "bbb", "ccc", "ddd"];
a[0] = "eee";
document.getElementById("demo1").innerHTML = a;


var b = new Array("aaa", "bbb", "ccc", "ddd");
document.getElementById("demo2").innerHTML = b[2];
</script>
</body>
</html>

Adding Array Element (JS Arrays)

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Testing</title>
</head>
<body>
<p id = "demo">forEach Loop</p>
<script>
var cities, text;
cities = ["Yangon", "Mandalay", "Naypyidaw", "Meikhtila"];

text = "<ul>";
cities.forEach(jsFunction);
text+= "</ul>";

function jsFunction(value){
text += "<li>" + value + "</li>";
}

document.getElementById("demo").innerHTML = text;

</script>
</body>
</html>

unshift (JavaScript Array Method)

const tnwNames = ["Moe", "Soe", "Noe", "Mya"];
function tnwFun1(){
    document.getElementById("demo").innerHTML = tnwNames.join(", ");
}

function tnwFun2(){
    document.getElementById("demo").innerHTML = "The original array is : " + tnwNames.join(", ");
    let tnwNewvalue = document.getElementById("newname").value;
    tnwNames.unshift(tnwNewvalue);
    document.getElementById("demo1").innerHTML = "The new array is : " + tnwNames.join(", ");
}

To see demo

splice (JavaScript Array Method)

const tnwNames = ["Hla", "Mya", "Soe", "Moe", "Noe"];

function tnwFun1(){
    document.getElementById("demo").innerHTML = tnwNames.join(", ");
}

function tnwFun2(){
    document.getElementById("demo").innerHTML = "The original array is : 
" + tnwNames.join(", ");
    let result = tnwNames.splice(2, 2, "Aung", "Kyaw", "Tun");
    document.getElementById("demo1").innerHTML = "The removed elements are : 
" + result.join(", ");
    document.getElementById("demo2").innerHTML = "The new array is : 
" + tnwNames.join(", ");
}

sort (JavaScript Array Method)

//1. sort alphabetically
/**
const countries = ["Myanmar", "Singapore", "Malaysia", "USA", "Thailand", "Vietname"];

function tnwFun1(){
    document.getElementById("demo").innerHTML = countries.join("<br />");
}

function jsSort(){
    let result = countries.sort();
    document.getElementById("demo").innerHTML = result.join("<br />");
}

function jsReverse(){
    let result = countries.reverse();
    document.getElementById("demo").innerHTML = result.join("<br />");
}

//2. Sort randomly

const tnwNums = [20, 17, 30, 38, 40, 50, 28, 12];

function tnwFun1(){
    document.getElementById("demo").innerHTML = tnwNums.join("<br />");
}

function tnwFun2(){
    let result = tnwNums.sort(tnwFun3);
    document.getElementById("demo").innerHTML = result.join("<br />");
}

function tnwFun3(a, b){
    return 0.5 - Math.random();
} */

// 3. Sort Numerically

const tnwNums = [20, 17, 30, 38, 40, 50, 28, 12, 4];

function tnwFun1(){
    document.getElementById("demo").innerHTML = tnwNums.join("<br />");
}

function jsSort(){
    let result = tnwNums.sort(function(a, b){return a - b;});
    document.getElementById("demo").innerHTML = result.join("<br />");
}

function jsReverse(){
    let result = tnwNums.sort(function(a, b){return b - a;});
    document.getElementById("demo").innerHTML = result.join("<br />");
}

To see video in YouTube.

some (JavaScript Array Method)

const tnwNums = [20, 39, 48, 58, 68, 70, 85, 90];

function tnwFun1(){
    document.getElementById("demo").innerHTML = tnwNums.join(", ");
}

function tnwFun2(){
    let result = tnwNums.some(tnwFun3);
    document.getElementById("demo").innerHTML = tnwNums.join(", ");
    document.getElementById("demo1").innerHTML = result;
}

function tnwFun3(num){
    let chkInput = document.getElementById("chknum").value;
    return num > chkInput;
}

slice (JavaScript Array Method)

const tnwNums = [20, 29, 30, 39, 40, 47, 50, 70];

function tnwFun1(){
    document.getElementById("demo").innerHTML = tnwNums.join(", ");
}

function tnwFun2(){
    let result = tnwNums.slice(1, 4);
    document.getElementById("demo").innerHTML = "The original is: " + tnwNums.join(", ");
    document.getElementById("demo1").innerHTML = "The new array is: " + result.join(", ");
}

shift (JavaScript Array Method)

const tnwNums = [20, 30, 40, 50, 60, 70, 90];

function tnwFun1(){
    document.getElementById("demo").innerHTML = tnwNums.join(", ");
}

function tnwFun2(){
    let result = tnwNums.shift();
    document.getElementById("demo").innerHTML = tnwNums.join(", ");
    document.getElementById("demo1").innerHTML = "The removed element is: " + result;
}

reverse (JavaScript Array Method)

const tnwNums = [20, 30, 40, 50, 60, 70];

function tnwFun1(){
    document.getElementById("demo").innerHTML = tnwNums.join("
");
}

function tnwFun2(){
    let result = tnwNums.reverse();
    document.getElementById("demo").innerHTML = result.join("
");
}

reduceRight (JavaScript Array Method)

const tnwNum = [20, 9, 20, 8, 100];

function tnwFun1(){
    document.getElementById("demo").innerHTML = tnwNum.join(", ");
}

function tnwFun2(){
    var result = tnwNum.reduceRight(tnwFun3);
    document.getElementById("demo").innerHTML = result;
}

function tnwFun3(numRight, sum){
    return numRight - sum;
}

reduce (JavaScript Array Method)

const tnwNum = [70, 30, 20, 10, 7];

function tnwFun1(){
    document.getElementById("demo").innerHTML = tnwNum.join("
");
}

function tnwFun2(){
    var result = tnwNum.reduce(tnwFun3);
    document.getElementById("demo").innerHTML = result;
}

function tnwFun3(leftNum, sum){
    return leftNum - sum;
}

push (JavaScript Array Method)

const tnwNames = ["Soe Soe", "Moe Moe"];

function tnwFun1(){
    document.getElementById("demo").innerHTML = tnwNames.join("
");
}

function tnwFun2(){
    let tnwAdd = document.getElementById("adding").value;
    let result = tnwNames.push(tnwAdd);
    document.getElementById("demo").innerHTML = result;
}

pop (JavaScript Array Method)

const tnwName = ["Hla Hla", "Mya Mya", "Aung Aung", "Maung Maung"];

function tnwFun1(){
    document.getElementById("demo").innerHTML = tnwName.join("
");
}

function tnwFun2(){
    let result = tnwName.pop();
    document.getElementById("demo").innerHTML = "The removed element is : " + result;
}

map (JavaScript Array Method)

const tnwNum = [10, 20, 30, 40];

function tnwFun1(){
    document.getElementById("demo").innerHTML = tnwNum.join("
");
}

/**
function tnwFun2(){
    let result = tnwNum.map(Math.sqrt);
    document.getElementById("demo").innerHTML = result.join("
");
}*/

function tnwFun2(){
    let result = tnwNum.map(tnwFun3);
    document.getElementById("demo").innerHTML = result.join("
");
}

function tnwFun3(num){
    return num * 10;
}

lastIndexOf (JavaScript Array Method)

const tnwText = "Hello, welcome to TNW (Web Service & ICT Solutions)";

function tnwFun1(){
    document.getElementById("demo").innerHTML = tnwText;
}

function tnwFun2(){
    let tnwSearch = document.getElementById("search").value;
    let result = tnwText.lastIndexOf(tnwSearch);
    document.getElementById("demo").innerHTML = "The search text is found at : " + result;
}

keys (JavaScript Array Method)

const tnwNames = ["Hla Hla", "Mya Mya", "Soe Soe", "Moe Moe"];
let result = "";

function tnwFun1(){
    document.getElementById("demo").innerHTML = tnwNames.join("
");
}

function tnwFun2(){
    let tnwKeys = tnwNames.keys();
    for(let x of tnwKeys){
        result += x + "
";
        document.getElementById("demo").innerHTML = result;
    }
}

join (JavaScript Array Method)

const tnwNames = ["Hla Hla", "Mya Mya", "Aung Aung", "Maung Maung"];

function tnwFun1(){
    document.getElementById("demo").innerHTML = tnwNames;
}

function tnwFun2(){
    document.getElementById("demo").innerHTML = tnwNames.join("
");
}

isArray (JavaScript Array Method)

const tnwText = ["Hla Hla", "Mya Mya", "Soe Soe", "Noe Noe"];
//const tnwText = "I am Thet Naing Win.";
const result = Array.isArray(tnwText);
document.write(result);

indexOf (JavaScript Array Method)

const tnwText = "Hello Dear All, I am Thet Naing Win. Welcome to TNW (Web Service & ICT Solutions)";

function tnwFun1(){
    document.getElementById("demo").innerHTML = tnwText;
}

function tnwFun2(){
    const tnwSearch = document.getElementById("search").value;
    const result = tnwText.indexOf(tnwSearch);
    document.getElementById("demo").innerHTML = "The search text is fount at " + result;
}

includes (JavaScript Array Method)

const tnwNames = ["Hla Hla", "Mya Mya", "Soe Soe", "Moe Moe"];

function tnwFun1(){
    document.getElementById("demo").innerHTML = tnwNames.join("
");
}

function tnwFun2(){
    document.getElementById("demo").innerHTML = tnwNames.includes("Mya Mya");
}

from (JavaScript Array Method)

const myLetter = "ABCDEFGHIJKL";

function tnwFun1(){
    document.getElementById("demo").innerHTML = myLetter;
}

function tnwFun2(){
    const result = Array.from(myLetter);
    document.getElementById("demo").innerHTML = result;
}

forEach (JavaScript Array Method)

const student = ["Aung Aung", "Maung", "Kyaw", "Zaw", "Soe", "Moe"];
let names = "";
function tnwFun1(){
    student.forEach(tnwFun2);
}

function tnwFun2(item, index){
    names += index + " : " + item + "
";
    document.getElementById("demo").innerHTML = names;
}

findIndex (JavaScript Array Method)

const tnwAges = [19, 39, 28, 43, 29, 45, 53];

function tnwFun1(){
    document.getElementById("demo").innerHTML = tnwAges.join("
");
}

function tnwFun2(){
    document.getElementById("demo").innerHTML = tnwAges.findIndex(chkAge);
}

function chkAge(age){
    return age > document.getElementById("myAge").value;
}

To see video in YouTube.

find (JavaScript Array Method)

const tnwAges = [19, 39, 28, 43, 29, 45, 53];

function tnwFun1(){
    document.getElementById("demo").innerHTML = tnwAges.join("
");
}

function tnwFun2(){
    document.getElementById("demo").innerHTML = tnwAges.find(chkAge);
}

function chkAge(age){
    return age > document.getElementById("myAge").value;
}

filter (JavaScript Array Method)

const tnwAges = [25, 18, 29, 20, 40, 32, 53, 24];

function tnwFun1(){
    document.getElementById("demo").innerHTML = tnwAges.join("
");
}

function tnwFun2(){
    const result = tnwAges.filter(chkAge);
    document.getElementById("demo").innerHTML = result.join("
");
}

function chkAge(age){
    return age > 20;
}

fill (JavaScript Array Method)

const tnwNames = ["Aye Aye", "Nwe Nwe", "Hla Hla", "Mya Mya", "Soe Soe", "Moe Moe"];

function tnwFun1(){
    document.getElementById("demo").innerHTML = tnwNames.join("
");
}

function tnwFun2(){
    const result = tnwNames.fill("Aung Aung", 1, 3);
    document.getElementById("demo").innerHTML = result.join("
"); 
}

every (JavaScript Array Method)

const tnwAge = [20, 29, 48, 76, 50, 38, 39];

function tnwFun1(){
    document.getElementById("demo").innerHTML = tnwAge.every(tnwFun2);
}

function tnwFun2(chkAge){
    return chkAge > 19;
}

entries (JavaScript Array Method)

const tnwNames = ["Hla Hla", "Mya Mya", "Aye Aye", "Nwe Nwe", "Soe Soe", "Moe Moe", "Aung Aung"];
const y = tnwNames.entries();
for(x of y){
    document.write(x + "
");
}

copyWithin (JavaScript Array Method)

const people = ["Hla", "Mya", "Aung", "Maung", "Soe", "Noe", "Moe"];

function tnwFun1(){
    document.getElementById("demo").innerHTML = people.join("
");
}

function tnwFun2(){
    const result = people.copyWithin(3, 0, 3);
    document.getElementById("demo").innerHTML = result.join("
");
}

concat (JavaScript Array Methods)

const girls = ["Aye Aye", "Nwe Nwe", "Htwe Htwe"];
const boys = ["Aung Aung", "Maung Maung", "Kyaw Kyaw"];
const students = ["Hla Hla", "Mya Mya", "Aung Ba", "Aung Mya"];

const people = girls.concat(boys, students);
document.write(people.join("
"));

JavaScript Array Properties

length
	Sets or returns the number of elements in an array.

prototype 
	Allows you to add new properties and methods to an Array object.


//length
/*
const countries = ["USA", "UK", "Canada", "Myanmar", "Singapore"];

function showLength(){
    document.getElementById("demo").innerHTML = countries.length;
}

//prototype

Array.prototype.tnwCase = function(){
    for(let i = 0; i < this.length; i++){
        this[i] = this[i].toLowerCase(); //lower case
    }
};

const countries = ["USA", "UK", "Canada", "Myanmar", "Singapore"];
countries.tnwCase();

function tnwFun(){
    document.getElementById("demo").innerHTML = countries;
}*/

//Another example of prototype property

function Person(first, middle, last){
    this.firstName = first;
    this.middleName = middle;
    this.lastName = last;
}

const myFriend = new Person("Aung", "Kyaw", "Soe");
Person.prototype.nationality = "Myanmar";
Person.prototype.age = 35;

function tnwFun(){
    document.getElementById("demo").innerHTML = myFriend.age;
}

To see video in YouTube.

JavaScript Array

/*
const countries = ["USA", "UK", "Canada"];
document.write(countries);

//example one
const names = ["Hla Hla", "Mya Mya", "Soe Soe"];
document.write(names);


//example two
const cities = [
    "Yangon",
    "Mandalay",
    "Meikhtila"
];
document.write(cities); 

//example three
const countries = [];
countries[0] = "USA";
countries[1] = "UK";
countries[2] = "Canada";
document.write(countries); 

//example four 
//creating array by using new keyword
const countries = new Array("USA", "UK", "Canada");
document.write(countries); */

//Arrays are special types of objects

const myNmae = {first: "Thet", middle: "Naing", last: "Win"};
document.write(myNmae.last);

To see video in YouTube.

javascript in html

When we design the website, we need to use css and html together. html, css and javascript are the most important languages for those who are trying to get in front-end web development field. The following is the very basic sample of html and css.

Adding script between <head> and </head>

<html>
<head>
<title>TNW (Web Service & ICT Solutions)</title>
<script>
var txt = "<b>Welcome to TNW (Web Service & ICT Solutions)!</b><br /><br /> TNW provides the best ICT Solutions for your business by the reasonable price.";
function myFun(){
document.getElementById("demo").innerHTML = txt;
}
</script>
</head>
<body>
<p id = "demo">TNW</p>
<button type = "button" onclick = "myFun()">Click Here</button>
</body>
</html>

Open notepad or text editor and write the above codes. Then, save it as test.html and try to open by one of the browsers on your computer.

 
Adding Script between <body> and </body>
<html>
<head>
<title>TNW (Web Service & ICT Solutions)</title>
</head>
<body>
<p id = "demo">TNW</p>
<button type = "button" onclick = "myFun()">Click Here</button>
<script>
var txt = "<b>Welcome to TNW (Web Service & ICT Solutions)!</b><br /><br /> TNW provides the best ICT Solutions for your business by the reasonable price.";
function myFun(){
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>

Open notepad or text editor and write the above codes. Then, save it as test.html and try to open by one of the browsers on your computer.

css in html

When we design the website, we need to use css and html together. html, css and javascript are the most important languages for those who are trying to get in front-end web development field. The following is the very basic sample of html and css.

<!DOCTYPE html>
<html>
<head>
<title>T N W</title>
<style type="text/css">
p{color:red; background:black; width: 200 px;}
</style>
</head>
<body>
<p>Hello, This is HTML Testing!</p>
</body>
</html>

html links

<!DOCTYPE html>
<html>
<head>
<title>TNW (Web Service & ICT Solutions)</title>
</head>
<body>
<p><a href = "https://tnwict.com/index.php?view=category&id=8">Computer Service</a></p>
<p><a href = "https://tnwict.com/index.php?view=category&id=11">Networking Service</a></p>
</body>
</html>

PDF Extra

PDF Extra is one of the best pdf software. There are so many features we can use such as in adobe acrobat pro. There are three versions in PDF Extra. We can use free version for lifetime.

 

Nitro PDF

Nitro PDF is one of the best pdf software. You can use so many features such as in Adobe Acrobat Pro. Nitro PDF is not a freeware. But, you can use it as a free trial. If you want to download it or want to know more details, please click here.

Adobe Acrobad PDF Reader and Pro

Adobe Acrobat is one of the best pdf software I prefer to use.

1. Adobe Acrobat Reader

It is a freeware. If you have not installed any pdf reader in your computer and searching free pdf reader, you should use adobe acrobat reader. If you want to download it, please click here. (Note: select Operating System, Language and Version to download)

 

2. Adobe Acrobat Pro

There are so many features in Adobe Acrobat Pro such as editing pdf, combining pdf files, converting pdf files into (word, excel, power point) files, converting any printable documents into pdf file and adding signature, etc., . But it is not freeware. You can use it as free trial. You have to pay license fee after free trial period if you will continue to use. You can uninstall it if you don't want to use it anymore. If you want to download it, please click here.

JavaScript Course

Chapter 1: Introduction to JavaScript
    - What is JavaScript
    - History of JavaScript
    - Start writing JS Codes
    - JavaScript Outputs
    - JavaScript Syntax
    - Basic Rules
    - Accessing Elements
    - Dot Notation
    - Square Bracket Notation
    - JS Statements
    - JS Objects
    - JS Methods
    - JS Properties

Chapter 2: Varialbes, Arrays and Operators
    - JS Variables
    - Variable Naming
    - JS Constant
    - Arrays
    - Array Properties
    - Array Methods
    - JS Operators
    - Working with Operators


Chapter 3: JS Functions
    - Function Definitions
    - Function Parameters
    - Function Invocation
    - Function Call
    - Function Apply
    - Function Closures


Chapter 4: JS Objects
    - Object hierarchy
    - Assigning properties to an object
    - Using methods to manipulate objects
    - Creating a new custom object
    - Window object
    - Document object
    - String object
    - Arrays
    - Date object
    - Math object
    - Image object
    

Chapter 5: Conditionals and Loops
    - Conditionals
    - if_else if_else conditions
    - Switch / Case
    - Loops
    - while loop
    - do while loop
    - for...of loop
    - for...in loop
    - break and continue
    - Array: forEach()


Chapter 6: Event Handlers and Listeners
    - On-Event Handlers
    - The getElementById() Method
    - The addEventListener() Method
    - Capturing Key Events
    - Benefits of Event Listeners
    - Timers

Chapter 7: JS HTML DOM
    - DOM Intro
    - DOM Methods
    - DOM Document
    - DOM Elements
    - DOM HTML
    - DOM CSS
    - DOM Animations
    - DOM Events
    - DOM Event Listener
    - DOM Navigation    
    - DOM Nodes
    - DOM Collections
    - DOM Node List


Chapter 8: JS Browser BOM
    - JS Window
    - JS Screen
    - JS Location
    - JS History
    - JS Navigator
    - JS Popup Alert
    - JS Timing
    - JS Cookies


Chapter 9: Basic JS AJAX
    - AJAX Intro
    - AJAX XMLHttp
    - AJAX Request
    - AJAX Response
    - AJAX XML File
    - AJAX PHP
    - AJAX ASP
    - AJAX Database
    - AJAX Applications
    

Chapter 10: JS Web APIs
    - Introduction to Web API
    - Web History API
    - Web Storage API
    - Web Worker API
    - Web Fetch API
    - Web Geolocation API

CSS Course

Chapter 1: Introduction to CSS
    - CSS Rules
    - Where to put your styles
    - Explaining Selectors (Grouping & Type)
    - Inline and Embedded styles
    - CSS and Fonts
    - Font colors
    - Font sizes
    - Styling Fonts
    
Chapter 2: Selectors
    - Selector Basics
    - Tag Selectors
    - Class Selector
    - ID Selectors
    - Group Selector
    - Descendant Selector
    - Universal Selector

Chapter 3: Advanced Selectors
    - Pseudo-Classes and Pseudo-Elements
    - Pseudo-Classes for Links
    - Direct Child Selectors
    - Next Sibling Selector
    - Pseudo-Elements

Chapter 4: Font Formatting
    - Font Formatting Basic
    - Font-Size
    - Font-Color
    - Font Combinations
    - Font-Stye
    - Font-Weight
    - Text-Transform
    - Text-Decoration
    - Font-Variant
    - Font Shorthand
    - Font-Family

Chapter 5: Text Display Control
    - Text Display Baiscs
    - Text-Align
    - Text-Index
    - Adding Color to Text
    - Line-Height
    - Letter-Spacing
    - Word-Spacing
    - White Space Proterty

Chapter 6: Page Background
    - Background Basic
    - Background-Color
    - Background-Image
    - Background-Repeat
    - Background-Position
    - Background-Attachment
    - Background-Shorthand

Chapter 7: CSS Box Model
    - Box Model Basic
    - Margin
    - Margin Collapsing
    - Margin for Horizontal Alignment
    - Border
    - Padding
    - Height and Width
    - Min and Max Dimensions
    - Overflow Property

Chapter 8: Float
    - Float Basic
    - Float Property
    - Clear Property
    - Vertycally Aligning Content

Chapter 9: Positioning
    - Positioning Basic
    - Relative Positioning
    - Absolute Positioning
    - Fixed Positioning
    - Z-Index

Chapter 10: Styling Lists
    - List Styling Basics
    - List Tags
    - List-Style-Type Property
    - List-Style-Image Property
    - List-Style-Position Property
    - List-Style Shorthand Property

Chapter 11: Styling Tables
    - Table Styling Basics
    - Table Elements
    - Captions
    - Columns
    - Table Layout
    - Borders Collapsing
    - Border Spacing

Chapter 12: CSS Animations
    - @keyfrmaes
    - animation-name
    - animation-duration
    - animation-delay
    - animation-iteration-count
    - animation-direction
    - animation-timing function
    - animation-fill-mode
    - animation

Chapter 13: CSS Multiple Columns
    - column-count
    - column-gap
    - column-rule-style
    - column-rule-width
    - column-rule-color
    - column-rule
    - column-span
    - column-width

HTML Course

Chapter 1: Introduction to HTML
    - What is HTML?
    - HTML Development Environments
    - Using Editors
    - Simple HTML Document
    - Publishing Documents

Chapter 2: HTML Elements
    - Rules of Syntax
    - Making your Code Readable
    - Making your Code XHTML Compliant
    - Building a Document
    - Using Colors
    - Adding Color to your Page
    - Using Headings
    - Using Paragraphs
    - Using Blockquotes
    - Using Entities
    - Aligning Block-Level Elements

Chapter 3: Inserting Spaces and Line Breaks
    - Displaying Performatted Text
    - Formatting with Inine Elements
    - Controlling Fonts
    - Introducing List Elements
    - Creating Unordered Lists
    - Creating Ordered Lists
    - Creating Definition Lists
    - Nesting Lists
    - Indenting Text with the <ul> Tag

Chapter 4: HTML Table
    - Building a Table
    - Using the Border Attribute
    - Cell Padding and Cell Spacing
    - Controlling a Table and Cell Width
    - Aligning a Table on the Page
    - Aligning Tables and Text
    - Aligning Table Data
    - Spanning Columns and Rows
    - Nesting Tables
    - Adding Color to Tables
    - Using Tables as a Design Tool

Chapter 5: HTML Links
    - Understanding and Using URLs
    - Linking to a Web Document
    - Linking to a Local Document
    - Linking to Anchors
    - Opening a New Browser Window
    - Creating a Frameset
    - Adding the Frame Elements
    - Creating the Frames
    - Using the Noframes Elements
    - Using Inline Frames

Chapter 6: Graphic File Formats
    - Optimizing Image and File Size
    - Inserting Inline Images
    - Aligning and Formatting Images
    - Using Images to Anchor Links
    - Adding images to the Page
    - Sizing and Scaling Images
   
Chapter 7: HTML Forms
    - HTML Forms
    - HTML Form Attributes
    - HTML Form Elements
    - HTML Input Types
    - HTML Input Attributes
    - HTML Input Form Attributes

Chapter 8: HTML Media
    - HTML Media
    - HTML Video
    - HTML Audio
    - HTML Plug-ins
    - HTML YouTube

Chapter 9: HTML APIS
    - HTML Geolocation
    - HTML Drag/Drop
    - HTML Web Storage
    - HTML Web Workers
    - HTML SSE

Restoro (Computer Repair Software)

Restoro is one of the best software to securely and safely repair any PC. It can remove Malware Threat, detect dangerous websites and replace damaged windows files. We can use it as trial version.

 

Advanced System Care

Advanced System Care is really nice software to clean up your computer. By using it, you can fix the computer errors such as Privacy traces, Junk files, Invalid shortcuts, Registry entries, etc,. There are two versions in it. One is free version and one is pro version. You can use the free version as a freeware for lifetime. And it is easy to use. This software is one of the best software you should have installed in your computer to clean up yours.

CCleaner

It is a really cool software. There are so many features we can use in it to make computer run faster.

1. Health Check

We can check our computer health by using Health Check. If there are some issues, we can resolve those. 

2. Custom Clean

We can use this feature to clean up such as Internet cache, Internet histories, Cookies, etc., in the Browsers. It also cleans up some applications such as multimedia.

 

3. Registry

We can use this feature to repair registry errors.

 

4. Tools

We can use this feature to uninstall software, to update software, to manage Startup program, etc., . But, some tools are only for Pro versions.

If you don't want to clean your computer manually, you should have installed this software in your computer. There are three versions in CCleaner. One is Free version and others are Pro and Pro Bundle versions. It is really nice to use although there are some limitations in free version. If you want to download free version, please click here.

Registry Reviver

Registry Reviver is a cool software. We can use it to repair, optimize and maintain registry. And we can disable or enable the Startup programs and the services by using Startup Manager under Utilities. You should use Registry Reviver if you think your computer is running slow because of registry errors. Registry Reviver is not a freeware. But, we can use it as free version. It is really nice to use although there are some limitations in free version.  If you want to download it, please click here.

Driver Booster

We need to check the drivers in our computer are up to date or not so that the computer can work properly. The computer may work slowly if the drivers are not up to date. We can use driver booster to check the drivers in our computer are up to date or not. Driver booster is one of the best driver software. You can use it as a freeware for lifetime.

Driver Easy

If your computer is so slow although there is no error in both of Hardware and Software, you should check your computer drivers are up to date or not. Some brands provide support assistant application to check drivers and hardware errors. But some don't provide. In such kind of condition, we can use Driver Easy to check our computer drivers are up to date or not. There are two versions in Driver Easy. One is Pro version and another one is Free version. We can use free version for life time without any charges. But there are limitations in free version and download speed is also very slow. If you want to download it, please click here.

Dell Support Assistant for Dell PCs

Are you using Dell Computers ? If you are using dell computers, you should have installed Dell Support Assistant in your computer. By using Dell Support Assistant, you can do the followings:

1. Checking the drivers in your PC ,and can do download and update if required.

2. Hardware testing.

3. Cleaning Files.

4. Tuning Performance.

5. Optimizing Network.

How to use Dell Support Assistant

Open Dell Support Assistant application and Click "Start Now". You can also troubleshoot your PC if you wanna do. If you want to download Dell Support Assistant, please click here.

Network Engineer Course

Benefits of completing Network Engineer Course

This course will be real practical network engineering course. This course will be included not only Cisco networking devices but also other network devices. After completion of this course,

1. You will be able to work as an IT engineer, network engineer, system engineer, network administrator, etc.

2. This course will also be foundation for those who will take Cisco and Microsoft exams.

Virtualization and Windows Servers

Topics:
    What is Virtualization
    DNS
    DHCP
    Active Directory
    File Sharing     
    IIS
    Servers Clustering

    Activities and Lab

Chapter 29: IP Addressing Services

Topics:
    DHCP
    Scaling Networks with NAT
    IPv6

    Activities and Labs

Chapter 28: Teleworker Services

Topics:
    Business Requirements for Teleworker Services
    Broadband Services
    VPN Technology
    
    Activities and Labs

Chapter 27: Access Control Lists (ACLs)

Topics:
    Using ACLs to Secure Networks
    Configuring Standard ACLs
    Configuring an Extended ACL
    Configure Complex ACLs
    
    Activities and Labs

Chapter 26: Network Security

Topics:
    Introduction to Network Security
    Securing Cisco Routers
    Securing Router Network Services
    Using Cisco SDM
    Secure Router Management

    Activities and Labs

Chapter 25: Frame Relay

Topics:
    Basic Frame Relay Concepts
    Configuring Frame Relay
    Advanced Frame Relay Concepts
    
    Activities and Labs

Chapter 24: Point-to-Point Protocol (PPP)

Topics:
    Introducing Serial Communications
    PPP Concepts
    
    Activities and Labs

Chapter 23: Introduction to WANs

Topics:
    Introducing Wide-Area Networks
    The Evolving Enterprise
    The Evolving Network Model
    WAN Technology Concepts
    WAN Connection Options
    
    Activities and Labs

Chapter 22: Basic Wireless Concepts and Configuration

Topics:
    The Wireless LAN
    Wireless LAN Security
    Configure Wireless LAN Access
    Troubleshooting Simple WLAN Problems

    Activities and Labs

Chapter 21: Spanning Tree Protocol (STP)

Topics:
    Redundant Layer 2 Topologies
    Introduction to STP
    STP Convergence
    PVST+, RSTP, and Rapid PVST

    Activities and Labs

Chapter 20: VLAN Trunking Protocol (VTP)

Topics:
    VTP Concepts
    VTP Operation
    Configure VTP
    
    Activities and Labs

Chapter 19: Virtual LANs (VLANs)

Topics:
    Introduction to VLANs
    VLAN Trunking
    Configure VLANs and Trunks
    Troubleshooting VLANs and Trunks

    Activities and Labs

Chapter 18: OSPF

Topics:
    Introduction to OSPF
    Basic OSPF Configuration    
    The OSPF Metric
    OSPF and Multiaccess Networks
    More OFPF Configuration

    Activities and Labs

Chapter 17: Link-State Routing Protocols

Topics:
    Link-State Routing
    Implementing Link-State Routing Protocols

    Activities and Labs

Chapter 16: EIGRP

Topics:
    Introduction to EIGRP
    Basic EIGRP Configuration
    EIGRP Metric Calculation
    DUAL
    More EIGRP Configurations

    Activities and Labs

Chapter 15: RIPv2

Topics:
    RIPv1 Limitations
    Configuring RIPv2
    VLSM and CIDR
    Verifying and Troubleshooting RIPv2

    Activities and Labs

Chapter 14: VLSM and CIDR

Topics:
    Classful and Classless Addressing
    VLSM
    CIDR

    Activities and Labs

Chapter 13: RIP Version 1

Topics:
    RIPv1: Distance Vector, Classful Routing Protocol
    Basic RIPv1 Configuration
    Verification and Troubleshooting
    Automatic Summarization
    Default Route and RIPv1

    Activities and Labs

Chapter 12: Distance Vector Routing Protocols

Topics:
    Introduction to Distance Vector Routing Protocols
    Network Discovery
    Routing Table Maintenance
    Routing Loops
    Distance Vector Routing Protocols Today

    Activities and Labs

Chapter 11: Introduction to Dynamic Routing Protocols

Topics:
    Introduction to Dynamic Routing Protocols
    Classifying Dynamic Routing Protocols
    Metrics
    Administrative Distance

    Activities and Labs

Chapter 10: Static Routing

Topics:
    Routers and the Network
    Router Configuration Review
    Exploring Directly Connected Networks
    Static Routes with Next-Hop Address
    Static Routers with Exit Interfaces
    Summary and Default Static Routes
    Managing and Troubleshooting Static Routes

    Activities and Labs

Chapter 9: Introduction to Routing and Packet Forwarding

Topics:
    Inside the Router
    CLI Configuration and Addressing
    Building the Routing Table
    Path Determination and Switching Functions

    Activities and Labs

Chapter 8: Basic Switch Concepts and Configuration

Topics:
    Introduction to Ethernet/802.3 LANs
    Forwarding Frames Using a Switch
    Switch Management Configuration
    Configuration Switch Security

    Activities and Labs

Chapter 7: LAN Design

Topics:
    Switched LAN Architecture
    Managing Switches to Specific LAN Function

    Activities and Labs

Chapter 6: Configuring and Testing Your Network

Topics:
    Configuring Cisco Devices: IOS Basics
    Applying a Basic Configuration Using Cisco IOS
    Verifying Connectivity
    Monitoring and Documenting Networks

    Activities and Labs

Chapter 5: Planning and Cabling Networks

Topics:
    LANs: Making the Physical Connection
    Device Interconnections
    Developing and Addressing Scheme
    Calculating the Subnets
    Device Interconnections

    Activities and Labs

Chapter 4: Ethernet

Topics:
    Overview of Ethernet
    Ethernet: Communication Through the LAN
    Ethernet Frame
    Ethernet MAC
    Ethernet Physical Layer
    Hubs and Switches
    Address Resolution Protocol (ARP)

    Activities and Labs

Chapter 3: Addressing the Network: IP4

Topics:
    IPv4 Addresses
    IPv4 Addresses for Different Purposes
    Assigning Addresses
    Calculating Addresses
    Testing the Network Layer

    Activities and Labs

Chapter 2: OSI and TCP/IP Model

Topics:
    Application Layer
    Applications: The Interface Between the Networks
    Making Provisions for Applications and Services
    Application Layer Protocols and Services Examples
    
    OSI Transport Layer
    Roles of Transport Layer
    TCP: Communicating with Reliability
    UDP: Communicating with Low Overhead

    OSI Network Layer
    Network Layer: Communicating from Host to Host
    Network: Dividing Hosts into Groups
    Routing: How Data Packets are Handled
    Routing Processes: How Routes Are Learned

    OSI Data Link Layer
    Data Link Layer: Accessing the Media
    MAC Techniques: Placing Data on the Media
    MAC: Addressing and Framing Data
    Putting It All Together: Following Data Through an Internetwork

    OSI Physical Layer
    Physical Layer: Communication Signals
    Physical Signaling and Encoding: Representing Bits
    Physical Media: Connection Communication

    Activities and Labs

Chapter 1: Communicating over the Network

Topics:
    The Platform for Communication    
    LANs, WANs and Internetworks
    Protocols
    Using Layered Models
    Network Addressing
    
    Activities and Labs