1 of 20

Coding Beyond PixelBots

Level 3 teachers

Find all sessions at:

​

9dots.org/summer-kickoff/cusd

Add questions to our parking lot:

​

tinyurl.com/SKparking

2 of 20

Objectives

  • Returning teachers will have an opportunity to build a small coding project outside of the 9 Dots PixelBots environment.

​

3 of 20

Have you ever coded outside of 9 Dots?

4 of 20

agenda

Intro to CodePen

Code your Converter App

Share-out

​

5 of 20

What is CodePen?

  • CodePen is a free, open-source code editor for developers.

​

  • Allows users to write code in the browser and to see the results as they build.

6 of 20

Create a CodePen account

​

​

https://tinyurl.com/codepen-sign-up

7 of 20

Go to this link and fork the project

https://tinyurl.com/USDConverterApp

8 of 20

agenda

Intro to CodePen

Code your Converter App

Share-out

​

9 of 20

Coding Languages Overview

  • HTML creates the structure of a web page.

​

  • CSS handles the look and feel of a web page.

​

  • JS (JavaScript) adds interactivity to a web page.

​

10 of 20

You will create a currency converter similar to this

11 of 20

Challenge 1 (HTML)

  1. Observe the HTML file. What do you notice?
  2. Read the comment on line 21. Look at the format. What pattern do you see?
  3. Go to line 22. Add 3 more currencies using the format given on lines 13-19.

HINT: for each currency you add, update the green-highlighted code (value) and the white-highlighted text (currency label).

​

​

​

​

12 of 20

Challenge 2 (CSS)

  • Observe the CSS file. What do you notice?
  • Read the comment on line 47. Which object should you change to fix the width of the 3 boxes?
  • Once you’ve fixed the width, go to the result tab. Enter the amount you want to convert, select the currency, and click ‘Convert’. Notice the size of the result.
  • Read the comment on line 36. Which number should you change to fix the size?

​

​

​

​

​

13 of 20

Challenge 3 (Javascript)

  • Observe the Javascript file. What do you notice?
  • Read the comment on line 54. Use the variables ‘usdAmount’ and ‘rate’ to fix the equation on line 61.
  • Read the comment on line 42. Look at the format. What pattern do you see?
  • Go to line 46. Add 3 ‘else-ifs’ for the 3 currencies you chose in Challenge 1.

​

​

​

14 of 20

agenda

Intro to CodePen

Code your Converter App

Share-out

​

15 of 20

Show off your currency converter!

​

16 of 20

How did this session change how you think about coding?

17 of 20

#

�

​

Write a tweet that summarizes your key takeaway for modeling debugging. Don’t forget the hashtag.

​

​

​

@9dotscommunity

<An alternative to previous slide>

18 of 20

Boost us on social media!

@9dotscommunity

19 of 20

Your next session | 10:20am - 11:15am

Choose your session:

  • Curriculum Overview
    • A-B (Kinder & 1st Grade) - Parent Center
    • C (2nd Grade) - Rm. 11
    • D (3rd Grade) - Library
    • E (4th Grade) - Rm. 12
    • F (5th Grade) - Rm. 19
    • G (6th Grade) - PDC

Please stay behind if you’re not sure where to go.

Please navigate to 9dots.org/summer-kickoff/cusd �

�

20 of 20

Your next session | 10:22am - 11:10am

Choose your session:

  • Curriculum Overview A-B-C: Kinder, 1st and 2nd Grade
  • Curriculum Overview D-E: 3rd and 4th Grade
  • Curriculum Overview F-G: 5th and 6th Grade
  • Coding Practice: Returning Teachers

Please stay behind if you’re not sure where to go.

​

Please navigate to 9dots.org/summer-kickoff/home �