Merge pull request #1 from ardaninsaturnu/main

Main

01_Day_JavaScript_Refresher/main.js

@@ -50,3 +50,22 @@ countries.length % 2 === 0  ?
 
 
 console.log(countries.slice( 0,6 ),countries.slice( 6,12 ));
+
+function printFullName() {
+  let firstName = 'Asabeneh'
+  let lastName = 'Yetayehahuha'
+  let space = ' '
+  let fullName = firstName + space + lastName
+}
+
+console.log(printFullName());
+
+function sumAllNums() {
+  let sum = 0;
+  for( let i = 0; i < arguments.length; i++ ){
+    sum += arguments[i];
+  }
+  return sum;
+}
+
+console.log(sumAllNums( 1,2,3,4,5,10,7,8,9,10 ))

01_Day_JavaScript_Refresher/object/object.js

@@ -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 )
+
+}

03_Day_Setting_Up/03_setting_up_boilerplate/src/UserCard.js

@@ -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>
+);

03_Day_Setting_Up/03_setting_up_boilerplate/src/index.js

@@ -10,6 +10,7 @@ import doSomeMath from './math.js'
 // to import the other modules
 // since these modules were not exported as default we have to desctructure
 import { addTwo, multiply, subtract } from './math.js'
+import { UserCard } from "./UserCard";
 
 import * as everything from './math.js'
 console.log(addTwo(5, 5))
@@ -64,7 +65,7 @@ const personAge = (
 
 // JSX element, main
 const techs = ['HTML', 'CSS', 'JavaScript']
-const techsFormatted = techs.map((tech) => <li>{tech}</li>)
+const techsFormatted = techs.map((tech) => <li key={tech}>{tech}</li>)
 
 const user = (
   <div>
@@ -105,9 +106,7 @@ const footer = (
 // JSX element, app
 const app = (
   <div className='app'>
-    {header}
+      {UserCard}
-    {main}
-    {footer}
   </div>
 )
 

04_Day_Components/04_components_boilerplate/src/App.js

@@ -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>
+)

04_Day_Components/04_components_boilerplate/src/index.js

@@ -2,6 +2,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 import asabenehImage from './images/asabeneh.jpg'
+import { App } from './App';
 
 const hexaColor = () => {
   let str = '0123456789abcdef'
@@ -97,13 +98,13 @@ const Footer = () => (
 )
 
 // The App, or the parent or the container component
-const App = () => (
+/*const App = () => (
   <div className='app'>
     <Header />
     <Main />
     <Footer />
   </div>
-)
+)*/
 
 const rootElement = document.getElementById('root')
 // we render the App component using the ReactDOM package

04_Day_Components/index.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>$Title$</title>
+</head>
+<body>
+$END$
+</body>
+</html>

06_Day_Map_List_Keys/06_map_list_keys_boilerplate/src/index.js

@@ -1,47 +1,50 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 
+const numbers = [];
 
-// importing data
+for( let i=0; i <= 31; i++ ){
+    numbers.push(i);
+}
 
-import { countriesData } from './data/countries'
+const listContainer = {
-import { tenMostHighestPopulations } from './data/ten_most_highest_populations'
+    display:'flex',
+    flexWrap: 'wrap',
+    maxWidth: '980px',
+    margin: '0 auto'
 
-const countries = [
+}
-  { name: 'Finland', city: 'Helsinki' },
-  { name: 'Sweden', city: 'Stockholm' },
-  { name: 'Denmark', city: 'Copenhagen' },
-  { name: 'Norway', city: 'Oslo' },
-  { name: 'Iceland', city: 'Reykjavík' },
-]
 
-// Country component
+const listItemEven = {
-const Country = ({ country: { name, city } }) => {
+    padding: '3rem',
-  return (
+    width: 150,
-    <div>
+    height: 150,
-      <h1>{name}</h1>
+    backgroundColor: 'crimson'
-      <small>{city}</small>
-    </div>
-  )
 }
 
-// countries component
+const listItemOdd = {
-const Countries = ({ countries }) => {
+    padding: '3rem',
-  const countryList = countries.map((country) => (
+    width: 150,
-    <Country key={country.name} country={country} />
+    height: 150,
-  ))
+    backgroundColor: 'green'
-  return <div>{countryList}</div>
 }
 
 // The App, or the parent or the container component
 // Functional Component
 const App = () => {
+
   return (
     <div className='app'>
-      <div>
+        <ul style={listContainer}>
-        <h1>Countries List</h1>
+            {
-        <Countries countries={countries} />
+                numbers.map( number => {
-      </div>
+                    if(number % 2 === 0 ){
+                        return <li key={number} style={listItemEven}>{number}</li>
+                    } else if( number % 2 === 1 ){
+                        return <li key={number} style={listItemOdd}>{number}</li>
+                    }
+                })}
+        </ul>
     </div>
   )
 }

06_Day_Map_List_Keys/06_map_list_keys_boilerplate/src/population.js

@@ -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

08_Day_States/08_states_boilerplate/src/index.js

@@ -1,6 +1,7 @@
 // index.js
 import React from 'react'
 import ReactDOM from 'react-dom'
+import Mine from './mine'
 import asabenehImage from './images/asabeneh.jpg'
 
 // Fuction to show month date year
@@ -176,8 +177,8 @@ class App extends React.Component {
   state = {
     count: 0,
     styles: {
-      backgroundColor: '',
+      backgroundColor: 'black',
-      color: '',
+      color: 'white',
     },
   }
   showDate = (time) => {
@@ -215,7 +216,20 @@ class App extends React.Component {
   greetPeople = () => {
     alert('Welcome to 30 Days Of React Challenge, 2020')
   }
-  changeBackground = () => {}
+  changeBackground = () => {
+    let styles = {...this.state.styles};
+
+      if( this.state.styles.backgroundColor === 'black' && this.state.styles.color === 'white' ){
+        styles.backgroundColor = 'white'
+        styles.color = 'black'
+        this.setState({ styles });
+      } else {
+        styles.backgroundColor = 'black'
+        styles.color = 'white'
+        this.setState({ styles });
+      }
+  }
+
   render() {
     const data = {
       welcome: 'Welcome to 30 Days Of React',
@@ -233,8 +247,7 @@ class App extends React.Component {
     const user = { ...data.author, image: asabenehImage }
 
     return (
-      <div className='app'>
+      <div className='app' style={{backgroundColor:this.state.styles.backgroundColor,color:this.state.styles.color}}>
-        {this.state.backgroundColor}
         <Header data={data} />
         <Main
           user={user}
@@ -246,7 +259,7 @@ class App extends React.Component {
           minusOne={this.minusOne}
           count={this.state.count}
         />
-        <Footer date={new Date()} />
+        <Mine/>
       </div>
     )
   }

08_Day_States/08_states_boilerplate/src/mine.js

@@ -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>
+    )
+  }
+}