Category: Html / CSS

A calculator

<!DOCTYPE html>

<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<title>Calculator</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #1e1e2f;
font-family: Arial, sans-serif;
}

.calculator {
background: #2c2c3e;
padding: 20px;
border-radius: 15px;
box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}

.display {
width: 100%;
height: 60px;
margin-bottom: 15px;
text-align: right;
padding: 10px;
font-size: 24px;
border: none;
border-radius: 10px;
background: #000;
color: #0f0;
}

.buttons {
display: grid;
grid-template-columns: repeat(4, 70px);
gap: 10px;
}

button {
height: 60px;
font-size: 18px;
border: none;
border-radius: 10px;
cursor: pointer;
background: #3e3e55;
color: white;
transition: 0.2s;
}

button:hover {
background: #57577a;
}

.operator {
background: #ff9500;
}

.equal {
background: #28a745;
grid-column: span 2;
}

.clear {
background: #dc3545;
grid-column: span 2;
}
</style>
</head>
<body>

<div class=“calculator”>
<input type=“text” id=“display” class=“display” disabled>

<div class=“buttons”>
<button onclick=“clearDisplay()“ class=“clear”>C</button>
<button onclick=“append(‘/’)“></button>
<button onclick=“append(‘*’)“></button>

<button onclick=“append(‘7’)“>7</button>
<button onclick=“append(‘8’)“>8</button>
<button onclick=“append(‘9’)“>9</button>
<button onclick=“append(‘-‘)“ class=“operator”>–</button>

<button onclick=“append(‘4’)“>4</button>
<button onclick=“append(‘5’)“>5</button>
<button onclick=“append(‘6’)“>6</button>
<button onclick=“append(‘+’)“ class=“operator”>+</button>

<button onclick=“append(‘1’)“>1</button>
<button onclick=“append(‘2’)“>2</button>
<button onclick=“append(‘3’)“>3</button>
<button onclick=“calculate()“ class=“equal”>=</button>

<button onclick=“append(‘0’)“>0</button>
<button onclick=“append(‘.’)“>.</button>
</div>
</div>

<script>
let display = document.getElementById(“display”);

function append(value) {
display.value += value;
}

function clearDisplay() {
display.value = “”;
}

function calculate() {
try {
display.value = eval(display.value);
} catch {
display.value = “Error”;
}
}
</script>

</body>
</html>

April 18, 2026

Medical Form Website

I am building on assignments from the past 2 medical forms I created. I have to use github to enter the information and submit it I think. Please review the insturctions and how to submit:

Per our last class… here are the changes/recommendations…

Building on the work you have already done on Assignment 2….
Basically this is the SAME THING as assignment 2 EXCEPT edits need to be done on the fly and not just judged with HTML pattern matches. It needs to have significant Javascript edits in it for MOST of the fields.

Some of you already used javascript for the edits rather than HTML element attributes, so hopefully this will not be much work for you.

Edits on the fly: You need to employ Javascript to validate and Warn the user if they do anything wrong in any of the fields AS THEY ENTER or LEAVE the field and AGAIN before they press the SUBMIT button. All the requirements of Homework 1 and 2 in terms of validation need to now be done with Javascript.
You can leave in the HTML checks, like MINLENGTH and PATTERNS, but you need to write a javascript version of a check for those conditions. This is a MUCH better technique for warning the user when they make mistakes (or when they are not giving you what you want).
Bottom Line… DO NOT wait to do validation until a submit button is pressed.

Leave the warnings/error messages on the page while there are errors and REMOVE the error messages IF the user corrects the info in that field.
Also, if you weren’t already doing this, make sure they have plenty of prompting as to your requirements for that element, using attributes like prompt and title.

Just in case you are still making local files:
The content must be hosted somewhere, either on Github, an Oracle acount you set up OR an AWS or some other online account such as W3Spaces. You must give me the URL to go grade and NOT just zip up and upload the files to Canvas.
IF you were never able to set up a public site that I could access, you need to let me know so I can try to get you a public account so you can FTP your files there. I host several public sites.

The html file should be named homework3.html ( do not obliterate your old homework files and do not put your student ID in the file name anymore.) It is not critical that you name it this, but it is a good idea… the important thing is that you share the correct URL to the html file you want to start from. I do not need links to the CSS and JS files.

Remember all the requirements of homework 1:

MANDATORY: Make an EXTERNAL css file to refer to in your html document.

MANDATORY: Make an external javascript file(s) and reference your scripts in the original HTML page

Required Text boxes:

First Name (1 to 30 characters. ADVANCED EDITING: Letters, apostrophes and dashes only)
Middle Initial ( optional, 1 character, no numbers, blank/null ok)
Last Name (1 to 30 characters, ADVANCED EDITING: Letters, apostrophes and dashes only)
Date of Birth (3 pieces, MM/DD/YYYY) ADVANCED EDITING: must validate the date range, and nothing in the ftuture or more than 120 years ago)
Social Security (Do not use your real social when testing, must be 9 digits,ADVANCED EDITING: peformat as you type, i.e. stick in the dashes once 3 characters are typed). Alternatively, this can be an “id” number or come up with some reason to be asking for a 9 digit number, which should be obscured like the password field, but the field needs to be validated to have only numbers in it.
Address Line 1 (required,2 to 30 characters)
Address Line 2 (not required, but if entered, 2 to 30 characters)
City (required, 2 to 30 characters)
State (Give them a dropdown box with all 50 states, DC and PR in it including a NULL entry and NO default. Insert an Options list Snippet you find on the Internet)

Zip Code… .required, 5 digits only
Email address (ADVANCED javascript EDITING: must be in the format name@domain.tld)

A text area to describe something.
Use the <TABLE> or other semantic tags along with the STYLE structure to space things out nicely on the sceen – DO NOT WASTE SPACE ON THE SCREEN.

You need to include the following

Check Boxes
e.g. Check all of the following that apply: Have you had Chicken Pox, Measles, Covid-19, etc… at least 5

Radio Buttons, at least 3
e.g. own or rent, unsure
e.g. Have you been vaccinated.

Slide bar, at least 1 (ADVANCED EDITING: incrementing or decrementing a value that displays as you slide it.)
e.g. make a bar that asks for desired salary from $20,000/year to $200,00/year.
For real estate, make it as if the person wants to enter a rauge of prices to pay for a home.

You need to add a text box for a desired user ID and then 2 boxes for a passsword and a re-enter password.
You will need to create Javascript to VALIDATE the user name and password with these criteria:

ADVANCED EDITING: 1. user ID Can’t start with a number
2. ID Must be at least 5 characters but no more than 20
ADVANCED EDITING: 3. ID cannot have spaces or any special characters in it, just letters, numbers, the dash and the underscore ok.
4. Password fields must be secret/hidden on the form, i.e. typing produces **** instead of the characters.
5. Passwords must be at least 8 characters long.
ADVANCED EDITING: 6. Passwords must contain at least 1 upper case, 1 lower case letter and 1 digit.
7. Password CANNOT equal your desired User ID
8. Use 2 Password fields as shown in the class example. They must, of course, equal each other.

Feel free to ADD MORE if you choose. You are just trying to convince me that you know how to use and validate the most common form elements that a user encounters in a form.

Deciding WHEN to do the validation is up to you depending on the field type, i.e. a name or a password, and long as it is done prior to having to click a button. In other words, validate on the fly with, oninput, onfocus, onblur, etc…

If the user does anything wrong, you need to display a warning next to or underneath each item that they messed up on. It would be PREFERABLE not to cause the form to “jump around” when you add or remove warnings and instructions, so you should predefine some space on your page for these messages.

Be sure to set some error flags or keep an error count (or disable the submit button) so the user can’t submit bad data.

DO NOT REMOVE but do not rely on the HTML validity edits. It may have value later, for homework 4. Belts and suspenders…

You can leave the “get data” button there if you made one in Homework 2 to redisplay all the data form without any editing. IF YOU WANT, you can
edit THAT routine to then ALSO call the javascript element validation functions and add that as another column in the output table… this would be just for debug puposes. You wouldn’t really do that in a real environment.

