Module 5: JavaScript Validation and Wireframe Design

Link to my site: http://drew-williams.infinityfree.me/Module5.html
For this module, I worked on both web programming and web design.

Web Programming:
 I created my own HTML contact form with fields for name, email, and age. To make it more interactive, I wrote a JavaScript validation script. The script checks that the name field is not empty, the email contains an “@” symbol, and the age entered is 18 or older. If the inputs don’t meet these conditions, the form displays error messages in red. If everything is valid, it shows a green success message.
The easy part of this task was creating the basic form structure with HTML. The more challenging part was writing the validation logic so it gave clear and specific feedback for each error. Once I got the conditions right, it was satisfying to see the form respond dynamically when testing different inputs.

Web Design:
 For the design portion, I created a wireframe that simply shows the current structure of my website, you could also say it serves as a reference for how future pages should be designed. The wireframe includes a spot for a header with a logo and navigation, a main content area for forms and other features, and a footer. I designed it this way to keep the layout simple, clean, and user-friendly.
My rationale was to separate the site into clear sections: the header for navigation and branding, the main content area for the core purpose of each page, and the footer for consistency across the site.

Overall Reflection:
 This module helped me practice real-world input validation in JavaScript while also thinking about web design structure. The form validation exercise showed me how JavaScript can improve user experience by catching errors before submission. The wireframe exercise emphasized the importance of planning, giving me a clearer idea of how users will interact with the site before adding polish.

Comments

Post a Comment

Popular posts from this blog

Module 8: PHP Forms and GET vs POST

Link to my site:  http://drew-williams.infinityfree.me/Module8.html For this module, I created an HTML form that collects a user’s first name, last name, and email address. When the form is submitted, it sends the data to a PHP file on the server, which then displays the submitted information back on the page. I used the POST method for this form because it’s more secure and better suited for sending user input that shouldn’t be visible in the URL. I also reviewed the difference between $_GET and $_POST in PHP: $_GET sends data through the URL. You’ll see the variables appear in the query string, like  ?fname=Drew&lname=Williams . It’s fine for search queries or simple data you don’t mind being visible. $_POST sends the data in the body of the HTTP request, so it doesn’t appear in the URL. This makes it better for things like login forms or sensitive data. In my project, the PHP handler uses  $_POST  to grab each value, the...
Read more

Module 2: Introduction to HTML, CSS, and FTP

Here’s the link to my website:  https://drew-williams.infinityfree.me/index.html For this assignment, I created my very first homepage for the course using HTML and CSS and uploaded it to InfinityFree using FTP. At first, figuring out the FTP process felt a little tricky, But I had used it in the past for another course so it was really just a matter of seeing how much I could remember. Using VS Code to write my HTML and CSS was straightforward. I enjoyed giving the site a bit more style so it looked more like a real webpage, with a header, navigation links, and a footer. Creating the Module3.html page and adding a simple JavaScript script to display some text, was pretty simple. Overall, the hardest part was just making sure my files transferred correctly with FileZilla, but once I saw the site live, it felt really rewarding. Now I feel more confident about uploading changes and expanding the site in future modules.
Read more

Working with Datetime and Timedelta in Python

This week’s assignment focused on using the datetime and timedelta modules in Python. I practiced working with time-based objects, performing calculations, and combining date/time data with custom functions. Code Procedure: Simulated reading transaction data and displayed the item/cost with the current time using datetime.now() Used timedelta to subtract 60 seconds and add 2 years (730 days) to the current time. Created a timedelta object representing 100 days, 10 hours, and 13 minutes and printed the result. Wrote a function that takes 2 arguments (feet and inches) and prints them along with the current datetime. These exercises helped me better understand how Python handles time-based data and how to apply that to real-world scenarios. Code: from datetime import datetime, timedelta # 1. Display current time with item & cost sample_data = "2025-06-29\t11:23:00\tPublix\tMilk\t3.25\tCredit" data = sample_data.strip().split("\t") if len(data) == 6: ...
Read more