Mehmet Arda Çelik
3 years ago
committed by
GitHub
commit
785751a617
@ -0,0 +1,104 @@
|
||||
|
||||
console.log(dog.name,dog['color'])
|
||||
|
||||
dog.breed = 'rot';
|
||||
dog.GetDogInfo = function(){
|
||||
return `this dogs name is ${this.name} and it has good ${this.color} color it has ${this.legs} legs.`;
|
||||
}
|
||||
|
||||
console.log(dog.GetDogInfo());
|
||||
|
||||
const users = {
|
||||
Alex: {
|
||||
email: 'alex@alex.com',
|
||||
skills: ['HTML', 'CSS', 'JavaScript'],
|
||||
age: 20,
|
||||
isLoggedIn: false,
|
||||
points: 30
|
||||
},
|
||||
Asab: {
|
||||
email: 'asab@asab.com',
|
||||
skills: ['HTML', 'CSS', 'JavaScript', 'Redux', 'MongoDB', 'Express', 'React', 'Node'],
|
||||
age: 25,
|
||||
isLoggedIn: false,
|
||||
points: 50
|
||||
},
|
||||
Brook: {
|
||||
email: 'daniel@daniel.com',
|
||||
skills: ['HTML', 'CSS', 'JavaScript', 'React', 'Redux'],
|
||||
age: 30,
|
||||
isLoggedIn: true,
|
||||
points: 50
|
||||
},
|
||||
Daniel: {
|
||||
email: 'daniel@alex.com',
|
||||
skills: ['HTML', 'CSS', 'JavaScript', 'Python'],
|
||||
age: 20,
|
||||
isLoggedIn: false,
|
||||
points: 40
|
||||
},
|
||||
John: {
|
||||
email: 'john@john.com',
|
||||
skills: ['HTML', 'CSS', 'JavaScript', 'React', 'Redux', 'Node.js'],
|
||||
age: 20,
|
||||
isLoggedIn: true,
|
||||
points: 50
|
||||
},
|
||||
Thomas: {
|
||||
email: 'thomas@thomas.com',
|
||||
skills: ['HTML', 'CSS', 'JavaScript', 'React'],
|
||||
age: 20,
|
||||
isLoggedIn: false,
|
||||
points: 40
|
||||
},
|
||||
Paul: {
|
||||
email: 'paul@paul.com',
|
||||
skills: ['HTML', 'CSS', 'JavaScript', 'MongoDB', 'Express', 'React', 'Node'],
|
||||
age: 20,
|
||||
isLoggedIn: false,
|
||||
points: 40
|
||||
}
|
||||
}
|
||||
|
||||
const arrUsers = Object.entries(users);
|
||||
console.log(arrUsers)
|
||||
|
||||
const valUsers = Object.values(users);
|
||||
console.log(valUsers)
|
||||
|
||||
const assUsers = Object.assign(users);
|
||||
console.log(assUsers)
|
||||
|
||||
const keyUsers = Object.keys(users);
|
||||
console.log(keyUsers)
|
||||
|
||||
const rafik = [];
|
||||
|
||||
arrUsers.map( item => {
|
||||
console.log(item[0])
|
||||
const newObj = {
|
||||
itemName : item[0],
|
||||
itemValues : item[1]
|
||||
}
|
||||
rafik.push(newObj);
|
||||
})
|
||||
|
||||
console.log(rafik);
|
||||
|
||||
console.log( rafik.sort( (a,b) => b.itemValues.skills.length - a.itemValues.skills.length)[0].itemName);
|
||||
|
||||
console.log(rafik.find( item => item.itemValues.skills.includes('React')))
|
||||
|
||||
|
||||
// Find the Mern developer
|
||||
function findMernDev( name,arr ){
|
||||
if( arr.indexOf('React') !== -1 && arr.indexOf('Node') !== -1 && arr.indexOf('MongoDB') !== -1 && arr.indexOf('Express') !== -1 ){
|
||||
console.log( name )
|
||||
}
|
||||
}
|
||||
|
||||
for( const item of rafik ){
|
||||
|
||||
findMernDev( item.itemName, item.itemValues.skills )
|
||||
|
||||
}
|
||||
@ -0,0 +1,22 @@
|
||||
import React from "react";
|
||||
import aso from './images/asabeneh.jpg';
|
||||
|
||||
const imageStyle = {
|
||||
width: 200,
|
||||
height: 200,
|
||||
borderRadius: '50%'
|
||||
}
|
||||
|
||||
const skills = ['html','react','css','javascript']
|
||||
|
||||
export const UserCard = (
|
||||
<div>
|
||||
<img src={aso} style={imageStyle} alt={'image'}/>
|
||||
<p>Alex De Souza</p>
|
||||
<ul>
|
||||
{
|
||||
skills.map( skill => <li key={skill}>{skill}</li> )
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
@ -0,0 +1,97 @@
|
||||
import React from "react";
|
||||
import imageAsa from './images/asabeneh.jpg'
|
||||
|
||||
const buttonStyle = {
|
||||
width : 200,
|
||||
padding: '0.5rem 1rem',
|
||||
backgroundColor: 'crimson',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
borderRadius: 4
|
||||
}
|
||||
|
||||
const inputStyle = {
|
||||
border: 'none',
|
||||
padding: '0.5rem 1rem',
|
||||
backgroundColor: '#a4a4a4',
|
||||
borderRadius: 4
|
||||
}
|
||||
|
||||
const inputContainer = {
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
gap: 13,
|
||||
padding: '1rem'
|
||||
}
|
||||
|
||||
const container = {
|
||||
textAlign: 'center'
|
||||
}
|
||||
|
||||
const skillStyle = {
|
||||
padding: '0.5rem',
|
||||
backgroundColor: 'purple',
|
||||
color: 'white',
|
||||
margin: '0.5rem',
|
||||
borderRadius: 4
|
||||
}
|
||||
|
||||
const user = {
|
||||
name: 'Asabenah Yetayeh',
|
||||
title: 'Senior Developer,Finland',
|
||||
skills : ['HTML', 'Css', 'Sass', 'Scss', 'Js', 'React', 'Redux']
|
||||
}
|
||||
|
||||
const hexaColor = () => {
|
||||
let str = '0123456789abcdef'
|
||||
let color = ''
|
||||
for (let i = 0; i < 6; i++) {
|
||||
let index = Math.floor(Math.random() * str.length)
|
||||
color += str[index]
|
||||
}
|
||||
return '#' + color
|
||||
}
|
||||
|
||||
const ReUsableButton = props => <button style={buttonStyle}> { props.text } </button>;
|
||||
const ReUsableInput = props => <input style={inputStyle} type={ props.type } placeholder={ props.placeholder } />;
|
||||
const ColorfulBox = props => <div style={{ backgroundColor: props.color, width:'100%', padding: '1rem' }}>{ props.color }</div>
|
||||
|
||||
const Exercise1 = () => (
|
||||
<div style={ container }>
|
||||
<h3>Subscribe</h3>
|
||||
<p>Sign bilmem ne ol sonra dön götüne koy.</p>
|
||||
<div style={inputContainer}>
|
||||
<ReUsableInput type="text" placeholder="First Name" />
|
||||
<ReUsableInput type="text" placeholder="Last Name" />
|
||||
<ReUsableInput type="text" placeholder="Email" />
|
||||
</div>
|
||||
<ReUsableButton text="seks" />
|
||||
</div>
|
||||
)
|
||||
|
||||
const Exercise3 = () => {
|
||||
return(
|
||||
<div>
|
||||
<img src={imageAsa} style={{width:100,borderRadius:'50%'}} alt={'asa'}/>
|
||||
<h4>{user.name}</h4>
|
||||
<p>{user.title}</p>
|
||||
<div style={{padding:'1rem'}}>
|
||||
{
|
||||
user.skills.map( skill => <span style={skillStyle}> {skill} </span> )
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// The App, or the parent or the container component
|
||||
export const App = () => (
|
||||
<div className='app'>
|
||||
<Exercise1/>
|
||||
<ColorfulBox color={hexaColor()}/>
|
||||
<ColorfulBox color={hexaColor()}/>
|
||||
<ColorfulBox color={hexaColor()}/>
|
||||
<ColorfulBox color={hexaColor()}/>
|
||||
<Exercise3/>
|
||||
</div>
|
||||
)
|
||||
@ -0,0 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>$Title$</title>
|
||||
</head>
|
||||
<body>
|
||||
$END$
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,43 @@
|
||||
import React from "react";
|
||||
import { tenHighestPopulation as countryData } from './data/ten_most_highest_populations';
|
||||
|
||||
console.log(countryData)
|
||||
|
||||
|
||||
const WorldList = () => {
|
||||
const percentPop = (number) => {
|
||||
const population = countryData.map(country => country.population)
|
||||
const worldPop = Math.max(...population);
|
||||
return (
|
||||
((number*100)/worldPop)
|
||||
)
|
||||
}
|
||||
|
||||
console.log(percentPop(countryData[0].population))
|
||||
|
||||
return(
|
||||
<div style={{display:'flex',alignItems:'center',flexDirection:"column"}}>
|
||||
<h2>30 DAYS OF REACT</h2>
|
||||
<h1>World Population</h1>
|
||||
<p>Ten most populated Countries</p>
|
||||
|
||||
<ul style={{padding: "1rem"}}>
|
||||
{countryData.map( (country,index) => {
|
||||
return (
|
||||
<li key={index} style={{display:'flex',justifyContent:"space-between",gap:120}}>
|
||||
<p style={{width:220}}>{country.country}</p>
|
||||
<div style={{width:500,height:20}}>
|
||||
<div style={{width:`${percentPop(country.population)}%`, height:'100%',backgroundColor:'orange',textAlign:'center'}}>
|
||||
{percentPop(country.population).toFixed(2)}
|
||||
</div>
|
||||
</div>
|
||||
<p style={{width:120}}>{country.population.toLocaleString('de-DE')}</p>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default WorldList
|
||||
@ -0,0 +1,39 @@
|
||||
// index.js
|
||||
import React from 'react'
|
||||
|
||||
const dog = 'https://static.onecms.io/wp-content/uploads/sites/12/2015/04/dogs-pembroke-welsh-corgi-400x400.jpg';
|
||||
const cat = 'https://www.smithsstationah.com/imagebank/eVetSites/Feline/01.jpg';
|
||||
|
||||
export default class Mine extends React.Component {
|
||||
|
||||
changeUrl = () => {
|
||||
if( this.state.imgLink === dog ){
|
||||
this.setState({ imgLink : cat })
|
||||
}else {
|
||||
this.setState({ imgLink : dog })
|
||||
}
|
||||
}
|
||||
|
||||
// declaring state
|
||||
state = {
|
||||
count: 0,
|
||||
imgLink: cat
|
||||
}
|
||||
render() {
|
||||
// accessing the state value
|
||||
const count = this.state.count
|
||||
return (
|
||||
<div className='App'>
|
||||
<img src={ this.state.imgLink } alt='cat' />
|
||||
<button onClick={this.changeUrl}>Change ulaaan</button>
|
||||
<h1>{count} </h1>
|
||||
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
|
||||
Add One
|
||||
</button>
|
||||
<button onClick={() => this.setState({ count: this.state.count - 1 })}>
|
||||
Decrease One
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue