Techtonica Application Workshop Day 2

Projected Time

2.5 hours

Prerequisites

• You should be digitally literate before doing this workshop—we define that as being able to use the mouse, keyboard, browser, and email easily.
• You should have already completed the day 1 workshop.

Motivation

Doing this workshop is part of the Techtonica application process. It will give you a good idea of what it’s like to learn technical concepts at Techtonica.

Objectives

Participants will be able to:

• Write some beginner JavaScript
• Collaborate with others
• Figure out some new JavaScript concepts
• Connect their JavaScript to their HTML

Specific Things To Learn

• Creating a JavaScript array
• Displaying a JavaScript array on the page
• Indexing into an array or string
• Selecting a random item from an array

Materials

• HTML (cheatsheet)
• CSS Glossary
• JavaScript I (slides)

Common Mistakes & Misconceptions

• HTML, CSS, and JavaScript can go in CodePen’s HTML box, but they are different languages, so they’ll need to be identified as those languages using HTML tags (<style> or <script>) (but let’s keep them in their boxes for now).

Practice

JavaScript

Feel free to look through the JavaScript I slides linked above or to use Google to move quickly through the other steps. There’s not a lot of time, so try to stick to accomplishing what’s in here for now:

1. Sign in to your CodePen account and start a new pen. Title it, “Workshop 2—My Name—Full Date” (for example, “Workshop 2—Jane Doe—10/23/2019”). Delete the existing code in the boxes.
2. Make a JavaScript (not HTML) list of products to sell.
3. Figure out how to display your list on the page exactly as it is in JavaScript (don’t add HTML to the page using JavaScript).
4. Write a function that will display a random item from your list on the page.
5. Display the last item from your list on the page.
6. Display all the list items longer than three letters.
7. Check your indentation so your code is easy to read!
8. Submit your CodePen link via email at the end of the workshop.

Challenge

• Do this one on your own! Start a new CodePen. Can you write a JavaScript function that does the following? Given a string, return a new string where the second and last characters are exchanged.
• Submit your CodePen link via email at the end of the workshop.

Check for Understanding

• Summarize to each other.
• Make a cheat sheet.
• Try making a new CodePen and doing it all again without looking at any resources.

Supplemental Materials

• RailsBridge Frontend