Friday, September 29, 2023

Digital Clock using html , java , CSS

 <!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
   body {
    background-color: rgb(0, 0, 0);
   }
   h{
    color: white;
   }
   .clock {
    background-color: rgb(251, 237, 237);
    border: 10px solid red;
    border-radius: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
     transform: translateX(-50%) translateY(-50%);
    color: rgb(6, 174, 241);
    font-size: 60px;
    letter-spacing: 7px;
   }
    </style>
</head>
<body>
<h1><b><u><center>Digital Clock</center></u></b></h1>
    <div id="MyClockDisplay" class="clock" onload="showTime()"></div>

</body>
<script>
function showTime()
{
    var date = new Date();
    var h = date.getHours(); // 0 - 23
    var m = date.getMinutes(); // 0 - 59
    var s = date.getSeconds(); // 0 - 59
    var session = "AM";
    if(h==0){
    h=12;
}
   if(h > 12){
    h = h - 12;
    session = "PM";
   }
h = h < 10 ? "0" + h : h;
m = m < 10 ? "0" + m : m;
s = s < 10 ? "0" + s : s;

var time = h +":" + m + ":" + s + " " + session;
document.getElementById("MyClockDisplay").innerText = time;
document.getElementById("MyClockDisplay").textContent = time;

   setTimeout(showTime, 1000);
}

 showTime();
</script>
</html>
at No comments:

Thursday, September 28, 2023

Making Calculator with javascript

 <!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
initial-scale=1.0">
    <title>Document</title>
 <style>
    div{
    border:5px solid rgb(207, 32, 32);
    display: inline-block;
}
 </style>
</head>
<body >
    <center>
        <h1 style="color: black;">Calculater</h1>
    <div>
    <input type="text" id="a" style="background-color: lightblue; width: 100px;">
    <button  onclick="clear()" style="background-color: lightred;">C</button>
<br><br>
    <button onclick="num(7)">7</button>
    <button onclick="num(8)">8</button>
    <button onclick="num(9)">9</button>
    <button onclick="num('%')" style="background-color: pink;">%</button>
<br><br>
    <button onclick="num(4)">4</button>
    <button onclick="num(5)">5</button>
    <button onclick="num(6)">6</button>
    <button onclick="num('*')" style="background-color: pink;">*</button>
<br><br>
    <button onclick="num(1)">1</button>
    <button onclick="num(2)">2</button>
    <button onclick="num(3)">3</button>
    <button onclick="num('-')" style="background-color: pink;">-</button>
<br><br>
    <button onclick="num(0)">0</button>
    <button onclick="num(.)">.</button>
    <button onclick="equal()" style="background-color: darkcyan;" >=</button>
    <button onclick="num('+')" style="background-color: pink;">+</button>
</div>
</center>
</body>
<script>
     function num(val)
    {
    document.getElementById("a").value+=val
    }
    function clear()
    {
        document.getElementById("a").value=""
    }
    function equal()
    {
        var cal=document.getElementById("a").value
        var c=eval(cal)
        document.getElementById("a").value=c
    }
   
</script>
</html>
at No comments:

Monday, September 25, 2023

Class Tag in Java script

 <!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
.a{
    background-color: pink;
}
.s{
  text-align:center;
    border:2px solid lightgoldenrodyellow;
    border-radius:100px;
   border-width: 100px;
   border-height:100px;
  background:repeating-linear-gradient(red, orange, yellow);
}
    </style>
</head>
<body>
    <i class="a">Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Blanditiis eum id ipsum quod. Aspernatur obcaecati qui earum? Rerum
reprehenderit quis alias, beatae est accusantium? Magnam sit facilis
provident doloribus unde!</i>
<br>
<b class="a">Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Blanditiis eum id ipsum quod. Aspernatur obcaecati qui earum? Rerum
reprehenderit quis alias, beatae est accusantium? Magnam sit facilis
provident doloribus unde
</b>
<p class="s">sun</p>

</body>
</html>
at No comments:

Changing CSS with button tag

 <!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>
<button onclick="Redtheme()">Red theme</button>
<button onclick="Bluetheme()">Blue theme</button>
<button onclick="Increasefont()">Increase font</button>
<button onclick="Decreasefont()">Decrease font</button>
<button onclick="Textcolor()">Text color</button>

    <p id="a" style="background-color: beige; border: 2px
