Make the ChessBoard and Display the Current Time Using HTML,CSS,JavaScript

on
Hey Friends.!
Welcome to my Blog…!!!
Come-on Friends, let’s proceed to an another Superb Topic. In this Post, we will learn about how to make A Chess-Board, along with its Pieces using HTML & CSS Language. Also, we will add a small Section in our Webpage that will show the Current-Time which will be changing instantly in a Split-Second Manner using HTML & JavaScript Language.
We will use following important Tags & Attributes for designing our required Webpage.
For Chess-Board:
For the Chess-Board we will use <table> tag.  <table>’s  <tr> tag will help us in making 8 rows while <tr>’s  <td> column will help us in making 8 columns.
Also, the height & width of each square is set to 75px respectively.  So, the total height & width of our Chess-Board will be 75*8 = 600px respectively.
For Pieces:
To, display the pieces of Chess, use the following HTML Codes:
(1) White Chess KING ~ &#9812;
    Black Chess KING ~ &#9818;
(2) White Chess Queen ~ &#9813;
    Black Chess Queen ~ &#9819;
(3) White Chess Rook ~ &#9814;
     Black Chess Rook ~ &#9820;
(4) White Chess Bishop ~ &#9815;
     Black Chess Bishop ~ &#9821;
(5) White Chess Knight ~ &#9816;
     Black Chess Knight ~ &#9822;
(6) White Chess Pawn ~ &#9817;
    Black Chess Pawn ~ &#9823;
We will display the Time in the <aside></aside> tag.
<aside></aside> ~ The HTML <aside> element represents a section of a document with content connected tangentially to the main content of the document.

Also, we will use the following JavaScript Code so as to instantly print the Time in the Split-Second manner.



function startTime() {
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    var s = today.getSeconds();
 if(h<10)
 {
  //Example: 9<10 So, 9 will undergo in this IF Loop & then it will display as 09 
  h="0"+h; 
 }
 if(m<10)
 {
  m="0"+m;
 }
 if(s<10)
 {
  s="0"+s;
 }
    document.getElementById('clock1').innerHTML =
    h + " : " + m + " : " + s;
     setTimeout(startTime, 1000);
}

Code:



<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='https://fonts.googleapis.com/css?family=Orbitron' rel='stylesheet' type='text/css'>
<style type="text/css">
body.b1
{
 background-image:url("pic1.jpg");
 background-repeat:no-repeat;
 background-position:center;
 background-size:cover;
}
table.ChessBoard
{
 width:600px;
 height:600px;
 border:15px solid #000033;
}
td.blue1
{
 height:75px;
 width:75px;
 font-size:45px;
 font-weight:bold;
 text-align:center;
 background-color:#E5FFFF;
}
td.blue2
{
 height:75px;
 width:75Px;
 font-size:45px;
 font-weight:bold;
 text-align:center;
    background-color:#48D1CC;
} 
</style>
<title>Chess Board With Current Time</title>
</head>

<body class="b1" onload="startTime()">
<div>
<table class="ChessBoard" cellspacing="0px" align="left">
 <tr>
  <td class="blue1">&#9820;</td>
  <td class="blue2">&#9822;</td>
  <td class="blue1">&#9821;</td>
  <td class="blue2">&#9818;</td>
  <td class="blue1">&#9819;</td>
  <td class="blue2">&#9821;</td>
  <td class="blue1">&#9822;</td>
  <td class="blue2">&#9820;</td>
 </tr>
 
 <tr>
  <td class="blue2">&#9823;</td>
  <td class="blue1">&#9823;</td>
  <td class="blue2">&#9823;</td>
  <td class="blue1">&#9823;</td>
  <td class="blue2">&#9823;</td>
  <td class="blue1">&#9823;</td>
  <td class="blue2">&#9823;</td>
  <td class="blue1">&#9823;</td>
 </tr>
 
 <tr>
  <td class="blue1"></td>
  <td class="blue2"></td>
  <td class="blue1"></td>
  <td class="blue2"></td>
  <td class="blue1"></td>
  <td class="blue2"></td>
  <td class="blue1"></td>
  <td class="blue2"></td>
 </tr>
 
 <tr>
  <td class="blue2"></td>
  <td class="blue1"></td>
  <td class="blue2"></td>
  <td class="blue1"></td>
  <td class="blue2"></td>
  <td class="blue1"></td>
  <td class="blue2"></td>
  <td class="blue1"></td>
 </tr>
 
 <tr>
  <td class="blue1"></td>
  <td class="blue2"></td>
  <td class="blue1"></td>
  <td class="blue2"></td>
  <td class="blue1"></td>
  <td class="blue2"></td>
  <td class="blue1"></td>
  <td class="blue2"></td>
 </tr>
 
 <tr>
  <td class="blue2"></td>
  <td class="blue1"></td>
  <td class="blue2"></td>
  <td class="blue1"></td>
  <td class="blue2"></td>
  <td class="blue1"></td>
  <td class="blue2"></td>
  <td class="blue1"></td>
 </tr>
 
 <tr>
  <td class="blue1">&#9817;</td>
  <td class="blue2">&#9817;</td>
  <td class="blue1">&#9817;</td>
  <td class="blue2">&#9817;</td>
  <td class="blue1">&#9817;</td>
  <td class="blue2">&#9817;</td>
  <td class="blue1">&#9817;</td>
  <td class="blue2">&#9817;</td>
 </tr>
 
 <tr>
  <td class="blue2">&#9814;</td>
  <td class="blue1">&#9816;</td>
  <td class="blue2">&#9815;</td>
  <td class="blue1">&#9812;</td>
  <td class="blue2">&#9813;</td>
  <td class="blue1">&#9815;</td>
  <td class="blue2">&#9816;</td>
  <td class="blue1">&#9814;</td>
 </tr>
</table>
</div>
<aside align="center">
<h2 style="font-family:'Orbitron', sans-serif; color:#3232ff">TIME</h2>

<h1 style="font-family:'Orbitron', sans-serif; color:#3232ff" id="clock1"></h1>
<script>
function startTime() {
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    var s = today.getSeconds();
 if(h<10)
 {
  //Example: 9<10 So, 9 will undergo in this IF Loop & then it will display as 09 
  h="0"+h; 
 }
 if(m<10)
 {
  m="0"+m;
 }
 if(s<10)
 {
  s="0"+s;
 }
    document.getElementById('clock1').innerHTML =
    h + " : " + m + " : " + s;
     setTimeout(startTime, 1000);
}
</script>
</aside>
</body>
</html>

Output:


Thank-You.!

Jai-Hind.!

Comments

Post a Comment