Define some routes in app.rb
- " + 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 diff --git a/notes/process.md b/notes/process.md new file mode 100644 index 0000000..61ae937 --- /dev/null +++ b/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 diff --git a/views/blue.erb b/views/blue.erb new file mode 100644 index 0000000..9913049 --- /dev/null +++ b/views/blue.erb @@ -0,0 +1,8 @@ + + +<%= @mood_word %>
diff --git a/views/colors.erb b/views/colors.erb new file mode 100644 index 0000000..0284348 --- /dev/null +++ b/views/colors.erb @@ -0,0 +1,8 @@ + + +<%= @mood_word %>
diff --git a/views/home_page.erb b/views/home_page.erb new file mode 100644 index 0000000..7cfb330 --- /dev/null +++ b/views/home_page.erb @@ -0,0 +1,2 @@ +Description here.
diff --git a/views/layout.erb b/views/layout.erb index d0e831e..c22406b 100644 --- a/views/layout.erb +++ b/views/layout.erb @@ -1,12 +1,18 @@ -<%= @mood_word %>
diff --git a/views/yellow.erb b/views/yellow.erb new file mode 100644 index 0000000..cfc3045 --- /dev/null +++ b/views/yellow.erb @@ -0,0 +1,8 @@ + + +<%= @mood_word %>