Lesson 2 params

app.rb

@@ -2,8 +2,42 @@
 require "sinatra/reloader"
 
 get("/") do
-  "
-  <h1>Welcome to your Sinatra App!</h1>
-  <p>Define some routes in app.rb</p>
-  "
+  erb(:home_page)
+end
+
+# get("/red") do
+#   mood_words = ["urgent", "angry", "important", "mcdonalds", "emergency", "danger"]
+#   @mood_word = mood_words.sample
+#   erb(:red)
+# end
+
+# get("/yellow") do
+#   mood_words = ["easy", "happy", "golden", "banana", "minion", "star"]
+#   @mood_word = mood_words.sample
+#   erb(:yellow)
+# end
+
+# get("/blue") do
+#   mood_words = ["sad", "glad", "blue", "sky", "sea", "calm"]
+#   @mood_word = mood_words.sample
+#   erb(:blue)
+# end
+
+# Step 1: Create a new route that can accept a dynamic value for color in the url (i.e. mypage.com/color/red or mypage.com/color/yellow)
+get("/color/:my_color") do
+  # /color/zebra
+  # {"my_color"=>"zebra"}
+  @my_color = params['my_color'].downcase
+  if @my_color == "blue"
+    @mood_word = ["sad", "glad", "blue", "sky", "sea", "calm"].sample
+  elsif @my_color == "red"
+    @mood_word = ["urgent", "angry", "important", "mcdonalds", "emergency", "danger"].sample
+  elsif @my_color == "yellow"
+    @mood_word = ["easy", "happy", "golden", "banana", "minion", "star"].sample
+  elsif @my_color == "green"
+    @mood_word = ["envious", "grow", "money", "nature", "tree", "go"].sample
+  else
+    @mood_word = "confused"
+  end
+  erb(:colors)
 end

notes/process.md

@@ -0,0 +1,53 @@
+# Mood Ring Project
+
+### Requirements:
+- There should be a homepage
+  - Should have a title (i.e."Mood Ring") and description
+- There should be a way to navigate to pages representing different colors (minium of the three primary colors)
+- Color Pages
+  - Should have a title that corresponds to the color
+  - Should have a background that matches the color
+  - Should feature a description with a "mood word" that matches the mood of the color (i.e. yellow -> happy) 
+    - The mood word should cycle on page reload
+
+### Refactor Requirements:
+- Step 1: Create a new route that can accept a dynamic value for color in the url (i.e. mypage.com/color/red or mypage.com/color/yellow)
+- Step 2: Create a variable that lets us keep track of whatever value is input as the color in the URL
+- Step 3: Create one erb file for all colors
+- Step 4: Add logic to the get block to conditionally display mood words based on the primary color passed into the parameters
+- Step 5: To the dynamic erb file, use dynamic values to pass in a heading with the color name and dynamic mood word description
+- Step 6: Make sure the background changes to match the params color
+
+### Student Refactor Example:
+- Instead of if statemnts, make moods a hash with the colors as keys and the mood words as values In an array
+```
+MOODS = {
+  "red" => ["urgent", "angry", "important", "mcdonalds", "emergency", "danger"],
+  "yellow" => ["easy", "happy", "golden", "banana", "minion", "star"],
+  "blue" => ["sad", "glad", "blue", "sky", "sea", "calm"],
+  "green" => ["peaceful", "nature", "fresh", "growth", "harmony", "forest"] # You can add more colors!
+}
+```
+
+### Adding a Form
+- Step 1: Add a select form to the homepage (where? erb? route?)
+  - Figure out how to make a form
+  - Figure out how to format a select form
+- Step 2: Create form action logic route (what type of request will this be?)
+
+### Check your Comprehension:
+
+We'll use **Ruby with Sinatra** to build this project.
+
+Core Concepts to practice:
+- **Routes:** Creating paths like `/`, `/red`, `/blue` that trigger different pages
+- **Views:** Using `.erb` files to show each page visually
+- **Dynamic content:** Using Ruby logic to randomly choose mood words
+- **Instance variables:** Passing data from the route to the view
+- **Layout file:** Using a layout file for shared headers and navigation. 
+
+Stretch Concepts to practice:
+- **Dynamic Routes:** Add an input form that lets users select a color
+- **Forms:** Add an input form that lets users select a color
+- **Query parameters:** Add query params like `/mood?color=yellow`
+- **Service Objects:** Create a service object to handle selecting a random mood word

views/blue.erb

@@ -0,0 +1,8 @@
+<style>
+body {
+  background-color: blue;
+}
+</style>
+
+<h1>Blue</h1>
+<p><%= @mood_word %></p>

views/colors.erb

@@ -0,0 +1,8 @@
+<style>
+body {
+  background-color: <%= @my_color %>;
+}
+</style>
+
+<h1><%= @my_color.capitalize %></h1>
+<p><%= @mood_word %></p>

views/home_page.erb

@@ -0,0 +1,2 @@
+<h1>Mood Ring</h1>
+<p>Description here.</p>

views/layout.erb

@@ -1,12 +1,18 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>Sinatra Template</title>
+    <title>Mood Ring</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1">
   </head>
 
   <body>
+    <nav>
+      <div><a href="/">Home</a></div>
+      <div><a href="/color/red">Red</a></div>
+      <div><a href="/color/yellow">Yellow</a></div>
+      <div><a href="/color/blue">Blue</a></div>
+    </nav>
     <%= yield %>
   </body>
 </html>

views/red.erb

@@ -0,0 +1,8 @@
+<style>
+body {
+  background-color: red;
+}
+</style>
+
+<h1>Red</h1>
+<p><%= @mood_word %></p>

views/yellow.erb

@@ -0,0 +1,8 @@
+<style>
+body {
+  background-color: yellow;
+}
+</style>
+
+<h1>Yellow</h1>
+<p><%= @mood_word %></p>