From d5cf3818a783ce95ee91f10e3a20fdbf41560685 Mon Sep 17 00:00:00 2001 From: ishitb Date: Tue, 28 Jul 2020 03:23:27 +0530 Subject: [PATCH] Main Page start --- .prettierrc.js | 3 ++ src/App.js | 23 ++++----------- src/Screens/MainPage.js | 46 ++++++++++++++++++++++++++++++ src/assets/card.css | 32 +++++++++++++++++++++ src/assets/card.js | 20 +++++++++++++ src/assets/kuchbhi,ks.txt | 59 +++++++++++++++++++++++++++++++++++++++ src/assets/main_page.css | 51 +++++++++++++++++++++++++++++++++ 7 files changed, 216 insertions(+), 18 deletions(-) create mode 100644 .prettierrc.js create mode 100644 src/Screens/MainPage.js create mode 100644 src/assets/card.css create mode 100644 src/assets/card.js create mode 100644 src/assets/kuchbhi,ks.txt create mode 100644 src/assets/main_page.css diff --git a/.prettierrc.js b/.prettierrc.js new file mode 100644 index 0000000..09e9646 --- /dev/null +++ b/.prettierrc.js @@ -0,0 +1,3 @@ +module.exports = { + tabWidth: 4 +} \ No newline at end of file diff --git a/src/App.js b/src/App.js index ce9cbd2..5bd6bf5 100644 --- a/src/App.js +++ b/src/App.js @@ -1,25 +1,12 @@ import React from 'react'; -import logo from './logo.svg'; -import './App.css'; +import MainPage from "./Screens/MainPage" + function App() { return ( -
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
-
+ + + ); } diff --git a/src/Screens/MainPage.js b/src/Screens/MainPage.js new file mode 100644 index 0000000..aa3c3a2 --- /dev/null +++ b/src/Screens/MainPage.js @@ -0,0 +1,46 @@ +import React, { useState, useEffect } from "react"; +import "../assets/main_page.css"; +import Card from "../assets/card"; + +export default function MainPage() { + const [headMovieTitle, setHeadMovieTitle] = useState(["Money Heist"]); + const [headIMDB, setHeadIMDB] = useState(8.9); + const [movieList, setMovieList] = useState([]); + const [shows, setShows] = useState([]); + + const getShows = async () => { + const response = await fetch( + "https://www.episodate.com/api/most-popular?page=1" + ); + const data = await response.json(); + + await setShows(data.tv_shows) + }; + + useEffect(() => { + getShows(); + }, []); + + return ( +
+
+

{headMovieTitle}

+

+ {" "} + IMDB Rating: + {headIMDB} +

+
+
+ {shows.map((item) => ( + + ))} +
+
+ ); +} diff --git a/src/assets/card.css b/src/assets/card.css new file mode 100644 index 0000000..0fb9331 --- /dev/null +++ b/src/assets/card.css @@ -0,0 +1,32 @@ +* { + box-sizing: border-box; +} +.card { + display: flex; + border-radius: 7px; + justify-content: flex-end; + flex-wrap: wrap; + flex-direction: column; + height: 25rem; + width: 15rem; + box-shadow: 0px 5px 20px rgb(71, 71, 71); + margin: 20px; + padding: 0 0 1rem 1.2rem; + transition: all 0.4s; +} + +.card h1, .card p { + color: white; + opacity: 0; + transition: all 0.6s; + text-shadow: 1px 1px grey; +} + +.card:hover { + /* filter: blur(5px); */ + /* background-color: rgba(0, 0, 0, 0.3); */ +} + +.card:hover h1, .card:hover p { + opacity: 1; +} diff --git a/src/assets/card.js b/src/assets/card.js new file mode 100644 index 0000000..0a0a187 --- /dev/null +++ b/src/assets/card.js @@ -0,0 +1,20 @@ +import React, { useState, useEffect } from "react"; +import "./card.css"; + +function Card({ name, image, network }) { + return ( +
+

{name}

+

Network : {network}

+
+ ); +} + +export default Card; diff --git a/src/assets/kuchbhi,ks.txt b/src/assets/kuchbhi,ks.txt new file mode 100644 index 0000000..f21946d --- /dev/null +++ b/src/assets/kuchbhi,ks.txt @@ -0,0 +1,59 @@ +import React from "react"; +import style from "./show.module.css"; + +const Show = ({ name, network, image, start_date }) => { + return ( +
+

{name}

+

{network}

+ +

{start_date}

+
+ ); +}; +export default Show; + +***************************************************************************************************************************************************** + +import React, { useState, useEffect } from "react"; +import "./App.css"; +import Show from "./Show"; + +function App() { + const [shows, setShows] = useState([]); + const [search, setSearch] = useState(""); + + // const query='https://www.episodate.com/api/most-popular?page=1'; + + const getShows = async () => { + const response = await fetch( + "https://www.episodate.com/api/most-popular?page=1" + ); + const data = await response.json(); + setShows(data.tv_shows); + console.log(data.tv_shows); + }; + + useEffect(() => { + getShows(); + }, []); + + return ( +
+

binge!

+
+ {shows.map((show) => ( + + ))} +
+
+ ); +} + +export default App; diff --git a/src/assets/main_page.css b/src/assets/main_page.css new file mode 100644 index 0000000..fd63548 --- /dev/null +++ b/src/assets/main_page.css @@ -0,0 +1,51 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + --darkbg: #393e46; +} + +body { + background-color: var(--darkbg); +} + +body, #root, #root>div { + height: 100vh; +} + +header { + height: 45%; + width: 100%; + background: url("https://images.unsplash.com/photo-1595804194379-ec2bbf153d1c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80") + no-repeat center center/cover; + box-shadow: 0 5px 2rem rgba(0, 0, 0, 1); + display: flex; + flex-direction: column; + justify-content: center; + padding: 0 2rem; + margin-bottom: 1.5rem; +} + +header .head-title { + font-size: 3.5rem; + color: white; +} + + +header .head-rating .rating-heading{ + color: grey; + margin-right: 0.5rem; +} + +header .head-rating { + color: white; + font-size: 1.5rem; + margin-top: 1rem; +} + +section { + /* height: 50vh; */ + display: grid; + grid-template-columns: auto auto auto auto auto; + justify-content: center; +} \ No newline at end of file