DTC 477: Spring 2020: Tiny Projects

At times, the instructor will assign small projects to work on in class. You may be able to complete them before the end of class that day, or they may become homework due before the next class. Also, completing and submitting the assignment is different for each project. See specific projects for their own particular submission.

Tiny Project #1: CodePen

This project relies on the following resources:

Using these, complete the following:

  • Make your own copy of the basic skeleton code:
    1. While viewing the Skeleton, click on the “Fork” button to make your own copy.
    2. Change the name of your newly copied Codepen to include your name.
  • Answer these five questions:
    1. In the HTML and CSS, study the brackets, semicolons, line breaks, and indents. How are they formatted in the example? What happens if you remove line breaks or indents? What happens if you remove brackets or semicolons?
    2. What does “:hover” mean in the CSS? Consult CSS code references if necessary.
    3. Some CSS properties take a number with a unit. What units are used in the example CSS? What do the units mean? Describe the CSS properties shown in the example with their units.
    4. The quotation marks in the rendered HTML page are affected by two sections of CSS, one referring to a tag and one referring to a class. Which sections are they?
    5. In the CSS, the H1 tag has padding and margin properties on multiple lines. Consult CSS code references about a shortcut notation that would replace the 3 padding lines with 1 line. What is it?
  • Complete these updates to your copy of the skeleton code:
    1. Insert a quote of your own choice. Make it one line longer than the skeleton quote by adding a new H1 row.
    2. Change colors, font, sizes, alignments, etc., from the skeleton. For example, move the position of the div#contentBox and re-align it using the CSS property text-align. Or explore the CSS property background-image on different elements.
    3. Keep your HTML and CSS formatting neat.
    4. Advanced: In the original advanced example, there were special CSS properties attached to various tags, such as transition and animation. Study these in the CSS references and see if you can make them work on your skeleton.
  • Submit your answers and Codepen URL to the online form: forms.gle/zDYNcoaGbJUM9hg69

Tiny Project #2: Tables and Grids

This project may use the following resources:

Using the data provided in the presentation and also on the Blackboard project description, make 2 codepens as follows:

  1. Lay out the data using Tables.
  2. Lay out the data using CSS Grids.

In both cases: 

  • Add a header row that is styled differently from regular rows.
  • Change the background shade of alternate rows. 
  • Add and populate a fifth column of data of your choosing. Make up data.

Submit your Codepen URLs via Blackboard, under Tiny Projects > Tiny Project #2.

Tiny Project #3: PHP Quote

Using CodeAnywhere, convert your quote Codepen from Tiny Project #1 to a PHP file that changes based on inputs through $_REQUEST.

  • Make a new directory called “quote” in your Reclaim Hosting server space.
  • Make a new file called “index.php” in the “quote” directory.
  • Type in the HTML page skeleton.
  • Copy HTML and CSS from Codepen.
  • Using PHP variables with your own names, and data passed through $_REQUEST, customize these page elements:
    • Replace any 3 seperate words.
    • Replace the size and unit of the main typeface.
    • Replace any 2 colors using rgb() colors instead of hex codes, as follows. First, have the user pass one set of color numbers for Red, Green, and Blue values. Second, use PHP to calculate the other color based on those numbers, such as cycling them, or reducing or increasing them in some way.

If you want to convert a CSS hexadecimal color like #981e32 to an RGB color like rgb(152, 30, 50), the RGB to Hex web site might be helpful.

For reference, study the tutorials (you did those, right?) and the instructor’s lecture slides (up on Blackboard). You can also take a look at the instructor’s demo page and code at the links below:

Submit your URL via Blackboard, under Tiny Projects > Tiny Project #3.

Tiny Project #4: Got Form Data, Now What?

You are being given a small machine that produces data. What are you going to do with it?

Using CodeAnywhere, or the File Manager in your web hosting, set up TP4 as follows:

  • Make a new folder on your server called “tp4”.
  • Inside that “tp4” folder, make a new file called “index.html”.  Then, go to dtc477.net/tp4/index.html, view the source in your browser, and copy the entire text into your new “index.html”. This is a form that generates data.
  • Make another new file in the “tp4” folder called “makeit.php”.  Then, go to dtc477.net/tp4/makeit-php.txt and copy the entire text into your new “makeit.php”. This is the PHP file that receives the data from the form.

Once you have this set up, you should be able to go to your own web site and try it out. For example, go to http://yourdomain.com/tp4, where “yourdomain.com” is replaced with your actual domain.

