Please Subscribe My YouTube Channel

Showing posts with label Javascript. Show all posts
Showing posts with label Javascript. Show all posts

Sunday, November 12, 2023

Create Stopwatch with Html, CSS & JavaScript



How To Create Stopwatch with Html, CSS & JavaScript





<!doctype html>
<html>
<head>
<title>Stop Watch</title>
<style>
#counter
{
margin:auto;
width:120px;
height:100px;
    font-family:fantasy;
font-size:80px;
border-left:14px solid red;
border-right:14px solid blue;
border-top:14px solid green;
border-bottom:14px solid black;
text-align:center;
padding:25px;
border-radius: 100%;

}
[type="button"]{padding:10px;background: green;color:white;font-size:large;font-weight: bold;}
[value="Start"]:focus{background: red;}
[value="Pause"]:focus{background: maroon;}
[value="Reset"]:focus{background: blue;}
</style>
<script>
var count=0,interval;
function increase()
{
count++;
document.getElementById("counter").innerHTML=count;
}
function start_watch()
{
interval=setInterval("increase()",1000);
}
function stop_watch()
{
clearInterval(interval);
}
function reset()
{
document.getElementById("counter").innerHTML=0;
count=0;
}
</script>
</head>
<body>
<div style="border:4px solid green;width:20%;margin-left:550px;margin-top:200px;padding:20px;border-radius:30px;">
<div id="counter">
0
</div>
<br>
<p align="center">
<input type="button" value="Start" onclick="start_watch()">
&nbsp;&nbsp;<input type="button" value="Pause" onclick="stop_watch()">
&nbsp;&nbsp;<input type="button" value="Reset" onclick="reset()">
</p>
</div>
</body>
</html>

Wednesday, November 01, 2023

How To Create Animated Login Form(O level)

How To Create Animated Login Form

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated Login Form</title>
</head>

<style>
    body {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 50px;
        font-family: sans-serif;
        overflow: hidden;
        background: linear-gradient(45deg, greenyellow, dodgerblue);
    }

    .card {
        padding: 50px;
        background-color: white;
        border-radius: 10px;
    }

    .card h1 {
        border-left: 7px solid #ffa400;
        padding: 2px 10px;
    }

    .inputbox {
        position: relative;
        height: 50px;
        width: 300px;
        margin-bottom: 50px;

    }

    .inputbox input {
        width: 100%;
        border: 2px solid black;
        padding: 10px;
        border-radius: 10px;
        font-size: 19px;
    }

    .inputbox:last-child {
        width: 50%;
        margin-bottom: 0;
    }

    .inputbox span {
        position: absolute;
        top: 14px;
        left: 20px;
        font-size: 16px;
        transition: 0.6s;
    }

    .inputbox:hover span,
    .inputbox input:focus~span,
    .inputbox input:valid~span {
        transform: translateX(-13px) translateY(-35px);
    }

    .inputbox [type="button"] {
        border: none;
        color: white;
        background-color: #ff00ff;
    }

    .inputbox:hover [type="button"] {
        background: linear-gradient(45deg, greenyellow, dodgerblue,green,red);
    }

    @media only screen and (max-width: 600px) {
        .card {
            padding: 10px;
        }

        .inputbox {
            width: 250px;
        }

        .inputbox input {
            width: 220px;
        }

        .inputbox [type="button"] {
            width: max-content;
            border-radius: 5px;
            padding: 7px 10px;
        }
    }

    .chijl {
        text-decoration: none;
        width: 40vw;
        padding: 15px;
        border-radius: 5px;
        text-align: center;
        font-size: 20px;
        color: #fff;
        background-color: #ff0000;
    }
</style>

<body>

    <div class="card">
        <h1>Login.....</h1>

        <form>

            <div class="inputbox">
                <input type="text" required>
                <span>Email</span>
            </div>

            <div class="inputbox">
                <input type="password" required>
                <span>Password</span>
            </div>

            <div class="inputbox">
                <input type="button" value="Submit">
            </div>

        </form>     


    </div>

    <a href="https://www.youtube.com/channel/UC-R0Dt24rWVEov_kzDmSLDQ" target="_chijl" class="chijl">Subscribe My You Tube Channel</a>

</body>

</html>

Sunday, October 29, 2023

        Make Calculations with Calculator

Program For Make Calculator

<!DOCTYPE html>
<html>
<head>
<title>holle student</title>

<style>
body{background-color:aquamarine;}
{box-sizing:border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing:border-box;
    }
input[type=text]
{
width:350px;
padding: 10px;
font-weight: bold;
margin-top: 20px;
border:4px solid red;
border-radius:5px;
font-size: 24px;
}
input[type=button]{
width: 89px;
padding: 10px;
font-size: 22px;
font-weight: bold;
border-radius: 5px;
callspace:25px;
 
}
#clrbtn{background: red;}
#display{background:white;}
</style>
</head>
<body>
<center><h1>ITCI Computer Hardoi</h1>
<h3>www.itcicomputerhardoi.blogspot.com</h3>
<h2>Project:- Calculator</h2>

