init repo

pPris · Apr 12, 2021 · d7bf2cd · d7bf2cd
commit d7bf2cd
Show file tree

Hide file tree

Showing 13 changed files with 234 additions and 0 deletions.
diff --git a/.vs/ProjectSettings.json b/.vs/ProjectSettings.json
@@ -0,0 +1,3 @@
+{
+  "CurrentProjectSetting": null
+}
diff --git a/.vs/VSWorkspaceState.json b/.vs/VSWorkspaceState.json
@@ -0,0 +1,7 @@
+{
+  "ExpandedNodes": [
+    "",
+    "\\js"
+  ],
+  "PreviewInSolutionExplorer": false
+}
diff --git a/.vs/car-clicker/v16/.suo b/.vs/car-clicker/v16/.suo
diff --git a/.vs/slnx.sqlite b/.vs/slnx.sqlite
diff --git a/README.md b/README.md
@@ -0,0 +1,14 @@
+# Car Clicker
+
+This is a simple application built implementing the MVC architecture pattern.
+
+The Car Clicker application is a variant of the well-known app cat clicker. Some significant differences in the Car Clicker app are:
+
+1. No cats, only muscle cars images
+2. Multiple car models listed
+3. Multiple click counters
+4. Only displays the car selected
+
+![carClicker app](img/carClicker.gif)
+
+_used in a article for @freeCodeCamp to explain the MVC architecture pattern_
diff --git a/img/black-convertible-coupe.jpg b/img/black-convertible-coupe.jpg
diff --git a/img/carClicker.gif b/img/carClicker.gif
diff --git a/img/chevrolet-camaro.jpg b/img/chevrolet-camaro.jpg
diff --git a/img/dodge-charger.jpg b/img/dodge-charger.jpg
diff --git a/img/ford-mustang.jpg b/img/ford-mustang.jpg
diff --git a/img/mercedes-benz.jpg b/img/mercedes-benz.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <!-- Bootstrap -->
+    <link
+      rel="stylesheet"
+      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
+      integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
+      crossorigin="anonymous"
+    />
+    <title>Car Clicker</title>
+  </head>
+  <body>
+    <div class="container">
+      <div class="py-5 text-center">
+        <h2 class="display-4">Car Clicker</h2>
+      </div>
+      <div class="row">
+        <div class="col-md-4 order-md-1 mb-4">
+          <h4 style="font-weight: bold;">CAR LIST</h4>
+          <ul id="car-list" class="list-group mb-3"></ul>
+        </div>
+        <div class="col-md-8 order-md-2">
+          <div id="car">
+            <div class="row">
+              <h2
+                class="text-center display-4 font-weight-bold col"
+                id="car-name"
+              ></h2>
+              <div class="text-center display-4 col">
+                <p>
+                  vote count:
+                  <span id="car-count"></span>
+                </p>
+              </div>
+            </div>
+            <img
+              style="width: 100%; margin: auto;"
+              id="car-img"
+              src=""
+              alt="muscle car"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- Compiled and minified JavaScript -->
+    <script
+      src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
+      integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
+      crossorigin="anonymous"
+    ></script>
+    <script
+      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
+      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
+      crossorigin="anonymous"
+    ></script>
+    <script
+      src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
+      integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
+      crossorigin="anonymous"
+    ></script>
+    <script src="js/app.js"></script>
+  </body>
+</html>
diff --git a/js/app.js b/js/app.js
@@ -0,0 +1,144 @@
+// Model === Data , View === UI, Controller === Brain - 
+
+
+//Model
+const model = {
+    currentCar: null,
+    cars: [
+        {
+            clickCount: 0,
+            name: 'Coupe Maserati',
+            imgSrc: 'img/black-convertible-coupe.jpg',
+        },
+        {
+            clickCount: 0,
+            name: 'Camaro SS 1LE',
+            imgSrc: 'img/chevrolet-camaro.jpg',
+        },
+        {
+            clickCount: 0,
+            name: 'Dodger Charger 1970',
+            imgSrc: 'img/dodge-charger.jpg',
+        },
+        {
+            clickCount: 0,
+            name: 'Ford Mustang 1966',
+            imgSrc: 'img/ford-mustang.jpg',
+        },
+        {
+            clickCount: 0,
+            name: '190 SL Roadster 1962',
+            imgSrc: 'img/mercedes-benz.jpg',
+        },
+    ],
+};
+
+// Controller
+const controller = {
+    init() {
+        // set our current car to the first one in the list
+        model.currentCar = model.cars[0];
+
+        // tell our views to initialize
+        carListView.init();
+        carView.init();
+    },
+
+    getCurrentCar() {
+        return model.currentCar;
+    },
+
+    getCars() {
+        return model.cars;
+    },
+
+    // set the currently-selected car to the object passed in
+    setCurrentCar(car) {
+        model.currentCar = car;
+    },
+
+    // increments the counter for the currently-selected car
+    incrementCounter() {
+        model.currentCar.clickCount++;
+        carView.render();
+    },
+};
+
+// Views
+const carView = {
+    init() {
+        // store pointer to our DOM elements for easy access later
+        this.carElem = document.getElementById('car');
+        this.carNameElem = document.getElementById('car-name');
+        this.carImageElem = document.getElementById('car-img');
+        this.countElem = document.getElementById('car-count');
+        this.elCount = document.getElementById('elCount');
+
+
+        // on click increment the current car's counter
+        this.carImageElem.addEventListener('click', this.clickHandler);
+
+        // render this view (update the DOM elements with the right values)
+        this.render();
+    },
+
+    clickHandler() {
+        return controller.incrementCounter();
+    },
+
+    render() {
+        // update the DOM elements with values from the current car
+        const currentCar = controller.getCurrentCar();
+        this.countElem.textContent = currentCar.clickCount;
+        this.carNameElem.textContent = currentCar.name;
+        this.carImageElem.src = currentCar.imgSrc;
+        this.carImageElem.style.cursor = 'pointer';
+    },
+};
+
+const carListView = {
+    init() {
+        // store the DOM element for easy access later
+        this.carListElem = document.getElementById('car-list');
+
+        // render this view (update the DOM elements with the right values)
+        this.render();
+    },
+
+    render() {
+        let car;
+        let elem;
+        let i;
+        // get the cars we'll be rendering from the controller
+        const cars = controller.getCars();
+
+        // empty the car list
+        this.carListElem.innerHTML = '';
+
+        // loop over the cars
+        for(let i = 0; i < cars.length; i++) {
+            // this is the car we've currently looping over
+            car = cars[i];
+
+            // make a new car list item and set its text
+            elem = document.createElement('li');
+            elem.className = 'list-group-item d-flex justify-content-between lh-condensed';
+            elem.style.cursor = 'pointer';
+            elem.textContent = car.name;
+            elem.addEventListener(
+                'click',
+                (function(carCopy) {
+                  return function() {
+                    controller.setCurrentCar(carCopy);
+                    carView.render();
+                  };
+                })(car)
+              );
+                // finally, add the element to the list
+                this.carListElem.appendChild(elem);
+        }
+    },
+};
+
+// Let's goo!
+controller.init();