Posts

Showing posts from June, 2020

JavaScript Advance method program

Image
                          Rajeev Tiwari (1)  <!DOCTYPE html> <html> <body> <h1 id="id1">My Heading 1</h1> <button type="button" onclick="document.getElementById('id1').style.color = 'red'"> Click Me!</button> </body> </html> (2) <!DOCTYPE html> <html> <body> <h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1> </body> </html> (3)  <!DOCTYPE html> <html> <body> <h1 onclick="changeText(this)">Click on this text!</h1> <script> function changeText(id) {   id.innerHTML = "Ooops!"; } </script> </body> </html> (4)  <!DOCTYPE html> <html> <body> <div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:#D94A38;w

JavaScript Switch program

Image
                          Rajeev Tiwari (1) <!DOCTYPE html> <html> <body> <p id="demo"></p> <script> var day; 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> (2) <!DOCTYPE html> <html> <body> <h2>JavaScript switch</h2> <p id="demo"></p> <script> var text; switch (new Date().getDay()) {   case 6:     text = "Today is Saturday";     break;   case 0

JavaScript advance program

Image
                          Rajeev Tiwari (1) <!DOCTYPE html> <html> <body> <h2>JavaScript Strings</h2> <p>You can use quotes inside a string, as long as they don't match the quotes surrounding the string.</p> <p id="demo"></p> <script> var answer1 = "It's alright"; var answer2 = "He is called 'Johnny'"; var answer3 = 'He is called "Johnny"';  document.getElementById("demo").innerHTML = answer1 + "<br>" + answer2 + "<br>" + answer3;  </script> </body> </html> (2) <!DOCTYPE html> <html> <body> <h2>JavaScript String Properties</h2> <p>The length property returns the length of a string:</p> <p id="demo"></p> <script> var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; document.getElementById("demo&qu

JavaScript Oprater program

Image
                          Rajeev Tiwari Math program (1) <!DOCTYPE html> <html> <body> <h2>JavaScript Statements</h2> <p>JavaScript statements are separated by semicolons.</p> <p id="demo1"></p> <script> var a, b, c; a = 5; b = 6; c = a + b; document.getElementById("demo1").innerHTML = c; </script> </body> </html> (2) <!DOCTYPE html> <html> <body> <h2>JavaScript Statements</h2> <p>JavaScript code blocks are written between { and }</p> <button type="button" onclick="myFunction()">Click Me!</button> <p id="demo1"></p> <p id="demo2"></p> <script> function myFunction() {   document.getElementById("demo1").innerHTML = "Hello Dolly!";   document.getElementById("demo2").innerHTML = &qu

JavaScript program

Image
                          Rajeev Tiwari (1) <!DOCTYPE html> <html> <body> <h2>My First JavaScript</h2> <button type="button" onclick="document.getElementById('demo').innerHTML = Date()"> Click me to display Date and Time.</button> <p id="demo"></p> </body> </html>  On Light Off Light program (2) <!DOCTYPE html> <html> <body> <h2>What Can JavaScript Do?</h2> <p>JavaScript can change HTML attribute values.</p> <p>In this case JavaScript changes the value of the src (source) attribute of an image.</p> <button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button> <img id="myImage" src="pic_bulboff.gif" style="width:100px"> <button onclick="document.getElementById

HTML icon Align program

Image
                          Rajeev Tiwari (1).  <!DOCTYPE html> <html> <head> <title>Font Awesome Icons</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <h1>fa fa-ambulance</h1> <i class="fa fa-ambulance"></i> <i class="fa fa-ambulance" style="font-size:24px"></i> <i class="fa fa-ambulance" style="font-size:36px;"></i> <i class="fa fa-ambulance" style="font-size:48px;color:red"></i> <br> <p>Used on a button:</p> <button style="font-size:24px">Button <i class="fa fa-ambulance"></i></button> <p>Unicode:</p> <i sty

HTML Line Align program

Image
                          Rajeev Tiwari (1). <!DOCTYPE html> <html> <head> <title>Font Awesome Icons</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://raju.css"> </head> <body> <h1>fa fa-align-center</h1> <i class="fa fa-align-center"></i> <i class="fa fa-align-center" style="font-size:24px"></i> <i class="fa fa-align-center" style="font-size:36px;"></i> <i class="fa fa-align-center" style="font-size:48px;color:red"></i> <br> <p>Used on a button:</p> <button style="font-size:24px">Button <i class="fa fa-align-center"></i></button> <p>Unicode:</p> <i style="font-size:24px" class="fa"

HTML Battery Program

Image
                          Rajeev Tiwari (1). <!DOCTYPE html> <html> <head> <title>Font Awesome 5 Icons</title> <meta name='viewport' content='width=device-width, initial-scale=1'> <script src='https://kit.fontawesome.com/a076d05399.js'></script> <!--Get your own code at fontawesome.com--> </head> <body> <h1>fas fa-battery-empty</h1> <i class='fas fa-battery-empty'></i> <i class='fas fa-battery-empty' style='font-size:24px'></i> <i class='fas fa-battery-empty' style='font-size:36px'></i> <i class='fas fa-battery-empty' style='font-size:48px;color:red'></i> <br> <p>Used on a button:</p> <button style='font-size:24px'>Button <i class='fas fa-battery-empty'></i></button> <p>Unicode:</p> <

HTML Icons program

Image
                          Rajeev Tiwari Font Awesome 5 Icons To use the Free Font Awesome 5 icons, go to font and sign in to get a code to use in your web pages. Read more about how to get started with Font Awesome in our font chapter. (1). <!DOCTYPE html> <html> <head> <title>Font Awesome Icons</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://kit.fontawesome.com/a076d05399.js"></script> <!--Get your own code at fontawesome.com--> </head> <body> <p>Some Font Awesome icons:</p> <i class="fas fa-band-aid"></i> <i class="fas fa-cat"></i> <i class="fas fa-dragon"></i> <i class="far fa-clock"></i> <i class="fas fa-clock"></i> <p>Styled Font Awesome icons (size, color, and