<div class="containe"width="100px">
<h1><form name="calculator">
<input id="display"type="text"name="display"readonly><br><br>
<input class="sev"type="button"value="7"onclick="calculator.display.value+='7'">
<input class="et"type="button"value="8"onclick="calculator.display.value+='8'">
<input class="nin"type="button"value="9"onclick="calculator.display.value+='9'">
<input class="add"type="button"value="+"onclick="calculator.display.value+='+'"><br>
<input class="six"type="button"value="6"onclick="calculator.display.value+='6'">
<input class="fiv"type="button"value="5"onclick="calculator.display.value+='5'">
<input class="for"type="button"value="4"onclick="calculator.display.value+='4'">
<input class="sub"type="button"value="-"onclick="calculator.display.value+='-'"><br>
<input class="three"type="button"value="3"onclick="calculator.display.value+='3'">
<input class="two"type="button"value="2"onclick="calculator.display.value+='2'">
<input class="one"type="button"value="1"onclick="calculator.display.value+='1'">
<input class="multi"type="button"value="*"onclick="calculator.display.value+='*'"><br>
<input id="clrbtn"type="button"value="c"onclick="calculator.display.value=''">
<input class="zero"type="button"value="0"onclick="calculator.display.value+='0'">
<input class="ev"type="button"value="="onclick="calculator.display.value=eval(calculator.display.value)">
<input class="div"type="button"value="/"onclick="calculator.display.value+='/'">
</div></form></center>
<br><br>
<br><br>
</body>
</html>



-:Output Video:-





Monday, October 16, 2023

Shorthand Tips & Tricks of JavaScript

1. Assigning values to multiple variables

We can assign values to multiple variables in one line with array destructuring.

2. The Ternary operator

We can save 5 lines of code here with the ternary (conditional) operator.

3. Assigning a default value

We can use OR(||) short circuit evaluation to assign a default value to a variable in case the expected value is found falsy.

4. Remove duplicates from an Array

The Set object stores only unique elements. Therefore, we can create a Set from the given array of elements and then, convert the Set back to an array to get all unique elements.


5. AND(&&) Short circuit evaluation

If you are calling a function only if a variable is true, then you can use the AND(&&) short circuit as an alternative for this.

The AND(&&) short circuit shorthand is more useful in React when you want to conditionally render a component. For example:

6. Swap two variables

To swap two variables, we often use a third variable. We can swap two variables easily with array destructuring assignment.

7. Arrow Function


8. Template Literals

We normally use the + operator to concatenate string values with variables. With ES6 template literals, we can do it in a more simple way.

9. Multi-line String

For multiline strings, we normally use + operator with a new line escape sequence (\n). We can do it in an easier way by using backticks ( ` ).

10. Multiple condition checking

For multiple value matching, we can put all values in an array and use indexOf() method.

11. Object Property Assignment

If the variable name and object key name are the same then we can just mention the variable name in object literals instead of both key and value. JavaScript will automatically set the key same as the variable name and assign the value as the variable value.

12. String into a Number

There are built-in methods like parseInt and parseFloat available to convert a string to a number. We can also do this by simply providing a unary operator (+) in front of the string value.

13. Repeat a string multiple times

To repeat a string a specific number of times you can use a for loop. But using the repeat() method we can do it in a single line.

14. Exponent Power

We can use Math.pow() method to find the power of a number. There is a shorter syntax to do it with a double asterisk (**).

15. Double NOT bitwise operator (~~)

The double NOT bitwise operator is a substitute for Math.floor() method.

The double NOT bitwise operator approach only works for 32 bit integers i.e (2**31)-1 = 2147483647. So for any number higher than 2147483647 and less than 0, bitwise operator (~~) will give wrong results, so recommended to use Math.floor() in such case.

16. Find the max and min numbers in an array

We can use for loop to loop through each value of the array and find the max or min value. We can also use the Array.reduce() method to find the max and min number in the array.

But using the spread operator we can do it in a single line.

17. For loop

To loop through an array we normally use the traditional for loop. We can make use of the for…of loop to iterate through arrays. To access the index of each value we can use for…in loop.

We can also loop through object properties using for…in loop.


18. Merging of arrays

19. Remove properties from an object

To remove a property from an object we can use the delete operator, but to remove multiple properties at a time, we can use the Rest parameter with destructuring assignment.

20. Get character from string

21. Remove falsy values from Array

Zero (0) is considered to be a falsy value so it will be removed in both the cases. You can add an extra check for zero to keep it.

22. Create a random string token


Infotech Computer Institute (itcicomputerhardoi.blogspot.com)


Infotech Computer Institute: इंटरनेट से संबधित महत्वपूर्ण जानकारी (itcicomputerhardoi.blogspot.com)