"A great website without functionality is like a sports car with no engine"~Unkown

Looks do matter, but what good is a stylish webpage without functionality? Javascript, the web's programming language, is used to add functionality and make webpages interactive. With Javascript, you can: Change HTML content, Change HTML attribute value, Change HTML style, hide and show HTML elements, etc. Javascript files are saved with the extension(.js).

WAYS OF ADDING JAVASCRIPT

-Internal scripting: Javascript commands are placed within a script tag i.e. (<script> JS commands</script>), which is placed just before the closing body tag of the HTML document.

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
 </head>
 <body>
 <h1>Click this button to display the hidden message </h1>
 <button onclick="show()"></button>
 <p id="element"></p>
     <script >
         function show(){

             document.getElementById('element').innerHTML="Internal scripting!!!!"; 
         }
     </script>
 </body>

 </html>

-External scripting: The Javascript document is linked to the html document using the script tag with the "href" attribute.
```
 <script href="script.js"></script>
```

Creating a Simple JS Clock

this is one of the most straightforward projects you can start with, using HTML, CSS, and JS you can create your simple clock.

-First, create your HTML file and name it "index.html", and paste the code below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
</head>
<body onload="startTime()">

    <h1>Simple JS Clock</h1>
    <p id="time"></p>
    <script src="./script.js"></script>
</body>
</html>

- Next, create a CSS file in the same folder as your HTML file and name it "style.css", paste the code below, but feel free to change the style to your preferences.

  body{
  background-color:darksalmon ;
  text-align: center;
  padding: 30px;
  color: antiquewhite;
  }
  h1{
      font-size: 100px;
      font-family: 'Courier New', Courier, monospace;
      text-transform: uppercase;
  }
  p{
      font-size: 80px;
      padding: 30px;
      letter-spacing: 7px;
      font-weight: 100px;
      font-family: cursive;
  }

-Lastly, create your javascript file in the same folder and name it "script.js", and paste in the code below

 function startTime(){

var d = new Date()
var hrs =  d.getHours();

var min = d.getMinutes();

var sec =  d.getSeconds();
min = checkTime(min);
sec=checkTime(sec);

document.getElementById("time").innerHTML= hrs +":"+ min +":"+sec;
var t = setTimeout(startTime, 500);

}
function checkTime(i){
    if(i<10){
        i ="0" + i
    };
    return i;
}

NOTE: Pls ensure that both your CSS and Javascript file is properly linked to your HTML file.

That's it you have successfully created your very own clock, you can check out mine here: (https://codepen.io/Gracetoffy/pen/RwZLEPd). Thanks for reading :)

Gracetoffy's blog

Gracetoffy's blog

Web functionality: JavaScript in web development ⚙🖥

Table of contents

WAYS OF ADDING JAVASCRIPT

Creating a Simple JS Clock