1 of 25

Ames Girls Who Code

Session 15, 2019-02-13

2 of 25

TIMELINE

**ONLY 6 MORE WORKING MEETINGS**

Feb 13 - Javascript / continue work

Feb 20 - Continue work / clean up interface

Feb 27 - Test what you have so far

Mar 6 - Clean up and continue final work

Mar 13 - Final testing

Mar 20 - Wrap up project, prepare for showcase

*Mar 27: Showcase*

No coding
Bring parents/friends
Be proud and celebrate!

3 of 25

Plan for Today

HTML Javascript
HTML Forms - Attributes

Javascript - Conditional Activities
CODEPEN - Calculator HTML
CODEPEN - Calculator Javascript
Impact Project

4 of 25

https://www.w3schools.com/html/html_scripts.asp

5 of 25

https://www.w3schools.com/html/html_scripts.asp

6 of 25

https://www.w3schools.com/html/html_scripts.asp

7 of 25

https://www.w3schools.com/html/html_forms.asp

8 of 25

Plan for Today

HTML Javascript
HTML Forms - Attributes

Javascript - Conditional Activities
CODEPEN - Calculator HTML
CODEPEN - Calculator Javascript
Impact Project

9 of 25

https://www.w3schools.com/html/html_forms.asp

10 of 25

https://www.w3schools.com/html/html_forms.asp

11 of 25

Button Form Element

12 of 25

Plan for Today

HTML Javascript
HTML Forms - Attributes

Javascript - Conditional Activities
CODEPEN - Calculator HTML
CODEPEN - Calculator Javascript
Impact Project

13 of 25

If Else

Condition

14 of 25

15 of 25

Javascript If Condition

Javascript: Do the exercises

Javascript: If ... else

16 of 25

Plan for Today

HTML Javascript
HTML Forms - Attributes

Javascript - Conditional Activities
CODEPEN - Calculator HTML
CODEPEN - Calculator Javascript
Impact Project

17 of 25

Create your new CODEPEN PEN

18 of 25

Create your new CODEPEN PEN

We’re going to make a dynamic site which calculates math:

HTML Instructions:

Write up instructions for the user to follow in a paragraph

Have two (or more) input fields to type a number

Create a button that’s labeled “Calculate”

A paragraph to output the answer of the above math.�(You’ll change this with javascript magic)

CODEPEN

19 of 25

Add Javascript to your HTML CODEPEN

We’re going to make a dynamic site which calculates math:

Javascript Instructions:
Get the button and output paragraph from html

Add a function (aka the button “push”) to the button

Grab the two inputs
Multiply them together
Output the multiplication to the paragraph.

Extra Credit (*Remember - Pseudo Code FIRST, then program*):

Use your if/else knowledge to determine IF the answer is odd or even
OR use if/else if some other manner. Feel free to be creative :)

HTML + Javascript

20 of 25

Plan for Today

HTML Javascript
HTML Forms - Attributes

Javascript - Conditional Activities
CODEPEN - Calculator HTML
CODEPEN - Calculator Javascript
Impact Project

21 of 25

Wireframe Basic Impact Project / Build

A way to see and upload a picture

Extra credit: add caption to picture� Extra credit: picture count�

Date field - month and year�

Clay type�

Weight of clay - Pounds and ounces

Price - to be sold for

# of pieces made

Who you sold it to - how many

Surface Treatment

Add type of glaze (under glaze, etc)

Be able to add my own details

Extra credit: be able to add your own categories

Extra credit: filter as you type

Dimensions - inches

Extra credit: flexibility to add the dimensions you need

Firing type

Same as Object type and surface

General memo area��All fields

Extra credit: autofill/dropdown

Extra credit: can edit entry after the fact

�

22 of 25

CODEPEN

Save your projects in codepen.io

User: amesgirlswhocode@gmail.com

Pass: gwc2019

Create “New Pen”

Remember to save the pen using a team name�

23 of 25

Write the HTML for Your Page

Focus on the content.

Work together.

If you get stuck, try to look it up on w3schools first.

It will be UGLY! (but we’ll fix that along the way)

When you’re done, copy and paste it into an email to amesgirlswhocode@gmail.com �

24 of 25

Standup

What do you want us to go over again?

How are things going?

MARCH 27th → Mark your calendars

25 of 25

Have a great week!

Don’t forget to be awesome!