DTC 477: Fall 2020: Tiny Projects

At times, the instructor will assign small, focused projects to practice specific skills. Read them carefully, as they may have different types of submissions and relative due dates, depending on the project.

  1. Tiny Project #1: Codepen Recipe (from Unit 1, Lesson 7)
  2. Tiny Project #2: Responsive Recipe (from Unit 1, Lesson 10)
  3. Tiny Project #3: Interactive Recipe (from Unit 2, Lessons 0-4)
  4. Tiny Project #4: Object-AJAX Recipe (from Unit 2, Lessons 5-6)
  5. Tiny Project #5: Multiple Recipes via AJAX (from Unit 2, Lesson 12)
  6. Tiny Project #6: Recipes with AJAX + PHP + JSON (from Unit 3, Lesson 7)
  7. Tiny Project #7: Recipes + MySQL (from Unit 3, Lesson 14)

Extra credit Tiny Projects are also listed here:

  1. Tiny Project Extras #1: Color Swatch (from Unit 2, Lesson 9)

Tiny Project #1: Codepen Recipe

  1. Watch the recorded lecture “Unit 1, Lesson 7” on Blackboard.
  2. Go to Tor’s recipe example at bit.ly/477-recipe-example.
  3. Fork the codepen to your own account and save it to a new name.
  4. Find your own recipe (an actual recipe someone could cook) and replace the example’s ingredients, equipment, and directions with yours.  (Look on AllRecipes.com or other recipe sites if you need inspiration.)
  5. Watch your formatting: open and close the tags correctly!
  6. Using HTML classes and IDs, and CSS selectors, target and style the subtitles and the list items:
    • Change at least two visible aspects of the list items. For example: color, font-style, font-family, font-weight, etc. Feel free to explore the CSS references for things to try.
    • Add a Google Font and use it on at least one element. 
    • Add IDs and classes to the HTML as necessary to select specific items.
    • Determine 2 particularly important items in the lists and use CSS to highlight them. 
  7. To submit: Save your codepen and share the URL on the Tiny Project #1 discussion board on Blackboard.

Tiny Project #2: Responsive Recipe

In Codepen, fork your recipe from Tiny Project #1 to a new Codepen, then edit/add HTML and CSS as necessary to:

  1. Add a relevant image that appears above the 3 list sections. Use Unsplash or other free image resources.
  2. Make the 3 lists (ingredients, equipment, directions) appear in a row of 3 boxes when in landscape (desktop-style) mode.
  3. Make the 3 lists appear in a column of 3 boxes when in portrait (mobile-style) mode. 
  4. Make at least one aspect of the layout different at a very small width (575px or less).
  5. Add at least one more HTML block of content of your choice and use CSS to style it nicely for both landscape and portrait style.
  6. Use only primarily relative units in your CSS.
  7. To submit: Save your codepen and share the URL on the Tiny Project #2 discussion board on Blackboard.
  8. Due date: this is due by midnight on Wednesday, September 23, 2020.

If you’re not sure what the visual output should be, the illustration below may help.


Tiny Project #3: Interactive Recipe

Your CodeAnywhere should be set up with your Reclaim Hosting as described in Unit 2, Lesson 0. Make sure you have watched Lessons 1-4. Then, starting with your recipe from Tiny Project #2 in Codepen…

  1. Create a new folder on your web hosting called “tp3”.
  2. As demonstrated in Unit 2, Lesson 2, use the provided HTML skeleton to convert your TP2 recipe into a complete working web page with three files in /tp3: index.html, styles.css, and scripts.js. (The instructor’s example is online.)
  3. As demonstrated in Unit 2, Lessons 3 and 4, add the necessary JavaScript, HTML, and/or CSS to accomplish the following:
    • Start the page so JavaScript immediately changes the font size of the main recipe headline from its prescribed CSS setting, either by changing its class or inline style.
    • Attach a JavaScript click event to the main recipe headline so that clicking on it will call a JavaScript function that changes its color, either by changing class or style.
    • Start the page so that the lists within each of the sections is hidden (not displayed), then attach JavaScript click events to each section headline that reveals/displays its section list. (Hint: the CSS properties display, visibility, or opacity may be useful; the latter can use transitions.)
    • Add a new HTML element with content to the DOM strictly with JavaScript: new text, an image, anything of your choosing.
  4. Your web page must still maintain its responsiveness as described in TP2.
  5. To submit: Save your HTML page (not your codepen, sorry) and share the URL on the Tiny Project #3 discussion board on Blackboard.
  6. Due date: this is due by midnight on Sunday, October 4, 2020 Monday, October 5, 2020.

