Skip to content

Week8react #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
renataestes wants to merge 8 commits into
base: gh-pages
Choose a base branch
from
Open

Week8react #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
33ffe75
react
Sep 1, 2017
f1f4dc5
timeline
Sep 3, 2017
9715ae6
fetch
Sep 3, 2017
d95aa85
star wars
Sep 6, 2017
708e669
starwars2
Sep 6, 2017
8917353
src
Sep 10, 2017
56e7446
08week
Sep 11, 2017
971714c
star wars commit
Sep 12, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Empty file added 07week/toDoList/index.html
View file
Open in desktop
Empty file.
Empty file added 07week/toDoList/script.js
View file
Open in desktop
Empty file.
Empty file added 07week/toDoList/style.css
View file
Open in desktop
Empty file.
21 changes: 21 additions & 0 deletions 08week/fetch/.gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
# See https://help.github.com/ignore-files/ for more about ignoring files.

# dependencies
/node_modules

# testing
/coverage

# production
/build

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*
2,164 changes: 2,164 additions & 0 deletions 08week/fetch/README.md
View file
Open in desktop

Large diffs are not rendered by default.

0 08week/bootstrap/index.html → 08week/fetch/bootstrap/index.html
View file
Open in desktop
File renamed without changes.
0 08week/bootstrap/script.js → 08week/fetch/bootstrap/script.js
View file
Open in desktop
File renamed without changes.
0 08week/bootstrap/style.css → 08week/fetch/bootstrap/style.css
View file
Open in desktop
File renamed without changes.
16 changes: 0 additions & 16 deletions 08week/fetch/index.html
View file
Open in desktop

This file was deleted.

17 changes: 17 additions & 0 deletions 08week/fetch/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
{
"name": "fetch",
"version": "0.1.0",
"private": true,
"dependencies": {
"material-ui": "^0.19.1",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-scripts": "1.0.13"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
Binary file added 08week/fetch/public/favicon.ico
View file
Open in desktop
Binary file not shown.
44 changes: 44 additions & 0 deletions 08week/fetch/public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.

Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>Star Wars Trivia Game</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css" />
</head>

<body>
<div id="root"></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.23.1/babel.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.0/react.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.0/react-dom.js"></script>
<script type="text/babel" src="./script.js"></script>
</body>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.

You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.

To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</html>
15 changes: 15 additions & 0 deletions 08week/fetch/public/manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "192x192",
"type": "image/png"
}
],
"start_url": "./index.html",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
78 changes: 78 additions & 0 deletions 08week/fetch/src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
/*.App {
text-align: center;
}

.App-logo {
animation: App-logo-spin infinite 20s linear;
height: 80px;
}

.App-header {
background-color: #222;
height: 150px;
padding: 20px;
color: white;
}

.App-intro {
font-size: large;
}

@keyframes App-logo-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}*/
.app {
text-align: center;
background-color: black;
width: 500px;
}

#title {
background-color: black;
height: 20px;
padding: 30px;
color: blue;
}

.name {
height: 35px;
width: 150px;
color: white;
background-color: blue;
}

.spacer {
height: 35px;
width: 60px;
color: black;
background-color: black;
}

.gender {
height: 35px;
width: 50px;
color: white;
background-color: blue;
}

.hair {
height: 35px;
width: 50px;
color: white;
background-color: blue;
}

.eyes {
height: 35px;
width: 50px;
color: white;
background-color: blue;
}

.year {
height: 35px;
width: 50px;
color: white;
background-color: blue;
}
62 changes: 62 additions & 0 deletions 08week/fetch/src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
import React, { Component } from 'react';
import logo from './logo.svg';
//import { Button, ButtonToolbar, Form } from 'react-bootstrap';
//import 'bootstrap/less/bootstrap.less'
import './App.css';
import CharacterCard from './StarWars';

class App extends Component {
constructor(props){
super(props);
this.state = {
characters: [],
//guessArr: [],
}
}

componentDidMount(){
fetch('https://swapi.co/api/people/')
.then((response) => response.json())
.then((responseJson) => {
return this.setState({characters: responseJson.results})
// console.log(characters)
// return responseJson.results;
})
.catch((error) => {
console.error(error);
});
}

renderCharacters() {
console.log('in renderCharacters');
// if(this.state.characters){
// return this.state.characters.map((elem, index) =>{
// return <CharacterCard key={index} name={elem.name} year={elem.birth_year} />
// console.log(CharacterCard['results'][0]['name']['birth_year']);
// })
console.log('characters array', this.state.characters);
}

render() {
// console.log(this.state.characters);
return (
<div>

<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Star Wars</h2>
</div>
</div>

<div className="App">
<img src={logo} className="App-logo" alt="logo" />
{this.renderCharacters()}
</div>
</div>
);
}
}


export default App;
8 changes: 8 additions & 0 deletions 08week/fetch/src/App.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<App />, div);
});
107 changes: 107 additions & 0 deletions 08week/fetch/src/StarWars.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class StarWars extends React.Component {
constructor (props) {
super(props);
this.resetState = {
characters: [],
}
this.state = {...this.resetState};
}

componentDidMount () {
fetch('https://swapi.co/api/people/')
.then((response) => response.json())
.then((responseJson) => {
return this.setState({characters: responseJson.results});
})
.catch((error) => {
console.error(error);
});
}

renderCharacterData () {
if (this.state.characters) {
return this.state.characters.map((character, index) => {
return (
<tr key={`Row-${index}`}>
<td key={`Name-${index}`} data-characterName={character.name} className='name'>{character.name}</td>
<td key={`Spacer-${index}`} data-characterName={character.name} className='spacer'>.</td>
<td key={`Gender-${index}`} data-characterName={character.name} className='gender'>{character.gender}</td>
<td key={`Eyes-${index}`} data-characterName={character.name} className='eyes'>{character.hair_color}</td>
<td key={`Hair-${index}`} data-characterName={character.name} className='hair'>{character.eye_color}</td>
<td key={`year-${index}`} data-characterName={character.name} className='year'>{character.birth_year}</td>
</tr>
);
});
}
}

render () {
return (
<div className='app'>
<h2 id='title'>Star Wars Trivia Matchup</h2>
<table>
<tbody>
{this.renderCharacterData()}
</tbody>
</table>

</div>
);
}
}


ReactDOM.render(<StarWars />, document.getElementById('game'));

// class Apple extends Component {
// const url = 'https://swapi.co/api/people/'; // Get 10 random characters
// fetch(url)
// .then(function(data) {
// // Your code for handling the data you get from the API
// })
// .catch(function(error) {
// // This is where you run code if the server returns any errors
// });
//
// renderList = () => {
// // if(this.props.list && this.props.list.length > 0){
// // return this.props.list.map((card, index) => {
// // return(
// // <div key={index}>
// // <h2 onClick={() => this.props.handleClick(card.id)}>{card.text}</h2>
// // <input style={{visibility: card.isEditable ? 'inherit' : 'hidden',}}
// // onChange={(event) => this.props.handleChange(card.id, event.target.value)}
// // />
// // <p onClick={() => this.props.deleteStatus(card.id)}>X</p>
// // </div>
// // )
// // });
// // }
// // }
//
// render() {
// return (
// <div className="">
// {this.renderList()}
// </div>
// );
// }
// }
//
// export default Apple;

// const card = (
// <div>
// <img src="pics/192940u73.jpg" />
// <h1>
// Welcome to Dans Blog!
// </h1>
// <article>
// Wow I had the tastiest sandwich today. I <strong>literally</strong> almost freaked out.
// </article>
// </div>
// );
Loading