Skip to content

Commit 5304072

Browse files
varunjha290119varunjha290119
committed
Basic UI completed. Will create a function to interact with API
1 parent fe27f58 commit 5304072

File tree

7 files changed

+128
-30
lines changed

7 files changed

+128
-30
lines changed

‎.idea/inspectionProfiles/Project_Default.xml

+17
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.idea/vcs.xml

+6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
work correctly both with client-side routing and a non-root public URL.
2525
Learn how to configure a non-root public URL by running `npm run build`.
2626
-->
27-
<title>React App</title>
27+
<title>React Movie Search</title>
2828
</head>
2929
<body>
3030
<noscript>You need to enable JavaScript to run this app.</noscript>

‎src/App.js

+6-17
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,13 @@
11
import React from 'react';
2-
import logo from './logo.svg';
3-
import './App.css';
2+
// import './App.css';
3+
import './index.css'
4+
import SearchMovie from "./SearchMovie";
45

56
function App() {
67
return (
7-
<div className="App">
8-
<header className="App-header">
9-
<img src={logo} className="App-logo" alt="logo" />
10-
<p>
11-
Edit <code>src/App.js</code> and save to reload.
12-
</p>
13-
<a
14-
className="App-link"
15-
href="https://reactjs.org"
16-
target="_blank"
17-
rel="noopener noreferrer"
18-
>
19-
Learn React
20-
</a>
21-
</header>
8+
<div className="container">
9+
<h1 className="title">React Movie Search</h1>
10+
<SearchMovie/>
2211
</div>
2312
);
2413
}

‎src/SearchMovie.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from "react";
2+
3+
export default function SearchMovie() {
4+
return(
5+
<form className="form">
6+
<label className="label" htmlFor="query">Movie Name</label>
7+
<input className="input" type="text" name="query" placeholder="Titanic" />
8+
<button className="button" type="submit">Search</button>
9+
</form>
10+
)
11+
}

‎src/index.css

+87-5
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,92 @@
1+
html {
2+
font-size: 10px;
3+
}
4+
5+
* {
6+
box-sizing: border-box;
7+
}
8+
9+
/*body {*/
10+
/* margin: 0;*/
11+
/* font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',*/
12+
/* 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',*/
13+
/* sans-serif;*/
14+
/* -webkit-font-smoothing: antialiased;*/
15+
/* -moz-osx-font-smoothing: grayscale;*/
16+
/*}*/
17+
118
body {
219
margin: 0;
3-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
4-
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
5-
sans-serif;
6-
-webkit-font-smoothing: antialiased;
7-
-moz-osx-font-smoothing: grayscale;
20+
padding: 0;
21+
background_color: rgb(244, 244, 244);
22+
color: #333;
23+
}
24+
25+
p {
26+
font-size: 1.6rem;
27+
28+
}
29+
30+
small {
31+
font-size: 1.2rem;
32+
}
33+
34+
.container {
35+
margin: 0 auto;
36+
max-width: 1000px;
37+
padding: 40px;
38+
}
39+
40+
.title {
41+
font-size: 4.4rem;
42+
text-align: center;
43+
}
44+
45+
.form {
46+
display: grid;
47+
}
48+
49+
.label {
50+
font-size: 1.2rem;
51+
margin-bottom: 0.2rem;
52+
text-transform: uppercase;
53+
}
54+
55+
.input {
56+
font-size: 1.6rem;
57+
padding: 0.5rem 2rem;
58+
line-height: 2.8rem;
59+
border-radius: 20px;
60+
border: 1px solid #dddddd;
61+
margin-bottom: 1rem;
62+
}
63+
64+
.button {
65+
background-color: rgba(0, 0, 0, 0.75);
66+
color: white;
67+
padding: 1rem 2rem;
68+
border: 1px solid rgba(0, 0, 0, 0.75);
69+
border-radius: 20px;
70+
font-size: 1.4rem;
71+
cursor: pointer;
72+
transition: background-color 250ms;
73+
}
74+
75+
.button:hover {
76+
background-color: rgba(255, 0, 0, 0.85);
77+
border: 1px solid rgba(255, 0, 0, 0.85);
78+
}
79+
80+
@media (min-width: 786px) {
81+
.form {
82+
grid-template-columns: auto 1fr auto;
83+
grid-gap: 1rem;
84+
align-items: center;
85+
}
86+
87+
.input {
88+
margin-bottom: 0;
89+
}
890
}
991

1092
code {

‎src/logo.svg

-7
This file was deleted.

0 commit comments

Comments
 (0)