Skip to content

Lesson 1: Routes with Sinatra #19

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 19 additions & 4 deletions app.rb
Original file line number Diff line number Diff line change
Expand Up @@ -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
28 changes: 28 additions & 0 deletions notes/process.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
# 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

### 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
8 changes: 8 additions & 0 deletions views/blue.erb
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<style>
body {
background-color: blue;
}
</style>

<h1>Blue</h1>
<p><%= @mood_word %></p>
2 changes: 2 additions & 0 deletions views/home_page.erb
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
<h1>Mood Ring</h1>
<p>Description here.</p>
8 changes: 7 additions & 1 deletion views/layout.erb
Original file line number Diff line number Diff line change
@@ -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>
8 changes: 8 additions & 0 deletions views/red.erb
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<style>
body {
background-color: red;
}
</style>

<h1>Red</h1>
<p><%= @mood_word %></p>
8 changes: 8 additions & 0 deletions views/yellow.erb
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<style>
body {
background-color: yellow;
}
</style>

<h1>Yellow</h1>
<p><%= @mood_word %></p>