BTI225 Assignment 6

BTI225 Assignment 6
Submission Deadline
Wednesday, August 9th @ 11:59pm
Assessment Weight
9% of your final course Grade (including week 9 and week 10 in-class assignments with 0.5% each)
Objective
Design, implement, and host a website, as well as practice HTML form creation/validation and create
simple front-end (AJAX) web app (page)
Specification
In this assignment, you will create a personal website using the essential skills and knowledge that you
should master after studying this course. This assignment included the following parts:
 Design and implement a personal website with information about yourself, your interests, and
your expertise.
 Create an HTML form and implement form fields validation based on the requirements.
 Create a simple front-end app (page) to use AJAX to access remote web API data and render It
on a Web Page.
Part 1. Website Design
You are asked to create a personal website to show off your skills as a web developer to possible
employers. You are responsible for researching and implementing all aspects of this on your own.
Your website will be expected to have the following structure:
 All website content should be centered in the viewport, having equal margins on left and right.
The page content should cover 90% of the viewport width (the width of the browser window).
However, the content width should be limited to 1100 pixels, never growing larger than that
(take a look at max-width css property).
 All web pages should have the same theme, that means the headers, navigation/menu bars,
footers in all pages must look the same.
Note: the header on each page must have the background of an image (related to Seneca) token
by yourself with your full name, course & section, and date typed on the on the image using an
image editor (rather than render them using markup code in the page), for example:
 The navigation/menu bar should contain at least 3 menu items: "Home", "interests",
"Expertise". You can add more item(s), such as "Resume", "education" and so on if you want.
This means your website should have at least 3 web pages. You must provide meaningful
content for each page. The menu item for the current page should be highlighted.
 You should make one page to contain 2 horizontal sections (e.g., using <main> and <aside>) and
another page to contain 3 sections. When the browser window is narrowed down horizontally,
these sections should change from horizontal ones to vertical ones. Sections on all pages should
have appropriate setup for border, padding, margin and so on.
 In any page of your website, there should be at least one html table, one nested list, one video
player, on image, and one place where Google Fonts is applied to the text.
Note: You must not use existing web sites. All HTML, CSS, and JavaScript must be your own work.
For example, you are not allowed to use assignment3.zip file provided for your assignment 3.
Part 2. Creating an HTML Form

You are asked to create an HTML form with CSS styling and JavaScript validation to collect visitors'
information and messages/comments. You can create the form on any web page of your website. The
form’s "First Name”, "Last Name", "Email Address" and “Country" fields are required fields, and other
fields as optional. The "Country" field is a dropdown list. You need to provide at least 10 countries (not
necessarily to provide all countries) as options for the list and set the countries' alpha 2 code as values.
This form must be submitted to https://jkorpela.fi/cgi-bin/echo.cgi using the post method.
CSS code is required for styling the html form and you should have the output with the form fields well
aligned and sized like this screenshot:
Lastly, JavaScript is required for the validation to the form, and an appropriate error message must show
up just beneath each invalid field. Here are the detailed requirements:
 "First Name" and "Last Name fields":

o Must be present.
o Only alphabet letters (uppercase or lowercase), dot ('.') and space (' ') are allowed.
 "ZIP/Postal Code" field:
o If this field is present and "Canada" is selected in the "Country" filed, this field must be
in these formats: "A#A #A#" or "A#A#A#". Here, 'A' stands for an uppercase letter, and
'#' is a number from '0' thru '9'.
 "Phone" fields:
o If the "Phone" field is provided, it must be in the format "(999) 999-9999". Here '9'
stands for a number from '0' thru '9'.
Part 3. Creating a simple front-end (AJAX) app
You are asked to create an AJAX app ("The World Independent Countries") in any page of your website
to show dynamic content into the web page using AJAX technology. The data source url is
https://restcountries.com/v3.1/independent?status=true from a web API. You need to study the data
structure of the fetched data to get correct syntax to extract the required values and render them into
an HTML table. You must use the innerHTML property, map() function (applied to the fetched countries
array), and a template function (to convert a country object to markup code of table row) to render the
data into the page. When the page is loaded to the browser or DOM Content is loaded ("DOM is ready"),
all countries data should be show up in an HTML table with a scroll bar, like:
The World Independent Countries

Rubric
 Part 1. Website Design – 33%
 Part 2. Creating an HTML Form – 34%
 Part 3. Creating a simple front-end (AJAX) app – 33%
Assignment Submission
 Add the following declaration at the bottom of your home page (before </body> using the
preformatted text element):
/*********************************************************************************
* BTI225 – Assignment 6
* I declare that this assignment is my own work in accordance with Seneca Academic Policy.
* No part of this assignment has been copied manually or electronically from any other source
* (including web sites) or distributed to other students.
*
* Name: ______________________ Student ID: ______________ Date: ________________
*
*********************************************************************************/
 Compress (.zip) all files including the folder structure in your project directory (this is the folder that
you opened in Visual Studio to create your website). Submit your compressed zip file to My.Seneca
under Assignments -> Assignment 6
Important Note
 NO LATE SUBMISSIONS for assignments. Late assignment submissions will not be accepted and
will receive a grade of zero (0).
 Submitted assignments must run locally, ie: start up errors causing the assignment/app to fail on
startup will result in a grade of zero (0) for the assignment.
 After the end (11:59PM) of the due date, the assignment submission link on My.Seneca will no
longer be available for submission.

BTI225 Assignment 6

Uploaded by

Copyright:

Available Formats

BTI225 Assignment 6

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

BTI225 Assignment 6

Uploaded by

Copyright:

Available Formats

BTI225 Assignment 6

Part 1. Website Design

Your website will be expected to have the following structure:

Part 2. Creating an HTML Form

 "First Name" and "Last Name fields":

The World Independent Countries

You might also like

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.