From 607167838a85e724b8b73bd305e242fa5ffffa29 Mon Sep 17 00:00:00 2001
From: Muhanned Noman <Muhanned.Noman@gmail.com>
Date: Mon, 29 Nov 2021 15:22:34 +0300
Subject: [PATCH] Doc(solution): solve the challenge.

---
 .gitignore                |  1 +
 src/App.css               | 42 ++++++++++++++++-----
 src/App.js                |  1 +
 src/components/Footer.jsx | 10 ++---
 src/components/Header.jsx |  3 +-
 src/components/Main.jsx   | 77 ++++++++++++++++++++++++++++++---------
 src/index.js              |  2 -
 7 files changed, 101 insertions(+), 35 deletions(-)
 create mode 100644 .gitignore

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..3c3629e
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/src/App.css b/src/App.css
index ba6257d..b6d779a 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,8 +1,13 @@
 /* List three ways to select html elements in css */
-/* Type your answer here  */
+/* Using ID
+   element type
+   classes  */
 
 /* List three ways to style html elements */
-/* Type your answer here  */
+/* Inline 
+  Style tag in header
+  Link an outside style file.
+*/
 
 body {
   background-color: #eee;
@@ -11,13 +16,14 @@ body {
 }
 
 header {
-  background url('https://drive.google.com/uc?id=1ADdMAd8sSM1GxabjRUpJaqliyYQMxixu');
+  background-image: url('https://drive.google.com/uc?id=1ADdMAd8sSM1GxabjRUpJaqliyYQMxixu');
   background-size: cover;
   background-position: center;
   color: #ccc;
   display: flex;
   /* What does 'display: flex' do?*/
   /* Type your answer here */
+  /* Answers will vary ex: It sets how a flex item will gow and shrink to fit the space available in its container */
   flex-direction: column;
   justify-content: space-around;
   align-items: center;
@@ -26,20 +32,23 @@ header {
 .logo {
   width: 100px;
   margin: 40px;
+  border-radius: 50%;
 }
 
 .title {
   margin: 40px;
   padding: 15px;
-  border: dotted #ccc 5px;
+  border: solid #ccc 5px;
   border-radius: 15px;
 }
 
 .italic {
   margin: 40px;
   font-size: 24px;
-  /* px, _____, and _____ are 3 measurements units in CSS */
-  fontstyle: italic;
+  /* px, ___pt__, and __em___ are 3 measurements units in CSS */
+  /* Answers may vary */
+  font-style: italic;
+  text-align: center;
 }
 
 .bootcamp {
@@ -55,9 +64,9 @@ li {
   margin: 10px;
 }
 
-#awesome {
+/* #awesome {
   display: none;
-}
+} */
 
 footer {
   display: flex;
@@ -77,7 +86,7 @@ footer {
   border-color: #3a7ddd;
 }
 
-infoBtn,
+#infoBtn,
 #searchBtn,
 #awesomeBtn {
   background-color: #dda65f;
@@ -93,7 +102,20 @@ infoBtn,
 
 /* Make the mouse curser look like a hand when you hover over the buttons (#infoBtn, #searchBtn, #awesomeBtn) and add backgound and border color of #3a7ddd*/
 
+[id$='Btn']:hover {
+  background-color: #3a7ddd !important;
+  border-color: #3a7ddd !important;
+  cursor: pointer;
+}
+
 .socialIcon {
-  width: 25p;
+  width: 25px;
   margin: 0 10px;
 }
+
+/* On solution to the css question Main.jsx line: 96 */
+.buttons {
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content:space-around;
+}
diff --git a/src/App.js b/src/App.js
index 061db2d..ef97125 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import Header from './components/Header';
 import Footer from './components/Footer';
+import Main from './components/Main';
 import './App.css';
 
 
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index 10af5b2..99c7b15 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -5,28 +5,28 @@ const Footer = () => {
     <footer>
       <div>
         {/*Add the functionality to open the link in a new tab */}
-        <a href="https://www.facebook.com/recodedofficial">
+        <a href="https://www.facebook.com/recodedofficial" target="_blank" rel="noopener noreferrer">
           <img
             src="https://drive.google.com/uc?id=1-yaPy5DZhbYsLxUP8YWjvlpIZdbzDXxl"
             alt=""
             class="socialIcon"
           />
         </a>
-        <a href="https://www.instagram.com/recodedofficial/">
+        <a href="https://www.instagram.com/recodedofficial/" target="_blank" rel="noopener noreferrer">
           <img
             src="https://drive.google.com/uc?id=18b8F06ADRb6oGVuWosRYnPPOImNt6iCI"
             alt=""
             class="socialIcon"
           />
         </a>
-        <a href="https://twitter.com/recodedofficial">
+        <a href="https://twitter.com/recodedofficial" target="_blank" rel="noopener noreferrer">
           <img
             src="https://drive.google.com/uc?id=1vVXb5gSBxgwy1idaoPA6rDhc9leviMjx"
             alt=""
             class="socialIcon"
           />
         </a>
-        <a href="https://www.linkedin.com/company/re-coded/">
+        <a href="https://www.linkedin.com/company/re-coded/" target="_blank" rel="noopener noreferrer">
           <img
             src="https://drive.google.com/uc?id=1Rzvd49x5LKeb8yVEGgGfuNBKqN9LXpWE"
             alt=""
@@ -43,4 +43,4 @@ const Footer = () => {
   );
 };
 
-export Footer;
+export default Footer;
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index 89d17fe..f318033 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -5,6 +5,7 @@ const Header = () => {
     <header>
       {/* What is alt attribute used for? */}
       {/* You can write here to answer a question */}
+      {/* Provide alternative text to show for screen readers, or when the image fails to load */}
       <img
         src="https://drive.google.com/uc?id=1ml1cDYnVse0DrPlzkG6tOuQOmDfX0_8z"
         alt="Re:Coded logo"
@@ -17,7 +18,7 @@ const Header = () => {
         developers and tech entrepreneurs
       </p>
     </header>
-    <br />
+    // <br />
   );
 };
 
diff --git a/src/components/Main.jsx b/src/components/Main.jsx
index eb0c780..6d45881 100644
--- a/src/components/Main.jsx
+++ b/src/components/Main.jsx
@@ -1,4 +1,5 @@
-import React from 'react';
+import React, {useState} from 'react';
+import data from '../data.json'
 
 const Main = () => {
   const joiningCriteria = [
@@ -9,24 +10,60 @@ const Main = () => {
     'The aptitude to succeed in the selection process.',
   ];
 
+  const [awesome, setAwesome] = useState(false)
+  const [moreInfo, setMoreInfo] = useState(false)
+  const [searchValue, setSearchValue] = useState(undefined)
+
+  const handleSubmit = (e) => {
+    e.preventDefault()
+    const prevOutPut = document.getElementById('outPut');
+    if(prevOutPut) {
+      document.getElementById('searchResults').removeChild(prevOutPut)
+    }
+    let result;
+    if(searchValue) {
+      const dataToDisplay = data.camps[searchValue];
+      if(dataToDisplay) {
+        result = document.createElement("ul");
+        result.id= "outPut";
+        dataToDisplay.map((item) => {
+          const li = document.createElement('li');
+          li.innerHTML = item;
+          result.appendChild(li)
+        })
+      } else {
+        result = document.createElement("p");
+        result.id= "outPut";
+        result.innerHTML = 'Not found';
+      }
+
+    } else {
+      result = document.createElement("p");
+      result.id= "outPut";
+      result.innerHTML = 'Please, enter a value';
+    }
+
+    document.getElementById('searchResults').appendChild(result)
+  }
+
   return (
     <section class="bootcamp">
       {/* Where should the following h2 tag be displayed? Center or right? and why? */}
-      {/* Type your answer here */}
+      {/* Centre due to inline styling in style={{ textAlign: 'center' }} */}
       <h2 class="align-right" style={{ textAlign: 'center' }}>
         Re:Coded Front-End Web Development Bootcamp
       </h2>
-      <h3>What is our bootcamp</h2>
+      <h3>What is our bootcamp</h3>
       {/* Make every 'Front-End Web Development' sentence in the following article bold */}
       <p>
-        Our Front-End Web Development Bootcamp is designed to kickstart your
+        Our <b> Front-End Web Development Bootcamp </b>is designed to kickstart your
         career as junior web developer or as an entrepreneur with a vision to
         build your own website, app or software solution.
       </p>
       <p>
         As a non-profit organization we have partnered with Flatiron School in
         New York, one of the leading coding schools in the world. That allows us
-        to teach their Front-End Web Development course introducing you to HTML
+        to teach their <b> Front-End Web Development Bootcamp </b> course introducing you to HTML
         and CSS. We provide additional training on React, a library for building
         user interfaces maintained by Facebook and Instagram. And during our
         program, you will learn JavaScript, all of which will allow you to build
@@ -38,7 +75,7 @@ const Main = () => {
         projects to highlight your achievements.
       </p>
       <p>
-        The Front-End Web Development course will take approximately 3.5 months
+        The <b> Front-End Web Development Bootcamp </b> course will take approximately 3.5 months
         with 10 hours per week of in-person training and 15-25 hours per week of
         self-study.
       </p>
@@ -50,42 +87,48 @@ const Main = () => {
       <h3>Who can join</h3>
       {/* What are the differences between <ul> and <ol>? */}
       {/* Type your answer here */}
+      {/* Answers may vary UL: Unordered list, OL: Ordered list */}
       <ol>
-        joiningCriteria.map(() => (<li>{e}</li>
-        ))
+        {joiningCriteria.map((e) => (<li>{e}</li>
+        ))}
       </ol>
       <div class="buttons">
         {/* Using CSS, try to provide multiple methods to display these divs in a row like the attached pictures. Keep one of the methods, and comment out the rest */}
+        {/* This can be done in multiple ways. If fixed correctly  */}
         <div class="infoDiv">
           {/* When clicking "More Info" button, get the countries and bootcamps data from the JSON file and display them in the '#dataDisplay' div. */}
-          <button id="infoBtn">More Info<button>
+          <button id="infoBtn"  onClick={() => {setMoreInfo(!moreInfo)}}>More Info</button>
+          {moreInfo && <div id="dataDisplay">
+            <p>Countries Re:Coded works in:{data.countries.map((c) => `${c}, `)}</p>
+            <p>Re:Coded Bootcamps:{data.bootcamps.map((c) => `${c}, `)}</p>
+          </div>}
         </div>
-        <div id="dataDisplay"></div>
         <div class="awesomeDiv">
-          <button id="awesomeBtn">I'm Awesome</button>
+          <button id="awesomeBtn"  onClick={() => setAwesome(!awesome)}>I'm Awesome</button>
           {/*  When clicking the "I'm Awesome" button, display the content of '#awesome' div. When clicking it again, hide the content of '#awesome' div. */}
-          <div id="awesome">
+          {awesome && <div id="awesome">
             <p>
               <em>I'm awesome, I'm doing the js part</em>
             </p>
-          </div>
+          </div>}
         </div>
         <div class="searchDiv">
-          <form id="search">
+          <form id="search" onSubmit={handleSubmit}>
             <input
               type="text"
               name="searchBox"
               id="searchBox"
               placeholder="search bootcamps"
+              onInput={(e) => setSearchValue(e.target.value.toLowerCase())}
             />
             {/* When clicking the "search" button, search the camps in JSON file by country and display the search results in the '#searchResults' div. */}
-            <input type="submit" id="searchBtn" value="search" />
+            <input type="submit" id="searchBtn" value="search" className="btnEffect" />
           </form>
-          <div id="searchResults"></div>
+          <div id="searchResults">
+          </div>
         </div>
       </div>
       {/* ##Delete the wrong fact/facts in the comments below */}
-      {/* 1. The same id can be used multiple times, but the same class can be used only once */}
       {/* 2. The same class can be used multiple times, but the same id can be used only once */}
       {/* 3. In CSS, '#' refers to id while '.' refers to class */}
       {/* 4. Classes are used more in javascript */}
diff --git a/src/index.js b/src/index.js
index 7998135..b07c1ee 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
-import reportWebVitals from './reportWebVitals';
 
 ReactDOM.render(
   <React.StrictMode>
@@ -13,4 +12,3 @@ ReactDOM.render(
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();