For Tiny Project #4, you need to update “makeit.php” to produce HTML and CSS customized with the data coming in from “index.html”. What kind of HTML and CSS will you make? Does it draw a simple picture with DIVs, like in the class demo?  Is it a quote generator? Does it manipulate a CSS animation somehow? Populate a grid? Change the SRC values on IMG tags?  Tell a fortune?

The only requirement: You must use at least 4 of the incoming data variables. However, you can replace any of the form elements in “index.html” with a different form element, if you need something different for your PHP.

The “makeit.php” skyline code from the class demo can be studied, copied, and dissected here: dtc477.net/tp4/makeit-class-demo.txt. It has been extensively updated with comments in the PHP and CSS.

(If all those comments are too distracting, here’s a version of the class demo without any PHP and CSS comments: dtc477.net/tp4/makeit-class-demo-no-comments.txt.)

If you want an advanced example that uses all of the inputs, here is an expanded version of the class demo:

  • Try it out. On the form, only the labels have been changed. The actual variable names are still the same.
  • View the form’s source to get the index.html code.
  • The PHP source is also available, but without comments.

Submit your URL via Blackboard, under Tiny Projects > Tiny Project #4.

Tiny Project #5: Dice, but Nice

In class, we have been developing a simple PHP code to return dice rolls, with these specifications:

  • The page contains an HTML form with a single input for a number. As developed in class, this input is a numerical range slider that allows whole number values from 1 to 6.
  • The form submits back to itself using a GET method.
  • PHP outputs the number of dice rolled, as well as the roll-by-roll results for each dice.
  • PHP sets a cookie to remember the number of dice rolled last time, and also checks for any data in a previously-set cookie.

For this project, make the dice-rolling interface look nicer. Try any or all of the following:

  • Change the PHP output, either the messaging or the HTML.
  • Change the HTML to use a different form input field, or to rearrange the page layout.
  • Add CSS colors, fonts, etc., to style the page.
  • Add images, such as outputting dice images for each dice roll. (Tip: look on Game Icons for free dice icons, then upload those icons to your /dice folder, and use PHP to customize the SRC attributes of one or more outputted IMG tags.)
  • Feeling industrious? Add one or more new features to the page with new input fields that somehow change or reconfigure the page or the output.

The only requirement is that the page still meets all the specifications above.

Consider sketching your design on paper, or even in Photoshop, before trying it out with HTML/CSS/PHP.

Submit your URL via Blackboard, under Tiny Projects > Tiny Project #5.

Tiny Project #6: Logic Only (updated 03/02)

For this Tiny Project, you will describe the workings of a small web app in terms of logic, rather than programming. That’s right: this TP has no programming in it. Just logical programming concepts.

In groups of 2-3 students, make a copy of the provided Google Slides presentation, choose 1 of the 2 project options listed at the end of the presentation, and answer the questions on slides 3-7:

  • Who are you? Which project did you choose?
    • List the names of the people in the group.
    • Describe the project.
    • Which model of PHP output will you use, as described in tdvx.info/477-02-28 (slides 9-12)?
  • What are your outputs?
    • What data will you display? How will you display it? Will it be written, or visual?
  • What are your inputs?
    • What data are you receiving from the user?  How else are you getting or generating new data?
  • Where are you saving data?
    • Are you saving data in the browser? In the URL? In a database?
  • What is the step-by-step logic?
    • What are the step-by-step logical calculations or actions you need to do in order to produce the outputs from the inputs?
    • Think in terms of:
      • Variables needed, including arrays
      • How do you need to process those variables?
      • What needs to be compared?
      • What needs to be changed?
      • Do you need to loop through anything?
    • Even if you don’t know how to do something in PHP code, you can still think about the logic of what you want to do.
    • If your app has different tasks, they might each need their own logic.
    • Drawing a flow chart might help you sort out the logic.

Feel free to add more slides if you need more space to explain.

Before class on Monday, March 2, share your Google Slides presentation with the instructor via [email protected]

UPDATE 03/02:

In your group, think through all the variables you might need for this code, and list them with a description of what each variable does. Include variables you are just going to create within a loop or a function. Put this list in a table or bulleted list in Google Docs and share that with me before the next class.

UPDATE 03/04:

Update slide presentation as follows:

  • Polish the presentation visually so it looks better.
  • If you are including database access, list the columns/fields you plan to use.
  • Add a simple wireframe drawing, whether you create it with a tool like Mockflow Wireframe Pro, or in another app, or even in Google Slides itself.
  • Be ready to make an informal presentation on Friday. You won’t have long; around 5 minutes per group.

Tiny Project #6.2: Make It So

Make Tiny Project 6 a working web page/app according to the logic and specifications you defined in TP6.

This will be due before class on the Wednesday after Spring Break Wednesday, April 1 (updated).