If you run into any coding questions or issues, share your links on the “Coding Help” discussion forum, by email to your instructor, or schedule a live Zoom session.


Tiny Project #4: Object-AJAX Recipe

Your CodeAnywhere should be set up with your Reclaim Hosting as described in Unit 2, Lesson 0, and your TP2 should have been copied over as you followed along in Unit 2, Lesson 2 — if not as part of TP3. Make sure you have watched all the lessons through Lesson 6, which includes the instructor’s demo of this Tiny Project. Then, starting with your basic recipe…

  1. Using CodeAnywhere, copy the recipe HTML and CSS files to a new folder, “tp4”.
    • Note: in the recorded lecture for Unit 2, Lesson 6, I was unclear about where I got my TP2 source code on CodeAnywhere. It’s the result of Unit 2, Lesson 2, which demonstrates the differences between Codepen and CodeAnywhere, and migrates the recipe layout from Codepen to CodeAnywhere.
  2. Simplify the TP4 design to just the title, image, and 3 columns of instructions.
  3. Add “Contributed by” text somewhere in the layout with your name and adjust CSS as necessary.
  4. Strip down the HTML layout to a recipe skeleton page:
    • Copy the HTML for the 3 columns of instructions to a separate HTML file that only has that snippet of HTML in it, without any tags such as <html> or <body> or other elements on the page.
    • Then, delete the 3 columns from the recipe skeleton.
    • Delete the title and “contributed by” name of the recipe so these are just empty HTML tags.
    • If you are using an <img> tag for the recipe image, make the src attribute empty, just “”.
    • Or, if you are using CSS background-image for the recipe image, set that value to none.
  5. Make a JavaScript file that is linked in the <head> of the <HTML>.
  6. Copy the AJAX function shared previously in Lesson 5 (and again in 6) into this JavaScript file.
  7. Write a JavaScript object constructor for recipes that stores these properties:
    • Name/title of the recipe
    • URL to the image
    • Filename of the recipe HTML you copied out earlier
    • Name of the contributor (you)
  8. Add a method to the constructor that displays the recipe by updating the HTML elements on the page with the object’s own data. (Suggestion: just get one thing working first, such as the recipe title/name.)
  9. Create a new recipe object using the constructor and all the relevant info.
  10. Using window.onload, have the browser initiate that method on that object so the page displays your recipe.
  11. To submit: Save your HTML page and share the URL on the Tiny Project #4 discussion board on Blackboard.
  12. Due date: this is due by midnight on Sunday, October 11, 2020.

If you run into any coding questions or issues, share your links on the “Coding Help” discussion forum, by email to your instructor, or schedule a live Zoom session.


Tiny Project #5: Multiple Recipes via AJAX

As described and demonstrated in Unit 2, Lesson 12…

  1. Make sure TP4 is working, then copy it to a “/tp5” directory on your server.
  2. Modify the HTML, AJAX, and HTML snippets/files so that the 3 columns of information — ingredients, equipment, and directions — are now separately loaded files of HTML, instead of all in one file.
  3. This means the recipe object will have all these characteristics:
    • Recipe Title
    • Image URL
    • Contributor name
    • Filename for ingredients
    • Filename for equipment
    • Filename for directions
  4. Modify the HTML and CSS to add navigation to the page for 5 recipe choices: a menu, a row of buttons/links, etc.
  5. Using JavaScript, make the first link run the .displayRecipe() on your recipe object.
  6. Go to the Tiny Project #2 discussion forum on Blackboard and randomly select 4 recipes from your classmates.
  7. Copy the HTML for their ingredients, equipment, and directions into HTML snippets on your web server.  Also note the recipe title, the URL of the image source, and the name of the student.
  8. Modify your JavaScript to create 4 additional recipe objects, one for each of these additional recipes.
  9. Add these as clickable links in your navigation to update the display.
  10. To submit: Save your files and share the URL on the Tiny Project #5 discussion board on Blackboard.
  11. Due date: this is due by midnight on Sunday, October 25, 2020.

Tiny Project #6: Recipes with AJAX + PHP + JSON

