Saturday, February 17, 2024

Write a program in JavaScript to create a simple calculator. INTERNET CONCEPTS AND WEB DESIGN MCSL016

 

INTERNET CONCEPTS AND WEB DESIGN MCSL016


Write a program in JavaScript to create a simple 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;
        background-color: #f0f0f0;
    }
    .calculator {
        width: 300px;
        margin: 50px auto;
        padding: 20px;
        border: 1px solid #ccc;
        border-radius: 5px;
        background-color: #fff;
    }
    .button-row {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
    }
    .button {
        width: calc(25% - 5px);
        padding: 10px;
        border: none;
        border-radius: 5px;
        background-color: #ccc;
        cursor: pointer;
        transition: background-color 0.3s;
    }
    .button:hover {
        background-color: #999;
    }
    .display {
        width: 100%;
        padding: 10px;
        margin-bottom: 10px;
        box-sizing: border-box;
        font-size: 18px;
    }
</style>
</head>
<body>

<div class="calculator">
    <input type="text" id="display" class="display" readonly>
    <div class="button-row">
        <button class="button" onclick="appendToDisplay('7')">7</button>
        <button class="button" onclick="appendToDisplay('8')">8</button>
        <button class="button" onclick="appendToDisplay('9')">9</button>
        <button class="button" onclick="appendToDisplay('+')">+</button>
    </div>
    <div class="button-row">
        <button class="button" onclick="appendToDisplay('4')">4</button>
        <button class="button" onclick="appendToDisplay('5')">5</button>
        <button class="button" onclick="appendToDisplay('6')">6</button>
        <button class="button" onclick="appendToDisplay('-')">-</button>
    </div>
    <div class="button-row">
        <button class="button" onclick="appendToDisplay('1')">1</button>
        <button class="button" onclick="appendToDisplay('2')">2</button>
        <button class="button" onclick="appendToDisplay('3')">3</button>
        <button class="button" onclick="appendToDisplay('*')">*</button>
    </div>
    <div class="button-row">
        <button class="button" onclick="clearDisplay()">C</button>
        <button class="button" onclick="appendToDisplay('0')">0</button>
        <button class="button" onclick="calculate()">=</button>
        <button class="button" onclick="appendToDisplay('/')">/</button>
    </div>
</div>

<script>
    function appendToDisplay(value) {
        document.getElementById("display").value += value;
    }

    function clearDisplay() {
        document.getElementById("display").value = "";
    }

    function calculate() {
        var expression = document.getElementById("display").value;
        var result = eval(expression);
        document.getElementById("display").value = result;
    }
</script>

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

Write a JavaScript code to create a pull down menu box. INTERNET CONCEPTS AND WEB DESIGN MCSL 016.

 

 INTERNET CONCEPTS AND WEB DESIGN MCSL 016

    Write a JavaScript code to create a pull down menu box.


    <!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pull-down Menu Box</title>
</head>
<body>

<select id="menu">
    <option value="" disabled selected>Select an option</option>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
    <!-- Add more options here -->
</select>

<script>
    // Add event listener to the select element
    document.getElementById("menu").addEventListener("change", function() {
        // Get the selected value
        var selectedOption = this.value;
       
        // Display the selected value in console (You can perform other actions here)
        console.log("Selected option: " + selectedOption);
    });
</script>

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

Design a form for on-line subscription of newspaper having the input fields for users details and e-mail ID. There should•be validation checks for null fields and e-mail ID. By clicking the submit button, users will get weekly news at their e-mail ID.

 

INTERNET CONCEPTS AND WEB DESIGN MCSL 016

    Design a form for on-line subscription of newspaper having the input fields for users details and e-mail ID. There should be validation checks for null fields and e-mail ID. By clicking the submit button, users will get weekly news at their e-mail ID.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Newspaper Subscription Form</title>
<style>
    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
    }
    .container {
        width: 50%;
        margin: 20px auto;
        text-align: center;
    }
    form {
        border: 1px solid #ccc;
        padding: 20px;
        border-radius: 10px;
    }
    label {
        display: block;
        margin-bottom: 5px;
    }
    input[type="text"], input[type="email"], button {
        width: 100%;
        padding: 8px;
        margin-bottom: 10px;
        box-sizing: border-box;
    }
    button {
        background-color: #4CAF50;
        color: white;
        border: none;
        cursor: pointer;
    }
    button:hover {
        background-color: #45a049;
    }
    .error {
        color: red;
    }
</style>
</head>
<body>

<div class="container">
    <h2>Newspaper Subscription Form</h2>
    <form id="subscriptionForm" onsubmit="return validateForm()">
        <label for="name">Full Name:</label>
        <input type="text" id="name" name="name" placeholder="Enter your full name"><br>
        <label for="email">Email Address:</label>
        <input type="email" id="email" name="email" placeholder="Enter your email address"><br>
        <span id="emailError" class="error"></span><br>
        <button type="submit">Subscribe</button>
    </form>
</div>

<script>
    function validateForm() {
        var name = document.getElementById("name").value;
        var email = document.getElementById("email").value;
        var emailError = document.getElementById("emailError");

        // Check if name and email are not empty
        if (name.trim() == "") {
            alert("Please enter your full name.");
            return false;
        }
        if (email.trim() == "") {
            alert("Please enter your email address.");
            return false;
        }

        // Validate email format
        var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailRegex.test(email)) {
            emailError.textContent = "Please enter a valid email address.";
            return false;
        } else {
            emailError.textContent = "";
        }

        // Subscription successful
        alert("Thank you for subscribing! You will receive weekly news at your email address.");
        return true;
    }
</script>

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

