Skip to content

Commit 7a230fe

Browse files
10-seconds10-seconds
authored
Merge branch 'master' into master
2 parents e521006 + 726873f commit 7a230fe

10 files changed

Lines changed: 260 additions & 82 deletions

File tree

‎.github/ISSUE_TEMPLATE/bug_report.md‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
---
2+
name: Bug report
3+
about: Create a report to help us improve
4+
5+
---
6+
7+
**Describe the bug**
8+
A clear and concise description of what the bug is.
9+
10+
**To Reproduce**
11+
Steps to reproduce the behavior:
12+
1. Go to '...'
13+
2. Click on '....'
14+
3. Scroll down to '....'
15+
4. See error
16+
17+
**Expected behavior**
18+
A clear and concise description of what you expected to happen.
19+
20+
**Screenshots**
21+
If applicable, add screenshots to help explain your problem.
22+
23+
**Desktop (please complete the following information):**
24+
- OS: [e.g. iOS]
25+
- Browser [e.g. chrome, safari]
26+
- Version [e.g. 22]
27+
28+
**Smartphone (please complete the following information):**
29+
- Device: [e.g. iPhone6]
30+
- OS: [e.g. iOS8.1]
31+
- Browser [e.g. stock browser, safari]
32+
- Version [e.g. 22]
33+
34+
**Additional context**
35+
Add any other context about the problem here.

‎.github/ISSUE_TEMPLATE/custom.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
name: Custom issue template
3+
about: Describe this issue template's purpose here.
4+
5+
---
6+
7+

‎Notes.MD‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
# RefLink
2+
3+
1. https://ponyfoo.com/articles/es6
4+
2. https://github.com/sudheerj/reactjs-interview-questions

‎README.md‎

Lines changed: 82 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,88 @@
1-
# 10secondsofcode
2-
[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2F10secondsofcode%2F10secondsofcode.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2F10secondsofcode%2F10secondsofcode?ref=badge_shield)
31

