Solutions Genius Hub: ignou assignment

Showing posts with label ignou assignment. Show all posts

Saturday, February 24, 2024

Create an online feedback form for a University using HTML, CSS and validate using Javascript. BCS053.

Ignou Assignment BCS-053

Web Programming

1) Create an online feedback form for a University using HTML. The form should ask for the following information:

The StudentID of the Programme on which feedback is being given.
Programme code of the Programme Passed (Use a drop-down list for Programme code selection.)
Name of the Student
Year of admission and year of passing the programme
Have you taken admission to another programme? Yes/No
Text area for giving the feedback

2) Create an external CSS file for this form. This CSS file should select the font size of 12 point bold for all the labels; font colour should be dark blue for the headings and green for normal text. The background colour of the form should be light yellow.

3) Write the code using JavaScript that validates if all the fields of the form are filled

Solution : Step 1: First create a folder like BCS53

Step 2: Create 2 files in it like bcs53.html and styles.css

Step 3: Add link of the styles.css file in HTML file bcs53.html

Step 4: Write the following code in bcs53.html

Step 5: Write javascript code inside <script></script> tag in the head or

at the end of the body

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>University Feedback Form</title>
<link rel="stylesheet" href="styles.css">

<script>
  function validateForm() {
    var studentID = document.getElementById("studentID").value;
    var programmeCode = document.getElementById("programmeCode").value;
    var studentName = document.getElementById("studentName").value;
    var yearAdmission = document.getElementById("yearAdmission").value;
    var yearPassing = document.getElementById("yearPassing").value;
    var admissionAnotherProgramme = document.querySelector('input[name="admissionAnotherProgramme"]:checked');
    var feedback = document.getElementById("feedback").value;

    if (studentID == "" || programmeCode == "" || studentName == "" 
    || yearAdmission == "" || yearPassing == "" || !admissionAnotherProgramme
     || feedback == "") {
      alert("Please fill in all fields.");
      return false;
    }
    return true;
  }
</script>

</head>
<body>
<h2>University Feedback Form</h2>
<form action="#" method="POST" onsubmit="return validateForm()">
  <label for="studentID">Student ID:</label><br>
  <input type="text" id="studentID" name="studentID" ><br><br>
  
  <label for="programmeCode">Programme Code:</label><br>
  <select id="programmeCode" name="programmeCode">
    <option value="">Select Programme Code</option>
    <option value="001">Programme 1</option>
    <option value="002">Programme 2</option>
    <option value="003">Programme 3</option>
    <!-- Add more options as needed -->
  </select><br><br>
  
  <label for="studentName">Name:</label><br>
  <input type="text" id="studentName" name="studentName"><br><br>
  
  <label for="yearAdmission">Year of Admission:</label><br>
  <input type="text" id="yearAdmission" name="yearAdmission" ><br><br>
  
  <label for="yearPassing">Year of Passing:</label><br>
  <input type="text" id="yearPassing" name="yearPassing" ><br><br>
  
  <label for="admissionAnotherProgramme">Have you taken admission to another programme?</label><br>
  <input type="radio" id="yes" name="admissionAnotherProgramme" value="yes">
  <label for="yes">Yes</label><br>
  <input type="radio" id="no" name="admissionAnotherProgramme" value="no">
  <label for="no">No</label><br><br>
  
  <label for="feedback">Feedback:</label><br>
  <textarea id="feedback" name="feedback" rows="4" cols="50" ></textarea><br><br>
  
  <input type="submit" value="Submit">
</form>
</body>
</html>

                    Step 6:  Write the following code in styles.css file.

body {
  font-family: Arial, sans-serif;
  background: lightyellow;
}

h2 {
  color: darkblue;
}

label {
  font-size: 12pt;
  font-weight: bold;
  color: green;
}

form {
  background-color: lightyellow;
}

Output

        



Output is displaying alert if you submit without filling the form

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>

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>

Write a JavaScript code for searching a substring in a given string and return the position. MCSL-016

This is a solution for the previous question asked in MCSL-016 LAB of Ignou exams.

Write a JavaScript code for searching a substring in a given string and return the position.

<!DOCTYPE html>

<head>

<title>Substring Search</title>

function findSubstringPosition() {

var mainString = document.getElementById("mainString").value;

var substring = document.getElementById("substring").value;

// Use indexOf() to find the position of the substring in the main string

var position = mainString.indexOf(substring);

// Display the result

if (position !== -1) {

document.getElementById("result").innerText = "Substring found at position: " + position;

} else {

document.getElementById("result").innerText = "Substring not found.";

}

</script>

</head>

<body>

<h2>Substring Search</h2>

<p>Enter a main string and a substring to find its position:</p>

<button onclick="findSubstringPosition()">Search</button>

</body>

</html>

Solutions Genius Hub

Pages