As described and demonstrated in Unit 3, Lesson 7…

  1. Make sure TP5 is working, then copy it to a “/tp6” directory on your server. (This can be inside your /unit3 directory if you made that during a previous lesson.)
    • Don’t forget to check the permissions for the new directory.
  2. Modify the JavaScript recipe object to have these characteristics:
    1. Recipe Title
    2. Image URL
    3. Contributor name
    4. Recipe ID
  3. Create a new PHP file to respond to AJAX requests.
  4. Previously, in TP5, you had put the 3 columns of information — ingredients, equipment, and directions — into separately loaded files of HTML. Now, in your new PHP file, convert those ingredients into a PHP multidimensional array:
    • The first dimension of the array will be the recipe’s ID (from above).
    • The second dimension of the array will be “ingredients”, “equipment”, and “directions”.
    • For each of those, the third dimension of the array will contain the line items from those lists, one line per array element
  5. Write PHP to accept two parameters through a GET request: a recipe ID and list selection: “ingredients”, “equipment”, or “directions”. PHP should sanitize the requests as described in class.
  6. Using if statements in PHP, determine the output from the array, encode it as JSON, and output it.
    • If the parameters don’t match an existing recipe or list, return a value that indicates this error.
  7. Update the HTML to include the headers for the 3 sections inside their <div> tags, plus empty lists (<ul> or <ol>).
  8. Modify the JavaScript recipe object so that the method .displayRecipe() uses AJAX to call the PHP file with two parameters (recipe ID and list selection), decodes the response JSON, and loops through the results to output the list items to the empty lists.
    • You may need to empty the lists first.
    • If the AJAX response is an error (see above) then don’t update the display.
  9. As described in an earlier class, you should have Debuggr installed so the instructor can study your PHP code. If your /tp6 directory is not in your /unit3 directory, then install Debuggr in your /tp6 directory as well.
  10. To submit: Save your files and share the URL on the Tiny Project #6 discussion board on Blackboard.
  11. Due date: this is due by midnight on Sunday, November 15, 2020.

Tiny Project #7: Recipes + MySQL

As described and demonstrated in Unit 3, Lesson 14…

  1. Make sure TP6 is working, then copy it to a “/tp7” directory on your server. (This can be inside your /unit3 directory if you made that during a previous lesson.)
    • Don’t forget to check the permissions for the new directory.
  2. In the PHP, we are going to migrate those arrays of data to rows in a database table. There will be a minor edit to the JavaScript objects as well.
  3. Create a new file called “database.php” and copy into it the code contents from the demo “database.php” file (linked from the presentation slides). The file has several variables to set:
    • $databaseServer = “”; // IP number of database, may be on the same server
    • $databaseName = “”; // database name
    • $databaseUser = “”; // database username
    • $databasePassword = “”; // database user password
  4. Log into cPanel and set up a new database, recording the server information in your database.php file as noted above.
  5. Log into phpMyAdmin and set up 3 tables in the database named “ingredients”, “equipment”, and “directions”.
    • You are welcome to label the tables more abstractly, such as “output1”, “output2”, and “output3”, depending on how you have previously structured your arrays.
    • Each table should have these columns, named exactly as shown and demonstrated:
      • id: integer, auto-incremented unique identifier
      • name: varchar(100), name of the recipe
      • sequence: integer(2), step in the process
      • content: varchar(1000), contents of this text
      • timestamp: timestamp, auto-updated to CURRENT time
  6. Create a new file called “records.php” and copy into the code contents from the demo “records.php” file (linked from the presentation slides).
    • If you named your tables abstractly, look in the PHP to change the names of the tables where indicated by the comments.
  7. Using the records.php form, populate your database, item by item, with the contents of your recipes.
    • You should be able to refresh the “Browse” tab in phpMyAdmin and see the data updating.
  8. Edit recipes.php as noted in the demonstration (and in the presentation slides).
  9. Edit scripts.js as noted in the demonstration (and in the presentation slides).
  10. To submit: Save your files and share the URL on the Tiny Project #7 discussion board on Blackboard.
  11. Due date: this is due by midnight on Monday, December 14, 2020.

Tiny Project Extras #1: Color Swatch

THIS TINY PROJECT IS STRICTLY EXTRA CREDIT.

As introduced and dissected by the instructor in Unit 2, Extras Lesson 9: start with this pre-coded page — dtc477.net/tpx1 — and copy the 4 files (1 HTML, 1 CSS, 2 JS) to your own /tpx1 folder. Then, modify the HTML, CSS, and JavaScript to add the features described below:

  • Fill in the .lightenColor() method so the “up” arrow increases color lightness.
  • Fill in the .darkenColor() method so the “down” arrow decreases color lightness.
  • Add a second swatch which still obeys all the keypresses, updates the URL, and can be read from the URL

This EXTRA CREDIT is due by midnight on Sunday, October 18, 2020 as a complete URL submitted via Blackboard.