Scribd Logo
Upload

Welcome to Scribd!

  • Clinth Patrick Galang - Assignment #1 - Multimedia System

    Uploaded by

    Maye Arugay
    23 views5 pages
    The document contains code for a simple registration form website using HTML, CSS, and JavaScript. The HTML code defines the form layout and elements. The CSS code styles the form elements and positions them on the page. The JavaScript code adds interactivity by validating the form fields on submit and displaying error messages. Screenshots of the rendered registration form in a web browser are included as the output.

    Original Description:

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document contains code for a simple registration form website using HTML, CSS, and JavaScript. The HTML code defines the form layout and elements. The CSS code styles the form elements and positions them on the page. The JavaScript code adds interactivity by validating the form fields on submit and displaying error messages. Screenshots of the rendered registration form in a web browser are included as the output.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    23 views5 pages

    Clinth Patrick Galang - Assignment #1 - Multimedia System

    Uploaded by

    Maye Arugay
    The document contains code for a simple registration form website using HTML, CSS, and JavaScript. The HTML code defines the form layout and elements. The CSS code styles the form elements and positions them on the page. The JavaScript code adds interactivity by validating the form fields on submit and displaying error messages. Screenshots of the rendered registration form in a web browser are included as the output.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    of 5

    SEMESTER: 1ST SCHOOL YEAR:

    UNIVERSITY OF CALOOCAN CITY SUBJECT CODE: CCS118 UNITS: 3


    COLLEGE OF LIBERAL ARTS AND SCIENCES
    SUBJECT TITLE: MULTIMEDIA SYSTEMS
    COMPUTER STUDIES DEPARTMENT
    DAY: TIME:

    STUDENT NAME: Galang,Clinth Patrick L.

    STUDENT NO: 20191260-M CAMPUS: UCC SOUTH


    COURSE / YEAR /
    BSIS-3A ASSIGNMENT NO.: 1
    SECTION:

    Title: Simple Web Page using Sublime


    Direction:
    1. Paste here your codes and output in screen shots only
    2. Submit this in google classroom and trello

    Use below space for your output:


    HTML CODE:

    <!DOCTYPE html>
    <html>
    <head>
    <title> Registration Form </title>
    <link rel="stylesheet" type="text/css" href="./style.css">
    <script defer scr="script.js"></script>
    </head>

    <body>

    <div class="Galang-rf">

    <h1>Registration Form</h1>
    <form id="form" action="#" method="get">

    <p> Full Name: </p>


    <input type="text" id="fullname" name="fullname" placeholder="Full Name" required>
    <p> Age: </p>
    <input type="text" id="Age" name="Age" placeholder="Age" required>
    <p> Address: </p>
    <input type="text" id="Address" name="Address" placeholder="Address" required>
    <p> Contact Number: </p>
    <input type="text" id="number" name="number" placeholder="Contact Number" required>
    <p> Email Address: </p>
    <input type="email" id="email" name="email" placeholder="Email Address" required>
    <p> Password: </p>
    <input type="password" id="password" name="password" placeholder="Password" required>
    <p> Reenter Password: </p>
    SEMESTER: 1ST SCHOOL YEAR:
    UNIVERSITY OF CALOOCAN CITY SUBJECT CODE: CCS118 UNITS: 3
    COLLEGE OF LIBERAL ARTS AND SCIENCES
    SUBJECT TITLE: MULTIMEDIA SYSTEMS
    COMPUTER STUDIES DEPARTMENT
    DAY: TIME:

    <input type="password" id="repassword" name="repassword" placeholder="Password" required>


    <button type="submit"> Register </button>
    </body>
    </html>

    CSS CODE:

    *{
    padding:0;
    margin:0;
    font-family:Arial;
    }

    body {
    background:url('./background.jpg') no-repeat;
    background-size:cover;

    .galang-rf {
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    width:400px;
    }

    .galang-rf h1{
    font-size:30px;
    text-align:center;
    text-transform:uppercase;
    margin:40px 0;
    }

    .galang-rf p{
    font-size:16px;
    margin:10px 0;
    }

    .galang-rf input{
    font-size:14px;
    padding:12px 10px;
    width:100%;
    border:0;
    SEMESTER: 1ST SCHOOL YEAR:
    UNIVERSITY OF CALOOCAN CITY SUBJECT CODE: CCS118 UNITS: 3
    COLLEGE OF LIBERAL ARTS AND SCIENCES
    SUBJECT TITLE: MULTIMEDIA SYSTEMS
    COMPUTER STUDIES DEPARTMENT
    DAY: TIME:

    border-radius:5px;
    }

    .galang-rf button{
    font-size:18px;
    font-weight:bold;
    margin:20px;
    margin-left:100px;
    padding:10px 15px;
    width: 50%;
    border:0;
    border-radius:5px;
    }

    .galang-rf button:hover{
    color:red;
    }

    JS CODE:
    const fullname = document.getElementById('fullname')
    const Age = document.getElementyId('age')
    const address = document.getElementById('address')
    const number = document.getElementById('number')
    const email = document.getElementById('email')
    const password = document.getElementById('password')
    const repassword = document.getElementById('repassword')
    const form = document.getElementById('form')

    form.addEventListener('submit', (e) => {


    let messages = []

    if (fullname.value === '' || fullname.value == null)


    {
    messages.push('Fullname Is Required')
    }

    if (age.value === '' || age.value == null)


    {
    messages.push('Age Is Required')
    }

    if (address.value === '' || address.value == null)


    {
    messages.push('Address Is Required')
    SEMESTER: 1ST SCHOOL YEAR:
    UNIVERSITY OF CALOOCAN CITY SUBJECT CODE: CCS118 UNITS: 3
    COLLEGE OF LIBERAL ARTS AND SCIENCES
    SUBJECT TITLE: MULTIMEDIA SYSTEMS
    COMPUTER STUDIES DEPARTMENT
    DAY: TIME:

    if (number.value === '' || number.value == null)


    {
    messages.push('Contact Number Is Required')
    }

    if (email.value === '' || email.value == null)


    {
    messages.push('Email Is Required')
    }

    if(password.value === '' || password.value == null)


    {
    messages.push('Password is required')
    }

    if(repassword.value === '' || repassword.value == null)


    {
    messages.push('Re-enter Password')
    }

    })

    ACTUAL OUTPUT:
    SEMESTER: 1ST SCHOOL YEAR:
    UNIVERSITY OF CALOOCAN CITY SUBJECT CODE: CCS118 UNITS: 3
    COLLEGE OF LIBERAL ARTS AND SCIENCES
    SUBJECT TITLE: MULTIMEDIA SYSTEMS
    COMPUTER STUDIES DEPARTMENT
    DAY: TIME:

    DATE GRADE
    PROFESSOR: KAMIL JADE A. CORPUZ
    CHECKED: :

    REMARKS:

    You might also like