So…
REPLACE the traditional Submit button with a VALIDATE button which will call javascript functions to do the following:

Retrieve all the data from the form into the function (no need to redisplay it in a table unless you want to.)
Validate EVERY field, whether it is required or not (if not required and blank, you can skip it but if the user entered data in a field, it still has to be checked to make sure its not wierd characters.. use your best judgement as to what you think is weird or allowed depending on the field, i.e. names shouldn’t have anything but letters, spaces, apostrophes, etc…). Force lower case in fields like email address.

ONLY give the user an actual Submit button IF there are NO errors in any of the entered data on the form.

The submit button will load a NEW html page that says: Thank you for your submission. We will be contacting you shortly.

YOUR DELIVERABLES in Canvas WILL BE

Click on Text Submission

part 1:
Tell me the SPECIFIC URL to go to to see your work, i.e. profjake.w3spaces.com/MIS3371/homework3.html
Tell me the theme you chose.

part 2:
Give me a synopsis of what your website/form is supposed to be doing.
Describe to me what you are particularly happy with that you got working.
Also tell me what you DIDN’T YET get working.

You will be graded on BOTH the quality and detail of your answers as well as the actual presentation and funcationality of the page.

If you prefer, you can write a document and share it on One Drive so you can be more detailed and even include screenshots…. At least 100 words but not a ‘BOOK”.

part 3:
In the Text Submission, insert a text document or PDF of the pseudocode or N0S Diagram you came up with, at least for the VALIDATE button so I can see your flow of logic to determine whether or not all the fields were good. There is an icon when writing the text to do thos. OR you can also just share the link from One Drive.

You can go look at my examples at profjake.w3spaces.com but just keep in mind, some of that code is intentionally broken.

RUBRIC:

Graded item	Max points/item
Submitted URL correctly	5
Synposis or pseudocode	5
Turned anything in?	2
Turned in on time	2
Files named properly	2
Review/get data button	2
review info accurate/working	2
Title attribute/context sensitive instructions	2
element input regex patterns	2
javascript required	3
error messages in the right location and make sense	3
Name fields edited	3
date range check	3
social edited/obscured	3
email validated	3
phone validated (if present)	3
address validated	3
Slide bar shows dynamic value	3
user id edited	3
password validation on the fly	5
2 password boxes compared	3
Edits with javascript?	20
Dynamic checks	5
Leave errors on the page	3
Prompting	5
CSS used significantly and in external file	5

================================================================================================================
End of Homework 3. I will attach what I have submitted for assignment 1 and 2.

Assignment 1 Github Pages-

Data Dictionary-

Diagram-

Assignment 2 Github github link-

then i have attached over assignment 2 documents for you to review. Please review answers 1 and 2 to complete assignment 3.

April 17, 2026

Understanding JavaScript Variables: let, const, and var

I need help understanding JavaScript variables and how they work in simple terms. Please explain with basic code examples and clarify the difference between let, const, and var.

I am a beginner in programming and I would like a clear and easy explanation with simple examples that help me understand when to use each type of variable.

April 14, 2026
What is html and css

HTML (HyperText Markup Language)

HTML is used to create the structure of a webpage.

Think of HTML as the skeleton of a website.

Example:

Headings

Paragraphs

Images

Links

It tells the browser what content to show.

CSS (Cascading Style Sheets)

CSS is used to design and style the webpage.

Think of CSS as the beauty or design of a website.

Example:

Colors

Fonts

Layout

Spacing

It tells the browser how the content should look.

Simple Analogy:

HTML = Structure (body)

CSS = Style (clothes & makeup)

Example Code:

HTML

<!DOCTYPE html>

<html>

<head>

<title>My Page</title>

<style>

h1 {

color: blue;

}

</style>

</head>

<body>

<h1>Hello World</h1>

<p>This is my website</p>

</body>

</html>

Here:

HTML creates the heading & paragraph

CSS makes the heading blue

April 14, 2026
Html / CSS Question

I need a responsive landing page using HTML and CSS only.

Requirements:

– Must be mobile responsive

– Use flexbox for layout

– Clean and simple design

Please provide complete HTML and CSS code with explanation.

April 8, 2026
resume 101

4073.1.1 : Creates Basic Web Documents

The learner creates the structure of basic web documents using HTML.

4073.1.2 : Implements Cascading Style Sheets

The learner implements web page formatting and interface aesthetics using CSS.

4073.1.3 : Resolves Software Problems

The learner resolves software problems in web development environments with debugging tools.

Introduction

For this project, you will create a personal portfolio website to demonstrate your ability to use HTML, CSS, and JavaScript and resolve software problems in web development environments. You will create three HTML pages: a rsum, a cover letter, and a career goals page. As you make your website, you will use one external style sheet for the design and layout of your site. A zip file should be used to upload the personal portfolio.

You will write your own HTML, CSS, and JavaScript codeno frameworks will be allowed. Do not use online media linksall image, audio, and video files must be stored locally with your code.

Your submission should include:

3 HTML files: resume.html, cover-letter.html, and career-goals.html

1 external CSS file: master.css or style.css

At least 1 image file (.png, .jpg, .jpeg, or .gif)

1 audio file (.mp3 or .wav)

1 video file (.mp4, .mov, or .mpeg)

Requirements

Your submission must represent your original work and understanding of the course material. Most performance assessment submissions are automatically scanned through the WGU similarity checker. Students are strongly encouraged to wait for the similarity report to generate after uploading their work and then review it to ensure Academic Authenticity guidelines are met before submitting the file for evaluation. See for more information.

Grammarly Note:
Professional Communication will be automatically assessed through Grammarly for Education in most performance assessments before a student submits work for evaluation. Students are strongly encouraged to review the Grammarly for Education feedback prior to submitting work for evaluation, as the overall submission will not pass without this aspect passing. See for more information.

Note: The file size limit for your entire submission cannot exceed 200 MB. Each individual file cannot be larger than 16 MB

It is recommended that you compress your required files into a single archive file (.zip, .rar, .tar, or .7z) named using your last name (e.g., smith_portfolio.zip).

A. Create an HTML-based rsum that includes each of the following elements, in no particular order:

Note: A hypothetical rsum is acceptable for this task.

Basic Structure:

– HTML

– head

– title

– body

Content Organization:

– header

– nav

~ links to other documents in the portfolio

– main

– section

– footer

– article

Text and Content:

– at least three different heading elements (h1h6)

– span

– paragraph

– line break

– horizontal rule

– div (to contain the current date from JavaScript)

Links and Lists:

– hyperlink

– ordered or unordered list

Tables

– At least 1 table with a caption

– A table with at least four columns and at least three rows

Semantic and Miscellaneous

– strong

– em

Interactive and Scripting

– script

~ Inline JavaScript to populate the date (within div defined above in Text and Content)

~ Inline JavaScript to write an appropriate message or value to the console

Note: A hypothetical resume is acceptable for this task.

B. Create an HTML-based cover letter page that includes each of the following elements, in no particular order:

Note: A hypothetical cover letter is acceptable for this task.

Basic Structure:

– HTML

– head

– title

– body

Content Organization:

– header

– nav

~ links to other documents in the portfolio

– main

– section

– footer

– article

Text and Content:

– span

– paragraph or paragraphs

– horizontal rule

– strong

– em

– mark

C. Create an HTML-based career goals document that shows your HTML and CSS skills that includes each of the following elements, in no particular order:

Basic Structure:

– HTML

– head

– title

– body

Content Organization:

– header

– nav

~ links to other documents in the portfolio

– main

– footer

Text and Content:

– *Locally sourced image

– *Locally sourced audio

– *Locally sourced video

*Locally sourced means that the multimedia files should be included with your submission for evaluation and the appropriate relative URLs should be used within your HTML code to display the multimedia files in the browser view. No links to online resources allowed.

– form (to gather user information)

Note: action attribute value should be

Required Form Fields

~ first name

~ last name

~ company name

