From bd461d5cf19251fcf30a3bdadbc754a18bb6fd25 Mon Sep 17 00:00:00 2001
From: Amanda Mendez <71214594+amandaag39@users.noreply.github.com>
Date: Wed, 4 Jun 2025 15:49:00 +0000
Subject: [PATCH 1/2] added notes mardowns

---
 notes/process.md | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)
 create mode 100644 notes/process.md

diff --git a/notes/process.md b/notes/process.md
new file mode 100644
index 0000000..9c45936
--- /dev/null
+++ b/notes/process.md
@@ -0,0 +1,27 @@
+# Mood Ring Project
+
+### Requirements:
+- There should be a homepage
+  - Should have a title (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
+
+### 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:
+- **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

From fd8fc96a5ded62c0f819e9d811498cfbfd6ce875 Mon Sep 17 00:00:00 2001
From: Amanda Mendez <71214594+amandaag39@users.noreply.github.com>
Date: Thu, 5 Jun 2025 21:48:22 +0000
Subject: [PATCH 2/2] Set up routes and views to meet basics of project
 requirements

---
 app.rb              | 23 +++++++++++++++++++----
 notes/process.md    |  3 ++-
 views/blue.erb      |  8 ++++++++
 views/home_page.erb |  2 ++
 views/layout.erb    |  8 +++++++-
 views/red.erb       |  8 ++++++++
 views/yellow.erb    |  8 ++++++++
 7 files changed, 54 insertions(+), 6 deletions(-)
 create mode 100644 views/blue.erb
 create mode 100644 views/home_page.erb
 create mode 100644 views/red.erb
 create mode 100644 views/yellow.erb

diff --git a/app.rb b/app.rb
index abbd1c7..68c7ce7 100644
--- a/app.rb
+++ b/app.rb
@@ -2,8 +2,23 @@
 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
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 @@
+<style>
+body {
+  background-color: blue;
+}
+</style>
+
+<h1>Blue</h1>
+<p><%= @mood_word %></p>
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 @@
+<h1>Mood Ring</h1>
+<p>Description here.</p>
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 @@
 <!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="/red">Red</a></div>
+      <div><a href="/yellow">Yellow</a></div>
+      <div><a href="/blue">Blue</a></div>
+    </nav>
     <%= yield %>
   </body>
 </html>
diff --git a/views/red.erb b/views/red.erb
new file mode 100644
index 0000000..f228268
--- /dev/null
+++ b/views/red.erb
@@ -0,0 +1,8 @@
+<style>
+body {
+  background-color: red;
+}
+</style>
+
+<h1>Red</h1>
+<p><%= @mood_word %></p>
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 @@
+<style>
+body {
+  background-color: yellow;
+}
+</style>
+
+<h1>Yellow</h1>
+<p><%= @mood_word %></p>