Workshop Exercise-1

src/App.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import './index.css';
+
+import TopicBrowser from './components/TopicBrowser/TopicBrowser'
+
+function App() {
+  return (
+    <TopicBrowser />
+  )
+}
+
+
+
+export default App;

src/components/TopicBrowser/TopicBrowser.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import EvenAndOdd from '../Topics/EvenAndOdd'
+import FilterObject from '../Topics/FilterObject'
+import FilterString from '../Topics/FilterString'
+import Palindrome from '../Topics/Palindrome'
+import Sum from '../Topics/Sum'
+
+const TopicBrowser = () => {
+  return (
+    <React.Fragment>
+      <EvenAndOdd />
+      <FilterObject />
+      <FilterString />
+      <Palindrome />
+      <Sum />
+    </React.Fragment>
+  )
+}
+
+  export default TopicBrowser;

src/components/Topics/EvenAndOdd.js

@@ -0,0 +1,36 @@
+import React, { useState } from 'react';
+
+const EvenAndOdd = () => {
+  const [ evens, setEvens ] = useState([]);
+  const [odds, setOdds] = useState([]);
+  const [userInput, setUserInput] = useState('');
+
+  const solve = (input) => {
+    const results = {
+      evens: [],
+      odds: [],
+    }
+    for (let val of input.split(',').map(v => parseInt(v))) {
+      if (val % 2 === 0) {
+        results.evens.push(val);
+      } else {
+        results.odds.push(val);
+      }
+    }
+
+    setEvens(results.evens);
+    setOdds(results.odds);
+  }
+
+  return (
+    <div className="puzzleBox evenAndOddPB">
+      <h4>Evens and Odds</h4>
+      <input className="inputLine" onChange={e => setUserInput(e.target.value)}/>
+      <button className="confirmationButton" onClick={() => solve(userInput)}>Split</button>
+      <span className="resultsBox">Evens: {JSON.stringify(evens)}</span>
+      <span className="resultsBox">Odds: {JSON.stringify(odds)}</span>
+    </div>
+  )
+}
+
+export default EvenAndOdd;

src/components/Topics/FilterObject.js

@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+
+const FilterObject = () => {
+  const [unFilteredArray, setUnFilteredArray] = useState([
+    { name:  'John', title: 'Junior Developer', age: 20 },
+    { name: 'Bob', title: 'Development Manager', age: 32, yearsEmployed: 2 },
+    { name: 'Lisa', title: 'Senior Developer' },
+  ]);
+  const [filteredArray, setFilteredArray] = useState([]);
+  const [userInput, setUserInput] = useState('');
+
+  const filter = (input) => {
+    const filtered = unFilteredArray.filter(o => {
+      if (o[input]) {
+        return true;
+      }
+
+      return false
+    })
+
+    setFilteredArray(filtered);
+  }
+
+  return (
+    <div className="puzzleBox filterObjectPB">
+      <h4>Filter Object</h4>
+      <span className="puzzleText">Original: {JSON.stringify(unFilteredArray, null, 10)}</span>
+      <input className="inputLine" onChange={e => setUserInput(e.target.value)}/>
+      <button className="confirmationButton" onClick={() => filter(userInput)}>Filter</button>
+      <span className="resultsBox filterObjectRB">Filtered: {JSON.stringify(filteredArray, null, 10)}</span>
+    </div>
+  )
+}
+
+export default FilterObject;

src/components/Topics/FilterString.js

@@ -0,0 +1,40 @@
+import React, { useState } from 'react';
+
+const FilterString = () => {
+  const [names, setNames] = useState([
+    'James',
+    'Jessica',
+    'Melody',
+    'Tyler',
+    'Blake',
+    'Jennifer',
+    'Mark',
+    'Maddy',
+  ]);
+  const [filteredNames, setFilteredNames] = useState([]);
+  const [userInput, setUserInput] = useState('');
+
+  const filterNames = (string) => {
+    setFilteredNames(
+      names.filter(name => name.includes(string))
+    )
+  }
+
+  return (
+    <div className="puzzleBox filterStringPB">
+      <h4> Filter String </h4>
+      <span className="puzzleText">
+        {' '}
+        Names: {JSON.stringify(names, null, 10)}{' '}
+      </span>
+      <input className="inputLine" onChange={e => setUserInput(e.target.value)}/>
+      <button className="confirmationButton" onClick={() => filterNames(userInput)}> Filter </button>
+      <span className="resultsBox filterStringRB">
+        {' '}
+        Filtered Names: {JSON.stringify(filteredNames, null, 10)}{' '}
+      </span>
+    </div>
+  );
+}
+
+export default FilterString;

src/components/Topics/Palindrome.js

@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+
+const Palindrome = () => {
+  const [userInput, setUserInput] = useState('');
+  const [answer, setAnswer] = useState('Enter a word to check');
+
+  function checkPalindrome(word) {
+    const normalizedWord = word.toLowerCase();
+    const reversedWord = normalizedWord
+      .split('')
+      .reverse()
+      .join('');
+    setAnswer(normalizedWord === reversedWord);
+  }
+  return (
+    <div className="puzzleBox palindromePB">
+    <h4>Palindrome</h4>
+    <input
+      className="inputLine"
+      onChange={e => setUserInput(e.target.value)}
+    />
+    <button
+      className="confirmationButton"
+      onClick={() => checkPalindrome(userInput)}
+    >
+      Check
+    </button>
+    <span className="resultsBox">{JSON.stringify(answer)}</span>
+  </div>
+);
+}
+export default Palindrome;

src/components/Topics/Sum.js

@@ -0,0 +1,34 @@
+import React, { useState } from 'react';
+
+const Sum = () => {
+  const [userInput, setUserInput] = useState([]);
+  const [sum, setSum] = useState();
+
+  const getSum =(input) => {
+    const sum = input
+      .split(',')
+      .map(n => parseInt(n))
+      .reduce((acc, n) => {
+        acc += n;
+        return acc;
+      }, 0);
+
+    setSum(sum);
+  }
+
+  return (
+    <div className="puzzleBox sumPB">
+      <h4>Sum</h4>
+      <input
+        className="inputLine"
+        onChange={e => setUserInput(e.target.value)}
+      />
+      <button className="confirmationButton" onClick={() => getSum(userInput)}>
+        Add
+      </button>
+      <span className="resultsBox">{JSON.stringify(sum)}</span>
+    </div>
+  );
+}
+
+export default Sum;