SUMMER CAMPS are running May 27th to August 1st 2025

(480) 757-1281

Code Dot Org Student Resources

How To Copy An Image URL

AppLab lets you add images you find online to your Apps. To do this, you’ve got to find an image’s URL (Uniform Resource Locator.) AppLab supports .png and .jpg image file formats, so make sure the image URL you add to your app ends with .png or .jpg. The online video: HOW_TO_COPY_AN_IMAGE_URL shows you the process of searching for and copying the URL for an image online.

Favorite Links App

Even the youngest students should be able to create a Favorite Links app like this one. The design tab contains three images – each with a unique ID (instructors can show students how to obtain and paste image URLs into App Lab). The code tab has three onEvent() handlers which open a different URL when each image is clicked.

Favorite Links App Finished App Link:

https://studio.code.org/projects/applab/R_D2EGCiozltYPTRtkbkA1sozK42gqMQu3PusLaWZwc

  1. Sign in to Code.org
  2. Open the Finished App link above in a new browser tab.
  3. Click the View Code Button
    View Code Button
  4. Click the Remix Button to copy the project to your account:
    Favorite Links App Remix Button

STEP 1: Add images to the design tab by finding and copying image URLs. Size and position each image and give each image a unique ID. These Ids will be referenced in the code. The image links used in the example app are:

https://upload.wikimedia.org/wikipedia/commons/b/b8/YouTube_Logo_2017.svg

https://upload.wikimedia.org/wikipedia/commons/2/26/Spotify_logo_with_text.svg

https://upload.wikimedia.org/wikipedia/commons/c/ce/Twitch_logo_2019.svg

STEP 2: In the code, add an onEvent() function for each image. Select the “click” action. For the callback function, add the open() function with the URL to open when each image is clicked as shown below:

Cookie Click App V 1.0

Cookie Click V 1.0 Finished App Link:

https://studio.code.org/projects/applab/UIax7dqk2WkixoPunt-ZzZ1OnDWWDMjgV-KKwtkcLzI

  1. Sign in to Code.org
  2. Open the Finished App link above in a new browser tab.
  3. Click the View Code Button
    View Code Button
  4. Click the Remix Button to copy the project to your account:
    Cookie Click Remix Button
  5. Make the app your own.

Ideas to make the app your own:

  • Change the cookie image to an image you choose
  • Make the score increase by more than 1 with each click
  • Change the app design (background color, font family, etc.)

Cookie Click App V 2.0

Cookie Click V2.0 increases the player’s level for every 10 cookies clicked. It also keeps track of how many clicks the player made per second on average. Though you may not yet know the programming commands needed to do these things, can you think about the type of variables and math that would be involved? Hint: You can use AppLab’s getTime() function to calculate the elapsed time between two events. JavaScript’s Math.floor() function/method rounds a number with a decimal down to the nearest integer.

Cookie Click V 2.0 Finished App Link:

https://studio.code.org/projects/applab/mtbkNfg8NHb0WJ6aizMUf7jy6xenhSAZ2scr4tUGQ20

  1. Sign in to Code.org
  2. Open the Finished App link above in a new browser tab.
  3. Click the View Code Button
    View Code Button
  4. Click the Remix Button to copy the project to your account:
    Cookie Click Remix Button
  5. Make the app your own.

Tech-A-Sketch App V 1.0

Tech-A-Sketch V 1.0 Finished App Link:

https://studio.code.org/projects/applab/JYpi1Uv6DjC1BaHrLMQ67py-K9bHeSGo6Xs_9fy4hQE

  1. Sign in to Code.org
  2. Open the Finished App link above in a new browser tab.
  3. Click the View Code Button
    View Code Button
  4. Click the Remix Button to copy the project to your account:
    Tech-A-Sketch Remix Button

Tech-A-Sketch App V 2.0

Tech-A-Sketch V 2.0 Finished App Link:

https://studio.code.org/projects/applab/4KHwALnMZ8hyG0-bAMi8wL6EpyJeFvLfH-fvsu3QDIs

  1. Sign in to Code.org
  2. Open the Finished App link above in a new browser tab.
  3. Click the View Code Button
    View Code Button
  4. Click the Remix Button to copy the project to your account:
    Cookie Click Remix Button

