Separate Ruby and JS try coding

.ruby-version

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

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

@@ -0,0 +1,92 @@
+---
+layout: lesson
+---
+
+### Go Back
+
+- [Welcome and Introductions](../)
+- [Ruby Methods](../ruby-methods)
+
+# 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.
+
+```ruby
+puts "How old are you?"
+age = gets.chomp.to_i
+
+if age >= 21
+  puts "Welcome to Sierra Nevada Brewing Company!"
+else
+  puts "Sorry, you’re not old enough to access our site. Come back later!"
+end
+```
+
+## if Statements
+
+Ruby’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, Ruby skips over that block of code. Here’s an example of what that might look like:
+
+```ruby
+if 5 > 4
+  puts "You will see this statement in the console, because five is greater than four!"
+end
+```
+
+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:
+
+```ruby
+if 5 < 4
+  puts "This statement won’t print, because five is NOT less than 4."
+else
+  puts "This statement will print instead!"
+end
+```
+
+We can also check a second condition if we want using an <code>elsif</code> statement.
+
+```ruby
+if 5 < 4
+  puts "This statement won’t print, because five is NOT less than 4."
+elsif 5 > 4
+  puts "This statement will print, because five is greater than 4."
+else
+  puts "This statement won’t print, because a true expression was already found!"
+end
+```
+
+<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>
+
+  <p><strong>Ready for another challenge? </strong>Write a program that asks the user for the product of 5 and 10 and collects their response. Give the user some feedback based on their response. You decide what feedback makes sense!</p>
+
+</div>
+
+<div class="module-card fe-project-card">
+  <h3>Building a "Guess the Number" Game</h3>
+  <p>Use <a href="https://replit.com/@turingschool/ruby-number-guesser-starter#main.rb" target="blank">this replit</a> as a starting point. We are going to build a “Guess the Number” game for a user in the console. In the starter kit, you already have a <code>secret_number</code> variable assigned to 6 and a <code>puts</code> statement that shows the user the title of game. Follow the steps below to keep going!</p>
+  <ol>
+    <li>Next, prompt the user to enter a number from 1 to 10.</li>
+    <li>If the guess is less than the secret number, tell the user, "Not quite. Too low."</li>
+    <li>If the guess is greater than the secret number, tell the user, "Oops. Too high."</li>
+    <li>Otherwise, tell the user they guessed the number with the statement, "You did it!"</li>
+    <li>Test your code a few times to make sure you can generate all 3 responses.</li>
+    <li>Finally, update the value assigned to <code>secret_number</code> to a random number from 1 to 10.</li>
+  </ol>
+</div>
+
+
+### Up Next
+- [JavaScript Number Guesser](../js-number-guesser)

try-coding-fe/index.md

@@ -0,0 +1,52 @@
+---
+layout: lesson
+---
+
+# Try Coding
+
+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)
+- [JavaScript Methods](./js-methods)
+- [Control Flow](./control-flow)
+- [Ruby Number Guesser](./rb-number-guesser)
+- [Wrap-Up](./wrap-up)

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

