Comp 110 Card for Someone Special

A Card for Someone Special

In this problem set you will write a simple program to create a digital "card" for someone special (mom, dad, bae, whoever). Maybe tell your mom you love her and you're doing great in your first CS class, or tell your lover you've found a second love in programming... entirely up to you! (Disclaimer: your card will be accessible to anyone with a link to it and the course staff, so please keep it PG-13.)

The purpose of this problem set is to ensure you have all of the software you need running, get comfortable with setting up a new app on your own, using an image or a gif, and publishing your first app to the internet! You will also get experience with basic function calls. Don't let this problem set fool you! Future problem sets will be much more challenging.

Part 0. Starting the Dev Environment

As with in lecture, begin by opening up VSCode, ensuring your project is still open, and then running the following two commands in the VSCode Terminal:

  1. npm run pull
  2. npm run start

The first command "pulls" the latest files needed for COMP110 into your repo, if any. The second command starts the development environment and will open your web browser to the local server. 

Part 1. Setting up an App

In the same directory used in lecture:

  1. Right click on the "src" folder
  2. Select "New Folder"
  3. Name the new folder: ps00-card
    1. Note: capitalization and punctuation are important!
  4. Right click on the folder you just created
  5. Select "New File"
  6. Name the new file: index-app.ts
    1. Note: capitalization and punctuation are important!
    2. Note: the i in index is lowercase!

Each subfolder inside of "src" will hold the files for a problem set, lecture, or a project of your own. Feel free to tinker with your own outside of those we require in the course! Each file ending in "-app.ts" is, by our conventions, a TypeScript web app. Soon we will see problem sets and examples in lecture which use more than one source code file. The file name "index-app.ts" is a special name that represents the default app inside of a project. The name of the folder and app inform the URL your work gets published to.

Part 2. Programming your Card

2.0 Honor Code Header

All problem sets begin with an Honor Code pledge. Notice this header is contained within block comment tags discussed in Lecture 1. You can copy paste the pledge below and fill in your name and ONYEN.

/**
 * Author:
 *
 * ONYEN:
 *
 * UNC Honor Pledge: I certify that no unauthorized assistance has been received
 * or given in the completion of this work. I certify that I understand and
 * could now rewrite on my own, without assistance from course staff, 
 * the problem set code I am submitting.
 */

2.1 Imports

The next step after ensuring the honor code header in starting most projects this semester is importing the functions we'll use from the introcs library (i.e. print, image, and so on). The first line of code to add to your app is the following:

import { print, image } from "introcs";

2.2 The main Function

Your program's logic will begin in a special function named `main`. This is a convention we chose because it is common across many other programming languages, as well. We will learn what many of these keywords and concepts mean as we move through the semester, for now just use the following "magical" incantation to setup your main function:

export let main = async () => {
   // TODO: Your code goes inside of this block.
};
main();

2.3 Programming Requirements for your Card

This problem set has only 3 hard requirements you must satisfy.

  • Your card must call the print function at least two times.
  • Your card must incorporate the words "love" and "COMP" in printed string values.
  • Your card must make use of the image function (the image can be a gif!)

As long as you satisfy these requirements, you are free to be creative with the printed text and image(s) in your card.

2.4 Using the print function

As seen in lecture, the print function will append values to your program's output. In this problem set you will likely only print text (hint: remember string literal values are surrounded by "double quotes"). An example use of the print function is:

print("hello, world");

2.5 Using the image function

The image function allows you to append an image (or gif!) to your program's output. It works similarly to the print function, in that you must provide a string literal to the function. The string that you must provide is a URL to an image or gif on the internet. A site like giphy.com makes finding a gif's URL quite easy! Simply select a gif, press the "Copy Link" button, and copy the GIF link URL. An example use of the image function is:

image("https://media.giphy.com/media/olAik8MhYOB9K/giphy.gif");

Part 3. Publish Your Card & Share It!

Ready to publish your card and send it to whoever you made it for? Great!

With your program running in your web browser, find the green "Publish App" button. If you are not still logged into introcs.com, you will be prompted to log in, and then your app will be bundled and published to the web! If you have not setup your introcs.com account yet, please go to the My110 link in the top right corner to begin the process. Once it's ready, you will be given a URL to it which you can pass along to whomever you made the card for.

Part 4. Submitting for Grading

To submit for grading first publish your project as per Part 3. Then, go to My110 in the top-right right corner of this page and select "Submit" next to the assignment. From here you should see a button that allows you to submit for grading. Your work will be graded through an automated process. If you receive points off, please select the "Report" link to see which tests did not pass. You can resubmit as many times as you'd like without penalty up until the deadline. We want you to keep working toward full credit on problem sets!