Sound Board App V 1.0

Sound Board V 1.0 Finished App Link:

https://studio.code.org/projects/applab/nEuDkBBFc01fvpT4yOU-xViqDKqX3xMKmDh_kWPNrDk

  1. Sign in to Code.org
  2. Open the Finished App link above in a new browser tab.
  3. Click the View Code Button
    View Code Button
  4. Click the Remix Button to copy the project to your account:
    Sound Baord Remix Button

Sound Board App V 2.0

Sound Board V2 App Image

Sound Board V 2.0 Finished App Link:

https://studio.code.org/projects/applab/5tCJDj2sz1KmV-Cocmdm-H1KjqBnVuoAP7P_CjKwi3w

  1. Sign in to Code.org
  2. Open the Finished App link above in a new browser tab.
  3. Click the View Code Button
    View Code Button
  4. Click the Remix Button to copy the project to your account:
    Sound Board Remix Button

Soccer Goalie App V 1.0

Soccer Goalie V 1.0 Finished App Link:

https://studio.code.org/projects/applab/RbuT3lJ7-F2IqJ5_ZqdvaK6KTzAEOXXFDq1ELqV269o

  1. Sign in to Code.org
  2. Open the Finished App link above in a new browser tab.
  3. Click the View Code Button
    View Code Button
  4. Click the Remix Button to copy the project to your account:
    Soccer Goalie V1 Remix Button

Soccer Goalie App V 2.0

Soccer Goalie V 2.0 Finished App Link:

https://studio.code.org/projects/applab/0uvhJkq7ovX-4OfB_iRav1LU5a73hw1oTqhJFibqTsU

  1. Sign in to Code.org
  2. Open the Finished App link above in a new browser tab.
  3. Click the View Code Button
    View Code Button
  4. Click the Remix Button to copy the project to your account:
    Soccer Goalie V2 Remix Button

Create Your Adventure App V 1.0

Create Your Adventure App V 1.0 Finished App Link:

https://studio.code.org/projects/applab/ev4gKCWJDDlfzN7-X-YLy91lD9eU-WACH2xhYUKJ1-8

  1. Sign in to Code.org
  2. Open the Finished App link above in a new browser tab.
  3. Click the View Code Button
    View Code Button
  4. Click the Remix Button to copy the project to your account:
    Adventure V1 Remix Button

Create Your Adventure App V 2.0

Create Your Adventure App V 1.0 Finished App Link:

https://studio.code.org/projects/applab/F-EOYdHIXdCSBtsodA4b6wzHzTr4YEQvEIJj_qM1bBI

  1. Sign in to Code.org
  2. Open the Finished App link above in a new browser tab.
  3. Click the View Code Button
    View Code Button
  4. Click the Remix Button to copy the project to your account:
    Adventure V2 Remix Button

Memory Game App V1.0

Memory Game App Finished App Link:

https://studio.code.org/projects/applab/wKCl3Py-7HimA0nXNj7xDoFn7iebtQKZ19qy9MAsQbE

  1. Sign in to Code.org
  2. Open the Finished App link above in a new browser tab.
  3. Click the View Code Button
    View Code Button
  4. Click the Remix Button to copy the project to your account:
    Favorite Links App Remix Button

Memory Game App V 2.0

Memory Game V2 Finished App Link:

https://studio.code.org/projects/applab/H8HmTTYMCqO0CgEeMrEn0AETV3XcBc629fS5Gqw71v0

  1. Sign in to Code.org
  2. Open the Finished App link above in a new browser tab.
  3. Click the View Code Button
    View Code Button
  4. Click the Remix Button to copy the project to your account:
    Memory App V2 Remix Button

Wordle App

The Wordle Apps require the use of one of App Lab’s built-in data tables. Add the Wordle data table by going to: The DATA tab > Language and Literature > Wordle > Import.

Wordle Finished App Link:

https://studio.code.org/projects/applab/JkuDHVQBROM84fbuHpyKDKw8Npuq4XmjV15Ih6tdlYw

  1. Sign in to Code.org
  2. Open the Finished App link above in a new browser tab.
  3. Click the View Code Button
    View Code Button
  4. Click the Remix Button to copy the project to your account:
    Memory App V2 Remix Button
To top