Rohan Kale
8 months ago
parent
e4e402fd66
commit
6881438c34
File diff suppressed because it is too large
Load Diff
@ -1,256 +1,60 @@
|
|||||||
// index.js
|
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import ReactDOM from 'react-dom'
|
import ReactDom from 'react-dom'
|
||||||
import asabenehImage from './images/asabeneh.jpg'
|
|
||||||
|
|
||||||
// Fuction to show month date year
|
|
||||||
|
|
||||||
const showDate = (time) => {
|
class App extends React.Component {
|
||||||
const months = [
|
//declaring state
|
||||||
'January',
|
|
||||||
'February',
|
|
||||||
'March',
|
|
||||||
'April',
|
|
||||||
'May',
|
|
||||||
'June',
|
|
||||||
'July',
|
|
||||||
'August',
|
|
||||||
'September',
|
|
||||||
'October',
|
|
||||||
'November',
|
|
||||||
'December',
|
|
||||||
]
|
|
||||||
|
|
||||||
const month = months[time.getMonth()].slice(0, 3)
|
|
||||||
const year = time.getFullYear()
|
|
||||||
const date = time.getDate()
|
|
||||||
return ` ${month} ${date}, ${year}`
|
|
||||||
}
|
|
||||||
|
|
||||||
// User Card Component
|
|
||||||
const UserCard = ({ user: { firstName, lastName, image } }) => (
|
|
||||||
<div className='user-card'>
|
|
||||||
<img src={image} alt={firstName} />
|
|
||||||
<h2>
|
|
||||||
{firstName}
|
|
||||||
{lastName}
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
|
|
||||||
// A button component
|
state = {
|
||||||
const Button = ({ text, onClick, style }) => (
|
image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQAOsR0U0cMQrip5q8C330243NWFIMVT0306A&s',
|
||||||
<button style={style} onClick={onClick}>
|
buttonName: 'Click to see your pet'
|
||||||
{text}
|
|
||||||
</button>
|
|
||||||
)
|
|
||||||
|
|
||||||
// CSS styles in JavaScript Object
|
|
||||||
const buttonStyles = {
|
|
||||||
backgroundColor: '#61dbfb',
|
|
||||||
padding: 10,
|
|
||||||
border: 'none',
|
|
||||||
borderRadius: 5,
|
|
||||||
margin: 3,
|
|
||||||
cursor: 'pointer',
|
|
||||||
fontSize: 18,
|
|
||||||
color: 'white',
|
|
||||||
}
|
}
|
||||||
|
changeAnimal = () => {
|
||||||
|
let dogURL =
|
||||||
|
'https://images.pexels.com/photos/236622/pexels-photo-236622.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'
|
||||||
|
let catURL =
|
||||||
|
'https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'
|
||||||
|
let image = this.state.image === catURL ? dogURL : catURL
|
||||||
|
this.setState({ image })
|
||||||
|
|
||||||
// class based component
|
}
|
||||||
class Header extends React.Component {
|
changeButtonName = () => {
|
||||||
constructor(props) {
|
|
||||||
super(props)
|
let buttonDog = 'dog';
|
||||||
// the code inside the constructor run before any other code
|
let buttonCat = 'cat'
|
||||||
}
|
let buttonName=this.state.buttonName === buttonDog ? buttonCat : buttonDog
|
||||||
render() {
|
this.setState({ buttonName });
|
||||||
console.log(this.props.data)
|
};
|
||||||
const {
|
handleButtonClick = () => {
|
||||||
welcome,
|
this.changeAnimal();
|
||||||
title,
|
this.changeButtonName();
|
||||||
subtitle,
|
};
|
||||||
author: { firstName, lastName },
|
|
||||||
date,
|
|
||||||
} = this.props.data
|
|
||||||
|
|
||||||
return (
|
|
||||||
<header style={this.props.styles}>
|
|
||||||
<div className='header-wrapper'>
|
|
||||||
<h1>{welcome}</h1>
|
|
||||||
<h2>{title}</h2>
|
|
||||||
<h3>{subtitle}</h3>
|
|
||||||
<p>
|
|
||||||
{firstName} {lastName}
|
|
||||||
</p>
|
|
||||||
<small>{date}</small>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const Count = ({ count, addOne, minusOne }) => (
|
|
||||||
<div>
|
|
||||||
<h1>{count} </h1>
|
|
||||||
<div>
|
|
||||||
<Button text='+1' onClick={addOne} style={buttonStyles} />
|
|
||||||
<Button text='-1' onClick={minusOne} style={buttonStyles} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
|
|
||||||
// TechList Component
|
|
||||||
// class base component
|
|
||||||
class TechList extends React.Component {
|
|
||||||
constructor(props) {
|
|
||||||
super(props)
|
|
||||||
}
|
|
||||||
render() {
|
render() {
|
||||||
const { techs } = this.props
|
|
||||||
const techsFormatted = techs.map((tech) => <li key={tech}>{tech}</li>)
|
|
||||||
return techsFormatted
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Main Component
|
//accessing the state value
|
||||||
// Class Component
|
const count = this.state.count
|
||||||
class Main extends React.Component {
|
// method which add one to the state
|
||||||
constructor(props) {
|
|
||||||
super(props)
|
|
||||||
}
|
|
||||||
render() {
|
|
||||||
const {
|
|
||||||
techs,
|
|
||||||
user,
|
|
||||||
greetPeople,
|
|
||||||
handleTime,
|
|
||||||
changeBackground,
|
|
||||||
count,
|
|
||||||
addOne,
|
|
||||||
minusOne,
|
|
||||||
} = this.props
|
|
||||||
return (
|
|
||||||
<main>
|
|
||||||
<div className='main-wrapper'>
|
|
||||||
<p>Prerequisite to get started react.js:</p>
|
|
||||||
<ul>
|
|
||||||
<TechList techs={techs} />
|
|
||||||
</ul>
|
|
||||||
<UserCard user={user} />
|
|
||||||
<Button
|
|
||||||
text='Greet People'
|
|
||||||
onClick={greetPeople}
|
|
||||||
style={buttonStyles}
|
|
||||||
/>
|
|
||||||
<Button text='Show Time' onClick={handleTime} style={buttonStyles} />
|
|
||||||
<Button
|
|
||||||
text='Change Background'
|
|
||||||
onClick={changeBackground}
|
|
||||||
style={buttonStyles}
|
|
||||||
/>
|
|
||||||
<Count count={count} addOne={addOne} minusOne={minusOne} />
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Footer Component
|
|
||||||
// Class component
|
|
||||||
class Footer extends React.Component {
|
|
||||||
constructor(props) {
|
|
||||||
super(props)
|
|
||||||
}
|
|
||||||
render() {
|
|
||||||
return (
|
return (
|
||||||
<footer>
|
<div className='App'>
|
||||||
<div className='footer-wrapper'>
|
<h1>{count} </h1>
|
||||||
<p>Copyright {this.props.date.getFullYear()}</p>
|
<h1>30 Days Of React</h1>
|
||||||
|
<div className='animal'>
|
||||||
|
<img src={this.state.image} alt='animal' />
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
class App extends React.Component {
|
<button onClick={this.handleButtonClick} className="btn btn-add">
|
||||||
state = {
|
{this.state.buttonName}
|
||||||
count: 0,
|
</button>
|
||||||
styles: {
|
|
||||||
backgroundColor: '',
|
|
||||||
color: '',
|
|
||||||
},
|
|
||||||
}
|
|
||||||
showDate = (time) => {
|
|
||||||
const months = [
|
|
||||||
'January',
|
|
||||||
'February',
|
|
||||||
'March',
|
|
||||||
'April',
|
|
||||||
'May',
|
|
||||||
'June',
|
|
||||||
'July',
|
|
||||||
'August',
|
|
||||||
'September',
|
|
||||||
'October',
|
|
||||||
'November',
|
|
||||||
'December',
|
|
||||||
]
|
|
||||||
|
|
||||||
const month = months[time.getMonth()].slice(0, 3)
|
</div>
|
||||||
const year = time.getFullYear()
|
|
||||||
const date = time.getDate()
|
|
||||||
return ` ${month} ${date}, ${year}`
|
|
||||||
}
|
|
||||||
addOne = () => {
|
|
||||||
this.setState({ count: this.state.count + 1 })
|
|
||||||
}
|
|
||||||
|
|
||||||
// method which subtract one to the state
|
|
||||||
minusOne = () => {
|
|
||||||
this.setState({ count: this.state.count - 1 })
|
|
||||||
}
|
|
||||||
handleTime = () => {
|
|
||||||
alert(this.showDate(new Date()))
|
|
||||||
}
|
|
||||||
greetPeople = () => {
|
|
||||||
alert('Welcome to 30 Days Of React Challenge, 2020')
|
|
||||||
}
|
|
||||||
changeBackground = () => {}
|
|
||||||
render() {
|
|
||||||
const data = {
|
|
||||||
welcome: 'Welcome to 30 Days Of React',
|
|
||||||
title: 'Getting Started React',
|
|
||||||
subtitle: 'JavaScript Library',
|
|
||||||
author: {
|
|
||||||
firstName: 'Asabeneh',
|
|
||||||
lastName: 'Yetayeh',
|
|
||||||
},
|
|
||||||
date: 'Oct 7, 2020',
|
|
||||||
}
|
|
||||||
const techs = ['HTML', 'CSS', 'JavaScript']
|
|
||||||
const date = new Date()
|
|
||||||
// copying the author from data object to user variable using spread operator
|
|
||||||
const user = { ...data.author, image: asabenehImage }
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className='app'>
|
|
||||||
{this.state.backgroundColor}
|
|
||||||
<Header data={data} />
|
|
||||||
<Main
|
|
||||||
user={user}
|
|
||||||
techs={techs}
|
|
||||||
handleTime={this.handleTime}
|
|
||||||
greetPeople={this.greetPeople}
|
|
||||||
changeBackground={this.changeBackground}
|
|
||||||
addOne={this.addOne}
|
|
||||||
minusOne={this.minusOne}
|
|
||||||
count={this.state.count}
|
|
||||||
/>
|
|
||||||
<Footer date={new Date()} />
|
|
||||||
</div>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
const rootElment = document.getElementById('root')
|
||||||
const rootElement = document.getElementById('root')
|
ReactDom.render(<App />, rootElment)
|
||||||
ReactDOM.render(<App />, rootElement)
|
|
||||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue