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 ReactDOM from 'react-dom'
|
||||
import asabenehImage from './images/asabeneh.jpg'
|
||||
import ReactDom from 'react-dom'
|
||||
|
||||
// Fuction to show month date year
|
||||
|
||||
const showDate = (time) => {
|
||||
const months = [
|
||||
'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>
|
||||
)
|
||||
class App extends React.Component {
|
||||
//declaring state
|
||||
|
||||
// A button component
|
||||
const Button = ({ text, onClick, style }) => (
|
||||
<button style={style} onClick={onClick}>
|
||||
{text}
|
||||
</button>
|
||||
)
|
||||
state = {
|
||||
image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQAOsR0U0cMQrip5q8C330243NWFIMVT0306A&s',
|
||||
buttonName: 'Click to see your pet'
|
||||
|
||||
// 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 })
|
||||
|
||||
}
|
||||
changeButtonName = () => {
|
||||
|
||||
let buttonDog = 'dog';
|
||||
let buttonCat = 'cat'
|
||||
let buttonName=this.state.buttonName === buttonDog ? buttonCat : buttonDog
|
||||
this.setState({ buttonName });
|
||||
};
|
||||
handleButtonClick = () => {
|
||||
this.changeAnimal();
|
||||
this.changeButtonName();
|
||||
};
|
||||
|
||||
// class based component
|
||||
class Header extends React.Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
// the code inside the constructor run before any other code
|
||||
}
|
||||
render() {
|
||||
console.log(this.props.data)
|
||||
const {
|
||||
welcome,
|
||||
title,
|
||||
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>
|
||||
)
|
||||
}
|
||||
}
|
||||
//accessing the state value
|
||||
const count = this.state.count
|
||||
// method which add one to the state
|
||||
|
||||
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() {
|
||||
const { techs } = this.props
|
||||
const techsFormatted = techs.map((tech) => <li key={tech}>{tech}</li>)
|
||||
return techsFormatted
|
||||
}
|
||||
}
|
||||
|
||||
// Main Component
|
||||
// Class Component
|
||||
class Main extends React.Component {
|
||||
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 (
|
||||
<footer>
|
||||
<div className='footer-wrapper'>
|
||||
<p>Copyright {this.props.date.getFullYear()}</p>
|
||||
<div className='App'>
|
||||
<h1>{count} </h1>
|
||||
<h1>30 Days Of React</h1>
|
||||
<div className='animal'>
|
||||
<img src={this.state.image} alt='animal' />
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
class App extends React.Component {
|
||||
state = {
|
||||
count: 0,
|
||||
styles: {
|
||||
backgroundColor: '',
|
||||
color: '',
|
||||
},
|
||||
}
|
||||
showDate = (time) => {
|
||||
const months = [
|
||||
'January',
|
||||
'February',
|
||||
'March',
|
||||
'April',
|
||||
'May',
|
||||
'June',
|
||||
'July',
|
||||
'August',
|
||||
'September',
|
||||
'October',
|
||||
'November',
|
||||
'December',
|
||||
]
|
||||
<button onClick={this.handleButtonClick} className="btn btn-add">
|
||||
{this.state.buttonName}
|
||||
</button>
|
||||
|
||||
const month = months[time.getMonth()].slice(0, 3)
|
||||
const year = time.getFullYear()
|
||||
const date = time.getDate()
|
||||
return ` ${month} ${date}, ${year}`
|
||||
}
|
||||
addOne = () => {
|
||||
this.setState({ count: this.state.count + 1 })
|
||||
}
|
||||
</div>
|
||||
|
||||
// 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 rootElement = document.getElementById('root')
|
||||
ReactDOM.render(<App />, rootElement)
|
||||
const rootElment = document.getElementById('root')
|
||||
ReactDom.render(<App />, rootElment)
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue