Untitled Page

1. html tags

<!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 {
            font-family: Arial;
            background-color: #f2f2f2;
        }
        .container {
            border: 2px solid black;
            padding: 15px;
            margin: 20px;
            background-color: white;
        }
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
            padding: 8px;
        }
        th {
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="container">

        
        <h1>Welcome to HTML Demo Page</h1>
        <h3>This page shows basic HTML tags</h3>

        
        <img src="https://images.unsplash.com/photo-1773332585760-8b5dc6079a74?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Sample Image">

        <br><br>

        
        <a href="https://www.google.com" target="_blank">Visit Google</a>

        <br><br>

        
        <table>
            <tr>
                <th>Name</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>Kaif</td>
                <td>20</td>
            </tr>
            <tr>
                <td>Rahul</td>
                <td>22</td>
            </tr>
        </table>

        <br>

        <button onclick="showMessage()">Click Me</button>

    </div>
     <script>
        function showMessage() {
            alert("Button clicked! JavaScript is working.");
        }
    </script>
</body>
</html>


2. light switch 


<!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 style="text-align:center;">

    <h2>Bulb ON/OFF using Single Button</h2>

    <img id="bulb"
         src="https://www.w3schools.com/js/pic_bulboff.gif"
         width="150">

    <br><br>

    <button onclick="toggleBulb()">Switch</button>
    <script>
        let isOn = false;

        function toggleBulb() {
            let bulb = document.getElementById("bulb");

            if (isOn) {
                bulb.src = "https://www.w3schools.com/js/pic_bulboff.gif";
                isOn = false;
            } else {
                bulb.src = "https://www.w3schools.com/js/pic_bulbon.gif";
                isOn = true;
            }
        }
    </script>

</body>
</html>

3. login signup with username password

<!DOCTYPE html>
<html>
<head>
    <title>Login Page</title>

    <style>
        body {
            font-family: Arial;
            background-color: #f2f2f2;
            text-align: center;
        }
        .login-box {
            background: white;
            padding: 20px;
            margin: 100px auto;
            width: 300px;
            border-radius: 10px;
            box-shadow: 0px 0px 10px gray;
        }
        input {
            width: 90%;
            padding: 8px;
            margin: 10px 0;
        }
        button {
            padding: 8px 15px;
            margin: 5px;
        }
    </style>

    <script>
        function login() {
            // Redirect to new page
            window.location.href = "home.html";
        }

        function signup() {
            alert("Signup button clicked!");
        }
    </script>
</head>

<body>

    <!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 {
            font-family: Arial;
            background-color: #f2f2f2;
            text-align: center;
        }
        .login-box {
            background: white;
            padding: 20px;
            margin: 100px auto;
            width: 300px;
            border-radius: 10px;
            box-shadow: 0px 0px 10px gray;
        }
        input {
            width: 90%;
            padding: 8px;
            margin: 10px 0;
        }
        button {
            padding: 8px 15px;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div class="login-box">
        <h2>Login Page</h2>

        <input type="text" placeholder="Enter Username">

        
        <input type="password" placeholder="Enter Password">

        <br>

        
        <button onclick="login()">Login</button>
        <button onclick="signup()">Signup</button>
    </div>
    <script>
        function login() {
            
            window.location.href = "quiz.html";
        }

        function signup() {
            alert("Signup button clicked!");
        }
    </script>
</body>
</html>

</body>
</html>


4. form

<!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 {
            font-family: Arial;
            background-color: #f2f2f2;
        }
        .form-box {
            width: 400px;
            margin: 50px auto;
            padding: 20px;
            background: white;
            border-radius: 10px;
            box-shadow: 0px 0px 10px gray;
        }
        input, textarea, select {
            width: 100%;
            padding: 8px;
            margin: 8px 0;
        }
        button {
            padding: 10px;
            width: 100%;
            background-color: blue;
            color: white;
            border: none;
        }
    </style>
</head>
<body>
    <div class="form-box">
        <h2>Registration Form</h2>

        <form>

            
            <label>First Name:</label>
            <input type="text" placeholder="Enter First Name">

            
            <label>Last Name:</label>
            <input type="text" placeholder="Enter Last Name">

            
            <label>Email:</label>
            <input type="email" placeholder="Enter Email">

            
            <label>Password:</label>
            <input type="password" placeholder="Enter Password">

            
            <label>Upload Image:</label>
            <input type="file">

            
            <label>Address:</label>
            <textarea placeholder="Enter your address"></textarea>

            
            <label>Select Date:</label>
            <input type="date">

            
            <label>Gender:</label><br>
            <input type="radio" name="gender"> Male
            <input type="radio" name="gender"> Female
            <input type="radio" name="gender"> Other

            <br><br>

            
            <label>Date of Birth:</label>
            <input type="date">

            <br>

            
            <button type="submit">Submit</button>

        </form>
    </div>
</body>
</html>


5. math


<!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 {
            font-family: Arial;
            background-color: #f2f2f2;
            text-align: center;
        }
        .box {
            background: white;
            width: 300px;
            margin: 100px auto;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0px 0px 10px gray;
        }
        input {
            width: 80%;
            padding: 8px;
            margin: 10px;
        }
        button {
            padding: 8px 15px;
            margin: 5px;
        }
        .result {
            margin-top: 15px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="box">
        <h2>Math Calculator</h2>

        <input type="number" id="num1" placeholder="Enter first number">
        <input type="number" id="num2" placeholder="Enter second number">

        <br>

        <button onclick="calculate()">Calculate</button>

        <div class="result" id="addResult"></div>
        <div class="result" id="mulResult"></div>
    </div>
    <script>
        function calculate() {
            let a = parseFloat(document.getElementById("num1").value);
            let b = parseFloat(document.getElementById("num2").value);

            let addition = a + b;
            let multiplication = a * b;

            document.getElementById("addResult").innerHTML = "Addition: " + addition;
            document.getElementById("mulResult").innerHTML = "Multiplication: " + multiplication;
        }
    </script>
</body>
</html>


6. name concatenation

<!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 {
            font-family: Arial;
            background-color: #f2f2f2;
            text-align: center;
        }
        .box {
            background: white;
            width: 300px;
            margin: 100px auto;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0px 0px 10px gray;
        }
        input {
            width: 80%;
            padding: 8px;
            margin: 10px;
        }
        button {
            padding: 8px 15px;
        }
        .result {
            margin-top: 15px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="box">
        <h2>Name Concatenation</h2>

        <input type="text" id="firstName" placeholder="Enter First Name">
        <input type="text" id="lastName" placeholder="Enter Last Name">

        <br>

        <button onclick="combineName()">Show Full Name</button>

        <div class="result" id="result"></div>
    </div>
    <script>
        function combineName() {
            let first = document.getElementById("firstName").value;
            let last = document.getElementById("lastName").value;

            let fullName = first + " " + last;

            document.getElementById("result").innerHTML =
                "Full Name: " + fullName;
        }
    </script>
</body>
</html>


7. quizz

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quiz App</title>
    <style>
        body {
    font-family: Arial;
    background: #f4f4f4;
    text-align: center;
    margin-top: 50px;
    }
    .quiz-container {
    background: white;
    padding: 20px;
    width: 400px;
    margin: auto;
    border-radius: 10px;
    }
    button {
    margin-top: 10px;
    padding: 10px;
    cursor: pointer;
    }
    button:hover {
    background: #2980b9;
    transform: scale(1.05);
    }
    button.selected {
    background: #1fa41f; 
    transform: scale(1.05);
    }


    </style>
</head>
<body>
    <div class="quiz-container">
    <h2 id="question">Question text</h2>
    <div id="answers"></div>
    <button onclick="nextQuestion()">Next</button>
</div>
<script>
    const quizData = [
    {
        question: "What is JavaScript?",
        answers: ["Programming Language", "Database", "Operating System"],
        correct: 0
    },
    {
        question: "Which keyword declares a variable?",
        answers: ["var", "int", "string"],
        correct: 0
    },
    {
        question: "Which company developed JavaScript?",
        answers: ["Microsoft", "Netscape", "Google"],
        correct: 1
    }
];

let currentQuestion = 0;
let score = 0;

function loadQuestion() {
    const q = quizData[currentQuestion];
    document.getElementById("question").innerText = q.question;

    const answersDiv = document.getElementById("answers");
    answersDiv.innerHTML = "";

    q.answers.forEach((ans, index) => {
        const btn = document.createElement("button");
        btn.innerText = ans;
        btn.onclick = () => selectAnswer(index);
        answersDiv.appendChild(btn);
    });
}

function selectAnswer(index) {

     const buttons = document.querySelectorAll("#answers button");

    
    buttons[index].classList.add("selected");
    if (index === quizData[currentQuestion].correct) {
        score++;
    }
}

function nextQuestion() {
    currentQuestion++;
    if (currentQuestion < quizData.length) {
        loadQuestion();
    } else {
        document.querySelector(".quiz-container").innerHTML =
            "<h2>Your Score: " + score + "/" + quizData.length + "</h2>";
    }
}

loadQuestion();

</script>
</body>
</html>


8. image slider


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quiz App</title>
    <style>
        body {
        font-family: Arial;
        text-align: center;
        margin-top: 50px;
        background: #f4f4f4;
        }
        .slider {
        width: 600px;
        margin: auto;
        }
        img {
        width: 100%;
        height: 300px;
        border-radius: 10px;
        }
        .buttons {
        margin-top: 10px;
        }
        button {
        padding: 10px 15px;
        margin: 5px;
        cursor: pointer;
        border: none;
        background: #333;
        color: white;
        border-radius: 5px;
        }

    </style>
</head>
<body>
    <div class="slider">
    <img id="slide" src="https://picsum.photos/id/1015/600/300">
    <div class="buttons">
        <button onclick="prevSlide()"> Prev</button>
        <button onclick="nextSlide()">Next </button>
    </div>
</div>
<script>
    const images = [
    "https://picsum.photos/id/1015/600/300",
    "https://picsum.photos/id/1016/600/300",
    "https://picsum.photos/id/1018/600/300",
    "https://picsum.photos/id/1020/600/300"
    ];
    let index = 0;
    function showSlide() {
    document.getElementById("slide").src = images[index];
    }
    function nextSlide() {
    index = (index + 1) % images.length;
    showSlide();
    }
    function prevSlide() {
    index = (index - 1 + images.length) % images.length;
    showSlide();
    }

    setInterval(nextSlide, 3000);
    </script>
</body>
</html>


9. dom


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quiz App</title>
    <style>
    #container{
    width : 400px;
    height: 400px;
    position: relative;
    background: yellow;

    
    }
    #animate{
    width: 50px;
    height: 50px;
    position: absolute;
    background-color: red;

    }

    </style>
</head>
<body>
    <p>
        <button onclick="myMove()">
            click me!
        </button>
    </p>
    <div id="container">
        <div id="animate">

        </div>
    </div>
<script>
    function myMove(){
    let id = null;
    const elem = document.getElementById("animate");
    let pos = 0;
    clearInterval(id);
    id = setInterval(frame, 5);
    function frame(){
        if(pos == 350){
            clearInterval(id);

        }
        else{
            pos++;
            elem.style.top=pos + "px";
            elem.style.left=pos + "px";

        }
    }

}
</script>
</body>
</html>