Create a web page for employee leave management which should have an option to select a particular type of leave (CL, EL, Medical Leave, etc.), starting and end dates for applying for leave and submit button for submitting the leave form. It should have a button to go to the page where the complete details of remaining leaves are shown.

 

INTERNET CONCEPTS AND WEB DESIGN MCSL 016

Create a web page for employee leave management which should have an option to select a particular type of leave (CL, EL, Medical Leave, etc.), starting and end dates for applying for leave and submit button for submitting the leave form. It should have a button to go to the page where the complete details of remaining leaves are shown.



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Employee Leave Management</title>
<style>
    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
    }
    .container {
        width: 80%;
        margin: 20px auto;
        text-align: center;
    }
    form {
        margin-bottom: 20px;
    }
    label {
        display: block;
        margin-bottom: 5px;
    }
    input[type="date"] {
        width: 100%;
        padding: 8px;
        margin-bottom: 10px;
        box-sizing: border-box;
    }
    select, button {
        padding: 8px;
        margin-bottom: 10px;
        box-sizing: border-box;
    }
    button {
        background-color: #4CAF50;
        color: white;
        border: none;
        cursor: pointer;
    }
    button:hover {
        background-color: #45a049;
    }
</style>
</head>
<body>

<div class="container">
    <h2>Employee Leave Management</h2>
    <form id="leaveForm">
        <label for="leaveType">Select Leave Type:</label>
        <select id="leaveType" name="leaveType">
            <option value="CL">Casual Leave (CL)</option>
            <option value="EL">Earned Leave (EL)</option>
            <option value="Medical">Medical Leave</option>
            <!-- Add more leave types here -->
        </select><br>
        <label for="startDate">Start Date:</label>
        <input type="date" id="startDate" name="startDate"><br>
        <label for="endDate">End Date:</label>
        <input type="date" id="endDate" name="endDate"><br>
        <button type="submit">Submit Leave</button>
    </form>
    <button onclick="showLeaveDetails()">View Remaining Leaves</button>
</div>

<script>
    function showLeaveDetails() {
        // Redirect to the page showing remaining leave details
        window.location.href = "leave_details.html";
    }
</script>

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

Monday, February 12, 2024

Design an online application form in Javascript for electrical connection with fields like connection type, Name, email etc.,


          INTERNET CONCEPTS AND WEB DESIGN MCSL 016

                        Previous question and answer for MCSL-016 

Design an online application form in JavaScript for electrical connection which may have the following fields for data entry by the customers and do the appropriate coding of Submit button and validation checks : 

     • Permanent connection/Temporary connection — Check box 

    • Government house/Private house — Check box 

    • Name — Text box 

    • email — Text box

    and a Submit button


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Electrical Connection Application Form</title>
<style>
    .error {
        color: red;
    }
</style>
</head>
<body>
    <h2>Electrical Connection Application Form</h2>
    <form id="electricForm">
        <div>
            <label for="permanentConnection">Permanent Connection:</label>
            <input type="checkbox" id="permanentConnection">
        </div>
        <div>
            <label for="temporaryConnection">Temporary Connection:</label>
            <input type="checkbox" id="temporaryConnection">
        </div>
        <div>
            <label for="governmentHouse">Government House:</label>
            <input type="checkbox" id="governmentHouse">
        </div>
        <div>
            <label for="privateHouse">Private House:</label>
            <input type="checkbox" id="privateHouse">
        </div>
        <div>
            <label for="name">Name:</label>
            <input type="text" id="name">
        </div>
        <div>
            <label for="email">Email:</label>
            <input type="email" id="email">
        </div>
        <div>
            <button type="submit">Submit</button>
        </div>
    </form>

    <script>
        document.getElementById('electricForm').addEventListener('submit', function(event) {
            event.preventDefault();
            // Validation
            var name = document.getElementById('name').value;
            var email = document.getElementById('email').value;
            var permanentConnection = document.getElementById('permanentConnection').checked;
            var temporaryConnection = document.getElementById('temporaryConnection').checked;
            var governmentHouse = document.getElementById('governmentHouse').checked;
            var privateHouse = document.getElementById('privateHouse').checked;
            var errors = [];
           
            if (!name.trim()) {
                errors.push('Name is required');
            }
            if (!email.trim()) {
                errors.push('Email is required');
            } else if (!isValidEmail(email)) {
                errors.push('Please enter a valid email address');
            }
            if (!permanentConnection && !temporaryConnection) {
                errors.push('Please select connection type');
            }
            if (!governmentHouse && !privateHouse) {
                errors.push('Please select house type');
            }
           
            if (errors.length) {
                document.getElementById('errorMessages').innerHTML = errors.join('<br>');
            } else {
                document.getElementById('errorMessages').innerHTML = '';
                // Form submission code here
                alert('Form submitted successfully');
            }
        });

        function isValidEmail(email) {
            var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            return emailRegex.test(email);
        }
    </script>
    <div id="errorMessages" class="error"></div>
</body>
</html>
on No comments:
Labels: , ,

Saturday, February 10, 2024

Write JavaScript code to print date. MCSL016.

 

INTERNET CONCEPTS AND WEB DESIGN MCSL 016

This is a code for Ignou previous question paper solution.


Write JavaScript code to print date.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Print Date</title>
</head>
<body>
    <h1>Print Date</h1>
    <button onclick="disp()","dispt()">Date</button>
   
</body>
<script>
    function disp(){
        var d = new Date();
        var d1 = d.getDate();
        var d2 = d.getMonth()+1;
        var d3 = d.getFullYear();
        document.write(d1+ "-" + d2 + "-"+ d3)
    }
   
</script>
</html>
on No comments:
Labels: , , ,
Subscribe to: Posts (Atom)