DTC 477: Spring 2021: 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: Signup
  2. Tiny Project #2: Hierarchy of a Kitchen
  3. Tiny Project #3: Basic Recipe
  4. Tiny Project #4: Responsive Recipe
  5. Tiny Project #5: Interactive Recipe
  6. Tiny Project #6: AJAX Recipe
  7. Tiny Project #7: Multiple Recipes via Objects and AJAX
  8. Tiny Project #8: Recipes with AJAX + PHP + JSON

Extra credit Tiny Projects are also listed here:

  1. Tiny Project Extras #1: Color Swatch (from Unit 2, Lesson 8)
  2. Tiny Project Extras #2: Recipes + MySQL

Tiny Project #1: Signup

  1. Sign up for course tools and services as described in Unit 1, Lesson 1, and listed below:
  2. To submit: enter the requested information on Blackboard under Tiny Projects > Tiny Project #1.

Tiny Project #2: Hierarchy of a Kitchen

  1. Following the concepts of object hierarchy and characteristics mentioned in Unit 1, Lesson 3, describe the objects in a kitchen using a logical hierarchy of parent-child relationships.
  2. List the key objects in the room, their “child” objects (as you see them), key attributes, and key actions.
  3. Format it as a hierarchical list (numbered or bulleted), like the example list about a bookshelf from Unit 1, Lesson 3.
  4. To submit: type, copy/paste, or link to your written hierarchy on Blackboard under Discussions > Tiny Project #2.

Tiny Project #3: Basic Recipe

Watch the recorded Unit 1, Lesson 6, then…

  1. Create a new Github project called “tp3” and then connect to it through your web hosting and CodeAnywhere.
  2. View Tor’s basic, unformatted recipe example.
  3. Copy the example “index.html” HTML file to your new folder and add it to your new Github and the Github repository.
  4. Find your own recipe (an actual recipe someone could cook) and replace the example’s lists for 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. Make sure you have updated your Github project (with commit and push) with your index.html file.
  8. To submit: share the URL to your live web page as well as the matching Github project on Blackboard under Discussions > Tiny Project #3.

Tiny Project #4: Responsive Recipe

Watch the recorded lecture Unit 1, Lessons 7-8, and then…

  1. Make a new Github project called “tp4” and connect to it through your web hosting and CodeAnywhere.
  2. Copy your TP3 index.html file to your TP4 directory.
  3. Add a supporting file — styles.css — and connect it to your HTML and the Github repository.
  4. Update the HTML and CSS as follows:
    • Using either an <img> tag or an element with a CSS background-image property, add a relevant image that appears above the 3 list sections. Use Unsplash or other free image resources.
    • Make the 3 lists (ingredients, equipment, directions) appear in a row of 3 boxes when in landscape (desktop-style) mode.
    • Using a CSS @media query, make the 3 lists appear in a column of 3 boxes when in portrait (mobile-style) mode. 
    • Using a CSS @media query, make at least one aspect of the layout different at a very small width (575px or less).
    • Add at least one additional HTML block of content (your choice of content and placement) and use CSS to style it nicely for both landscape and portrait style.
    • Primarily, use relative units in your CSS.
  5. Make sure you have updated your Github project with both your files: index.html and styles.css.
  6. To submit: share the URL to your live web page as well as the matching Github project on Blackboard under Discussions > Tiny Project #4.

Tiny Project #5: Interactive Recipe

Watch Unit 2, Lesson 3, and then…

  1. Make a new Github project called “tp5” and connect to it through your web hosting and CodeAnywhere.
  2. Copy both of your TP4 files to your TP5 directory.
  3. Add a new supporting file — scripts.js — and connect it to your HTML and the Github repository.
  4. As demonstrated in Unit 2, Lessons 1-3, add the necessary JavaScript (as well as any HTML and/or CSS) to accomplish the following:
    • Use a window.onload event to 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.
    • Use a JavaScript click (or onclick) event trigger 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 (or onclick) 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 using JavaScript with innerHTML: new text, an image, anything of your choosing.
  5. Your web page must still maintain its responsiveness as described in TP4.
  6. Make sure you have updated your Github project with all your files: index.html, styles.css, and scripts.js.
  7. To submit: share the URL to your live web page as well as the matching Github project on Blackboard under Discussions > Tiny Project #5.

Tiny Project #6: AJAX Recipe

Watch all the Unit 2 lessons through Lesson 6, which includes the instructor’s demo of this Tiny Project, and then…

  1. Make a new Github project called “tp6” and connect to it through your web hosting and CodeAnywhere.
  2. Copy all 3 of your TP5 files to your TP6 directory.
  3. Strip down the HTML layout as follows:
    • Copy the HTML for the 3 columns of instructions to 3 separate HTML files that each only contain the snippet of HTML in them, without any tags such as <html> or <body> or other elements on the page.
      • This means you will have 3 more files in your project.
    • Then, delete the 3 columns of content from your index.html file.
  4. Edit your scripts.js file as follows:
    • Copy the AJAX function shared previously in Lesson 6 into your TP6 JavaScript file.
    • In your scripts.js file, use a window.onload event to have the browser load the individual HTML files into their target object so the page displays your recipe.
  5. Make sure you have updated your Github project with all your files: index.html, styles.css, scripts.js, and the 3 recipe column snippets.
  6. To submit: share the URL to your live web page as well as the matching Github project on Blackboard under Discussions > Tiny Project #6.

Tiny Project #7: Multiple Recipes via Objects and AJAX

