Courses-class-D · AbeerJaafreh · Oct 22, 2019
diff --git a/fullstackcourses/package-lock.json b/fullstackcourses/package-lock.json
diff --git a/fullstackcourses/package.json b/fullstackcourses/package.json
@@ -3,9 +3,16 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@material-ui/core": "^4.5.1",
+    "@material-ui/icons": "^4.5.1",
+    "bootstrap": "^4.3.1",
+    "node-module": "^2.0.0",
     "react": "^16.10.2",
+    "react-bootstrap": "^1.0.0-beta.14",
     "react-dom": "^16.10.2",
-    "react-scripts": "3.2.0"
+    "react-router-dom": "^5.1.2",
+    "react-scripts": "3.2.0",
+    "styled-components": "^4.4.0"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/fullstackcourses/public/favicon.ico b/fullstackcourses/public/favicon.ico
diff --git a/fullstackcourses/public/index.html b/fullstackcourses/public/index.html
@@ -24,6 +24,14 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
+<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+
     <title>React App</title>
   </head>
   <body>

diff --git a/fullstackcourses/public/logo192.png b/fullstackcourses/public/logo192.png
diff --git a/fullstackcourses/public/logo512.png b/fullstackcourses/public/logo512.png
diff --git a/fullstackcourses/src/App.js b/fullstackcourses/src/App.js
@@ -1,26 +1,18 @@
 import React from 'react';
-import logo from './logo.svg';
 import './App.css';
+import Cards from './cards';
+
+
+class App extends React.Component {
+
+  render() {
+   return(
+     <div>
+       <Cards/>
+     </div>
+   )
+  }
 
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
 }
 
 export default App;
diff --git a/fullstackcourses/src/Navbar.js b/fullstackcourses/src/Navbar.js
@@ -0,0 +1,74 @@
+import React, { Component } from 'react'
+import { Link, withRouter } from 'react-router-dom'
+
+class Navbar extends Component {
+  logOut(e) {
+    e.preventDefault()
+    localStorage.removeItem('usertoken')
+    this.props.history.push(`/`)
+  }
+
+  render() {
+    const loginRegLink = (
+      <ul className="navbar-nav">
+        <li className="nav-item">
+          <Link to="/login" className="nav-link">
+            Login
+          </Link>
+        </li>
+        <li className="nav-item">
+          <Link to="/register" className="nav-link">
+            Register
+          </Link>
+        </li>
+      </ul>
+    )
+
+    const userLink = (
+      <ul className="navbar-nav">
+        <li className="nav-item">
+          <Link to="/profile" className="nav-link">
+            User
+          </Link>
+        </li>
+        <li className="nav-item">
+          <a href="" onClick={this.logOut.bind(this)} className="nav-link">
+            Logout
+          </a>
+        </li>
+      </ul>
+    )
+
+    return (
+      <nav className="navbar navbar-expand-lg navbar-dark bg-dark rounded">
+        <button
+          className="navbar-toggler"
+          type="button"
+          data-toggle="collapse"
+          data-target="#navbarsExample10"
+          aria-controls="navbarsExample10"
+          aria-expanded="false"
+          aria-label="Toggle navigation"
+        >
+          <span className="navbar-toggler-icon" />
+        </button>
+
+        <div
+          className="collapse navbar-collapse justify-content-md-center"
+          id="navbarsExample10"
+        >
+          <ul className="navbar-nav">
+            <li className="nav-item">
+              <Link to="/" className="nav-link">
+                Home
+              </Link>
+            </li>
+          </ul>
+          {localStorage.usertoken ? userLink : loginRegLink}
+        </div>
+      </nav>
+    )
+  }
+}
+
+export default withRouter(Navbar)
diff --git a/fullstackcourses/src/ShowCard.js b/fullstackcourses/src/ShowCard.js
@@ -0,0 +1,34 @@
+
+import React, { Component } from 'react'
+export default class ShowCard extends Component {
+
+  cardClicked = (title) => {
+      console.log("clicked" , title);
+  }
+  render() {
+    const { tutorials } = this.props;
+    return (
+      <div className=" container-fluid card-deck ">
+        {tutorials.map((elem, id) => {
+          return (
+            <div class="card border-primary mb-3" onClick={() => this.cardClicked(elem.Title)}>
+              <div class="card-body">
+                <h5 class="card-title">{elem.Title}</h5>
+                <p class="card-text">{elem.Description}</p>
+                <hr className="bg-primary" />
+                <p>Official Website : <a href={elem.Link}>{elem.Link}</a></p>
+              </div>
+            </div>
+          );
+
+        })}
+
+
+
+
+      </div>
+
+
+    )
+  }
+}
diff --git a/fullstackcourses/src/cards.js b/fullstackcourses/src/cards.js
@@ -0,0 +1,68 @@
+import React, { Component } from 'react'
+import { BrowserRouter as Router, Route } from 'react-router-dom'
+
+import ShowCard from './ShowCard';
+import Navbar from './Navbar';
+
+export default class cards extends Component {
+
+    state = {
+        tutorials: [
+          {
+            id: 1,
+            Title: "Android Tutorial",
+            Link: "https://www.tutorialspoint.com/android/index.htm",
+            Description: "Android is an open source and Linux-based operating system for mobile devices such as smartphones and tablet computers",
+            Tags: "Android",
+            TypeOfTutorial: "Video",
+            TyoeOfPay: "Free",
+            SkillLevel: "Beginner"
+          },
+          {
+            id: 2,
+            Title: "PHP Tutorial",
+            Link: "https://www.w3schools.com/php/",
+            Description: "PHP is a server scripting language, and a powerful tool for making dynamic and interactive Web pages.",
+            Tags: "PHP",
+            TypeOfTutorial: "Video",
+            TyoeOfPay: "Free",
+            SkillLevel: "Intermediate"
+          },
+          {
+
+            id: 3,
+            Title: "Laravel Tutorial",
+            Link: "https://laravel-news.com/your-first-laravel-application",
+            Description: "Laravel focuses on the end user first, which means its focus is on simplicity, clarity, and getting work done",
+            Tags: "Laravel",
+            TypeOfTutorial: "Video",
+            TyoeOfPay: "Free",
+            SkillLevel: "Advanced"
+          },
+          {
+
+            id: 4,
+            Title: "Angular Tutorial",
+            Link: "https://angular.io",
+            Description: "Angular is a TypeScript-based open-source front-end web application platform",
+            Tags: "Angular",
+            TypeOfTutorial: "Video",
+            TyoeOfPay: "Free",
+            SkillLevel: "Advanced"
+          }
+        ]
+      }
+    render() {
+        const { tutorials } = this.state;
+        return (
+          <Router>
+            <Navbar/>
+            <br/>
+            <div>
+              <ShowCard tutorials={tutorials} />
+            </div>
+          </Router>
+
+        );
+    }
+}
diff --git a/fullstackcourses/src/index.js b/fullstackcourses/src/index.js
@@ -1,12 +1,5 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
 import App from './App';
-import * as serviceWorker from './serviceWorker';
 
 ReactDOM.render(<App />, document.getElementById('root'));
-
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();
diff --git a/fullstackcourses/src/logo.svg b/fullstackcourses/src/logo.svg