I am currently trying to re-create John Elders creating a weather app project and with the newer version of Bootstrap, my navbar doesn't look like his. Throughout the project, I worked through the differences in the 2 different search bars, but when he went to type in the area code for the project, his localhost:3000 took him to a 3000/zipcode which I don't know why mine won't do the same. It feels like the search bar is just not responding to my typing.
Navbar
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">My Ozone</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs- target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
</ul>
<``form class="d-flex" role="search">
<%= form_tag zipcode_path, :method => 'POST' do %>
<% text_field_tag 'zipcode', nil, placeholder: "Search Zipcode", class: "form-control me-2" %>
<% submit_tag 'Search', class: 'btn btn-outline-success my-2 my-sm-0' %>
<input class="form-control me-2" type="search" placeholder="Search Zipcode" aria-label="Search Zipcode">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
<% end %>
</form>
</div>
</div>
</nav>
Application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Weather</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= javascript_importmap_tags %>
</head>
<body>
<%= render 'home/navbar' %>
<div class="containter">
<br/>
<%= yield %>
</div>
</body>
</html>
index.html.erb
</style>
<div class="jumbotron <%= @api_color %>">
<h1 class="display-4"><%= @final_output %></h1>
<p class="lead">This is the current ozone air quality reaout for my neighborhood in Poquoson, VA</p>
<hr class="my-4">
<p><%= @api_description %></p>
<br/>
<p class="lead">
</div>
home_controller.rb
class HomeController < ApplicationController
def index
require 'net/http'
require 'json'
@url = 'https://www.airnowapi.org/aq/observation/zipCode/current/? format=application/json&zipCode=23662&distance=25&API_KEY=B4B8AEE7-95A3-413F-B122-9F3DDCE35C85'
@uri = URI(@url)
@response = Net::HTTP.get(@uri)
@output = JSON.parse(@response)
# Check for empty return results
if @output.empty?
@final_output = "Error"
elsif !@output
@final_output = "Error"
else
@final_output = @output[0]['AQI']
end
if @final_output == "Error"
@api_color = "gray"
elsif @final_output <= 50
@api_color = "green"
@api_description = "Good (0-50) Air quality is considered satisfactory, and air pollutioon poses little or no risk."
elsif @final_output >= 51 && @final_output <= 100
@api_color = "yellow"
@api_description = "Moderate (51-100) Air quality is acceptable; however, for some pollutants there may be a moderate health concern for a very small number of people who are unusually sensitive to air pollution."
elsif @final_output >= 101 && @final_output <= 150
@api_color = "orange"
@api_description = "Unhealthy for Sensitive Groups (101-150) Although general public is not likely to be affected at this AQI range, people with lung disease, older adults and children are at a greater risk from exposure to ozone, whereas persons with heart and lunch disease, older adults and children are at greater risk from the presence of particles in the air."
elsif @final_output >= 151 && @final_output <= 200
@api_color = "red"
@api_description = "Unhealthy (151-200) Everyone may begin to experience health effects; members of sensitive groups may experience more serious health effects."
elsif @final_output >= 201 && @final_output <= 300
@api_color = "purple"
@api_description = "Very Unhealthy (201-300) Health alert: everyone may experience more serious health effects."
elsif @final_output >= 301 && @final_output <= 500
@api_color = "maroon"
@api_description = "Hazardous (301-500) Health warnings of warnings of emergency conditions. The entire population is more likely to be affected."
end
end
def zipcode
@zipquery = params[:zipcode]
if params[:zipcode] == ""
@zip_query = "Hey you forgot to enter a zipcode!"
elsif params[:zipcode]
end
end
end
routes.rb
Rails.application.routes.draw do
get 'home/zipcode'
root 'home#index'
post "zipcode" => 'home#zipcode'
end
zipcode.html.erb
Zipcode page!
<br/>
<%= @zip_query %>
Sorry for bombarding with all this code, I am just confused on where I went wrong and why it will not let me search.
I tried changing my <form tag to <div and it seemed to do something, but not what I needed. Also I tried re-routing everything, but considering I'm quite new, I think I messed something up along the way.