solid black; border-radius:groove;" >Lorem ipsum dolor sit
amet consectetur adipisicing elit. Eveniet, consequatur
veritatis consequuntur in dolorum repudiandae eos. Quos
possimus voluptas voluptatibus! Lorem ipsum, dolor sit
amet consectetur adipisicing elit. Qui optio molestias
laboriosam, voluptas cupiditate minima ad a fuga aperiam
excepturi neque, natus eum doloribus, alias rerum totam
voluptates consequatur. Amet?</p>
</body>
<script>
function Redtheme()
{
    document.getElementById("a").style.backgroundcolor="red"
}
function Bluetheme()
{
    document.getElementById("a").style.backgroundcolor="blue"
}
function Increasefont()
{
    document.getElementById("a").style.fontSize="30px"
}
function Decreasefont()
{
    document.getElementById("a").style.fontSize="20px"
}
function Textcolor()
{
    document.getElementById("a").style.color="red"
}
</script>
</html>
at No comments:

Sunday, September 24, 2023

Age Calculation

 <!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            background-color: pink;
            border: 5px solid rgb(14, 14, 228);
            width:500px;
        }
        h1{
            background-color: black;
            border: 2px solid blue;
            display: inline-block;
            color: beige;
         
        }
        h2{
            background-color: black;
            border: 2px solid blue;
            display: inline-block;
            color: beige;
        }
    </style>
</head>
<body>
<div>
    <center>
   <h1><b>Age Calculator</b></h1><br>
    <h2>Your Birthday Year</h2> <br>
    <input type="text" id="a" style="background-color: aquamarine;" >
    <br>
    <h2>Current Year</h2> <br>
    <input type="text" id="b" style="background-color: aquamarine;" ><br><br>
    <button style="background-color: aquamarine;" onclick="fun()">Enter to get your age</button> <br>
    <h2>Your Age</h2><br>
    <input type="text" id="c" style="background-color: aquamarine;" ><br>
</div>
</p>
</body>
<script>
    function fun()
    {

        var birthyear=parseInt(document.getElementById("a").value)
        var currentyear=parseInt(document.getElementById("b").value)
       var result=currentyear-birthyear
        document.getElementById("c").value=result
      // var a=currentyear
      //  var b=birthyear
       // var age=currentyear-birthyear
    // var a=parseInt document.getElementById("a").value
    // var b=parseInt document.getElementById("b").value
    // var i=parseInt document.getElementById("c"+age).value
}


</script>
</html>
at No comments:

java script (calcaulation)

 <!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>
    <center>
    <div>
    Enter first num :&nbsp;<input type="text" id="f" style="background-color:
aqua;"><br><br>
    Enter secong num : <input type="text" id="g"  style="background-color:
aqua;"> <br><br>
    Enter a num for square : <input type="text" id="a"  style="background-color:
aqua;"> <br><br>
    Enter a num for cube : <input type="text" id="b"  style="background-color:
aqua;"> <br><br>
    <button onclick="add()"  style="background-color: aqua;">Add</button> <br><br>
    <button onclick="sub()"  style="background-color: aqua;">Sub</button><br><br>
    <button onclick="mul()"  style="background-color: aqua;">Mul</button><br><br>
    <button onclick="div()"  style="background-color: aqua;">Div</button><br><br>
    <button onclick="square()"  style="background-color: aqua;">Square</button><br>
    <button onclick="cube()"  style="background-color: aqua;">Cube</button><br><br>
   </div>
</center>
</body>
<script>
   var f=0
   var g=0
    function add()
    {
       var a=parseInt(document.getElementById("f").value)
      var b=parseInt(document.getElementById("g").value)
        document.write("addition :"+(a+b))
    }
    function sub()
    {
       var a=parseInt(document.getElementById("g").value)
       var b=parseInt(document.getElementById("f").value)
        document.write("subtration:"+(a-b))
    }
    function mul()
    {
       var a=parseInt(document.getElementById("f").value)
       var b=parseInt(document.getElementById("g").value)
        document.write("multiply :"+(a*b))
    }
    function div()
    {
       var a=parseInt(document.getElementById("f").value)
       var b=parseInt(document.getElementById("g").value)
        document.write("divide :"+(a/b))
    }
    function square()
    {
       var a=parseInt(document.getElementById("a").value)
        document.write("square :"+(a*a))
    }
    function cube()
    {
       var a=parseInt(document.getElementById("b").value)
        document.write("cube :"+(a*a*a))
    }
</script>
</html>
at No comments:

Calculation

Document
Enter first num : 

Enter secong num :

Enter a num for square :

Enter a num for cube :













at No comments:
Subscribe to: Posts (Atom)

Digital Clock using html , java , CSS

  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < met...

  • Tech
     Here are some pictures
  • Declare Variable in Java-Script
    Declare Variable in Java-Script To declare variable in java-script. The term " var " is used. Syntax: var variable name Code:...
  • Header Tag in HTML
    Document Header Tag in HTML Header tag is used for introduction of your content and define top section of ...