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>

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>

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>

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>

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>

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>

Calculation

Document

Enter first num :

Enter secong num :

Enter a num for square :

Enter a num for cube :

Sunday, September 17, 2023

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: < head> < title> < /head> < body> < /body> < script> var number=100 document.write(" The number is " + number) < /script> < /html> Output: The number is 100 What is concatenation in Java-script? It is used for combining two or more strings to create a new string. It allows you to join text or string variables to create a new string. In java-script the you can concatenate string using the " + " operator. Here is the example to how's it woks: < !DOCTYPE html> < head> < title> < /head> < body> < /body> < script> var num1=10 var num2=20 document.write(" First number is " +num1+ " Second number is " +num2) < /script> < /html> In this example num1 and num2 are concatenated. Output: First number is 10 Second number is 20. How to take data from the user in Java-script? To take data from the user the term "prompt" is used. Code: < head> < title> < /head> < body> < /body> < script> var num1=prompt("enter first number") var num2=prompt("enter second number") document.write(" First number is " +num1+ " Second number is " +num2) < /script> < /html> This code will take 2 numbers from the user.

Java Script

JAVA-SCRIPT Java-script is widely used programming language used for web developers.It is object-oriented programming language used my developers to make wed pages interactive. It is used for creating dynamically updated content. Java-script is used for animated graphics. Syntax: < head> < title> < /head> < body> < script> document.write(" enter your text here ") < /script> < /html> document.write(" ") is used in java-script for printing text on screen. This term is written between . Code: < head> < title> < /head> < body> < /body> < script> document.write(" Hello Coding ") < /script> < /html> Output: Hello Coding Java script

Hover in CSS

Hover in CSS It is commonly used in CSS to apply styles to elements when the user hovers their mouse over it.Hover can be used on all the terms but, not only on links. Is hover is a CSS property? The term "hover" is not a CSS property. It is a pseudo-class in CSS, used for applying styles to elements when user hovers or point their mouse over them. Syntax: Code: In this code I applied hover pseudo-class to anchor tag by assigning it green color, when the user hovers their mouse text color changes it to green.

Monday, September 11, 2023

Document

Saturday, September 9, 2023

Tech

Advantages And Disadvantages Of Technology :

Advantages of Technology	Disadvantages of Technology
1. Improved communication and connectivity	1. Dependence and addiction
2. Increased efficiency and productivity	2. Job loss and unemployment
3. Enhanced learning and education	3. Isolation and loneliness

Tech

Here are some pictures

Tech

Technology

Technology refers to the means that humans use to obtain resources and modify the world around them. Function, related to technology, refers to how tools, equipment, and facilities were used by humans in the past. Human activity is a generic term for the study of the function and use of space.

Types of Technology

Artificial Intelligence.
Information Technology. ...
Space Technology. ...
Entertainment Technology. ...
Medical Technology. ...
Operational Technology. ...
Assistive Technology. ...
Communication Technology.

What is tehnology today:

Artificial intelligence, the Internet of Things, augmented and virtual reality, blockchain,

5G networks, quantum computing, biotechnology, robots, the cloud, and cybersecurity

are just some of the most significant technological breakthroughs that will alter our

world in the next years.

Friday, September 1, 2023

CSS Properties And Inspect Element

Document

CSS Properties

In this lecture we will study about properties of CSS, that define how HTML

element should be displayed on web-page and how we make our web-page layout defined and manageable. Here are some CSS properties:
border: It is used for defining the border around the element.
syntax: border: 5px solid black;
border-width: It is used for setting width of the border around the element.
Syntax: border-width: 10px;
border-style: It is used for setting style of border, in which style the border will appear.
Syntax: border-style:solid;
border-color: It is used for changing the color of the border around the HTML element.
syntax: border-color: 5px solid black;
border-radius: It is used for making border corners round, giving them round
shape.You can make any side of the border round just by assigning the exact position.
Syntax: border-radius: 39px;

You can gradually increase the value according to your preference.
Width and Height: This property sets the dimensions of the element.
Syntax: width: 50px;
height: 70px;
border-top-right-radius: It is used for setting border style, width and
radius on the right side of the border Syntax: border-top-right-radius: 20px;
border-top: 20px solid yellow;
border-top-left-radius: It is used for setting border style, width and radius
on the left side of the border Syntax: border-top-left-radius: 10px;
border-left: 10px solid green;
border-bottom: Specifies the color of an element's border bottom.
Syntax: border-bottom: 20px solid purple;
border-right: Sets the width of an element's border right.
Syntax: border-right: 30px solid red;
Inspect Element
Inspect Element feature in web browsers like Google Chrome, Mozilla Firefox,
or Microsoft Edge. You can make temporary changes in the web-page by using inspect element. The changes will lost if you reload and
refresh the page or when the page return to its original state. How to open the inspect element?
Place your cursor on the area of the web page you want to inspect. Right-click
on it, and in the context menu that appears, select either "Inspect" or "Inspect Element." This will open the browser's Developer Tools
panel, or you can simply press ctrl+shift+I you can open the inspect element.

Header Tag in HTML

Document

Header Tag in HTML Header tag is used for introduction of your content and define top section of your web-page or for navigational links, logos, icons and images. A header tag can nest in another header tag.

Syntax:
< header>
data should be here.
< /header>.
Code:
< !DOCTYPE html>
< html>
< head>
< title>My Website
< /head>
< body>
< header>

My Website

This is the header of your web-page

< /header>
< /body>
< /html>

web wizard

Pages

Friday, September 29, 2023

Digital Clock using html , java , CSS

Thursday, September 28, 2023

Making Calculator with javascript

Monday, September 25, 2023

Class Tag in Java script

Changing CSS with button tag

Sunday, September 24, 2023

Age Calculation

java script (calcaulation)

Calculation

Sunday, September 17, 2023

Declare Variable in Java-Script

Java Script

Hover in CSS

Monday, September 11, 2023

Saturday, September 9, 2023

Tech

Tech

Tech

Friday, September 1, 2023

CSS Properties And Inspect Element

CSS Properties

Header Tag in HTML

My Website

Digital Clock using html , java , CSS

Report Abuse

Labels