Merge pull request #105 from turingschool/separate-be-fe-try-coding

Separate be fe try coding

.ruby-version

@@ -1 +1 @@
-2.6.4
+2.7.2

try-coding-fe/control-flow/index.md

@@ -0,0 +1,75 @@
+---
+layout: lesson
+---
+
+### Go Back
+
+- [Welcome and Introductions](../)
+- [JavaScript Intro](../js-intro)
+
+# Control Flow
+
+The control flow is the order in which the computer executes the statements in our text editor. Code normally runs from the first line in the file to the last line, top to bottom, unless something changes that. Enter Control Flow.
+
+## What is Control Flow?
+
+You probably noticed the program we wrote before isn’t very flexible. We can ask the user a question and store their input, but we pretty much always say the same thing in response. What if we wanted the flexibility to change the behavior in reaction to the data?
+
+Control flow gives us the flexibility we’re looking for. We can change the response depending on the information the user types. Take a look at the code below and see if you can guess what the output might look like. Be prepared to share.
+
+```js
+var age = 35;
+
+if (age >= 21) {
+  console.log("Welcome to Sierra Nevada Brewing Company!");
+} else {
+  console.log("Sorry, you’re not old enough to access our site. Come back later!");
+}
+```
+
+## if Statements
+
+JavaScript's <code>if</code> statement is always followed by an expression, which is a fancy way of saying something that evaluates to true or false. If the expression evaluates to true, anything inside that code block is executed. However, if the expression is false, JavaScript skips over that block of code. Here’s an example of what that might look like:
+
+```js
+if (5 > 4) {
+  console.log("You will see this statement in the console, because five is greater than four!");
+}
+```
+
+The way our code is written now, if the expression evaluates to false, we don’t see any output in the console. In order to have another statement that runs if the expression is false, we need an <code>else</code> statement. Here’s an example:
+
+```js
+if (5 < 4) {
+  console.log("This statement won’t print, because five is NOT less than 4.");
+} else {
+  console.log("This statement will print instead!");
+}
+```
+
+We can also check a second condition if we want using an <code>else if</code> statement.
+
+```js
+if (5 < 4) {
+  console.log("This statement won’t print, because five is NOT less than 4.");
+} else if (5 > 4) {
+  console.log("This statement will print, because five is greater than 4.");
+} else {
+  console.log("This statement won’t print, because a true expression was already found!");
+}
+```
+
+<div class="try-it-new">
+  <h3>Try It: Control Flow with if Statements</h3>
+  <p>Back in your sandbox replit, write a program that will check the user’s age and determine whether or not they can rent a car using the following guidelines:</p>
+  <ul>
+    <li>If the driver is below 20 years old, they cannot rent a car.</li>
+    <li>If the driver is between 20 and 24 years old, they can rent the car, but they need to pay an underage driver fee.</li>
+    <li>If the driver is over the age of 25, they can rent the car.</li>
+  </ul>
+
+</div>
+
+### Up Next
+
+- [User Input](../user-input)

try-coding-fe/index.md

@@ -0,0 +1,52 @@
+---
+layout: lesson
+---
+
+# Try Coding - JavaScript Focus
+
+Please sign up for a free <a target="blank" href="https://replit.com/~">replit.com</a> account before beginning this workshop.
+
+## Welcome
+
+- Open up <a target="blank" href="https://replit.com/~">replit.com</a> in a browser (preferably Chrome) and log into your account.
+- Change your Zoom display name to your first name, last initial, and pronouns – Kaitlyn V. (she/her). To do that, hover over your image in the gallery view, click the three dots, and select Rename.
+- Heads up! We will ask you to introduce yourself in a moment.
+
+## What to Expect
+
+Over the course of the day, we will write code, practice the habits of successful developers, and learn a little more about Turing. We will ask you to introduce yourself, ask questions, and occasionally share answers to the technical work we do! By the end of today, you will build your very own “Guess the Number” console game. Below is our agenda for the day:
+
+- Welcome & Introductions (30 minutes)
+- Instruction (90 minutes)
+- Wrap-Up (15 minutes)
+
+## Learning Norms
+
+- No question is too small and no question is a bad question. Ask them!
+- We all benefit from each other's ideas! Push yourself to share at least one time today.
+- Keep your camera on during the session (if you can).
+- **Questions?** Type into the zoom chat, raise your hand, or come off of mute! Please avoid direct messages unless it is a specific issue only to yourself.
+- **Disconnected?** Jump back on!
+  <br>
+
+## Zoom Practice
+
+There are several ways to get my attention throughout the workshop today. Let’s practice using some of these tools now.
+
+- **Type in the chat to everyone.** What is your favorite genre of music?
+- **Send the instructor a direct message.** What word describes how you are feeling today?
+- **Raise your hand.** Find your zoom toolbar, click Reactions, then Raise Hand.
+- **Introduce yourself!** Share your name, pronouns, and your location. Then, share why you’re here.
+
+1. I’m looking for a career change and I’m trying coding for the first time.
+2. I already know I want to attend Turing, but I need to pick a program!
+3. My friend or family member won’t stop bugging me about checking this out, so here I am!
+
+### Up Next
+
+- [What is Front End and Back End Engineering?](./what-is-fe-be)
+- [JavaScript Introduction](./js-intro)
+- [Control Flow](./control-flow)
+- [User Input](./user-input)
+- [Ruby Number Guesser](./rb-number-guesser)
+- [Wrap-Up](./wrap-up)

