Skip to content

Commit 3c49d13

Browse files
KhanyiCodesKhanyiCodes
committed
Added genres
1 parent 17232fe commit 3c49d13

File tree

8 files changed

+313
-38
lines changed

8 files changed

+313
-38
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
.env.development.local
1818
.env.test.local
1919
.env.production.local
20+
.env
2021

2122
npm-debug.log*
2223
yarn-debug.log*

‎package-lock.json‎

Lines changed: 33 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,11 @@
66
"@testing-library/jest-dom": "^5.17.0",
77
"@testing-library/react": "^13.4.0",
88
"@testing-library/user-event": "^13.5.0",
9+
"axios": "^1.7.9",
910
"movie-database": "file:",
1011
"react": "^18.3.1",
1112
"react-dom": "^18.3.1",
12-
"react-scripts": "5.0.1",
13+
"react-scripts": "^5.0.1",
1314
"web-vitals": "^2.1.4"
1415
},
1516
"scripts": {

‎public/index.html‎

Lines changed: 4 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,12 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="utf-8" />
5-
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1" />
7-
<meta name="theme-color" content="#000000" />
8-
<meta
9-
name="description"
10-
content="Web site created using create-react-app"
11-
/>
12-
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13-
<!--
14-
manifest.json provides metadata used when your web app is installed on a
15-
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16-
-->
17-
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18-
<!--
19-
Notice the use of %PUBLIC_URL% in the tags above.
20-
It will be replaced with the URL of the `public` folder during the build.
21-
Only files inside the `public` folder can be referenced from the HTML.
22-
23-
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24-
work correctly both with client-side routing and a non-root public URL.
25-
Learn how to configure a non-root public URL by running `npm run build`.
26-
-->
27-
<title>React App</title>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Movie Database</title>
287
</head>
298
<body>
30-
<noscript>You need to enable JavaScript to run this app.</noscript>
319
<div id="root"></div>
32-
<!--
33-
This HTML file is a template.
34-
If you open it directly in the browser, you will see an empty page.
35-
36-
You can add webfonts, meta tags, or analytics to this file.
37-
The build step will place the bundled scripts into the <body> tag.
38-
39-
To begin the development, run `npm start` or `yarn start`.
40-
To create a production bundle, use `npm run build` or `yarn build`.
41-
-->
4210
</body>
4311
</html>
12+

‎src/App.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import './App.css';
3-
import HomePage from './components/HomePage';
3+
import HomePage from './pages/HomePage';
44

55
function App() {
66
return (

‎src/components/SearchBar.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
// SearchBar.js
2+
import React, { useState } from 'react';
3+
4+
const SearchBar = ({ onSearch }) => {
5+
const [searchTerm, setSearchTerm] = useState('');
6+
7+
// Handles input changes
8+
const handleInputChange = (event) => {
9+
setSearchTerm(event.target.value);
10+
};
11+
12+
// Handles form submission
13+
const handleSubmit = (event) => {
14+
event.preventDefault();
15+
onSearch(searchTerm);
16+
};
17+
18+
return (
19+
<div>
20+
<form onSubmit={handleSubmit}>
21+
<input
22+
type="text"
23+
value={searchTerm}
24+
onChange={handleInputChange}
25+
placeholder="Search for movies..."
26+
/>
27+
<button type="submit">Search</button>
28+
</form>
29+
</div>
30+
);
31+
};
32+
33+
export default SearchBar; // Correct export
34+

‎src/pages/HomePage.css‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
/* Body and General Styling */
2+
body {
3+
background-color: #f4f4f4; /* Light background for a cleaner look */
4+
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
5+
color: #333;
6+
margin: 0;
7+
padding: 0;
8+
}
9+
10+
/* Container Styling */
11+
.container {
12+
position: relative;
13+
padding: 20px;
14+
}
15+
16+
/* Title */
17+
.title {
18+
text-align: center;
19+
font-size: 2rem;
20+
margin-bottom: 20px;
21+
color: #333; /* Standard dark color for the title */
22+
}
23+
24+
/* Hamburger Menu (Standard lines) */
25+
.hamburger-menu {
26+
position: absolute;
27+
top: 20px;
28+
right: 20px;
29+
cursor: pointer;
30+
display: flex;
31+
flex-direction: column;
32+
justify-content: space-between;
33+
width: 30px;
34+
height: 20px;
35+
}
36+
37+
.hamburger-line {
38+
height: 4px;
39+
background-color: #333; /* Dark lines for the hamburger */
40+
border-radius: 2px;
41+
}
42+
43+
/* Dropdown Menu for Genres */
44+
.dropdown-menu {
45+
position: absolute;
46+
top: 60px;
47+
right: 20px;
48+
background-color: #fff; /* White background for the dropdown */
49+
border: 1px solid #ccc; /* Light border for the dropdown */
50+
padding: 10px;
51+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
52+
border-radius: 5px;
53+
display: none; /* Hidden by default */
54+
}
55+
56+
.dropdown-menu.active {
57+
display: block; /* Show dropdown when active */
58+
}
59+
60+
.dropdown-menu ul {
61+
list-style-type: none;
62+
margin: 0;
63+
padding: 0;
64+
}
65+
66+
.dropdown-menu ul li {
67+
padding: 10px;
68+
cursor: pointer;
69+
color: #333; /* Standard text color */
70+
transition: background-color 0.3s ease;
71+
}
72+
73+
.dropdown-menu ul li:hover {
74+
background-color: #f0f0f0; /* Lighter background on hover */
75+
}
76+
77+
/* Search Form */
78+
.search-form {
79+
display: flex;
80+
justify-content: center;
81+
margin-bottom: 20px;
82+
}
83+
84+
.search-input {
85+
padding: 12px;
86+
font-size: 1.1rem;
87+
border-radius: 5px;
88+
border: 2px solid #ccc; /* Neutral border color */
89+
background-color: #fff; /* White background for the input */
90+
color: #333;
91+
outline: none;
92+
transition: border-color 0.3s, box-shadow 0.3s ease-in-out;
93+
}
94+
95+
.search-input:focus {
96+
border-color: #333; /* Dark border on focus */
97+
box-shadow: 0 0 5px #ccc; /* Subtle box-shadow on focus */
98+
}
99+
100+
.search-button {
101+
padding: 12px 20px;
102+
font-size: 1.1rem;
103+
background-color: #333; /* Dark button */
104+
color: white;
105+
border: none;
106+
border-radius: 5px;
107+
cursor: pointer;
108+
text-transform: uppercase;
109+
letter-spacing: 1px;
110+
transition: all 0.3s ease-in-out;
111+
}
112+
113+
.search-button:hover {
114+
background-color: #555; /* Slightly lighter dark color on hover */
115+
transform: scale(1.05); /* Slight zoom on hover */
116+
}
117+
118+
.search-button:active {
119+
background-color: #222; /* Darker color when clicked */
120+
transform: scale(0.98);
121+
}

0 commit comments

Comments
 (0)