Category: Current Year Assignments

A2 – Setup Course Webpage

1. Follow the instructions in the Creating a WebStorm Project With Automatic Upload tutorial.

2. Not all browsers are created equal.  In particular, each one implements a different set of HTML elements and CSS features.  In addition they don’t all use the same Javascript engine.  In a real production environment, you would test the feature that you’ve implement in a web page using the browsers that your clients use.  In this course I will be testing your web pages using the Opera browser, therefore you need to download Opera and use it to test your pages.  Please download and install Opera now.

3. Create the following directory structure in your WebStorm project where public_html is the name of your project’s root directory.  You should not recreate the root directory as it was created when you set up your web server.  Name your directories exactly as I have specified below and use only lowercase characters. See the tutorial titled Useful Opera & Webstorm Features for instructions on creating a new directory.

.../public_html/css/
.../public_html/images
.../public_html/javascript/
.../public_html/courses/
.../public_html/courses/csci240/
.../public_html/courses/csci240/css/
.../public_html/courses/csci240/images/
.../public_html/courses/csci240/javascript/

4. Add a file named index.html with the following content to …/public_html/courses/csci240/.  Replace the author and date with your name and the current date.

<!-- 
index.html 
Author: Eric McGregor 
Date: December 24, 2017 
-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>My test page</title>
        <link rel="stylesheet" type="text/css" href="css/csci240.css">
    </head> 
    <body>
        <h1>CSCI-240 Web API Programming</h1>
       
        <script src="javascript/csci240.js"></script>
    </body>
</html>

5. Add a file named csci240.css with the following content to …/public_html/courses/csci240/css/.  Replace the author and date with your name and the current date.

/*
 * csci240.css
 *
 * Author: Eric McGregor
 * Date: December 24, 2017
 */

h1 {
    color: red;
}

6. Add a file named csci240.js with the following content to …/public_html/courses/csci240/javascript/.  Replace the author and date with your name and the current date.

/*
 * csci240.javascript
 *
 * Author: Eric McGregor
 * Date: December 24, 2017
 */

alert("test successful");
console.log("javascript is running");

7. Test your web page.  It should appear like my demo.  When your web page loads CSCI-240 Web API Programming should appear in red, a dialog box should appear that displays test successful, and the console should contain a log that reads javascript is running.  Be sure to check the console!

A3 – Structured Text

The goal of this assignment is practice structuring text in a web page.

For this assignment you must follow all of the rules specified below. Failure to follow any of the rules will result in a grade of zero for the assignment.

1. Add a file named structured_text.html to …/public_html/courses/csci230/.  Edit the file so that your web page is identical to this page.

2. You are permitted to use only the following elements, in the quantities specified:

  • blockquote (1)
  • body (1)
  • cite (1)
  • br (1)
  • dl (2)
  • dt (3)
  • dd (3)
  • h2 (1)
  • h3 (2)
  • head (1)
  • html (1)
  • li (6)
  • meta (1)
  • p (2)
  • title (1)
  • ul (1)

3. In addition, you are not allowed to use any special character elements or CSS styling.

A4 – Stylized Text

The goal of this assignment is teach you how use CSS rules to stylize a HTML page.

For this assignment you must follow all of the rules specified below.

  1. You must work independently.
  2. Before coding, please study my 3 online tutorials in section III titled CSS, Selectors, and The CSS Algorithm.  Please takes notes in your notebook while studying these tutorials.

After learning about CSS complete the following programming assignment.

  1. Add a file named stylized_text.html to …/public_html/courses/csci230/ and a file named stylized_text.css to …/public_html/courses/csci230/css/.
  2. Copy the HTML content below into your stylized_text.html file.  You are not allowed to modify this content at all!
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Stylizing Text</title>
    <link rel="stylesheet" href="css/stylized_text.css">
</head>

<body>

<h3>Funny Looking</h3>
<p id="author">by Alan Balter</p>

<p data-keywords="Mom">
At the hospital on the day of my birth<br>
I&apos;m told I looked strange for what it&apos;s worth<br>
Doc didn&apos;t whack my rump like he did to others<br>
Nope, I looked so funny he slapped my mother</p>

<p data-keywords="Mom Dad monkey">
    <br>
Mom said my face could make onions cry<br>
Dad took me to the zoo, and a girl made a crack<br>
    &quot;How nice of that man to bring the monkey back&quot;</p>

<p class="blue-paragraph" >
    Once I got sick with the Asian flu<br>
I needed some medicine like other kids do<br>
The doctor was hardly a humanitarian<br>
    When he suggested I visit a veterinarian</p>

<p>
    Being quite truthful; indeed brutally frank<br>
They turn off the camera when I go to a bank<br>
The first time I visited a psychiatrist&hyphen;Ouch!<br>
    She insisted I lie face down on the couch</p>

<p>
    But, I made it to college and earned a bachelor&apos;s degree<br>
Then completed a Master&apos;s and Ph.D<br>
I&apos;m the owner and president of a large company<br>
    Where lots of good looking people work for me</p>

<p>
    So if you don&apos;t like the image you see in your mirror<br>
Here&apos;s a message that couldn&apos;t be any clearer<br>
Don&apos;t worry young people; just hit the books<br>
    &apos;Cause what you know gets you further than how you look</p>

</body>
</html>

3.  Your job is to add content to your stylized_text.css file so that it looks identical to this web page.

4.  You are allowed to use only the partially completed rules below.  You will have to change the order in order.  When using these rules seek to understand how to construct CSS rules using identifiers, classes, attributes, pseudo-classes, pseudo-elements, CSS properties and their allowed values.

.blue-paragraph, #blue-paragraph { }
p:nth-of-type(5) { }
p:first-letter { }
#author { }
[data-keywords="Mom"] { }
:not(h3) { }
[data-keywords*="Dad"]::before { }
body { }
:nth-child(8) { }
h3::after { }

5. You are allowed to use only the following CSS properties, in the quantity specified.

color (3)
content (2)
font-family (1)
font-size (2)
font-style (1)
font-weight (1)
text-align (1)

6. You are allowed to use only the following CSS values.

cadetblue
large
"So yeah, I wasn\'t a handsome guys"
130%
fantasy
center
italic
" \01F923"
#0a6ebd
orange
bold

A5 – Structured Web Page

Before attempting this assignment, please read the tutorials in the section named HTML Revisited.  After reading, this assignment will help you practice using semantic and other HTML elements to structure the contents of a web page and to use CSS to style the content.

For this assignment you must follow all of the rules specified below.  Failure to follow any of the rules will result in a grade of zero for the assignment.

1. Create a file named structured_web_page.html in …/public_html/courses/csci240/ and a file named structured_web_page.css in …/public_html/courses/csci240/css/.

2. Add HTML code to structured_web_page.html so that it contains similar content to this web page..  The only differences between my web page and yours should be the Lorem Ipsum text (both headings and paragraph text) and the images.

3. Your web page must satisfy the following:

  • You must use only the following tags in exactly the quantity specified.
    • a (4)
    • body (1)
    • footer (1)
    • h1 (1)
    • h2 (4)
    • head (1)
    • header (1)
    • html (1)
    • img (3)
    • li (2)
    • link (1)
    • main (1)
    • meta (1)
    • nav (1)
    • p (5)
    • section (4)
    • title (1)
    • ul (1)
  • The Lorem Ipsum text should be randomly generated using the generator at www.lipsum.com.
  • The images should be randomly generated using the generator at loremflickr.com.
  • You must use an external stylesheet to stylize the elements.
  • The Home link should redirect the user to your domain’s home page.
  • The Lorem Ipsum link should link to www.lipsum.com.
  • The bulleted links should take the user to the sections of text below them.
  • There should be enough Ipsum Lorem text so that you can verify that the bulleted links are working properly.
  • Your domain name should replace your-url in the copyright statement.

4. The HTML elements should be stylized as follows:

  • The title text should be centered
  • The title text and heading text should be blue.
  • All unvisited links should be orange.
  • All visited links should be purple.
  • The copyright statement should be centered.

A6 – The Box Model

The goal of this assignment is to understand the CSS box model and learn how to use the padding, margin, width, height, and display properties with div elements.

For this assignment you must follow all of the rules specified below.  Failure to follow any of the rules will result in a grade of zero for the assignment.

1. Add a file named box_model.html to …/public_html/courses/csci230/ and a file named box_model.css to …/public_html/courses/csci230/css/.

2. Edit your files so that you produce a page identical to this page.

3. You are only allowed to use the following elements (in any quantity).

  • body
  • br
  • div
  • head
  • html
  • link
  • meta
  • title

4. You are only allowed to use the following CSS properties.

  • background-color
  • border-radius
  • display
  • font-size
  • height
  • padding
  • width

A10 – Arrays

The purpose of this assignment is to help you understand how to work with conditionals, loops, and arrays in JavaScript.

1 . Add a files named arrays.html, arrays.css, and arrays.js to the appropriate directories in your csci230 directory.

2. In your arrays.html file add a heading that reads “Read the console”.  Center this text both horizontally and vertically in the page.

3. In your arrays.js file add code that demonstrates the following:

  • Create an array named list that contains the values 0,1,2,3,4,5,6,7,8, and 9.
  • Use a for-in loop to print to the console the elements in the array named list.
  • Use a for-of loop to print to the console the elements in the array named list.
  • Use a for-loop to set all of the elements at even indices (0,2,4,6,8) in the array named list to 0.
  • Print the contents of the array named list to the console as a single string.
  • Print to the console the contents of the array named list as a single string with dashes (-) separating the elements.
  • Add the number 7 to the beginning of the array named list.
  • Remove the last element in the array named list.
  • Print the contents of the array named list to the console as a single string.
  • Print the length of the array named list to the console.

 

  • Using the filter method, create an array named nonZero that contains the elements in the array list that are not zero.
  • Print the contents of the array named nonZero to the console as a single string.
  • Add 7, 8, and 9 to the end of the array named nonZero.
  • Print the contents of the array named nonZero to the console as a single string.
  • Reverse the order of the elements in the array named nonZero.
  • Print the contents of the array named nonZero to the console as a single string.
  • Sort the array in numeric order.
  • Print the contents of the array named nonZero to the console as a single string.