~ email address (type=email)

~ phone number (type=tel)

~ message (text area)

~ best contact time (radio buttons)

a.m., p.m., anytime

~ select list (single option)

phone, email, or text

~ submit button

D. Create one external CSS stylesheet that is linked to ALL of your HTML pages. Ensure that your CSS includes the following components, in no particular order, each of which is applied to at least one HTML element in Aspects A, B, or C

element selector

class selector

id selector

descendant selector

pseudo-class selector

universal selector

font property

color property

font-style property

background-color property

margin property

padding property

border property

at least 1 list-style property

E. Acknowledge sources, using in-text citations and references, for content that is quoted, paraphrased, or summarized.

F. Demonstrate professional communication in the content and presentation of your submission.

File Restrictions

File name may contain only letters, numbers, spaces, and these symbols: ! – _ . * ‘ ( )
File size limit: 200 MB
File types allowed: doc, docx, rtf, xls, xlsx, ppt, pptx, odt, pdf, csv, txt, qt, mov, mpg, avi, mp3, wav, mp4, wma, flv, asf, mpeg, wmv, m4v, svg, tif, tiff, jpeg, jpg, gif, png, zip, rar, tar, 7z

April 3, 2026
HTML/CSS Homework
Hi,it’s quite simple! For example – The instructions are quite broad as you are being asked to demonstrate the skills you have acquired so far this semester. You will determine how best to apply the different elements that must be included. Think critically and creatively. Look to other websites for inspiration, reference the labs and case studies.

Getting Started

Download the materials folder that contains:
- An Excel spreadsheet with descriptions of the different types of accommodations. You’ll also use this in the second half of the project at the end of the semester.
- An images folder with images of each of the accommodations. You are not required to use these specific images. The images in the folder have not been resized, so you will have to crop and/or resize them appropriate to your website.
Web Project Outcomes
1. Create at least three (3) web pages for the Up North Lodge & Resort website (including the home page).
  - The second half of the semester project will include an accommodation page or pages that utilize PHP and SQL to pull data from tables in a database. To prevent you from duplicating work do NOT create an accommodation page listing for your website. You can still use the accommodation images and details in other ways on the web pages you create. For example, you may want to feature one of the cabins or rooms on the home page.
  - The final number of pages, the design, and the layout are up to you.
2. Your site must be responsive. You may hand code your site using media queries and percentages or you may use Bootstrap the choice is yours.
  Hand-Coded Option
  If you choose to hand code the responsiveness, you must include at least two media queries:
  - Max screen size of 1024 px
  - Max screen size of 480 px
  Bootstrap Option
  If you opt to use Bootstrap to create your site, the responsiveness is built-in, but there are a couple of things to note:
  - You may NOT use an existing Bootstrap template. There are many available for free, but the point of using Bootstrap is to see what YOU can do with it, not what someone else has already done.
  - Make sure all elements on your site are responsive. This means elements that are not native Bootstrap may need to have some hand-coded flexible and media query elements added.
3. Create and attach an external stylesheet and create the necessary styles to achieve the presentation and layout you desire.
  - If you are using Bootstrap, customize the presentation and layout. No default Bootstrap themes are allowed.
4. Incorporate at least one CSS transition effect. It may be one that we covered in class or of your choice.
5. Include at least one element that makes use of jQuery. Some examples may include slideshows, light boxes, accordion menus, animations, or more.
March 30, 2026
Create a personal project about me using html and css
Project Description

Be prepared to explain your code. If you cannot justify your decisions and walk through how you built it, you will not receive credit!

This project, worth 20% of your final grade, requires you to plan, design, and develop a static personal website using HTML and CSS technologies only. The site should showcase your professional skills and a portfolio of your academic or work projects.

The goal is to create a professional online portfolio that can support your job search. Present yourself professionally and include only materials appropriate for potential employers. You may revise and reuse previous work if needed.

This is an individual project. Even if you already have a personal website, you must build a new one from scratch that meets the specified requirements.

Minimum Requirements:

