Eddie901 · ajazfarhad · Jun 26, 2020
diff --git a/.DS_Store b/.DS_Store
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,9 +12,14 @@
     "@babel/plugin-proposal-class-properties": "^7.7.4",
     "@babel/preset-env": "^7.7.7",
     "babel-loader": "^8.0.6",
+    "bootstrap": "4",
     "express": "^4.17.1",
     "stimulus": "^1.1.1",
     "webpack": "^4.41.4",
     "webpack-dev-middleware": "^3.7.2"
+  },
+  "devDependencies": {
+    "css-loader": "^3.6.0",
+    "style-loader": "^1.2.1"
   }
 }
diff --git a/public/inbox.html b/public/inbox.html
@@ -9,7 +9,10 @@
 <h1>Inbox</h1>
 <div data-controller="content-loader"
      data-content-loader-url="/messages.html"
-     data-content-loader-refresh-interval="5000"></div>
-
+     data-content-loader-refresh-interval="5000">
+ </div>
+
 </body>
-</html>
+</html>
+
+
diff --git a/public/index.html b/public/index.html
@@ -5,7 +5,7 @@
     <link rel="stylesheet" href="main.css">
     <script src="bundle.js" async></script>
 </head>
-<body>
+<body class="container">
 <div data-controller="clipboard">
     PIN: <input data-target="clipboard.source" type="text" value="1234" readonly>
     <button data-action="clipboard#copy" class="clipboard-button">Copy to Clipboard</button>
@@ -27,4 +27,9 @@
 </div>
 
 </body>
+
+<hr>
+<div class="container mt-3">
+<a href="select.html" class="btn btn-success"> Go to select page</a>
+</div>
 </html>
