Code Your Constellations!

Code Your Constellations! #IBMSTEM4Girls

Welcome! #IBMSTEM4Girls Your star-guides: Felise Chrissie Arlene Rae Andrea

Activity outline #IBMSTEM4Girls • Youwill each be given a constellation to document. You willneed to: • Determine the coordinates for each star in the constellation • Get the computer to draw them in the correct position • Add some additional information about the stars or the constellation • Add some information about you, the author • Make your web page look super awesome!

Let’s find out the coordinatesof the stars in your constellation(we will use this to plot the constellations on the webpage) #IBMSTEM4Girls

Let’s find out the coordinates of the stars in your constellation Imagine the sky as an x-y coordinate plane, with the origin (0,0) positioned at the bottom left corner. #IBMSTEM4Girls

Let’s find out the coordinates of the stars in your constellation • y-axis x-axis #IBMSTEM4Girls

Let’s find out the coordinates of the stars in your constellation 1 Unit coordinate plane #IBMSTEM4Girls

Let’s find out the coordinates of the stars in your constellation (x, y) (x, y) (x, y) coordinate plane #IBMSTEM4Girls

#IBMSTEM4Girls Let’s plot our constellations!

Three Elements of a Web Page 2. JavaScript “The moving parts” Interactivity and Functionality We’ll be adding your coordinates here! A web page is like a house 1. HTML “The house frame” Web page structure 3. CSS “The look” Look and feel A web page!

“The house frame” What is HTML? HyperTextMarkup Language This language is based on English keywords called tagsthat tell a web browser how to display content on a web page.

Examples of HTML tags <p> <br> <div> <h1> <footer> <canvas>

HTML tags • Tags always have angle brackets < >on both ends, with a keyword in the middle: <p> <h1> • Tags typically come in pairs -- an opening tag and a closing tag with a forward slash: <p> </p> <h1> </h1> • Tags can also be nested inside of another pair of tags, like this: <div><p></p></div> “p” stands for paragraph

HTML tags How do they work? Like a juicy hamburger, HTML needs and opening and closing tag to hold it together <p> Juicy content in between </p>

HTML tags End tag #1 Start tag #1 • <p>What geometric shape is your constellation?</p> • <p>Tell us something interesting about your constellation</p> Start tag #2 End tag #2

Some useful HTML tags <h1> … <h6>: Creates headings in the web page, with heading 1 appearing larger than heading 2, which is larger than heading 3. <p>: Paragraph tag, creates a paragraph for text • <div>: Div tag, creates a section for text or picture content • <canvas>: Canvas tag, used to draw graphics on a web page <a href=”www.example.com”>An awesome link</a>: Anchor tag, creates a link to another web page. <imgsrc=”http://placekitten.com/g/200/200”>: Displays a picture in the web page

Codepen Online HTML/CSS/JS playground that lets you see results immediately A “pen” is a chunk of code that can render a webpage and can be shared with other users. Demo

Let’s practice! USE THE HTML EDITOR • Open the Simple Constellation pen: https://codepen.io/ibmstem4girlsgta/pen/ZjvVRG • Find the paragraph tag called “myParagraph” and update the text. • Add your name, grade, and school in the footer tag.

What is CSS? “The look” Cascading Style Sheets • Lets you control the colours and layout of a webpageusing specific properties

Examples of CSS properties color background-color font-size font-weight text-align border padding margin

What CSS looks like In the CSS: • h1 { • background-color: midnightblue; • color:white; • font-weight: bold; • } • In the HTML:<h1>Your constellation name goes here!</h1>

Some Sample CSS Properties In the CSS: • h1 { • background-color: green; • color:white; • font-weight: bold; • }

Some Sample CSS Properties In the CSS: • h1 { • background-color: green; • color:yellow; • font-weight: bold; • }

Some Sample CSS Properties In the CSS: • h1 { • background-color: green; • color:yellow; • font-weight: bold; • border: solid; • }

Some Sample CSS Properties In the CSS: • h1 { • background-color: green; • color:yellow; • font-weight: bold; • font-size: 4em; • }

Let’s practice! USE THE CSS EDITOR • Try changing the background-color and color of the body element. • Change the font-size of the h1 element. • Change the color of the myParagraph element. • Change the color of the footer element.

JavaScript - the “moving parts” • The most widely used programming language • A way to add programs to web pages • Adds functionality and interaction to web pages • Any web page you see today is most likely using JavaScript JavaScript will be used to add your stars to the webpage!

How do you store information about a star? • Saved in key/value pairs in the JavaScript • "x_coordinate" : 2 Key Value

How do you store information about a star? • Use commasto separate different pairs of data • "x_coordinate" : 2, • "y_coordinate" : 4,"color":"yellow", • "number_of_spikes":5

How do you store information about a star? • Use curly brackets { } to hold information for one star • {"x_coordinate" : 2, • "y_coordinate" : 4, • "color":"yellow", • "number_of_spikes":5}

How do you store information about allstars? • Use square brackets [ ]to hold information for all of the stars in the constellation • [{"x_coordinate" : 2, • "y_coordinate" : 4, • "color":"yellow", • "number_of_spikes":5}, • {"x_coordinate" : 6, • "y_coordinate" : 10, • "color":"yellow", • "number_of_spikes":6}]

How do you store information about allstars? • As a JSON object in the JavaScript • (JavaScript Object Notation) • [{"x_coordinate" : 2, • "y_coordinate" : 4, • "color":"yellow", • "number_of_spikes":5}, • {"x_coordinate" : 6, • "y_coordinate" : 10, • "color":"yellow", • "number_of_spikes":6}] Stars: Key Value

Let’s add the stars! FOLLOW ALONG CAREFULLY • Open the Constellations JSON generator pen in a new tab: https://codepen.io/ibmstem4girlsgta/full/vapvad/ • Choose the constellation Name and enter the (x,y) coordinates for your first star, the colour, and the number of spikes. • Click on “Add Star”. • Repeat steps 3 and 4 until all stars are added.

Let’s add the stars! FOLLOW ALONG CAREFULLY You should see something like this below:

Oops! I made a mistake FOLLOW ALONG CAREFULLY • If you make a mistake, you can delete the star. • Find the Star ID. • Copy the ID name into top right • box and press “Delete Star.”

Let’s add the coordinates! FOLLOW ALONG CAREFULLY Copy the constellations JSON from the box. Paste the JSON in the Javascript editor of the Simple Constellation pen, after the comment line that says // COPY AND PASTE YOUR JSON HERE.

More practice! • Add text describing your constellation to the paragraph tags with ids “my-description-1” and “my-description-2”. • Change the font-size of the “.myParagraph” element in the CSS. • Add a background-color to the footerin the CSS. • Add a coloured border to thefooter. Hint: Use the border-color and border properties • Change the color and the number of spikes on some of the stars in your constellation. • Add a coloured border to the canvas element. Hint: Use the border-color and border properties. • Create your own constellation. Ask the instructors for a piece of grid paper. • Add an image to your webpage.

Code Your Constellations!