Must have a minimum of three sub-pages excluding the homepage. Additional pages MUST be subpages linked off the homepage
1. 1. Homepage: Brief introduction, navigation links, images.
    
    Name the Homepage file index.html
  2. About Me page: Professional background and information for employers.
  3. Resume page: Create a resume and display it on this page in HTML using a Flexbox layout. Also include a link to download a PDF version of your resume.
  4. Other pages may include the followings:
    
    Project page: This page should include an organized set of your past/current projects.
    
    Future goals page: This page should include an outline of what you want to achieve in the future.
    
    Contact page: A contact form or clearly listed contact details, and links to professional social media profiles* (e.g., LinkedIn, GitHub).
*Note: For this assignment, placeholder links are acceptable. You are not required to link to your actual professional accounts.

Important Considerations:
- Each page must include a clear and descriptive title that appears in the browser tab when viewed.
- Each page must be responsive and display properly on both mobile devices and desktop screens.
- Use HTML5 and CSS3 only (no templates or CMS).
- Keep pages professional, well-organized, and include a clear navigation bar on every page.
- Ensure all links work correctly.
- Check spelling, grammar, and overall design (attractive and easy to navigate).
- Follow accessibility standards (readable fonts, alt text for images, etc.).
- Write clean, well-structured, properly indented code with helpful comments.
- Avoid unnecessary code and multiple styling methods.
- Verify that the entire website functions properly broken content will be considered missing.
Where to start?
- Plan your content and wireframe before coding.
- Start with the homepage file named index.html.
- Create blank HTML files for each page and use short, meaningful filenames.
- Save everything in one folder named Lastname_Firstname_Project1.
- Put all supporting files (images, videos, docs) inside that folder do not link to files outside it.
- Keep file relationships unchanged after editing.
How to submit?
- Place all website files (HTML, CSS, images, videos, etc.) into one folder named Lastname_Firstname_Project1 (e.g., Garcia_Ana_Project1).
- Rename the folder correctly before compressing it. Then zip the folder and upload the zipped file to Canvas.
- Your submission must follow the required naming format or it will not be graded. The final upload should be one main folder containing all subfolders and files.
Use of Generative AI

AI may be used only for:
- Debugging code
- Improving wording, formatting, or clarity
- Minor refinement of ideas
AI must not be used for the critical stages of website design, including:
- Creating the overall concept
- Designing the layout or structure
- Generating the core implementation
***Improper use of AI for major design or development components will result in a grade reduction. Submitting work primarily generated by AI or failing to disclose AI use may result in a zero.***

Project Deliverables

1. AI Use Statement (REQUIRED) – This document is mandatory. Assignments submitted without it will not be graded. You must:
- - State whether you used AI (if not, clearly say so).
  - Include the full conversation history from any AI tool used (ChatGPT, Gemini, etc.).
  - Accepted formats: .docx or .pdf
2. Website Wireframe (10 pts)
- - Create a wireframe to plan your websites layout. You may use PowerPoint, free online tools (e.g., SmartDraw), or a hand-drawn sketch.
  - Accepted formats: .pptx, .docx, .pdf, or image files (.jpg, .png)
3. Design Rationale (10 pts)
- - Briefly explain your design choices (layout, colors, fonts, navigation).
  - Accepted formats: .docx, .pdf
4. Website (80 Pts)
- - Code Quality (20 pts) -> Code Readability, Code Correctness (valid HTML5 and CSS3)
  - Content & Appearance (20 pts) -> Content Relevance, Professionally, Appearance and Attractiveness
  - User Experience (20 pts) -> User Friendliness, Accessibility, Navigation Clarity
  - Responsiveness (20 pts) -> Flexbox, Grid layout and @media queries for mobile friendliness
Total Grade: 100 pt (20% of the Final Grade)

CREATE A SUPER BASIC HTML WEBSITE

BELOW I ATTACHED MY RESUME, AN IDEA OF WHAT THE PROJECT SHOULD LOOK LIKE, AND ALSO PDF FILES OF WHAT THE CODE SHOULD LOOK LIKE. VERY SIMPLE, NOTHING COMPLEX!!!
March 28, 2026