Watch Unit 2, Lesson 7, which includes the instructor’s demo of this Tiny Project, and then…

  1. Make a new Github project called “tp7” and connect to it through your web hosting and CodeAnywhere.
  2. Copy all of your TP6 files to your TP7 directory.
  3. Modify your index.html and styles.css files as necessary to:
    1. Add a div tag to hold a “Contributed by” text somewhere in the layout, and format it with CSS as necessary.
    2. If you are using an <img> tag for the recipe image, make the src attribute empty, just “”. Or, if you are using the CSS property background-image for the recipe image, set its value to none. Either way, save the URL to the image.
    3. Add navigation links or a menu to the page listing 3 recipe choices.
  4. Modify the JavaScript as follows:
    1. Remove the window.onload event.
    2. Write a JavaScript object constructor for recipes that stores these properties:
      • Name/title of the recipe
      • Name of the contributor (you)
      • URL to the image
      • Filename for the ingredients HTML snippet
      • Filename for the equipment HTML snippet
      • Filename for the directions HTML snippet
    3. Add a method to the constructor that displays the recipe by updating the HTML elements on the page with the object’s data. (Suggestion: just get one thing working first, such as the recipe title/name.)
    4. Create a new recipe object using the constructor and all the relevant info.
    5. Using JavaScript, make the first link run the .displayRecipe() on your recipe object.
    6. Once that is working, create recipe files for 2 other recipes, as follows:
      • Go to the Tiny Project #3 or Tiny Project #4 discussion forum on Blackboard and randomly select 2 recipes from your classmates.
      • 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.
      • You do not need to copy their CSS; you should apply your own CSS styling to their content.
      • This will add another 6 files to your project, one for each column snippet.
    7. Modify your JavaScript to create 2 additional recipe objects, one for each of these additional recipes.
    8. Add these as clickable links in your navigation to update the display.
  5. Make sure you have updated your Github project with all your files: index.html, styles.css, scripts.js, your own 3 recipe column snippets, and the 6 new recipe column snippets from your classmates’ recipes.
  6. To submit: share the URL to your live web page as well as the matching Github project on Blackboard under Discussions > Tiny Project #7.

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

Watch Unit 3, Lesson 6, then…

  1. Make a new Github project called “tp8” and connect to it through your web hosting and CodeAnywhere.
  2. Copy all of your TP7 files to your TP8 directory. Don’t forget to check the permissions for the new directory.
  3. Modify the JavaScript recipe object to have these characteristics:
    1. Recipe Title
    2. Image URL
    3. Contributor name
    4. Recipe ID
  4. Create a new PHP file called “recipes.php” which will respond to AJAX requests.
  5. Previously, in TP6, 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 Step 3, above).
    • The second dimension of the array will be “ingredients”, “equipment”, and “directions”.
    • For each of those, the value of the array unit will contain the line items from those lists, one line per array element.
  6. Update the HTML and CSS to include the <h1> headers for the 3 sections — Ingredients, Equipment, and Directions — inside their <div> tags, plus empty lists (<ul> or <ol>).
  7. Add 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.
  8. Using 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 (perhaps 0) that indicates this error.
  9. Modify the JavaScript recipe object so that the method .displayRecipe() uses AJAX to: call the PHP file (instead of individual code snippets) with two parameters (recipe ID and list selection); decode the response JSON; and loop through the results to output the list items to the empty lists by adding to the inner HTML of the list parent (ul or ol).
    • You may need to empty the lists first by setting the list parent (ul or ol) inner HTML to nothing.
    • If the AJAX response is an error (see above) then don’t update the display.
  10. Repeat the multidimensional array (from Step 5, above) for your other recipes, with the first dimension matching the recipe ID from your JavaScript object (from Step 3).
  11. As described in class, you should have Debuggr installed so the instructor can study your PHP code.
  12. Make sure you have updated your Github project with all your files: index.html, styles.css, scripts.js, debuggr.php, and recipes.php.
  13. To submit: share the URL to your live web page, your Debuggr password, as well as the matching Github project on Blackboard under Discussions > Tiny Project #8.

Tiny Project Extras #1: Color Swatch

THIS TINY PROJECT IS STRICTLY EXTRA CREDIT. Watch Unit 2 Extras, Lesson 8, then…

  1. Make a new Github project called “tpx1” and connect to it through your web hosting and CodeAnywhere.
  2. View the instructor’s pre-coded page and copy the 4 files (1 HTML, 1 CSS, 2 JS) to your own TPX1 folder.
  3. 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.
  4. Make sure you have updated your Github project with all your files: index.html, styles.css, and scripts.js.
  5. To submit: share the URL to your live web page as well as the matching Github project on Blackboard under Tiny Projects > TPX1.

Tiny Project Extras #2: Recipes + MySQL

THIS TINY PROJECT IS STRICTLY EXTRA CREDIT. Watch Unit 3 Extras, Lesson 8, then…

  1. Make sure TP8 is working.
  2. Make a new Github project called “tpx2” and connect to it through your web hosting and CodeAnywhere.
  3. Copy all of your TP8 files to TPX2.
  4. 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.
  5. 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
  6. Log into cPanel and set up a new database, recording the server information in your database.php file as noted above.
  7. 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, with auto-incremented (A_I) unique identifier enabled
      • 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
  8. 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.
  9. 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.
  10. Edit recipes.php as noted in the demonstration (and in the presentation slides).
  11. Edit scripts.js as noted in the demonstration (and in the presentation slides).
  12. As described in class, you should have Debuggr installed so the instructor can study your PHP code.
  13. Make sure you have updated your Github project with all your files: index.html, styles.css, scripts.js, debuggr.php, database.php, and recipes.php.
  14. To submit: share the URL to your live web page, your Debuggr password, as well as the matching Github project on Blackboard under Tiny Projects > TPX2.