@@ -0,0 +1,131 @@
+---
+layout: lesson
+---
+
+### Go Back
+
+- [Welcome and Introductions](../)
+- [What is Front End and Back End Engineering?](../what-is-fe-be)
+
+# Ruby Introduction
+
+Ruby is a dynamic, open-source programming language widely known for its simplicity. It has an intuitive syntax that is natural to read and comparatively easy to write. It is used primarily for Back End Engineering.
+
+
+## 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/ruby-sandbox#main.rb" target="blank">this Ruby 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.
+
+## puts
+
+In your sandbox replit, complete the activity that follows.
+
+<div class="try-it-new">
+  <h3>Try It: Exploring puts</h3>
+  <p>Read the Ruby code and then run it.</p>
+  <p>What does the output tell you about the job of the <code>puts</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>puts</code> is a <code>command</code> that is built into the Ruby language</li>
+      <li><code>puts</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 Ruby we define variables by typing the name of the variable we wish to create, followed by the assignment operator, and then the value we want to store in that variable.
+
+When working with Ruby, we use <code>snake_case</code> for any variable names, meaning all characters should be lowercase with multiple words separated by underscores.
+
+```ruby
+email = "[email protected]"
+first_name = "Brandi"
+location = "Tampa, FL 🌴"
+```
+
+<div class="try-it-new">
+  <h3>Try It: Variables in Ruby</h3>
+  <p>Back in your sandbox replit, declare three variables that describe yourself. Use puts followed by each variable name to confirm that you’ve done this correctly!</p>
+</div>
+
+## Data Types
+
+In Ruby, your data (information) can be different types. There are two data types we will be working with today: Integer (any whole number), and String (words or phrases like "Ruby is fun!"). We use the Integer 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 assigned to Integer values. Use puts or print to verify that the data was stored in the variable as expected!</p>
+</div>
+
+## User Input
+
+Our programs haven’t been very exciting so far because we already know what will happen just by looking at the code. What if your program incorporated dynamic input from the user?
+
+**Explore**
+
+1. <a href="https://replit.com/@turingschool/ColdPowderblueMeasurements" target="blank">Read the code in this replit</a> and *guess* what it will do. It is also available below, if you prefer to preview it here.
+2. Run the program. It's interactive! Be ready to type in your answers in the console area.
+
+<iframe frameborder="0" width="100%" height="600px" src="https://replit.com/@turingschool/Getting-User-Input?lite=true"></iframe>
+
+<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>Instead of manually typing in every value, we can collect values from our user to provide a dynamic experience.</li>
+      <li>When the code is run, it will stop at <code>gets.chomp</code> and wait for the user to type input into the console.</li>
+      <li><code>gets</code> collects a string from the console and chomp removes the final character which is the enter/return.</li>
+    </ul>
+  </div>
+</div>
+<br>
+
+<div class="try-it-new">
+  <h3>Try It: Getting User Input</h3>
+  <ol>
+    <li>In your sandbox replit, write a small program that asks the user for their name and responds with a sentence of your choice!</li>
+    <li>Now, add on to your program and ask your user two more questions. If you’re not feeling creative, ask them how they are feeling today or their best friend’s name! Try running your program a few times with different values stored in the variables each time.</li>
+  </ol>
+</div>
+
+### Up Next
+- [Ruby Methods](../ruby-methods)

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

@@ -0,0 +1,89 @@
+---
+layout: lesson
+---
+
+### Go Back
+
+- [Welcome and Introductions](../)
+- [Ruby Introduction](../ruby-intro)
+
+# Ruby Methods
+
+Depending on the data type, we can use some built-in Ruby methods to manipulate the data!
+
+## String Methods
+
+In the spirit of _exploring to learn_, take a look at the code below. What do you think will happen when you run it?
+
+```ruby
+first_name = "osCAr"
+puts "Hello, #{first_name}!"
+puts "Hello, #{first_name.capitalize}!"
+```
+
+<div class="try-it-new">
+  <h3>Try It: Exploring String Methods</h3>
+  <p>Read the code above and predict what will happen when you run it. Try to explain why.</p>
+  <p>Now, type or copy and paste the code into your replit and run it. Was your prediction correct?</p>
+  <p>Then, change <code>capitalize</code> to <code>upcase</code>, then <code>downcase</code>, then <code>reverse</code>. Re-run the code each time to change it, and observe the output.</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>Ruby provides a variety of <code>methods</code> that can be used specifically on Strings - we can think of them as actions.</li>
+      <li>A Ruby developer doesn't need to memorize every method that is available; some will be used regularly but others won't. For this reason, developers rely heavily on resources like <a target="blank" href="https://ruby-doc.org/core-3.0.1/String.html">ruby-doc.org</a>!</li>
+    </ul>
+  </div>
+</div>
+
+### The rand() Method
+
+There are some methods that can be used for a specific purpose without having data to manipulate. The <code>rand()</code> method returns a random integer. When the <code>rand()</code> method is called with no arguments, it returns a decimal value greater than or equal to 0 and less than 1.
+
+```ruby
+random_value = rand()
+puts random_value
+# => 0.7893798326241
+```
+
+To get a random integer, you can pass in an integer as an argument, between the parenthesis. The <code>rand()</code> method returns an integer value that is greater than or equal to 0 and less than the integer passed in.
+
+```ruby
+random_value = rand(6)
+puts random_value
+# => 5
+```
+
+You can also pass in a range for the <code>rand()</code> method. To use an inclusive range, use two dots. For a non-inclusive range, use three dots. The following example shows how to use an inclusive range as the argument with a lower limit of 1 up to (and including) the upper limit of 20.
+
+```ruby
+random_value = rand(1..20)
+puts random_value
+# => 20
+```
+
+
+<div class="try-it-new">
+  <h3>Try It: Using the rand() Method</h3>
+  <p>Back in your sandbox replit, solve each of the challenges below.</p>
+  <ol>
+    <li>Store a random number between 1 and 99, inclusive of 99, in a variable called <code>random_num</code>. Use puts or print and run your code a few times to verify the result.</li>
+    <li>Create a variable named <code>lottery_number</code> assigned to a random six-digit number.</li>
+  </ol>
+</div>
+
+
+### Up Next
+
+- [Control Flow](../control-flow)