Building on a Patient Registration Form

this has to be done through github so please provide me with the code to input and submit here was my old patient registration form i submitted Github Pages- the file i provided is the one i used for the last assingment we have to build on that

Data Dictionary-

Diagram-

that above is my assisgnment 1 this assignment ive to build on that

Building on the work you have already done on previous assignments….

You will be taking the files that present a welcome page and a form to register a new user but now you will add a “Review” buton next to the Submit button which will
redisplay ALL of the entered/chosen info from the form in 1 of the following ways:

1. Use a new area on the same page to the right or bottom of the original form.
2. DO NOT rewrite the existing page. Use <div and <span tags to add new content on the same page.
3. Put the data in a new area, frame or popup window.

Make sure you are using:

1, TITLE attribute to the input box elements to give some context sensitive instructions on each field, not just required fields.
2. Html input pattern matching to accomplish most of the submit validatoins
3. Optionally use Javascript in addition to submit validations.
4. Use Javascript where absolutely required like on matching password fields.

Go see my example hw2 (work in progress) at

Remember all the edits/requirements of homework 1, most of which can be done with HTML using REGEX pattern matching, to warn the user of bad data OR prevent them from entering bad data.

Notable omissions:
If you left out the use of a <TABLE> tag, please add it this time.
External CSS that is actually referenced
External Javascript file that will contain the modules/subroutines you call from each field or from the submit button (or any other action).

SAVE your old homeworks as they are in case we need to go back to them. Make NEW versions of files and code as you go. I recommend making a new folder at w3spaces caled /homework2 and putting your homework2 specific files there.

Required Input fields AND their edits (The don’t have to be in this order, but recommended):

