Skip to content

Commit 44dbe2b

Browse files
LupemanLupeman
Lupeman
authored and
Lupeman
committed
modify css, enabled toggle to hide movie information until needed
1 parent 95c7045 commit 44dbe2b

File tree

9 files changed

+141
-16
lines changed

9 files changed

+141
-16
lines changed

‎.DS_Store

0 Bytes
Binary file not shown.

‎Jaime/.DS_Store

6 KB
Binary file not shown.

‎Jaime/WEEK4/.DS_Store

0 Bytes
Binary file not shown.

‎Jaime/WEEK4/d5/.DS_Store

6 KB
Binary file not shown.

‎Jaime/WEEK4/d5/app.rb

+13-5
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,21 @@
44
require "httparty"
55

66
get "/" do
7-
"Hello World"
8-
# @movie = params[:movie]
9-
# @result = HTTParty.get('http://omdbapi.com/?t=@movie')
10-
# @movie_info =
7+
@movie = params[:movie]
8+
@movie_info = HTTParty.get("http://omdbapi.com/?t=#{@movie}")
9+
@movie_title = @movie_info["Title"]
10+
@movie_year = @movie_info["Year"]
11+
@movie_rated = @movie_info["Rated"]
12+
@movie_released = @movie_info["Released"]
13+
@movie_runtime = @movie_info["Runtime"]
14+
@movie_genre = @movie_info["Genre"]
15+
@movie_director = @movie_info["Director"]
16+
@movie_writer = @movie_info["Writer"]
17+
@movie_actors = @movie_info["Actors"]
18+
@movie_plot = @movie_info["Plot"]
1119
erb :index
1220
end
1321

14-
22+
#
1523
#
1624
# binding.pry

‎Jaime/WEEK4/d5/public/css/style.css

+81
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
body {
2+
background-image: url('/movie-app.jpg');
3+
/*height:400px;*/
4+
width: auto;
5+
background-size: cover;
6+
background-position: center;
7+
background-color: rgba(0, 0, 0, 0.2);
8+
}
9+
10+
.nav {
11+
text-align: right;
12+
padding-right: 10px;
13+
/*margin-top: 20px;*/
14+
}
15+
16+
li {
17+
display:inline-block;
18+
font-size: 15px;
19+
font-family: 'Montserrat', sans-serif;
20+
}
21+
a {
22+
text-decoration: none;
23+
color: #ffffff;
24+
padding: 0 20px;
25+
26+
}
27+
.aboutSiteText {
28+
width: 35%;
29+
padding-left: 20px;
30+
}
31+
32+
.headerDiv {
33+
margin-top: 230px;
34+
display: block;
35+
height: 190px;
36+
}
37+
.all {
38+
color: yellow;
39+
text-transform: uppercase;
40+
font-size: 45px;
41+
}
42+
.header {
43+
font-family: 'Archivo Black', sans-serif;
44+
color: #000000;
45+
font-size: 35px;
46+
padding: 5px 20px;
47+
margin: 0;
48+
49+
}
50+
p {
51+
font-family: 'Montserrat', sans-serif;
52+
font-size: 20px;
53+
color: #000000;
54+
}
55+
span {
56+
font-weight: bold;
57+
font-size: 22px;
58+
}
59+
form {
60+
padding-left: 20px;
61+
}
62+
.submitBtn {
63+
font-family: 'Montserrat', sans-serif;
64+
}
65+
.hidden {
66+
display: none;
67+
}
68+
.details {
69+
width:450px;
70+
padding-left: 20px;
71+
margin-top: 70px;
72+
}
73+
74+
#seeMore {
75+
display:none;
76+
padding-left: 20px;
77+
}
78+
79+
#seeMore p, .seeMoreKeys{
80+
font-size: 15px;
81+
}

‎Jaime/WEEK4/d5/public/movie-app.jpg

6.51 MB
Loading

‎Jaime/WEEK4/d5/views/index.erb

+46-11
Original file line numberDiff line numberDiff line change
@@ -5,21 +5,56 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<meta http-equiv="X-UA-Compatible" content="ie=edge">
77
<title>Movie Search App</title>
8-
<!-- <link rel="stylesheet" href="/css/style.css"> -->
8+
<link href="https://fonts.googleapis.com/css?family=Archivo+Black|Permanent+Marker" rel="stylesheet">
9+
<link rel="stylesheet" href="/css/style.css">
10+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
911
</head>
1012
<body>
11-
13+
<div class="nav">
14+
<ul>
15+
<li><a href="#">Coming Soon</a></li>
16+
<li><a href="#">Most Popular</a></li>
17+
</ul>
18+
</div>
19+
<div class="headerDiv">
20+
<h1 class="header"><span class="all">All</span> movies. <span class="all">All</span> the time.</h1>
21+
<div class="aboutSiteText">
22+
<p>Can't remember that guy in that movie you just saw? No worries - we've got you covered! Just enter the name of the movie below and we'll do the rest. </p>
23+
</div>
1224
<form action="/" method="get">
13-
<p>Movie Name: <input type="text" name="movie" size="20" class="inputField">
25+
<p><span>Movie Name:</span> <input type="text" name="movie" size="20" height="10px" class="inputField">
1426
<input type="submit" class="submitBtn"></p>
1527
</form>
16-
17-
<!-- <p>Movie Info: <%= @movie_info %></p> -->
18-
19-
20-
21-
22-
23-
28+
</div>
29+
30+
<div class="hidden">
31+
<p><span>Title:</span> <%= @movie_title %></p>
32+
<p><span>Year:</span> <%= @movie_year %></p>
33+
<p><span>Plot:</span> <%= @movie_plot %></p>
34+
<p><a href="#">Click here to see more information:</a></p>
35+
</div>
36+
<div id="seeMore">
37+
<p><span class="seeMoreKeys">Rated:</span> <%= @movie_rated %></p>
38+
<p><span class="seeMoreKeys">Released:</span> <%= @movie_released %></p>
39+
<p><span class="seeMoreKeys">Runtime:</span> <%= @movie_runtime %></p>
40+
<p><span class="seeMoreKeys">Genre:</span> <%= @movie_genre %></p>
41+
<p><span class="seeMoreKeys">Director:</span> <%= @movie_director %></p>
42+
<p><span class="seeMoreKeys">Writer:</span> <%= @movie_writer %></p>
43+
<p><span class="seeMoreKeys">Actors:</span> <%= @movie_actors %></p>
44+
</div>
45+
46+
47+
<script>
48+
$(document).ready(function() {
49+
// $("a").click(function(event) {
50+
// event.preventDefault();
51+
// $("#seeMore").toggle();
52+
// });
53+
$(".submitBtn").click(function(event) {
54+
event.preventDefault();
55+
$(".hidden").toggleClass(".details");
56+
});
57+
});
58+
</script>
2459
</body>
2560
</html>

‎Jaime/WEEK4/d5/views/layout.erb

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<%= yield %>

0 commit comments

Comments
 (0)