Tuesday, March 17, 2020

Function Using Radio Buttons

CODE:

 <!DOCTYPE html>
<html lang="en-US">

<head>
    <title>Functions in JavaScript</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <style>
        *{
            padding: 10px;
        }
    </style>
    <script>
        function fun1() {
            var rd1 = document.getElementById("rd1");
            var rd2 = document.getElementById("rd2");
         
            if(rd1.checked==true){
                alert("The selected is : "+rd1.value);
            }
            else if(rd2.checked==true)
                alert("The selected is : " +rd2.value);
            else
                alert("Nothing selected");
        }
    </script>
</head>

<body>

    <h1>Select any one from below: </h1>
    <input id="rd1" name="radio1" type="radio" value="JavaScript" required></input>
    <labeL><strong>JavaScript</strong></label><br />
 
    <input id="rd2" type="radio" name="radio1" value="Bootstrap" required>
    <labeL><strong>Bootstrap</strong></label><br />

    <button onclick="fun1()" id="btn1">Click Me</button>

</body>
</html>

 OUTPUT:



at No comments:

Friday, March 13, 2020

Simple JavaScript Functions

CODE:

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <title>Addition</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

        <style>
            .container{
                background-color: buttonface;
                height: auto;
                border-radius: 30px;
                padding: 15px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <h1>This is simple Addition.</h1>
            <button type="button" onclick="forSum()">Click for Sum</button>
            <h2 id="demo1"></h2>
            <br />
            <h1>The current date is:</h1>
            <button type="button" onclick="document.getElementById('demo2').innerHTML=Date()">Click for Date</button>
            <h2 id="demo2"></h2>
        </div>
        <script>
            function forSum() {
                var a = 5, b = 4;
                var sum = a + b;
                document.getElementById('demo1').innerHTML = "Sum is : " + sum;
            }
        </script>
    </body>
</html>

OUTPUT:
at No comments:

Thursday, March 5, 2020

Buttons in Bootstrap

CODE:

 <!DOCTYPE html>
<html lang="en-US">
    <head>
        <title>Buttons in Bootstrap</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="container">
            <button type="button" class="btn btn-primary">Primary</button>
            <button type="button" class="btn btn-secondary">Secondary</button>
            <button type="button" class="btn btn-success">Success</button>
            <button type="button" class="btn btn-danger">Danger</button>
            <button type="button" class="btn btn-warning">Warning</button>
            <button type="button" class="btn btn-info">Info</button>
            <button type="button" class="btn btn-light">Light</button>
            <button type="button" class="btn btn-dark">Dark</button>
            <button type="button" class="btn btn-link">Link</button><br /><br />

            <button type="button" class="btn btn-primary btn-lg btn-block">Block level Primary button</button>
            <button type="button" class="btn btn-secondary btn-lg btn-block">Block level secondary button</button>
            <br /><br />
            <a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
            <a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Secondary Link</a>

        </div>

    </body>

</html>

OUTPUT:

at No comments:

Tuesday, March 3, 2020

Container Class in Bootstrap

CODE:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Container class in bootstrap</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
        <!-- jQuery library -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <!-- Popper JS -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
        <!-- Latest compiled JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

        <style>
            .container{
                background-color: yellow;
                color: red;
                font-size: 20px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-sm-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
                    has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
                    of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also
                    the leap into electronic typesetting, remaining essentially unchanged.</div>
                <div class="col-sm-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
                    has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
                    of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also
                    the leap into electronic typesetting, remaining essentially unchanged.</div>
                <div class="col-sm-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
                    has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
                    of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also
                    the leap into electronic typesetting, remaining essentially unchanged.</div>
                <div class="col-sm-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
                    has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
                    of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also
                    the leap into electronic typesetting, remaining essentially unchanged.</div>
                <div class="col-sm-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
                    has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
                    of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also
                    the leap into electronic typesetting, remaining essentially unchanged.</div>
                <div class="col-sm-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
                    has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
                    of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also
                    the leap into electronic typesetting, remaining essentially unchanged.</div>
            </div>
        </div>
    </body>
</html>

OUTPUT:

at No comments:

Monday, March 2, 2020

JavaScript Certificate SoloLearn


at No comments:
Subscribe to: Posts (Atom)

Simple Example of div tag in html with css

HTML and CSS Code : <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <m...

  • first-angular Project
    Output :  I have created "first-angular" name project and in this project have a 3 components named as header, footer and section ...
  • HTML Basic Tags
    Program: <!DOCTYPE html> <html>     <head>         <title>All Tags in HTML</title>     </head>  ...