The most viewed posts

Contact Me

About Me

Myanmar font and keyboard for Windows

Registry Reviver

IT Support & Endpoint Management

Digital Platforms & Web Solutions

How to clean up Windows Computer

Driver Booster

CCleaner

About Desktop Icons in Windows Computer

The most viewed items

Dell Inspiron 5559

SONY Playstation Portable

HP ProBook 430

Laptop RAM

External Hard Disk

Laptop

Desktop Hard Disk

Please login to start chat

Trade Blog Job
ZilaStar ICT Jul 17 2022, 11:54:00

querySelectorAll() (HTML DOM Document)
Category : JavaScript Tutorials

<!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>

...read more
💬 Comment ↻Share 🔗 Copy
ZilaStar ICT Jul 16 2022, 11:52:53

getElementsByTagName (HTML DOM Document)
Category : JavaScript Tutorials

<!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>

...read more
💬 Comment ↻Share 🔗 Copy
ZilaStar ICT Jul 15 2022, 11:51:48

getElementsByClassName (HTML DOM Document)
Category : JavaScript Tutorials

<!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>

...read more
💬 Comment ↻Share 🔗 Copy
ZilaStar ICT Jul 14 2022, 11:50:34

document.links (HTML DOM Document)
Category : JavaScript Tutorials

<!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 = "zilastar.com">zilastar.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>

...read more
💬 Comment ↻Share 🔗 Copy
ZilaStar ICT Jul 13 2022, 11:48:24

Creating Text Node (HTML DOM Document)
Category : JavaScript Tutorials

<!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>

...read more
💬 Comment ↻Share 🔗 Copy
ZilaStar ICT Jul 12 2022, 11:41:03

Creating a Calculator with JS
Category : JavaScript Tutorials

<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>

...read more
💬 Comment ↻Share 🔗 Copy
ZilaStar ICT Jul 11 2022, 18:12:27

JS Timer
Category : JavaScript Tutorials

<!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>

...read more
💬 Comment ↻Share 🔗 Copy
ZilaStar ICT Jul 10 2022, 18:10:53

Creating Readmore Button
Category : JavaScript Tutorials

<!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>

...read more
💬 Comment ↻Share 🔗 Copy
ZilaStar ICT Jul 09 2022, 18:09:37

Creating Nav Bar
Category : JavaScript Tutorials

<!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>

...read more
💬 Comment ↻Share 🔗 Copy
ZilaStar ICT Jul 08 2022, 18:08:34

Dropdown Menu
Category : JavaScript Tutorials

<!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>

...read more
💬 Comment ↻Share 🔗 Copy
ZilaStar ICT Jul 07 2022, 18:08:00

Display a Clock
Category : JavaScript Tutorials

<!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>

...read more
💬 Comment ↻Share 🔗 Copy
ZilaStar ICT Jul 06 2022, 18:06:29

Converting Celsius to Fahrenheit
Category : JavaScript Tutorials

<!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>

...read more
💬 Comment ↻Share 🔗 Copy
Page : 4 of 30
☏ To Contact
🙏 About Me
📜Terms and Conditions