exam

Final Project, IT-130, Summer Quarter 2020

Among the buzzwords that frequently shows up on job descriptions and in interviews is "self-learner". This is particularly true in the current age of automation and ever-advancing technology. To this end, it is a great skill to train ourselves to learn on our own.

For this project, I will have you study a few relatively short sections from W3Schools. You will then create a relatively simple web page incorporating some of the topics discussed.

Academic Integrity:

· This is an exam! In other words, you MUST work on your own.

· Any resources such as tutors or other students is plagiarism.

· This, of course, includes those “tutorial” sites that are out there. If this is detected (and I have my ways!) I’m afraid that the consequences will be severe. I really want nothing but the best for all of you.

However, because it is very important for me to ensure that all students are treated fairly, any detections of plagiarism / cheating in any form such as using online “tutoring” sites, will:

1. Receive a an F in the course

2. A formal report will also be filed with the Academic Integrity Committee. This can result in being expelled from the university.

3. This can happen at ANY TIME. i.e. A grade can be changed retroactively, even after the course has been completed.

And again, please note that we do have methods for detecting use of outside resources or reworking something another student has done in the same quarter or a different quarter. It happens to someone in every course. Please do not be one of them.

The Assignment

1. Start with the JavaScript tutorial page of W3 Schools. This can be found at: https://www.w3schools.com/js/default.asp

2. On the left you will see a bunch of sections. Go through the three sections JS Events, JS Strings, and JS String Methods.

3. After reading the JS String Methods page, you will also need to view the reference page for String methods at: https://www.w3schools.com/jsref/jsref_obj_string.asp

In your page, have a text field where you ask the user to enter a string. Then incude a select box with the following options

· Choose One

· When the page loads, this should be the first option that the user sees. This choice does not do anything.

· Print in Upper Case

· Prints the string in all upper case letter

· Replace the first ‘e’ with an ‘X’

· The first occurrence of the letter ‘e’ will be repalced by a capital ‘X’.

· Print the first letter in the string

· Oututs the first letter of the string! For example, if the user typed “Hello, how are you?”, it would simply output the letter ‘H’.

Note that this page will not have any buttons. The way it should work is that the moment the user selects one of the items in the select box, you should output to a div section, the desired choice.

For example, if the user typed in the text field: “Hello, how are you doing?” and then chooses “Print the first letter”, you should output: H.

If they selected “Replace the first ‘e’ with an ‘X’” you would output: HXllo, how are you doing

Hints

Here are a few hints to help you along.

1. You will invoke your function from inside the <select> form element. Again, this is not done via a button.

2. You will need to learn a little more about JavaScript “events”. We’ve already seen a common event: ‘onclick’. Look at the section entitled “Common HTML Events”. You will want to use one of those. Which event do you think would be ideal to use?

3. Remember not to do too much at once. For example, start by having the function first simply print something like: “hello” and get it to work. Then move on to responding to the strings.

4. The functions for working with strings can all be found on the reference page mentioned at the top of this page.

CSS

Have an external CSS file.

Inside your CSS file, create 2 classes. One of them should change the font and the color of the text on your page. The other class should apply a border and a background color.

Apply the first class to the <heading> section of your page. The second class shoud be for the <main> section of your page.

Here is what my page looked like when I first loaded it:

Notice that there is no button!

And here is the version after making a choice in the select box:

Grading of this project:

· 70% JavaScript

· 10% CSS (external stylesheet)

· 10% HTML: At least 2 semantic tags, all other tags that have been required throughout the course.

· 10% Properly formatted URL

Percentage of Course Grade: Because this is replacing your final exam, it is worth 25% of the course grade.

Submission:

1. Submit your HTML and external CSS file as a zip file to the Final Project folder on the submissions page of D2L.

2. Upload your HTML and CSS file to the web server and provide the URL as a comment to your submission.

DUE DATE: I am giving you nearly a full week to do this. However, because I need time to grade these and get your grades posted, there is a HARD deadline of July 21st at 11:59 PM Central Time.

· Note: I know I mentioned a couple of weeks ago that it might be July 22nd, but I need time to get the assignment graded, and your letter grades posted on the 24th. This is one of the reasons I’m giving you the assignment so early.

Questions? I hope the instructions are clear, however, if something is not, or if you spot any errors, please post to the discussion group so everyone can benefit!