try-coding-fe/js-intro/index.md

@@ -0,0 +1,136 @@
+---
+layout: lesson
+---
+
+### Go Back
+
+- [Welcome and Introductions](../)
+- [What is Front End and Back End Engineering?](../what-is-fe-be)
+
+# JavaScript Introduction
+
+JavaScript is a language that allows us to _interact_ with a webpage. We can write JavaScript that can access HTML elements and change their appearance or content based on the way a user interacts with the page.
+
+## Forking Your First Replit
+
+Replit is a web-based interactive development environment or IDE. It allows us to write code and see the output in the console at the same time. To get started today, we will be working in <a href="https://replit.com/@turingschool/js-sandbox?v=1#index.html" target="blank">this JavaScript sandbox replit</a>. When you open this replit, click the blue "Fork Repl" button to make your own copy on your account. From here, you can add code or delete code as much as you like. It's yours!
+
+A sandbox is a place where we can play around with code! Use this space to take notes or try things throughout the workshop today.
+
+<div class='module-card fe-project-card'>
+  <p class='standout'>Important Note:</p>
+  <p>In order to run the code, click on "Dev Tools" to see the console where the code will print out, then click the green "Run" button.</p>
+</div>
+
+## console.log()
+
+In your sandbox replit, complete the activity that follows.
+
+<div class="try-it-new">
+  <h3>Try It: Exploring console.log()</h3>
+  <p>Read the following JavaScript code, copy & paste it into the <code>script.js</code> file in your sandbox, then run it!</p>
+  <pre>console.log("Hello, World!");<br>console.log("Let's start coding.");</pre>
+  <p>What does the output tell you about the job of the <code>console.log()</code> command?</p>
+</div>
+
+<div class="expander expander-lesson">
+  <header>
+    <h3 class="spicy-click">Takeaways</h3>
+    <div>
+      <button class="expander-btn">
+          <img
+            src="../../assets/icons/arrow.svg"
+            alt="expander arrow icon" />
+      </button>
+    </div>
+  </header>
+  <div class="hide">
+    <ul>
+      <li><code>console.log()</code> is a <code>command</code> that is built into the JavaScript language</li>
+      <li><code>console.log()</code> will print the value it is instructed to print and creates a line break after printing the data</li>
+    </ul>
+  </div>
+</div>
+<br>
+
+## Variables
+
+In order to store a piece of data and reference it later, possibly many times throughout our code, we need to use variables. You can think of a variable like a storage container with a label on it where we can hold items we care about. In JavaScript we define variables by typing the keyword <code>var</code> followed by the name of the variable we wish to create, the assignment operator (<code>=</code>), and then the value we want to store in that variable. We end each statement in our code with a semi-colon.
+
+When working with JavaScript, we use <code>camelCase</code> for variable names, which means that words are joined without spaces, and each new word begins with a capital letter.
+
+```js
+var email = "[email protected]";
+var firstName = "Brandi";
+var location = "Tampa, FL 🌴";
+```
+
+<div class="try-it-new">
+  <h3>Try It: Variables in JavaScript</h3>
+  <p>Back in your sandbox replit, declare three variables that describe yourself, using the names <code>name</code>, <code>email</code>, and <code>location</code>.</p>
+  <p>Make sure to <code>console.log</code> each variable to verify you've stored it correctly!</p>
+</div>
+
+## Data Types
+
+In JavaScript, your data (information) can be different types. There are two data types we will be working with today: Number (any numeric value), and String (words or phrases like "JavaScript is fun!"). We use the Number data type if we are storing data that may be manipulated in some way. We use the String data type if our data needs to remain consistent. With String data, anything inside of the quotation marks is preserved.
+
+<div class="module-card fe-project-card">
+  <h3>Deciding on a Data Type</h3>
+  <p>For each item listed below, determine which data type is most appropriate for the information.
+  <ul>
+    <li>Username</li>
+    <li>Age</li>
+    <li>Zip Code</li>
+    <li>Balance on a bank account</li>
+    <li>Caption for an image</li>
+  </ul>
+  </p>
+</div>
+
+<div class="try-it-new">
+  <h3>Try It: Data Types</h3>
+  <p>Back in your replit, add two more variables about yourself assigned to Number values. Write a variable called <code>numberOfPets</code> and another variable of your choosing. Use console.log() to verify that the data was stored in the variable as expected!</p>
+   <div class="spicy-container">
+    <p class="spicy-click">
+      <span role="img" aria-label="spicy pepper">🌶</span>Click here for a Spicy Challenge<span role="img" aria-label="spicy pepper">🌶</span>
+    </p>
+    <div class="spicy-toggle">
+      <p>What happens if you add your two number variables together and console.log() the result?</p>
+    </div>
+  </div>
+</div>
+
+## Interpolation
+
+We can use string interpolation to combine static data with dynamic (or variable) data. Here's an example of the syntax:
+
+```js
+var firstName = "Amy";
+console.log(`Hello, ${firstName}!`);
+```
+
+The code above will make "Hello, Amy!" appear in the console.
+
+Note that _back ticks_ are the characters that surround this combination of the string an `${}` syntax. You can find the back-tick key at the top-left of your keyboard, next to the `1`.
+
+Anything inside the back ticks will be read as a string. But, when the interpreter sees the `${`, it will stop and wait for JavaScript code to read. Typically, we provide a variable name here. When the interpreter read the matching closing bracket - `}` - it goes back to treating characters as part of the string.
+
+<div class="try-it-new">
+  <h3>Try It: Interpolation</h3>
+  <p>Using interpolation and at least two of the variables you declared in the previous section, write a sentence about yourself! Make sure to print that sentence out to the console.</p>
+  <p>Change the value of one of the Strings you interpolated and re-run your code. Is the difference reflected in the output?</p>
+
+  <div class="spicy-container">
+    <p class="spicy-click">
+      <span role="img" aria-label="spicy pepper">🌶</span>Click here for a Spicy Challenge<span role="img" aria-label="spicy pepper">🌶</span>
+    </p>
+    <div class="spicy-toggle">
+      <p>What happens if you interpolate <code>numberOfPets * 4</code>? What does that tell you about how interpolation works?</p>
+    </div>
+  </div>
+</div>
+
+### Up Next
+
+- [Control Flow](../control-flow)

