Module 3 Project: JavaScript

The purpose of this project is to practice writing JavaScript programs. Here’s what you need to know to get started:

  • Download the starter project. It contains an index.html file that loads a style sheet, jQuery, and main.js (where you put your JavaScript code). Also p5.js is included, but you will need to uncomment it in the head of index.html to use it.

    You should use a new copy of the starter project for each question.

  • All web pages, HTML, CSS, and JavaScript_ code must be created by you, and by hand. Do not use any HTML, CSS, or JavaScript code written by anyone else, and do not use any tools (other than a basic text editor) that generate web pages, CSS, or JavaScript.

  • Any images (or video) must have sensible alt text in case they cannot be displayed.

  • Format your HTML, CSS, and JavaScript_ source code so that it is easy for humans to read.

  • Work that technically does what is asked but is obviously very low-effort will probably not get full marks.

Part 1: JavaScript Programming with JQuery

For each of the following questions, please make a copy of the jQuery starter project and rename it to q?, where the ? is replaced by the number of the question. For example, the website containing your solution to question 1 should be called q1, the website for question 2 should be called, q2, and so on.

The exact layout and details of the pages are up to you, but try to make them neat and easy to use — something you would be proud to show other people.

  1. (2 marks) Create a page that converts centimeters to inches using the formula 1cm = 0.39in. It should work by letting the user type a number of centimeters into a textbox, and then pressing a button to get its value in inches.

  2. (2 marks) Create a page that calculates the pixels per inch (PPI) of a video display. Using text boxes, read in the following information:

    • \(w_p\), the width of the screen in pixels
    • \(h_p\), the height of the screen in pixels
    • \(d_i\), the length of the diagonal of the screen in inches

    PPI is then calculated using this formula:

    \[\textrm{PPI} = \frac{\sqrt{w_p^2 + h_p^2}}{d_i}\]

    The PPI should be displayed on the screen when the user clicks a button.

  3. (3 marks) Create a page that has some sample text (you could use lorum ipsum, if you like) in a paragraph, and these elements:

    • A checkbox that, when checked, makes all the letters in the paragraph uppercase. When the checkbox is unchecked, then the letters should be normal.
    • A checkbox that, when checked, buts a border around the paragraph. When the checkbox is unchecked, then there is no border.
    • Radio buttons that let you set the paragraph font to be serif, sans- serif, or monospace.

  4. (3 marks) Create a question-answerer similar in spirit to the Magic 8 Ball. On the screen is a big button that says something like “Ask a question”, and when that button is clicked a randomly chosen answer appears on the screen.

    Your program should have at least 5 different answers, chosen at random. Possible answers could be:

    • Yes
    • No
    • Absolutely!
    • Definitely not!
    • Maybe.

    Use the JavaScript Math.random() function to help choose the answer.

    Use a jQuery effect, such as fading in, to make the answer appear in a visually interesting way.

  5. (5 marks) Justin Bieber is having trouble answering all his fan mail, and has asked you to create a form-letter web page for him to generate quick and easy replies. His form-letter replies look like this:

    Dear <fan-name>,

    Thank your for the lovely <thing> you sent me. While it is obviously not as nice as the gold-plated <thing> that <famous-person> gave me, I’ve put it on my <location>, and look at it <time>.

    Love Justin <picture>

    The things between < and > should be filled in as follows:

    • <fan-name> is the fan’s name, and is typed into a textbox.
    • <thing> is the thing the fan sent him, also typed into a textbox.
    • <famous-person> is randomly chosen to be one of, at least, these people (you can add more if you like): my mother, Bill Gates, Beyonce, Jennifer Lawrence’s pool cleaner.
    • <location> is randomly chosen to be one of, at least, these places (you can add more if you like): washing machine, dashboard, lawn mower, bedside table.
    • <time> is randomly chosen to be one of, at least, these times (you can add more if you like): every third Tuesday around 10am, once in a blue moon, whenever I am feeling really hungry.
    • <picture> is randomly chosen to be one of three different pictures. Pick at least three different silly/fun pictures.

    The idea is that the user types in the <fan-name> and <thing>, then presses a button to make the entire finished form-letter appear on the screen. The other items should be filled in randomly as described.

    Please make your form-letter neatly formatted and easy to read.

Part 2: p5.js Programming Questions

The following questions use p5.js. Assuming you are using the p5.js starter project, all you need to do is to uncomment the p5.js lines in the head.

For each question, please use a canvas that is at least a 500-by-500, but at most 1000-by-1000.

  1. (3 marks) Write a p5.js program that uses at least 3 different shapes (lines, curves, triangles, etc.), and at least 3 different colors to draw a cartoon version of you. It could be just your face, or your whole body, whatever you prefer. Your cartoon should follow the mouse pointer around the canvas without leaving a trail.

  2. (3 marks) Write a p5.js program that lets you draw pictures with the mouse. It should have these features:

    • If you move the mouse around while a mouse-button is pressed down, then a line is drawn (e.g. a trail of circles or some other shape). If the mouse button is not pressed down, then no trail is left.
    • You can select the color of the drawing line by pressing ‘r’ for red, ‘g’ for green, and ‘b’ for blue.

  3. (5 marks) Write a p5.js program where you must dodge bouncing objects (e.g. bouncing balls or rectangles). The longer you go without letting the mouse pointer touch one of the bouncing objects, the higher your score. Your program should have these features:

    • A name. This is your game, so give it a unique and fun name. It should appear on the screen all the time, e.g. at the top.

    • At least three objects that bounce around the screen. If the mouse pointer touches one of these objects, then the game is over. The objects could be whatever you like, e.g. ellipses, rectangles, images, or a combination.

    • Some kind of score. This should appear on the screen all the time, and change as your score changes.

      The exact details are up to you, but the idea is that the longer you survive without touching an object, the higher your score. For example, every few seconds you could add 10 points to the score, or you could make the score equal to the distance the mouse pointer has traveled, etc.

Submitting Your Project

Put all the folders for your question answers, q1 to q8, into a folder called project3, and make sure that there is a file called index.html at the top-level of the folder and contains links to the index.html files for each individual question. This top-level index.html does not to be anything fancy: just a list of clearly-labelled links to each question is fine.

When you are done, compress your project3 folder as a zip file named project3.zip, and then submit this .zip file on Canvas.