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 diff --git a/notes/process.md b/notes/process.md index 9c45936..8787ffe 100644 --- a/notes/process.md +++ b/notes/process.md @@ -2,7 +2,7 @@ ### Requirements: - There should be a homepage - - Should have a title (Mood Ring) and description + - 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 @@ -22,6 +22,7 @@ Core Concepts to practice: - **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/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..3c9d004 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 %>
From 64b521baafe2087f0417a7bd9d0d999b94a82312 Mon Sep 17 00:00:00 2001 From: Amanda Mendez <71214594+amandaag39@users.noreply.github.com> Date: Thu, 12 Jun 2025 16:30:38 +0000 Subject: [PATCH 3/4] added steps to refactor and add a form in process md --- notes/process.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/notes/process.md b/notes/process.md index 8787ffe..894fb05 100644 --- a/notes/process.md +++ b/notes/process.md @@ -10,6 +10,20 @@ - 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 + +### 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. From dbb04db0ab2bd11bb6814b184731a2665ffcfe68 Mon Sep 17 00:00:00 2001 From: Amanda Mendez <71214594+amandaag39@users.noreply.github.com> Date: Fri, 13 Jun 2025 02:45:55 +0000 Subject: [PATCH 4/4] refactored to dynamic values using params --- app.rb | 47 +++++++++++++++++++++++++++++++++-------------- notes/process.md | 11 +++++++++++ views/colors.erb | 8 ++++++++ views/layout.erb | 6 +++--- 4 files changed, 55 insertions(+), 17 deletions(-) create mode 100644 views/colors.erb diff --git a/app.rb b/app.rb index 68c7ce7..6b2b30c 100644 --- a/app.rb +++ b/app.rb @@ -5,20 +5,39 @@ erb(:home_page) end -get("/red") do - mood_words = ["urgent", "angry", "important", "mcdonalds", "emergency", "danger"] - @mood_word = mood_words.sample - erb(:red) -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("/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 -get("/blue") do - mood_words = ["sad", "glad", "blue", "sky", "sea", "calm"] - @mood_word = mood_words.sample - erb(:blue) +# 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 index 894fb05..61ae937 100644 --- a/notes/process.md +++ b/notes/process.md @@ -18,6 +18,17 @@ - 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 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/layout.erb b/views/layout.erb index 3c9d004..c22406b 100644 --- a/views/layout.erb +++ b/views/layout.erb @@ -9,9 +9,9 @@ <%= yield %>