appdev-projects · Hanna-Slesarska · Jun 5, 2024 · Jun 5, 2024 · Jun 5, 2024 · Jun 5, 2024
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -53,5 +53,8 @@
   },
   "files.associations": {
     "*.html.erb": "erb"
-  }
+  },
+  "githubPullRequests.ignoredPullRequestBranches": [
+    "main"
+  ]
 }
diff --git a/README.md b/README.md
@@ -1,18 +1,5 @@
-# sinatra-template
+# simple recipe finder app
 
-Use this repository to create new Sinatra apps. 
+App uses Edamam API for recipe search. 
 
-Optionally, to use `ActiveRecord` for database operations, add to the `app.rb`:
-
-```ruby
-require "sinatra/activerecord"
-```
-
-And in the `config/environment.rb` file add this code block:
-
-```ruby
-configure do
-  # setup a database connection
-  set(:database, { adapter: "sqlite3", database: "db/development.sqlite3" })
-end
-```
+A user can type any food and get recipes displayed.
diff --git a/app.rb b/app.rb
@@ -1,9 +1,30 @@
 require "sinatra"
 require "sinatra/reloader"
+require 'net/http'
+require 'json'
+
+
+
+
+def getRecipe(search_term)
+  api_key = ENV.fetch("API_KEY")
+  api_id = ENV.fetch("API_ID")
+  url = URI("https://api.edamam.com/api/recipes/v2?type=public&q=#{search_term}&app_id=#{api_id}&app_key=#{api_key}")
+  response = Net::HTTP.get(url)
+  response_obj = JSON.parse(response)
+  results = response_obj.fetch("hits")
+end
+
 
 get("/") do
-  "
-  <h1>Welcome to your Sinatra App!</h1>
-  <p>Define some routes in app.rb</p>
-  "
+
+  erb(:home)
+end
+
+post("/recipe_search") do
+
+  search_term = params.fetch("search_term")
+  @results = getRecipe(search_term)
+
+  erb(:recipe)
 end
diff --git a/views/fg.erb b/views/fg.erb
@@ -0,0 +1,10 @@
+<div class="card" style="width: 18rem;">
+<% @recipe.each do |item| %>
+  <img src="<%= item["recipe"]["image"] %>" class="card-img-top" alt="...">
+  <div class="card-body">
+    <h5 class="card-title"><%= item["recipe"]["label"] %> </h5>
+  </div>
+   <%end%>
+</div>
+
+
diff --git a/views/home.erb b/views/home.erb
@@ -0,0 +1,12 @@
+<div class='container'>
+  <div>
+  <h1 class='header'>Find your favorite recipe!</h1>
+
+        <form method="post" action="/recipe_search">
+          <input class="search" name="search_term" id="search_term" type="text"/>
+          <button class='find'>Search</button>
+        </form>
+  </div>   
+</div>
+
+
diff --git a/views/layout.erb b/views/layout.erb
@@ -1,9 +1,61 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>Sinatra Template</title>
+    <title>Find your recipe.</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1">
+    <!-- Connect Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
+
+    <!-- Connect Font Awesome CSS -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
+
+    <!-- Connect Bootstrap JavaScript and its dependencies -->
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.7/dist/umd/popper.min.js" integrity="sha384-zYPOMqeu1DAVkHiLqWBUTcbYfZ8osu1Nd6Z89ify25QV9guujx43ITvfi12/QExE" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.min.js" integrity="sha384-Y4oOpwW3duJdCWv5ly8SCFYWqFDsfob/3GkgExXKV4idmbt98QcxXYs9UoXAB7BZ" crossorigin="anonymous"></script>
+    <style>
+       body{
+      background-image: url("https://images.unsplash.com/photo-1505935428862-770b6f24f629?q=80&w=2934&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
+       background-repeat: no-repeat;
+       background-size: cover;
+       min: height 100vh;;
+    }
+  .button{
+  margin: 20px;
+  }
+ .find{
+  font-family: 'Metal Mania';
+  font-size: 35px;
+  padding: 5px;
+  background-color: white;
+  color: #313133;
+}
+.search{
+  font-family: 'Metal Mania', cursive;
+  width: 90%;
+  border: none;
+  color: white;
+  font-size: 20px;
+  background: #313133;
+  padding: 20px;
+}
+form{
+  display: flex;
+}
+.container {
+  min-height: 100vh;
+  display: grid;
+  place-items: center;
+}
+.header{
+  font-family: 'Metal Mania', cursive;
+  color: #283139;
+  font-size: 75px;
+  text-shadow: 1px 1px 2px #f7f9fa;
+  padding:10px;
+  letter-spacing:5px;
+}
+    </style>
   </head>
 
   <body>

diff --git a/views/recipe.erb b/views/recipe.erb
@@ -0,0 +1,27 @@
+<div class="button">
+ <a href="/" class="find">Go back </a>
+</div>
+
+<div class="container">
+   <div class="row justify-content-center">
+      <% @results.each do |item| %>
+      <div class="col-md-6 col-lg-4 mb-4">
+         <div class="card" style="max-width: 24rem;">
+            <img src="<%= item["recipe"]["image"] %>" class="card-img-top" alt="...">
+            <div class="card-body">
+               <h4 class="card-title"><%= item["recipe"]["label"] %> </h4>
+               <div class="dropdown">
+  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+    Ingredients:
+  </button>
+  <ul class="dropdown-menu"><%item["recipe"]["ingredientLines"].each do |ing|%>
+    <li><a class="dropdown-item" href="#"><%= ing %></a></li>
+     <%end%>
+  </ul>
+</div>
+            </div>
+         </div>
+      </div>
+      <%end%>
+   </div>
+</div>