diff --git a/public/main.css b/public/main.css
@@ -15,5 +15,4 @@ body {
 }
 
 .slide.slide--current {
-  display: block;
-}
+  display: block;
diff --git a/public/select.html b/public/select.html
@@ -0,0 +1,68 @@
+<!doctype html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<link rel="stylesheet" href="main.css">
+	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css">
+	<script src="bundle.js" async></script>
+
+	<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
+
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.js" crossorigin="anonymous"></script>
+
+</head>
+
+
+<body class="container">
+	<div data-controller= 'chosen'>
+		<h1 data-target="chosen.heading" class="text-center text-primary shadow-lg p-3 mb-5 bg-white rounded"></h1>
+
+		<h1 data-target="chosen.header" id="hero-header" class="text-center text-primary shadow-lg p-3 mb-5 rounded"></h1>
+
+		<h3 class="display-4"> Controls</h3>
+		<label for="cars">Choose a car:</label>
+
+		<select name="cars" id="cars_list" class="form-control col-md-6 chzn-select" data-action="change->chosen#greet" data-target="chosen.cars">
+			<option value="volvo">Volvo</option>
+			<option value="saab">Saab</option>
+			<option value="mercedes">Mercedes</option>
+			<option value="audi">Audi</option>
+		</select>
+
+		<hr>
+
+		<label for="heroes">Choose a Option:</label>
+
+		<select name="heroes" id="hero_list" class="form-control col-md-6" data-action="change->chosen#callHero" data-target="chosen.hero">
+			<option value="batman">Batman</option>
+			<option value="superman">Superman</option>
+			<option value="spider-man">SpiderMan</option>
+			<option value="just-man">JustMan</option>
+		</select>
+
+		<hr>
+		<button type="button" data-action="click->chosen#getData" class="btn btn-primary">Get Data</button>
+
+		<button type="button" data-action="click->chosen#removeElement" class="btn btn-danger" id='remove-table-btn' style="display: none">Remove Table</button>
+	</div>
+
+	<div class="mt-3">
+
+		<table class="table slide" id='data-table'>
+			<thead class="thead-dark">
+				<tr>
+					<th scope="col">Id</th>
+					<th scope="col">Name</th>
+					<th scope="col">Username</th>
+					<th scope="col">Email</th>
+					<th scope="col">Website</th>
+					<th scope="col">Address</th>
+				</tr>
+			</thead>
+			<tbody id="data-table-body">
+
+			</tbody>
+		</table>
+	</div>
+</body>
+</html>
diff --git a/public/untitled.html b/public/untitled.html
@@ -0,0 +1,31 @@
+<table class="table">
+  <thead>
+    <tr>
+      <th scope="col">#</th>
+      <th scope="col">First</th>
+      <th scope="col">Last</th>
+      <th scope="col">Handle</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">1</th>
+      <td>Mark</td>
+      <td>Otto</td>
+      <td>@mdo</td>
+    </tr>
+    <tr>
+      <th scope="row">2</th>
+      <td>Jacob</td>
+      <td>Thornton</td>
+      <td>@fat</td>
+    </tr>
+    <tr>
+      <th scope="row">3</th>
+      <td>Larry</td>
+      <td>the Bird</td>
+      <td>@twitter</td>
+    </tr>
+  </tbody>
+</table
+<tr><td>Larry</td><td>the Bird</td><td>@twitter</td></tr>
diff --git a/src/controllers/chosen_controller.js b/src/controllers/chosen_controller.js
@@ -0,0 +1,54 @@
+// src/controllers/chosen_controller.js
+import { Controller } from "stimulus"
+
+export default class extends Controller {
+    static targets = [ "cars", "heading", "hero", "header" ]
+
+    connect() {
+        $(".chzn-select").chosen();
+        document.getElementById("hero-header").style.display = "none";
+
+        const welcome = this.headingTarget
+        var carslist = this.carsTarget
+        welcome.textContent = "Welcome to stimulus"
+
+
+        // Cars select field
+        const chosenselect = document.getElementById("cars_list_chosen")
+        chosenselect.setAttribute("data-action", "click->chosen#greet")
+
+    }
+
+
+    greet(){
+      const cars = this.carsTarget
+      const heading = this.headingTarget
+      heading.textContent = `${cars.value}`
+    }
+
+    callHero(){
+        document.getElementById("hero-header").style.display = "block";
+        const hero = this.heroTarget
+        const header = this.headerTarget
+        header.textContent = `${hero.value}`
+    }
+
+    removeElement(){
+      $('#data-table-body').empty()
+      $('#remove-table-btn').hide()
+      $("#data-table").addClass("slide")
+    }
+
+    getData(){
+      $("#data-table").removeClass("slide")
+
+      fetch('https://jsonplaceholder.typicode.com/users')
+       .then(response => response.json())
+       .then(data => {
+         data.forEach(function (data, index) {
+           $('#data-table-body').append(`<tr><td>${data.id}</td><td>${data.name}</td><td>${data.username}</td><td>${data.email}</td><td>${data.website}</td> <td>${data.address.city}</td></tr>`)
+       });
+       })
+      $('#remove-table-btn').show()
+    }
+}
diff --git a/src/index.js b/src/index.js
@@ -1,5 +1,6 @@
 import { Application } from "stimulus"
 import { definitionsFromContext } from "stimulus/webpack-helpers"
+import 'bootstrap/dist/css/bootstrap.min.css';
 
 const application = Application.start()
 const context = require.context("./controllers", true, /\.js$/)

diff --git a/webpack.config.js b/webpack.config.js
@@ -23,7 +23,11 @@ module.exports = {
         use: [
           { loader: "babel-loader" }
         ]
+      },
+      {
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader']
       }
     ]
   }
-}
+}
diff --git a/yarn.lock b/yarn.lock
@@ -1048,6 +1048,11 @@ body-parser@1.19.0:
     raw-body "2.4.0"
     type-is "~1.6.17"
 
+bootstrap@4:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.5.0.tgz#97d9dbcb5a8972f8722c9962483543b907d9b9ec"
+  integrity sha512-Z93QoXvodoVslA+PWNdk23Hze4RBYIkpb5h8I2HY2Tu2h7A0LpAgLcyrhrSUyo2/Oxm2l1fRZPs1e5hnxnliXA==
+
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"