try-coding-fe/rb-number-guesser/index.md

@@ -0,0 +1,83 @@
+---
+layout: lesson
+---
+
+### Go Back
+
+- [Welcome and Introductions](../)
+- [User Input](../user-input)
+
+# Ruby Number Guesser
+
+Your JavaScript number guesser code probably looks something like this:
+
+```js
+var input = document.querySelector("input");
+var button = document.querySelector("button");
+var paragraph = document.querySelector("p");
+
+var secretNumber = 6;
+
+button.addEventListener("click", checkGuess);
+
+function checkGuess() {
+  var guess = input.value;
+
+  if (guess > secretNumber) {
+    paragraph.innerText = "Too high!";
+  } else if (guess < secretNumber) {
+    paragraph.innerText = "Too low!";
+  } else {
+    paragraph.innerText = "Great job! You got it!";
+  }
+}
+```
+
+This is something you might build if you were in the Front End program at Turing.
+
+Now let's take a look at what this same code would look like if you were implementing Ruby in our Back End program.
+
+### Explore: Back End Number Guesser
+
+Take a few minutes to explore the code below.</p>
+Consider: What are the similarities and differences you see between the Ruby code and the JavaScript code?
+
+```ruby
+secret_number = 6
+
+puts "Guess the secret number!"
+
+guess = gets.chomp.to_i
+
+if guess > secret_number
+    puts "Too high!"
+elsif guess < secret_number
+    puts "Too low!"
+else
+    puts "Great job! You got it!"
+end
+```
+
+## Front End versus Back End
+
+Whether we're working on the Front End or the Back End of an application, there is a lot of logic and data manipulation involved as illustrated by the number guessing code. The difference in Front End and Back End comes in what you'd work on next.
+
+If you're in the Front End program your next steps in this number guesser program might be to change the user interface, what the user sees and interacts with. Think about the webpage for this number guessing application.
+
+- What would the styling of this page be? (colors, fonts, shading)
+- How would the user input their guess and what would that _element_ look like?
+- Would there be any animations on the page to engage the user?
+
+If you're in the Back End program, your next steps might be in dealing with how to store this data and what to do with the data.
+
+- How should we store the information in the database?
+- Do we need to manipulate the data before storing it?
+- Is there any additional information we can get from the data such as averages, sums, or counts?
+
+## Questions
+
+What questions do you have about any of the content we've covered so far?
+
+## Up Next:
+
+- [Wrap Up](../wrap-up)