Last active
May 24, 2019 20:30
-
-
Save kevinyc-dri/8c97066998b5b9fc66b8dbe563f0786a to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Web Portfolio of Kevin</title> | |
| </head> | |
| <body> | |
| <div className="App" align=center> | |
| <h1>I am Kevin Choi</h1> | |
| <h2>Full Stack Developer</h2> | |
| <h4>This is my mini resume</h4> | |
| <div id="like_button_container"></div> | |
| <hr /> | |
| <h3>Check out my repositories:</h3> | |
| <div id="github-projects"></div> | |
| <elements>Repos</elements> | |
| <hr /> | |
| </div> | |
| <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> | |
| <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script> | |
| <!-- Load our React component. --> | |
| <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> | |
| <script type="text/babel"> | |
| const api = axios.create({ | |
| baseURL: 'https://api.github.com', | |
| timeout: 1000, | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| Accept: 'application/vnd.github.inertia-preview+json' | |
| } | |
| }); | |
| const username = 'choik305'; | |
| const urls = { | |
| gists: `/users/${username}/gists`, | |
| repos: `/users/${username}/repos` | |
| }; | |
| const github = { | |
| getGists: () => api.get(urls.gists), | |
| getRepos: () => api.get(urls.repos) | |
| }; | |
| const e = React.createElement | |
| class Repos extends React.Component { | |
| constructor(props) { | |
| super(props) | |
| this.state = { | |
| data: [] | |
| } | |
| github.getRepos().then((data) => { | |
| this.setState({ | |
| data: data.data.splice(0, 5) | |
| }); | |
| }); | |
| } | |
| render() { | |
| console.log(this.state); | |
| return ( | |
| <div> | |
| <ul> | |
| {this.state.data.map((item, i) => ( | |
| <a key={i} href={item.html_url}> | |
| <li >{item.name}</li> | |
| </a> | |
| ))} | |
| </ul> | |
| </div> | |
| ) | |
| } | |
| } | |
| const domContainer = document.querySelector('#github-projects'); | |
| ReactDOM.render( e(Repos), domContainer); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
What is the convention for naming classes in CSS?
The .class selector selects elements with a specific class attribute. To select elements with a specific class, write a period (.) character, followed by the name of the class.
You can also specify that only specific HTML elements should be affected by a class. To do this, start with the element name, then write the period (.) character, followed by the name of the class.
What is one way to stop a form from submitting with JavaScript?
One way to stop form submission is to return false from your JavaScript function.
When should HTML code be validated?
When you need to look for errors that may affect how your website is understood by web browsers and search engines.
What is the DOM? Please elaborate on this question.
The DOM is the Document Object Model. It is the API in HTML and XML document. Using DOM API you can easily do manipulation in the DOM and accessed element inside DOM.
Which one is better: CSS Grid, Flexbox or just plain CSS?
CSS Grid is a two-dimensional system, meaning it can handle both columns and rows. Flexbox is largely a one-dimensional system. Cascading style sheets are used to format the layout of Web pages. They can be used to define text styles, table sizes,and other aspects of Web pages that previously could only be defined in a page's HTML.
When should one stop learning?
Never Ever Stop Learning!