I’m a beginner Frontend Developer with some expirience in Backend Development and Design. Driven by a passion for elegant design solutions and a commitment to continuous improvement, I seek a role that fosters creativity and professional growth. I aim to bring clarity and innovation to every project. In the process of work I learn quickly and have a great desire for professional growth.
import MovieCard from "../components/MovieCard";
import { useState, useEffect } from "react";
import { searchMovies, getPopularMovies } from "../services/api";
import "../css/Home.css";
function Home() {
const [searchQuery, setSearchQuery] = useState("");
const [movies, setMovies] = useState([]);
const [error, setError] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
const loadPopularMovies = async () => {
try {
const popularMovies = await getPopularMovies();
setMovies(popularMovies);
} catch (err) {
console.log(err);
setError("Failed to load movies");
} finally {
setLoading(false);
}
};
loadPopularMovies();
}, []);
const handleSearch = (e) => {
e.preventDefault();
alert(searchQuery);
setSearchQuery("");
};
return (
<div className="home">
<form onSubmit={handleSearch} className="search-form">
<input
type="text"
placeholder="Search for movie..."
className="search-input"
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
/>
<button type="submit" className="search-button">
Search
</button>
</form>
<div className="movies-grid">
{movies.map((movie) => (
<MovieCard movie={movie} key={movie.id} />
))}
</div>
</div>
);
}
export default Home;