4-
The team behind 10-seconds-of-code and official 10-seconds projects.
2+
# 10secondsofcode
3+
10secondsofcode is a easy way to understand the reactjs snippets in 10 seconds. [![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2F10secondsofcode%2F10secondsofcode.svg?type=small)](https://app.fossa.io/projects/git%2Bgithub.com%2F10secondsofcode%2F10secondsofcode?ref=badge_small)
54

6-
# References
5+
## Getting Started
76

8-
https://ponyfoo.com/articles/es6
9-
https://github.com/sudheerj/reactjs-interview-questions
7+
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.
108

9+
### Prerequisites
10+
11+
What things you need to install the software and how to install them
12+
13+
```
14+
Give examples
15+
```
16+
17+
### Installing
18+
19+
A step by step series of examples that tell you how to get a development env running
20+
21+
Say what the step will be
22+
23+
```
24+
Give the example
25+
```
26+
27+
And repeat
28+
29+
```
30+
until finished
31+
```
32+
33+
End with an example of getting some data out of the system or using it for a little demo
34+
35+
## Running the tests
36+
37+
Explain how to run the automated tests for this system
38+
39+
### Break down into end to end tests
40+
41+
Explain what these tests test and why
42+
43+
```
44+
Give an example
45+
```
46+
47+
### And coding style tests
48+
49+
Explain what these tests test and why
50+
51+
```
52+
Give an example
53+
```
54+
55+
## Deployment
56+
57+
Add additional notes about how to deploy this on a live system
58+
59+
## Built With
60+
61+
* [Dropwizard](http://www.dropwizard.io/1.0.2/docs/) - The web framework used
62+
* [Maven](https://maven.apache.org/) - Dependency Management
63+
* [ROME](https://rometools.github.io/rome/) - Used to generate RSS Feeds
64+
65+
## Contributing
66+
67+
Please read [CONTRIBUTING.md](https://gist.github.com/PurpleBooth/b24679402957c63ec426) for details on our code of conduct, and the process for submitting pull requests to us.
68+
69+
## Versioning
70+
71+
We use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/your/project/tags).
72+
73+
## Authors
74+
75+
* **Billie Thompson** - *Initial work* - [PurpleBooth](https://github.com/PurpleBooth)
76+
77+
See also the list of [contributors](https://github.com/your/project/contributors) who participated in this project.
1178

1279
## License
13-
[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2F10secondsofcode%2F10secondsofcode.svg?type=large)](https://app.fossa.io/projects/git%2Bgithub.com%2F10secondsofcode%2F10secondsofcode?ref=badge_large)
80+
81+
This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details
82+
83+
## Acknowledgments
84+
85+
* Hat tip to anyone whose code was used
86+
* Inspiration
87+
* etc
88+

‎src/App.js‎

Lines changed: 4 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Button } from 'reactstrap';
33

44
import Navigation from './Components/Navigation';
55
import Main from './Components/Main';
6+
import Herocontent from './Components/Herocontent';
67

78
class App extends React.Component {
89
constructor(props){
@@ -27,43 +28,11 @@ class App extends React.Component {
2728
}
2829

2930
render() {
30-
return (
31-
<div className="container thememain">
32-
<Navigation />
33-
<div className="container main">
34-
<Main />
35-
</div>
36-
</div>
37-
);
38-
}
39-
}
40-
41-
class Header extends React.Component{
42-
render(){
43-
return (
44-
<div>
45-
<h1>Header sectionsr</h1>
46-
47-
</div>
48-
);
49-
}
50-
}
51-
52-
class Content extends React.Component{
53-
render(){
54-
return (
55-
<div>
56-
<h1>Content Sections</h1>
57-
</div>
58-
);
59-
}
60-
}
61-
62-
class Footer extends React.Component{
63-
render(){
6431
return (
6532
<div>
66-
<h1>Footer Content</h1>
33+
<Navigation />
34+
<Herocontent />
35+
<Main />
6736
</div>
6837
);
6938
}

‎src/Components/Herocontent.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
2+
import React from 'react';
3+
4+
class Herocontent extends React.Component {
5+
render() {
6+
return (
7+
<div className="main thememain-blue">
8+
<div className="container main">
9+
<div className="col-12">
10+
<h1 className="theme-text">The Modern ReactJS Tutorial</h1>
11+
<p className="theme-text" >How it's done now. From the basics to advanced topics with simple, but detailed explanations.
12+
<a className="button button--big" href="#">Download for Linux</a>
13+
</p>
14+
<div className="theme-text" >
15+
<a className="button button--big" href="#">View on github</a>
16+
<a className="button button--big" href="#">twitter</a>
17+
<a className="button button--big" href="#">fb</a>
18+
</div>
19+
<div className="">
20+
<form className="theme-search form-inline my-2 my-lg-0 theme-text">
21+
<input className=" theme-search-input form-control mr-sm-2" type="search" placeholder="Search"></input>
22+
<button className="theme-search-btn btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
23+
</form>
24+
</div>
25+
</div>
26+
</div>
27+
</div>
28+
)
29+
}
30+
}
31+
32+
export default Herocontent;

‎src/Components/Main.js‎

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,24 @@ import React from 'react';
44
class Main extends React.Component {
55
render() {
66
return (
7-
<div>
8-
<div className="row jumbotron thememain" >
9-
<div className="col-sm-12">
10-
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
7+
<div className="main thememain-white">
8+
<div className="container main">
9+
<div className="row" >
10+
<div className="col-sm-12">
11+
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
12+
</div>
1113
</div>
12-
</div>
13-
<div className="row"></div>
14-
<div className="row">
15-
<div className="col-sm">
16-
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. I
17-
</div>
18-
<div className="col-sm">
19-
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. I
20-
</div>
21-
<div className="col-sm">
22-
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. I
14+
<div className="row"></div>
15+
<div className="row">
16+
<div className="col-sm">
17+
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. I
18+
</div>
19+
<div className="col-sm">
20+
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. I
21+
</div>
22+
<div className="col-sm">
23+
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. I
24+
</div>
2325
</div>
2426
</div>
2527
</div>

‎src/Components/Navigation.js‎

Lines changed: 27 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -4,30 +4,34 @@ import React from 'react';
44
class Navigation extends React.Component {
55
render() {
66
return (
7-
<nav className="navbar navbar-expand-lg navbar-light bg-light thememain">
8-
<a className="navbar-brand" href="#">Navbar</a>
9-
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
10-
<span className="navbar-toggler-icon"></span>
11-
</button>
7+
<div className="main thememain-header">
8+
<div className="container">
9+
<nav className="navbar navbar-expand-lg navbar-light bg-light thememain-header">
10+
<a className="navbar-brand" href="#">Navbar</a>
11+
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
12+
<span className="navbar-toggler-icon"></span>
13+
</button>
1214

13-
<div className="collapse navbar-collapse" id="navbarTogglerDemo02">
14-
<ul className="navbar-nav mr-auto mt-2 mt-lg-0">
15-
<li className="nav-item active">
16-
<a className="nav-link" href="#">Home <span className="sr-only">(current)</span></a>
17-
</li>
18-
<li className="nav-item">
19-
<a className="nav-link" href="#">Link</a>
20-
</li>
21-
<li className="nav-item">
22-
<a className="nav-link disabled" href="#">Disabled</a>
23-
</li>
24-
</ul>
25-
<form className="form-inline my-2 my-lg-0">
26-
<input className="form-control mr-sm-2" type="search" placeholder="Search"></input>
27-
<button className="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
28-
</form>
29-
</div>
30-
</nav>
15+
<div className="collapse navbar-collapse" id="navbarTogglerDemo02">
16+
<ul className="navbar-nav mr-auto mt-2 mt-lg-0">
17+
<li className="nav-item active">
18+
<a className="nav-link" href="#">Home <span className="sr-only">(current)</span></a>
19+
</li>
20+
<li className="nav-item">
21+
<a className="nav-link" href="#">Link</a>
22+
</li>
23+
<li className="nav-item">
24+
<a className="nav-link disabled" href="#">Disabled</a>
25+
</li>
26+
</ul>
27+
<form className="form-inline my-2 my-lg-0">
28+
<input className="form-control mr-sm-2" type="search" placeholder="Search"></input>
29+
<button className="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
30+
</form>
31+
</div>
32+
</nav>
33+
</div>
34+
</div>
3135
)
3236
}
3337
}

‎src/index.html‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,15 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4+
<title itemprop="name">10secondsofcode - reactjs | reactjs online | ReactJS Tutorial</title>
45
<meta charset="utf-8">
5-
<title>webpack 4 quickstart</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0">
7+
<meta name="apple-mobile-web-app-capable" content="yes">
8+
<meta name="author" content="10secondsofcode">
9+
<meta name="msapplication-TileColor" content="#3ab78c">
10+
<meta property="og:title" content="10secondsofcode - The Modern Reactjs Tutorial ">
11+
<meta name="description" content="10secondsofcode - Modern ReactJs Tutorial: Reactjs online tutorials, examples and advanced concepts">
12+
<link rel="canonical" href="#">
613
</head>
714
<body>
815
<div id="app">

‎src/style.css‎

Lines changed: 44 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,46 @@
1-
.thememain{
1+
.thememain-white{
2+
background: white;
3+
}
4+
5+
.thememain-header{
26
background: linear-gradient(165deg,#6e60cc,#484389);
7+
color:white;
8+
}
9+
10+
.thememain-header a{
11+
color:white !important;
12+
}
13+
14+
.thememain-blue{
15+
background: linear-gradient(165deg,#6e60cc,#484389);
16+
width: 100%;
17+
min-height: 30rem;
18+
width: 100%;
19+
margin: 0 auto;
20+
padding-top: 50px;
21+
box-sizing: border-box;
22+
color:white;
23+
}
24+
25+
.theme-text{
26+
text-align: center;
27+
/*padding-top: 10px;*/
28+
font-size: 16px;
29+
line-height: 1.5;
30+
}
31+
32+
.theme-search{
33+
display: block !important;
34+
margin-top: 10px;
35+
text-align:center;
36+
}
37+
38+
.theme-search-input{
39+
width: 60% !important;
40+
margin-top: 10px;
41+
}
42+
43+
.theme-search-btn{
44+
width: 14% !important;
45+
margin-top: 10px !important;
346
}

0 commit comments

Comments
 (0)