Block/area 1:
First Name (1 to 30 characters. ADVANCED EDITING: Letters, apostrophes and dashes only)
Middle Initial (1 character, letters only, no numbers, blank/null ok)
Last Name (1 to 30 characters, ADVANCED EDITING: Letters, apostrophes, numbers 2 to 5, ie, the 3rd, and dashes only)
Dates (3 pieces, MM/DD/YYYY) (ADVANCED EDITING: must validate the date range…
In other words, for birthdays, don’t allow dates in the future or more than 120 years ago. For move in, or travel dates, do not allow dates in the past.
Do this with at the very least HTML attribute minimum and maximum date range values which uou can hard code for now but it is PREFERRED to calculate MIN and MAX dates based on the date you already display on the page.
You can leave the SOCIAL SECURITY out… but if you already have it… leave it in AND make sure it is an obscured password style field, and do appropriate testing/validation of it. You must have some sort of ID # field you are asking that is using the password attribute.

Block/area 2 (contact info):
Email address ADVANCED EDITING: in the format name@domain.tld
Phone number: ADVANCED EDITING: 000-000-0000

Block/area 3 (address):
Address Line 1 (required,2 to 30 characters, don’t worry about special characters or fancy editing for now)
Address Line 2 (not required, but if entered, treat the same as address line 1, 2 to 30 characters)
City (required, 2 to 30 characters)
State (Select box with all 50 states, DC and PR, ONLY need the 2 letter State code for the selected data, but ALSO add a NULL initial value for State so the user MUST choose a valid value)
ADVANCED (not required though) : MAKE THAT DROP DOWN LIST an inclusion that you refer to as an EXTERNAL FILE.
Zip Code… .required, 5 digits only, but allow up to 10 characters including a – so in case they enter the zip+4 version, i.e. 77002-1234.
You will just truncate it AND re-display the truncated version when you do your edits.

Block/area 4 (choices):
Check Boxes
e.g. Check all of the following that apply: Have you had Chicken Pox, Measles, Covid-19, etc… at least 5

Radio Buttons, at least 3
e.g. own or rent, unsure
e.g. Have you been vaccinated.

New thing on the Slide Bar:
Incrementing or decrement a value (formatted appropriately) that displays next to or near the bar as you slide it
e.g. make a bar that asks for desired salary from $20,000/year to $200,00/year.
For real estate, make it as if the person wants to enter a rauge of prices to pay for a home.
This will be your SECOND requirement to do run sime javascript based on a dynamic event, like on input or on change.

Text area box… Needs to be there but data entry by the user is optional. No advanced editing needs to be done on this at this time, except MAYBE watch out for double quotes “””, this can mess up your database or programming. You can do this with HTML pattern matching.

Later on, we may add some editing to PREVENT entry of HTML tags!

Text box for a desired user ID
Advanced Editing:
1. 5 to 30 characters.
2. No special characters allowed. just letters, numbers (as long as the first character is NOT a number), and an underscore or dash and
3. NO SPACES.
4. Allow entry of lower or uppercase but convert it to lowercase AND redisplay the corrected lowercase version on submit.

2 boxes for a passsword and a re-enter password.
Required:
Password fields must be obscured on the form, i.e. typing produces **** instead of the characters.
Passwords must be at least 8 characters and no more than 30 characters long and contain at least 1 upper case latter, 1 number and 1 “special” character.

When you get to the point of submitting/validating the data on the form (or you can do it oninput or keyup):

Passwords must contain at least 1 upper case, 1 lower case letter, 1 digit and one “special” character which can be things like !@#%^&*()-_+=/><.,`~ But DO NOT ALLOW ” quotes. These just cause problems.
Password CANNOT equal your desired User ID or have part of your user id or name in it
The 2 Password fields must, of course, equal each other.

If the user does anything wrong, you need to display a popup or warning next to each field or in an alert box or some other way that they messed up on.
e.g. Passwords do not match

The output something like this:

PLEASE REVIEW THIS INFORMATION

First, MI, Last Name Jake N Messinger pass
Date of Birth 03/05/2024 ERROR: Cannot be in the future

Email address pass
Phone number (713) 743-7523 pass

Address 4801 Martin Luther King Blvd ERROR: Missing Zip Code
Rm 122 MH
Houston, TX 00000

REQUESTED INFO

Chicken Pox Y Vaccinated? Y
Measles Y Level of Pain indicated SEVERE
Mumps N
Heart Disease N
Diabetic N
Covid-19 N

Described Symptoms <texta area block>

User ID thejakenator
Password ABCxyz123 $ (normally we wouldnt display this)

Review / SUBMIT and START OVER buttons

OF COURSE IT SHOULD LINE UP NICELY!

YOUR DELIVERABLES WILL BE 3 THINGS, the first 2 are required.

1. Submit the PUBLIC URL to your homework 2 in w3spaces.
i.e

If you do NOT or cannot use w3spaces, share the files with me from Microsoft One drive. Create a folder for MIS3371/homework2 and share that whole folder. DO NOT insert or attach any files to the Homework assignment. Share the folder to jake@coungarnet.uh.edu

2. Give me a synopsis of what your website/form is supposed to be doing.
Describe to me what you are particularly happy with that you got working.
Also tell me what you DIDN’T YET get working. Save that as a PDF OR add it as text to the homework submission.

3. Pseudocode in the form of human readable text OR a N-S diagram. Save this file as homework3-pseudocode.PDF or .drawio and share it from One Drive.

This time, uou will be graded on the quality and detail of your answers as well as the actual presentation and functionality of the page. At this point full functionality is not going to be graded as heavily as to whether or not the files are accessible and appear to work as they are supposed to.

RUBRIC

Synposis & pseudocode	5
Turned anything in?	5
Turned in on time	5
Files named properly	5
Review/get data button	3
review info accurate/working	8
Using ttle attributes/context sensitive instructions	10
element input regex patterns	10
javascript required	10
error messages in the right location and make sense	10
Name fields edited	3
date range check	3
social or “id” field edited & obscured	2
email validated	3
phone validated (if present)	3
address validated	3
Slide bar shows dynamic value	3
user id edited	2
password validation on the fly	2
2 password boxes compared	5

March 27, 2026

Category: Html / CSS

Getting Started

Web Project Outcomes

Project Description

Minimum Requirements:

Important Considerations:

Where to start?

How to submit?

Use of Generative AI

Project Deliverables