Js

Current date and time

 <!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Current Date and Time</title>

    <style>

        body {

            font-family: Arial, sans-serif;

            display: flex;

            justify-content: center;

            align-items: center;

            height: 100vh;

            margin: 0;

            background-color: #f4f4f4;

        }

        .datetime-container {

            text-align: center;

            background-color: #fff;

            padding: 20px;

            border: 1px solid #ddd;

            box-shadow: 0 2px 10px rgba(0,0,0,0.1);

        }

        h1 {

            margin: 0 0 20px 0;

        }

        p {

            font-size: 1.5em;

            margin: 0;

        }

    </style>

</head>

<body>


    <div class="datetime-container">

        <h1>Current Date and Time</h1>

        <p id="datetime"></p> <!-- This paragraph will display the current date and time -->

    </div>


    <script>

        function updateDateTime() {

            // Create a new Date object

            let now = new Date();


            // Format the date and time

            let date = now.toLocaleDateString();  // Example: "3/6/2025"

            let time = now.toLocaleTimeString();  // Example: "10:30:15 AM"

            

            // Combine date and time into one string

            let dateTime = `${date} - ${time}`;

            

            // Display the result in the paragraph with id "datetime"

            document.getElementById("datetime").innerHTML = dateTime;

        }


        // Call updateDateTime() once when the page loads

        updateDateTime();


        // Set the function to run every 1 second (1000 milliseconds) to update the time dynamically

        setInterval(updateDateTime, 1000);

    </script>


</body>

</html>

Calculator

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Calculator</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f4f4f4;
        }
        .calculator {
            background-color: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        input[type="text"] {
            width: 100%;
            padding: 10px;
            font-size: 1.5em;
            margin-bottom: 10px;
            text-align: right;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        .buttons {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
        }
        .buttons button {
            padding: 20px;
            font-size: 1.5em;
            border: 1px solid #ccc;
            border-radius: 5px;
            cursor: pointer;
        }
        .buttons button:hover {
            background-color: #f1f1f1;
        }
    </style>
</head>
<body>

    <div class="calculator">
        <input type="text" id="display" disabled>
        <div class="buttons">
            <button onclick="appendValue('7')">7</button>
            <button onclick="appendValue('8')">8</button>
            <button onclick="appendValue('9')">9</button>
            <button onclick="clearDisplay()">C</button>
            
            <button onclick="appendValue('4')">4</button>
            <button onclick="appendValue('5')">5</button>
            <button onclick="appendValue('6')">6</button>
            <button onclick="appendValue('+')">+</button>
            
            <button onclick="appendValue('1')">1</button>
            <button onclick="appendValue('2')">2</button>
            <button onclick="appendValue('3')">3</button>
            <button onclick="appendValue('-')">-</button>
            
            <button onclick="appendValue('0')">0</button>
            <button onclick="appendValue('.')">.</button>
            <button onclick="calculateResult()">=</button>
            <button onclick="appendValue('*')">*</button>
            
            <button onclick="appendValue('/')">/</button>
        </div>
    </div>

    <script>
        // Function to append value to the display
        function appendValue(value) {
            document.getElementById('display').value += value;
        }

        // Function to clear the display
        function clearDisplay() {
            document.getElementById('display').value = '';
        }

        // Function to calculate the result
        function calculateResult() {
            let expression = document.getElementById('display').value;
            try {
                let result = eval(expression); // Evaluate the mathematical expression
                document.getElementById('display').value = result;
            } catch (error) {
                document.getElementById('display').value = 'Error';
            }
        }
    </script>

</body>
</html>

Interactive Web page

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive Welcome Page</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        .welcome-container {
            background-color: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            text-align: center;
        }
        input[type="text"], input[type="number"] {
            width: 80%;
            padding: 10px;
            font-size: 1.2em;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        button {
            padding: 10px 20px;
            font-size: 1.2em;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
        .welcome-msg {
            margin-top: 20px;
            font-size: 1.5em;
            color: #333;
        }
    </style>
</head>
<body>

    <div class="welcome-container">
        <h1>Welcome Page</h1>
        <p>Please enter your name and age:</p>

        <!-- Input fields for name and age -->
        <input type="text" id="name" placeholder="Enter your name" required>
        <input type="number" id="age" placeholder="Enter your age" required>

        <!-- Button to submit and generate welcome message -->
        <button onclick="displayWelcomeMessage()">Submit</button>

        <!-- Area to display the welcome message -->
        <p class="welcome-msg" id="welcomeMsg"></p>
    </div>

    <script>
        function displayWelcomeMessage() {
            // Get the user's input from the input fields
            let name = document.getElementById('name').value;
            let age = document.getElementById('age').value;

            // Check if the fields are not empty
            if (name === '' || age === '') {
                alert('Please fill out both fields.');
                return;
            }

            // Construct the welcome message
            let welcomeMessage = `Welcome, ${name}! You are ${age} years old.`;

            // Display the welcome message in the "welcomeMsg" paragraph
            document.getElementById('welcomeMsg').innerHTML = welcomeMessage;
        }
    </script>

</body>
</html>

Comments

Post a Comment

Popular posts from this blog

RDBMS

EMPLOYEE CODE GENERATION USING SEQUENCE  AND TRIGGERS SQL QUERIES : SQL> create table emp(snonumber,empcodevarchar(10),empnamevarchar(12)); Table created. SQL> create sequence seq1; Sequence created. SQL> create or replace trigger trig1 before insert on emp for each row  when(new.empcode is null)  begin  select 'emp0'|| to_char(seq1.nextval) into :new.empcode from dual;  end;  / Trigger created. SQL> insert into emp(sno,empname)values(1,'ram'); 1 row created. SQL> insert into emp(sno,empname)values(2,'janu'); 1 row created. SQL> insert into emp(sno,empname)values(3,'stocks'); 1 row created. SQL> insert into emp(sno,empname)values(4,'butler'); 1 row created. SQL> select * from emp;  SNO EMPCODE EMPNAME ---------- ---------- ------------  1 emp01 ram  2 emp02 janu  3 emp03 stocks  4 emp04 butlerbutler Formatting tabl e  Create table ttitle left 'pageno:' format99 sql.pno center 'product_report'; column dea...
Read more

.Net

  Client side <html> <head>     <title>Registration Form</title>     <script>         function validateForm() {             var name = document.getElementById('<%= txtName.ClientID %>').value.trim();             var email = document.getElementById('<%= txtEmail.ClientID %>').value.trim();             var male = document.getElementById('<%= rbtmale.ClientID %>').checked;             var female = document.getElementById('<%= rbtfemale.ClientID %>').checked;             var country = document.getElementById('<%= ddcountry.ClientID %>').value;             if (name === "") {                 alert("Name is required.");                ...
Read more

1-5

  1,2)<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication8.WebForm1" %> <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Static Web Page</title>     <style>         body {             font-family: Arial, sans-serif;             margin: 0;             padding: 0;             background-color: #f4f4f4;         }         header {             background-color: #333;             color: white;             padding: 20px;             text-align: center;...
Read more