From 23f31891a9902e27522934540dbd79ac217b7a42 Mon Sep 17 00:00:00 2001 From: ardaninsaturnu Date: Fri, 22 Apr 2022 10:59:34 +0300 Subject: [PATCH 01/13] pushing some code snippets --- 01_Day_JavaScript_Refresher/object/object.js | 97 +++++++++++++++++++- 1 file changed, 96 insertions(+), 1 deletion(-) diff --git a/01_Day_JavaScript_Refresher/object/object.js b/01_Day_JavaScript_Refresher/object/object.js index ef28c81..b72e94a 100644 --- a/01_Day_JavaScript_Refresher/object/object.js +++ b/01_Day_JavaScript_Refresher/object/object.js @@ -15,4 +15,99 @@ 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()) \ No newline at end of file +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 ) + +} \ No newline at end of file From 720a518a282ccde13ab619cd77daf129362cb4fe Mon Sep 17 00:00:00 2001 From: ardaninsaturnu Date: Mon, 2 May 2022 20:17:08 +0300 Subject: [PATCH 02/13] function --- 01_Day_JavaScript_Refresher/main.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/01_Day_JavaScript_Refresher/main.js b/01_Day_JavaScript_Refresher/main.js index 335d1e3..0157281 100644 --- a/01_Day_JavaScript_Refresher/main.js +++ b/01_Day_JavaScript_Refresher/main.js @@ -51,4 +51,21 @@ 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 )) From 230c99f66c2b6fc4ec60b4c483434aa952c3dd2c Mon Sep 17 00:00:00 2001 From: ardaninsaturnu Date: Mon, 23 May 2022 08:07:44 +0300 Subject: [PATCH 03/13] added key --- 03_Day_Setting_Up/03_setting_up_boilerplate/src/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/03_Day_Setting_Up/03_setting_up_boilerplate/src/index.js b/03_Day_Setting_Up/03_setting_up_boilerplate/src/index.js index 8d7e972..24928b7 100644 --- a/03_Day_Setting_Up/03_setting_up_boilerplate/src/index.js +++ b/03_Day_Setting_Up/03_setting_up_boilerplate/src/index.js @@ -64,7 +64,7 @@ const personAge = ( // JSX element, main const techs = ['HTML', 'CSS', 'JavaScript'] -const techsFormatted = techs.map((tech) =>
  • {tech}
    • ) +const techsFormatted = techs.map((tech) =>
  • {tech}
    • ) const user = (
    From b85ee9b241dfc81d3600879e5870845461ce0f8d Mon Sep 17 00:00:00 2001 From: ardaninsaturnu Date: Mon, 23 May 2022 08:39:10 +0300 Subject: [PATCH 04/13] usercard created. :rocket: --- .../03_setting_up_boilerplate/src/UserCard.js | 22 +++++++++++++++++++ .../03_setting_up_boilerplate/src/index.js | 5 ++--- 2 files changed, 24 insertions(+), 3 deletions(-) create mode 100644 03_Day_Setting_Up/03_setting_up_boilerplate/src/UserCard.js diff --git a/03_Day_Setting_Up/03_setting_up_boilerplate/src/UserCard.js b/03_Day_Setting_Up/03_setting_up_boilerplate/src/UserCard.js new file mode 100644 index 0000000..843753e --- /dev/null +++ b/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 = ( +
    + {'image'}/ +

    Alex De Souza

    +
      + { + skills.map( skill =>
    • {skill}
      • ) + } +
    +
    +); \ No newline at end of file diff --git a/03_Day_Setting_Up/03_setting_up_boilerplate/src/index.js b/03_Day_Setting_Up/03_setting_up_boilerplate/src/index.js index 24928b7..fd38ba3 100644 --- a/03_Day_Setting_Up/03_setting_up_boilerplate/src/index.js +++ b/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)) @@ -105,9 +106,7 @@ const footer = ( // JSX element, app const app = (
    - {header} - {main} - {footer} + {UserCard}
    ) From 67992ec29b4084f500b3e948b0b821441b5e5c1d Mon Sep 17 00:00:00 2001 From: ardaninsaturnu Date: Tue, 24 May 2022 20:40:57 +0300 Subject: [PATCH 05/13] ayvalik --- 04_Day_Components/index.html | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 04_Day_Components/index.html diff --git a/04_Day_Components/index.html b/04_Day_Components/index.html new file mode 100644 index 0000000..4bdcfcb --- /dev/null +++ b/04_Day_Components/index.html @@ -0,0 +1,10 @@ + + + + + $Title$ + + +$END$ + + \ No newline at end of file From 28e15ee1dfde58b1c775c113905a540692a1e2ff Mon Sep 17 00:00:00 2001 From: ardaninsaturnu Date: Fri, 27 May 2022 06:29:54 +0300 Subject: [PATCH 06/13] components done. :rocket: --- .../04_components_boilerplate/src/App.js | 97 +++++++++++++++++++ .../04_components_boilerplate/src/index.js | 5 +- 2 files changed, 100 insertions(+), 2 deletions(-) create mode 100644 04_Day_Components/04_components_boilerplate/src/App.js diff --git a/04_Day_Components/04_components_boilerplate/src/App.js b/04_Day_Components/04_components_boilerplate/src/App.js new file mode 100644 index 0000000..d1e6cda --- /dev/null +++ b/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 => ; +const ReUsableInput = props => ; +const ColorfulBox = props =>
    { props.color }
    + +const Exercise1 = () => ( +
    +

    Subscribe

    +

    Sign bilmem ne ol sonra dön götüne koy.

    +
    + + + +
    + +
    +) + +const Exercise3 = () => { + return( +
    + {'asa'}/ +

    {user.name}

    +

    {user.title}

    +
    + { + user.skills.map( skill => {skill} ) + } +
    +
    + ) +} + +// The App, or the parent or the container component +export const App = () => ( +
    + + + + + + +
    +) \ No newline at end of file diff --git a/04_Day_Components/04_components_boilerplate/src/index.js b/04_Day_Components/04_components_boilerplate/src/index.js index 533e142..42a0f37 100644 --- a/04_Day_Components/04_components_boilerplate/src/index.js +++ b/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 = () => (
    -) +)*/ const rootElement = document.getElementById('root') // we render the App component using the ReactDOM package From 6d3edde5eb6b0191c1a5cb61a5efa81fe535c036 Mon Sep 17 00:00:00 2001 From: ardaninsaturnu Date: Sat, 28 May 2022 23:18:21 +0300 Subject: [PATCH 07/13] hexademical codes. --- .../06_map_list_keys_boilerplate/src/index.js | 59 ++++++++++--------- 1 file changed, 31 insertions(+), 28 deletions(-) diff --git a/06_Day_Map_List_Keys/06_map_list_keys_boilerplate/src/index.js b/06_Day_Map_List_Keys/06_map_list_keys_boilerplate/src/index.js index f1028f1..eeff30f 100644 --- a/06_Day_Map_List_Keys/06_map_list_keys_boilerplate/src/index.js +++ b/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' -import { tenMostHighestPopulations } from './data/ten_most_highest_populations' +const listContainer = { + 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 Country = ({ country: { name, city } }) => { - return ( -
    -

    {name}

    - {city} -
    - ) +const listItemEven = { + padding: '3rem', + width: 150, + height: 150, + backgroundColor: 'crimson' } -// countries component -const Countries = ({ countries }) => { - const countryList = countries.map((country) => ( - - )) - return
    {countryList}
    +const listItemOdd = { + padding: '3rem', + width: 150, + height: 150, + backgroundColor: 'green' } // The App, or the parent or the container component // Functional Component const App = () => { + return (
    -
    -

    Countries List

    - -
    +
      + { + numbers.map( number => { + if(number % 2 === 0 ){ + return
    • {number}
      • + } else if( number % 2 === 1 ){ + return
    • {number}
      • + } + })} +
    ) } From dad6bc653ad898089fabb3374b1c07f1661f9281 Mon Sep 17 00:00:00 2001 From: ardaninsaturnu Date: Sun, 29 May 2022 09:09:36 +0300 Subject: [PATCH 08/13] country populate --- 04_Day_Components/index.html | 10 ----- .../06_map_list_keys_boilerplate/src/index.js | 34 ++++++++++++--- .../src/population.js | 43 +++++++++++++++++++ 3 files changed, 71 insertions(+), 16 deletions(-) create mode 100644 06_Day_Map_List_Keys/06_map_list_keys_boilerplate/src/population.js diff --git a/04_Day_Components/index.html b/04_Day_Components/index.html index 4bdcfcb..e69de29 100644 --- a/04_Day_Components/index.html +++ b/04_Day_Components/index.html @@ -1,10 +0,0 @@ - - - - - $Title$ - - -$END$ - - \ No newline at end of file diff --git a/06_Day_Map_List_Keys/06_map_list_keys_boilerplate/src/index.js b/06_Day_Map_List_Keys/06_map_list_keys_boilerplate/src/index.js index eeff30f..27742a3 100644 --- a/06_Day_Map_List_Keys/06_map_list_keys_boilerplate/src/index.js +++ b/06_Day_Map_List_Keys/06_map_list_keys_boilerplate/src/index.js @@ -1,5 +1,6 @@ import React from 'react' import ReactDOM from 'react-dom' +import WorldList from "./population"; const numbers = []; @@ -7,6 +8,16 @@ for( let i=0; i <= 31; i++ ){ numbers.push(i); } +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 listContainer = { display:'flex', flexWrap: 'wrap', @@ -19,14 +30,14 @@ const listItemEven = { padding: '3rem', width: 150, height: 150, - backgroundColor: 'crimson' + backgroundColor: `${hexaColor()}` } const listItemOdd = { padding: '3rem', width: 150, height: 150, - backgroundColor: 'green' + backgroundColor: `${hexaColor()}` } // The App, or the parent or the container component @@ -38,13 +49,24 @@ const App = () => {
      { numbers.map( number => { - if(number % 2 === 0 ){ return
    • {number}
      • - } else if( number % 2 === 1 ){ - return
    • {number}
      • - } })}
    +

    Hexademical Colors

    +
      + { + numbers.map( number => { + return
    • {hexaColor()}
      • + })} +
    +
    + +
    ) } diff --git a/06_Day_Map_List_Keys/06_map_list_keys_boilerplate/src/population.js b/06_Day_Map_List_Keys/06_map_list_keys_boilerplate/src/population.js new file mode 100644 index 0000000..0ba0ac4 --- /dev/null +++ b/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( +
    +

    30 DAYS OF REACT

    +

    World Population

    +

    Ten most populated Countries

    + +
      + {countryData.map( (country,index) => { + return ( +
    • +

      {country.country}

      +
      +
      + {Math.round(percentPop(country.population))} +
      +
      +

      {country.population}

      +
      • + ); + })} +
    +
    + ) +} + +export default WorldList \ No newline at end of file From 1cf84605b9b6805bd589ec2220b7924d9a7d6e21 Mon Sep 17 00:00:00 2001 From: ardaninsaturnu Date: Sun, 29 May 2022 09:20:21 +0300 Subject: [PATCH 09/13] loca string numbers formatted. --- .../06_map_list_keys_boilerplate/src/population.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/06_Day_Map_List_Keys/06_map_list_keys_boilerplate/src/population.js b/06_Day_Map_List_Keys/06_map_list_keys_boilerplate/src/population.js index 0ba0ac4..0b737bf 100644 --- a/06_Day_Map_List_Keys/06_map_list_keys_boilerplate/src/population.js +++ b/06_Day_Map_List_Keys/06_map_list_keys_boilerplate/src/population.js @@ -28,10 +28,10 @@ const WorldList = () => {

    {country.country}

    - {Math.round(percentPop(country.population))} + {percentPop(country.population).toFixed(2)}
    -

    {country.population}

    +

    {country.population.toLocaleString('de-DE')}

    ); })} From 687dc74462bcb7d28ce21b7576bafea00331a276 Mon Sep 17 00:00:00 2001 From: ardaninsaturnu Date: Thu, 2 Jun 2022 21:35:17 +0300 Subject: [PATCH 10/13] state started. --- .../08_states_boilerplate/src/index.js | 2 + .../08_states_boilerplate/src/mine.js | 39 +++++++++++++++++++ 2 files changed, 41 insertions(+) create mode 100644 08_Day_States/08_states_boilerplate/src/mine.js diff --git a/08_Day_States/08_states_boilerplate/src/index.js b/08_Day_States/08_states_boilerplate/src/index.js index c2d10c6..6b7faf8 100644 --- a/08_Day_States/08_states_boilerplate/src/index.js +++ b/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 @@ -246,6 +247,7 @@ class App extends React.Component { minusOne={this.minusOne} count={this.state.count} /> +