Add files via upload

App.css

@@ -0,0 +1,17 @@
+h1 {
+font-family: "Courier New", Courier, monospace;
+font-size: 25px;
+letter-spacing: 2px;
+word-spacing: 2px;
+color:#f5f5f5 ;
+font-weight: normal;
+text-decoration: underline solid rgb(68, 68, 68);
+font-style: italic;
+font-variant: normal;
+text-transform: none;
+}
+
+
+
+
+

App.js

@@ -0,0 +1,47 @@
+import React, {Component} from 'react';
+import CardList from './CardList';
+import SearchBox from './SearchBox';
+import Scroll from './Scroll';
+import './App.css';
+
+class App extends Component {
+	constructor() {
+		super()
+		this.state = {
+			robots: [],
+			searchfield: ''
+		}
+	}
+
+	componentDidMount(){
+		fetch('https://jsonplaceholder.typicode.com/users')
+		.then(response=> response.json())
+		.then(users =>this.setState({robots:users}));
+
+	}
+
+	onSearchChange = (event) => {
+		this.setState({searchfield: event.target.value})
+	  }
+
+	render() {
+		const filteredRobots = this.state.robots.filter(robots =>{
+			return robots.name.toLowerCase().includes(this.state.searchfield.toLowerCase());
+		})
+		if (this.state.robots.length === 0){
+			return <h1>Loading</h1>
+		} else {
+		  return(
+	  <div className='tc'>
+		<h1 className='f1'>RoboFriends</h1>
+		<SearchBox searchChange={this.onSearchChange}/>
+		<scroll>
+			<CardList robots={filteredRobots}/>
+		</scroll>
+	  </div>
+	  );
+	}
+  }
+}
+
+export default App;

Card.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import CardList from './CardList';
+
+const Card = (props) => {
+	const {name, email, id} = props;
+  return(
+	<div className='bg-light-green dib br3 pa3 ma2 grow bw2 shadow-5'>
+	  <img alt='robots' src={`https://robohash.org/${props.id}?200x200`} />
+	  <div>
+		<h2>{name}</h2>
+		<p>{email}</p>
+	 </div>
+	</div>
+  );
+}
+
+export default Card;

CardList.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import Card from './Card';
+
+
+const CardList = ({robots}) => {
+	const cardComponent = robots.map((user, i) => {
+	 	return (<Card key={i}
+	 	id={robots[i].id}
+	 	name={robots[i].name}
+	 	email={robots[i].email}/>
+	 	);
+	})
+	return (
+	<React.StrictMode>
+	{cardComponent}
+    </React.StrictMode>
+  );
+}
+
+export default CardList;

Scroll.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Scroll = (props) => {
+	return (
+		<div style= {{overflow: 'Scroll', border: '5px solid black', height:'900px'}}>
+			{props.children}
+		</div>
+	);
+};
+
+export default Scroll;

SearchBox.js

@@ -0,0 +1,16 @@
+import React from 'react';
+
+const SearchBox = ({searchfield, searchChange}) => {
+	return(
+	<div className='pa2'>
+		<input 
+		className='pa3 ba b--green bg-lightest-blue'
+		type='search' 
+		placeholder='search robots'
+		onChange ={searchChange}
+		/>
+	 </div>
+	);
+}
+
+export default SearchBox;

index.css

@@ -0,0 +1,6 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+background: linear-gradient(135deg, rgba(106, 163, 122, 1.0), rgba(25, 241, 73, 1.0));
+}

index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+import 'tachyons';
+import {robots} from './robots';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(<App/>
+
+);
+reportWebVitals();

reportWebVitals.js

@@ -0,0 +1,13 @@
+const reportWebVitals = onPerfEntry => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

robots.js

@@ -0,0 +1,62 @@
+export const robots = [
+  {
+    id: 1,
+    name: 'Leanne Graham',
+    username: 'Bret',
+    email: '[email protected]'
+  },
+  {
+    id: 2,
+    name: 'Ervin Howell',
+    username: 'Antonette',
+    email: '[email protected]'
+  },
+  {
+    id: 3,
+    name: 'Clementine Bauch',
+    username: 'Samantha',
+    email: '[email protected]'
+  },
+  {
+    id: 4,
+    name: 'Patricia Lebsack',
+    username: 'Karianne',
+    email: '[email protected]'
+  },
+  {
+    id: 5,
+    name: 'Chelsey Dietrich',
+    username: 'Kamren',
+    email: '[email protected]'
+  },
+  {
+    id: 6,
+    name: 'Mrs. Dennis Schulist',
+    username: 'Leopoldo_Corkery',
+    email: '[email protected]'
+  },
+  {
+    id: 7,
+    name: 'Kurtis Weissnat',
+    username: 'Elwyn.Skiles',
+    email: '[email protected]'
+  },
+  {
+    id: 8,
+    name: 'Nicholas Runolfsdottir V',
+    username: 'Maxime_Nienow',
+    email: '[email protected]'
+  },
+  {
+    id: 9,
+    name: 'Glenna Reichert',
+    username: 'Delphine',
+    email: '[email protected]'
+  },
+  {
+    id: 10,
+    name: 'Clementina DuBuque',
+    username: 'Moriah.Stanton',
+    email: '[email protected]'
+  }
+];

setupTests.js

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';