From 7418d9e94c3c3a27c8866796fcf2b758f82cfb50 Mon Sep 17 00:00:00 2001
From: Fer <fernandoza@gmail.com>
Date: Thu, 27 Aug 2020 16:19:22 -0500
Subject: [PATCH 01/11] feat: removes any references of modules

---
 public/index.html |  5 +++--
 src/api.js        |  4 ++--
 src/hello.js      |  1 -
 src/index.js      | 20 --------------------
 4 files changed, 5 insertions(+), 25 deletions(-)
 delete mode 100644 src/hello.js
 delete mode 100644 src/index.js

diff --git a/public/index.html b/public/index.html
index 78deca398..8903e13c0 100644
--- a/public/index.html
+++ b/public/index.html
@@ -9,9 +9,10 @@
 
     <div class="container">
         <h1>Hello There!</h1>
-        <p>To get started, edit <code>src/index.js</code>.</p>
+        <p>To get started, edit <code>src/main.js</code>.</p>
     </div>
 
-    <script src="./main.js"></script>
+    <script src="/src/api.js"></script>
+    <script src="/src/main.js"></script>
 </body>
 </html>
diff --git a/src/api.js b/src/api.js
index f75aeb901..356df1962 100644
--- a/src/api.js
+++ b/src/api.js
@@ -1,6 +1,6 @@
-module.exports = {
+const API ={
   getMovies: () => {
     return fetch('/api/movies')
       .then(response => response.json());
   }
-};
+}
\ No newline at end of file
diff --git a/src/hello.js b/src/hello.js
deleted file mode 100644
index 663a5b1cd..000000000
--- a/src/hello.js
+++ /dev/null
@@ -1 +0,0 @@
-export default (name) => console.log(`Hello there, ${name}!`);
diff --git a/src/index.js b/src/index.js
deleted file mode 100644
index cc9146b7b..000000000
--- a/src/index.js
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * es6 modules and imports
- */
-import sayHello from './hello';
-sayHello('World');
-
-/**
- * require style imports
- */
-const {getMovies} = require('./api.js');
-
-getMovies().then((movies) => {
-  console.log('Here are all the movies:');
-  movies.forEach(({title, rating, id}) => {
-    console.log(`id#${id} - ${title} - rating: ${rating}`);
-  });
-}).catch((error) => {
-  alert('Oh no! Something went wrong.\nCheck the console for details.')
-  console.log(error);
-});

From 4ab679772915edc9ad97ad6365a9d25416e974d9 Mon Sep 17 00:00:00 2001
From: Fer <fernandoza@gmail.com>
Date: Thu, 27 Aug 2020 16:36:36 -0500
Subject: [PATCH 02/11] feat: removes any references of modules and npm

---
 README.md                       |  2 +-
 {public => css}/style.css       |  0
 public/index.html => index.html |  6 ++--
 install.sh                      |  6 ----
 js/api.js                       | 23 +++++++++++++++
 package.json                    | 27 -----------------
 public/.gitignore               |  2 --
 server.js                       | 13 ---------
 src/api.js                      |  6 ----
 webpack.config.js               | 51 ---------------------------------
 10 files changed, 27 insertions(+), 109 deletions(-)
 rename {public => css}/style.css (100%)
 rename public/index.html => index.html (67%)
 delete mode 100644 install.sh
 create mode 100644 js/api.js
 delete mode 100644 package.json
 delete mode 100644 public/.gitignore
 delete mode 100644 server.js
 delete mode 100644 src/api.js
 delete mode 100644 webpack.config.js

diff --git a/README.md b/README.md
index 0d1d117c9..408effca2 100644
--- a/README.md
+++ b/README.md
@@ -38,7 +38,7 @@ http://localhost:1313, **not** from IntelliJ's web server, or by dragging the
 file(s) into chrome. As you make changes to your source files, all you need to
 do is save the file, and the website will be live reloaded.
 
-Take a look at the `src/index.js` file to get started. You will notice it has
+Take a look at the `src/main.js` file to get started. You will notice it has
 examples of importing and requiring separate javascript files. Regardless of
 which you choose to use, you should pick one and use it throughout your code
 base, don't mix and match the two.
diff --git a/public/style.css b/css/style.css
similarity index 100%
rename from public/style.css
rename to css/style.css
diff --git a/public/index.html b/index.html
similarity index 67%
rename from public/index.html
rename to index.html
index 8903e13c0..963c38eed 100644
--- a/public/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8" />
     <title>My Application</title>
-    <link rel="stylesheet" href="/style.css" />
+    <link rel="stylesheet" href="/css/style.css" />
 </head>
 <body>
 
@@ -12,7 +12,7 @@ <h1>Hello There!</h1>
         <p>To get started, edit <code>src/main.js</code>.</p>
     </div>
 
-    <script src="/src/api.js"></script>
-    <script src="/src/main.js"></script>
+    <script src="js/api.js"></script>
+    <script src="js/main.js"></script>
 </body>
 </html>
diff --git a/install.sh b/install.sh
deleted file mode 100644
index 3beddd6d9..000000000
--- a/install.sh
+++ /dev/null
@@ -1,6 +0,0 @@
-echo 'Installing dependencies'
-npm install
-echo 'Building static assets'
-npm run build
-echo 'Starting the application'
-npm start
\ No newline at end of file
diff --git a/js/api.js b/js/api.js
new file mode 100644
index 000000000..1a6e8cc79
--- /dev/null
+++ b/js/api.js
@@ -0,0 +1,23 @@
+"use strict";
+
+const URL = "https://codeup-movies.firebaseio.com/codeup-movies/fer.json";
+const movie = {title: 'up', rating: 5};
+const options = {
+    method: 'POST',
+    headers: {
+        'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(movie),
+};
+
+const API = {
+    getMovies: () => {
+        return fetch(URL)
+            .then(response => response.json());
+    },
+    postMovie: () => {
+        fetch(URL, options)
+            .then(/* post was created successfully */)
+            .catch(/* handle errors */);
+    }
+}
\ No newline at end of file
diff --git a/package.json b/package.json
deleted file mode 100644
index ef9e6ac57..000000000
--- a/package.json
+++ /dev/null
@@ -1,27 +0,0 @@
-{
-  "name": "tmp",
-  "version": "1.0.0",
-  "main": "index.js",
-  "scripts": {
-    "dev": "concurrently 'webpack-dev-server' 'json-server -d1200 --watch db.json'",
-    "build": "webpack -p",
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "node server.js"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "description": "",
-  "dependencies": {
-    "babel-core": "^6.25.0",
-    "babel-loader": "^7.1.1",
-    "babel-preset-env": "^1.5.2",
-    "concurrently": "^3.5.0",
-    "json-server": "^0.16.1",
-    "promise-polyfill": "^6.0.2",
-    "webpack": "4.29.6",
-    "webpack-cli": "3.3.0",
-    "webpack-dev-server": "3.2.1",
-    "whatwg-fetch": "^3.0.0"
-  }
-}
diff --git a/public/.gitignore b/public/.gitignore
deleted file mode 100644
index 56fb6b5ed..000000000
--- a/public/.gitignore
+++ /dev/null
@@ -1,2 +0,0 @@
-main.js
-*.map
diff --git a/server.js b/server.js
deleted file mode 100644
index 7fdb25d07..000000000
--- a/server.js
+++ /dev/null
@@ -1,13 +0,0 @@
-const jsonServer = require('json-server')
-const server = jsonServer.create()
-const router = jsonServer.router('db.json')
-const staticMiddleware = require('express').static
-
-// serve content out of 'public' as is
-server.use(staticMiddleware('public'))
-
-server.use('/api', router)
-
-server.listen(3000, () => {
-    console.log('JSON Server is running')
-});
\ No newline at end of file
diff --git a/src/api.js b/src/api.js
deleted file mode 100644
index 356df1962..000000000
--- a/src/api.js
+++ /dev/null
@@ -1,6 +0,0 @@
-const API ={
-  getMovies: () => {
-    return fetch('/api/movies')
-      .then(response => response.json());
-  }
-}
\ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
deleted file mode 100644
index dc9119337..000000000
--- a/webpack.config.js
+++ /dev/null
@@ -1,51 +0,0 @@
-// for resolving the absolute path to our project
-// necessary for webpack
-const path = require('path');
-const webpack = require('webpack');
-
-module.exports = {
-  // where our app "starts"
-  // add the promise and fetch polyfill first
-  entry: ['promise-polyfill', 'whatwg-fetch', './src/index.js'],
-  // where to put the transpiled javascript
-  output: {
-    path: path.resolve(__dirname, 'public'),
-    filename: 'main.js'
-  },
-
-  // babel config
-  module: {
-    rules: [
-      {
-        // any file that ends with '.js'
-        test: /\.js$/,
-        // except those in "node_modules"
-        exclude: /node_modules/,
-        // transform with babel
-        use: {
-          loader: 'babel-loader',
-          options: {
-            presets: ['env']
-          }
-        }
-      }
-    ]
-  },
-
-  // allows us to see how the transpiled js relates to the untranspiled js
-  devtool: 'source-map',
-
-  devServer: {
-    contentBase: path.join(__dirname, 'public'),
-    port: 1313,
-    compress: true,
-    watchContentBase: true,
-    // send requests that start with "/api" to our api server
-    proxy: {
-      '/api': {
-        target: 'http://localhost:3000',
-        pathRewrite: {'^/api': ''}
-      }
-    }
-  }
-};

From 5ba125984864c385c611274f61ff9891f6fee607 Mon Sep 17 00:00:00 2001
From: Fer <fernandoza@gmail.com>
Date: Sat, 29 Aug 2020 17:00:21 -0500
Subject: [PATCH 03/11] feat: initial setup

---
 css/style.css |  9 +++------
 index.html    | 24 ++++++++++++++----------
 js/api.js     | 10 +++++++---
 3 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/css/style.css b/css/style.css
index a05714a96..70b04de74 100644
--- a/css/style.css
+++ b/css/style.css
@@ -2,9 +2,6 @@ html, body {
     height: 100%;
 }
 
-.container {
-    position: relative;
-    top: 50%;
-    transform: translateY(-100%);
-    text-align: center;
-}
+body {
+    background-color: darkslateblue;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 963c38eed..eb5361cac 100644
--- a/index.html
+++ b/index.html
@@ -1,18 +1,22 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8" />
-    <title>My Application</title>
-    <link rel="stylesheet" href="/css/style.css" />
+    <meta charset="UTF-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Fer's MDB</title>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
+    <link rel="stylesheet" href="css/style.css"/>
 </head>
 <body>
 
-    <div class="container">
-        <h1>Hello There!</h1>
-        <p>To get started, edit <code>src/main.js</code>.</p>
-    </div>
+<main class="container">
+    <div class="card-columns"></div>
+</main>
 
-    <script src="js/api.js"></script>
-    <script src="js/main.js"></script>
+<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
+<script src="js/api.js"></script>
+<script src="js/main.js"></script>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/js/api.js b/js/api.js
index 1a6e8cc79..43554c4df 100644
--- a/js/api.js
+++ b/js/api.js
@@ -1,6 +1,6 @@
 "use strict";
 
-const URL = "https://codeup-movies.firebaseio.com/codeup-movies/fer.json";
+const URL = "https://fma.glitch.me/movies";
 const movie = {title: 'up', rating: 5};
 const options = {
     method: 'POST',
@@ -17,7 +17,11 @@ const API = {
     },
     postMovie: () => {
         fetch(URL, options)
-            .then(/* post was created successfully */)
-            .catch(/* handle errors */);
+            .then(() => {
+                console.log("post was created successfully ");
+            })
+            .catch(error => {
+                console.error(error);
+            });
     }
 }
\ No newline at end of file

From 15baa81884abdd6923e155590af2bf9f0bfbb943 Mon Sep 17 00:00:00 2001
From: Fer <fernandoza@gmail.com>
Date: Sat, 29 Aug 2020 17:05:10 -0500
Subject: [PATCH 04/11] feat: render html for movies json data

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index eb5361cac..717f627f6 100644
--- a/index.html
+++ b/index.html
@@ -10,7 +10,7 @@
 <body>
 
 <main class="container">
-    <div class="card-columns"></div>
+    <div id="movie-cards" class="card-columns"></div>
 </main>
 
 <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

From 4f8cb705d5201cc53776586fa762cc9b8bf54df6 Mon Sep 17 00:00:00 2001
From: Fer <fernandoza@gmail.com>
Date: Tue, 1 Sep 2020 09:08:05 -0500
Subject: [PATCH 05/11] feat: add test post submission

---
 index.html | 42 +++++++++++++++++++++++++++++++++++++++++-
 js/api.js  | 23 ++++++++++++-----------
 2 files changed, 53 insertions(+), 12 deletions(-)

diff --git a/index.html b/index.html
index 717f627f6..7f6294267 100644
--- a/index.html
+++ b/index.html
@@ -10,10 +10,50 @@
 <body>
 
 <main class="container">
+
+    <h3>Add movie</h3>
+    <form id="post-form">
+        <div class="form-group">
+            <label for="title">Title</label>
+            <input type="title" class="form-control" id="title" aria-describedby="" placeholder="Enter Title">
+        </div>
+        <div class="form-check form-check-inline">
+            <input class="form-check-input" type="radio" name="rating" id="rating1" value="1" checked>
+            <label class="form-check-label" for="rating1">
+                1
+            </label>
+        </div>
+        <div class="form-check form-check-inline">
+            <input class="form-check-input" type="radio" name="rating" id="rating2" value="2" checked>
+            <label class="form-check-label" for="rating2">
+                2
+            </label>
+        </div>
+        <div class="form-check form-check-inline">
+            <input class="form-check-input" type="radio" name="rating" id="rating3" value="3" checked>
+            <label class="form-check-label" for="rating3">
+                3
+            </label>
+        </div>
+        <div class="form-check form-check-inline">
+            <input class="form-check-input" type="radio" name="rating" id="rating4" value="4" checked>
+            <label class="form-check-label" for="rating4">
+                4
+            </label>
+        </div>
+        <div class="form-check form-check-inline">
+            <input class="form-check-input" type="radio" name="rating" id="rating5" value="5" checked>
+            <label class="form-check-label" for="rating5">
+                5
+            </label>
+        </div>
+        <button id="submit-movie-btn" type="submit" class="btn btn-primary">Submit</button>
+    </form>
+
     <div id="movie-cards" class="card-columns"></div>
 </main>
 
-<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
+<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
 <script src="js/api.js"></script>
diff --git a/js/api.js b/js/api.js
index 43554c4df..2ae3dc8be 100644
--- a/js/api.js
+++ b/js/api.js
@@ -1,24 +1,25 @@
 "use strict";
 
-const URL = "https://fma.glitch.me/movies";
-const movie = {title: 'up', rating: 5};
-const options = {
-    method: 'POST',
-    headers: {
-        'Content-Type': 'application/json',
-    },
-    body: JSON.stringify(movie),
-};
+const URL = "https://codeup-json-server.glitch.me/movies";
 
 const API = {
     getMovies: () => {
         return fetch(URL)
             .then(response => response.json());
     },
-    postMovie: () => {
+    postMovie: (movie) => {
+
+        let options = {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(movie),
+        };
+
         fetch(URL, options)
             .then(() => {
-                console.log("post was created successfully ");
+                console.log("movie was created successfully ");
             })
             .catch(error => {
                 console.error(error);

From e09bd3366e7a8c6beefab26dc1b064b5fb9dbc80 Mon Sep 17 00:00:00 2001
From: Fer <fernandoza@gmail.com>
Date: Wed, 2 Sep 2020 10:26:40 -0500
Subject: [PATCH 06/11] feat: add a loading message

---
 css/pacman.css | 415 +++++++++++++++++++++++++++++++++++++++++++++++++
 css/style.css  |  16 ++
 index.html     |  11 ++
 3 files changed, 442 insertions(+)
 create mode 100644 css/pacman.css

diff --git a/css/pacman.css b/css/pacman.css
new file mode 100644
index 000000000..02bc18b0d
--- /dev/null
+++ b/css/pacman.css
@@ -0,0 +1,415 @@
+@-webkit-keyframes uil-pacman-css-1 {
+    0% {
+        -ms-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    50% {
+        -ms-transform: rotate(-30deg);
+        -moz-transform: rotate(-30deg);
+        -webkit-transform: rotate(-30deg);
+        -o-transform: rotate(-30deg);
+        transform: rotate(-30deg);
+    }
+    100% {
+        -ms-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+}
+@-webkit-keyframes uil-pacman-css-1 {
+    0% {
+        -ms-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    50% {
+        -ms-transform: rotate(-30deg);
+        -moz-transform: rotate(-30deg);
+        -webkit-transform: rotate(-30deg);
+        -o-transform: rotate(-30deg);
+        transform: rotate(-30deg);
+    }
+    100% {
+        -ms-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+}
+@-moz-keyframes uil-pacman-css-1 {
+    0% {
+        -ms-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    50% {
+        -ms-transform: rotate(-30deg);
+        -moz-transform: rotate(-30deg);
+        -webkit-transform: rotate(-30deg);
+        -o-transform: rotate(-30deg);
+        transform: rotate(-30deg);
+    }
+    100% {
+        -ms-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+}
+@-ms-keyframes uil-pacman-css-1 {
+    0% {
+        -ms-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    50% {
+        -ms-transform: rotate(-30deg);
+        -moz-transform: rotate(-30deg);
+        -webkit-transform: rotate(-30deg);
+        -o-transform: rotate(-30deg);
+        transform: rotate(-30deg);
+    }
+    100% {
+        -ms-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+}
+@-moz-keyframes uil-pacman-css-1 {
+    0% {
+        -ms-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    50% {
+        -ms-transform: rotate(-30deg);
+        -moz-transform: rotate(-30deg);
+        -webkit-transform: rotate(-30deg);
+        -o-transform: rotate(-30deg);
+        transform: rotate(-30deg);
+    }
+    100% {
+        -ms-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+}
+@-webkit-keyframes uil-pacman-css-1 {
+    0% {
+        -ms-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    50% {
+        -ms-transform: rotate(-30deg);
+        -moz-transform: rotate(-30deg);
+        -webkit-transform: rotate(-30deg);
+        -o-transform: rotate(-30deg);
+        transform: rotate(-30deg);
+    }
+    100% {
+        -ms-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+}
+@-o-keyframes uil-pacman-css-1 {
+    0% {
+        -ms-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    50% {
+        -ms-transform: rotate(-30deg);
+        -moz-transform: rotate(-30deg);
+        -webkit-transform: rotate(-30deg);
+        -o-transform: rotate(-30deg);
+        transform: rotate(-30deg);
+    }
+    100% {
+        -ms-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+}
+@keyframes uil-pacman-css-1 {
+    0% {
+        -ms-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    50% {
+        -ms-transform: rotate(-30deg);
+        -moz-transform: rotate(-30deg);
+        -webkit-transform: rotate(-30deg);
+        -o-transform: rotate(-30deg);
+        transform: rotate(-30deg);
+    }
+    100% {
+        -ms-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+}
+@-webkit-keyframes uil-pacman-css-2 {
+    0% {
+        -ms-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    50% {
+        -ms-transform: rotate(30deg);
+        -moz-transform: rotate(30deg);
+        -webkit-transform: rotate(30deg);
+        -o-transform: rotate(30deg);
+        transform: rotate(30deg);
+    }
+    100% {
+        -ms-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+}
+@-webkit-keyframes uil-pacman-css-2 {
+    0% {
+        -ms-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    50% {
+        -ms-transform: rotate(30deg);
+        -moz-transform: rotate(30deg);
+        -webkit-transform: rotate(30deg);
+        -o-transform: rotate(30deg);
+        transform: rotate(30deg);
+    }
+    100% {
+        -ms-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+}
+@-moz-keyframes uil-pacman-css-2 {
+    0% {
+        -ms-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    50% {
+        -ms-transform: rotate(30deg);
+        -moz-transform: rotate(30deg);
+        -webkit-transform: rotate(30deg);
+        -o-transform: rotate(30deg);
+        transform: rotate(30deg);
+    }
+    100% {
+        -ms-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+}
+@-ms-keyframes uil-pacman-css-2 {
+    0% {
+        -ms-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    50% {
+        -ms-transform: rotate(30deg);
+        -moz-transform: rotate(30deg);
+        -webkit-transform: rotate(30deg);
+        -o-transform: rotate(30deg);
+        transform: rotate(30deg);
+    }
+    100% {
+        -ms-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+}
+@-moz-keyframes uil-pacman-css-2 {
+    0% {
+        -ms-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    50% {
+        -ms-transform: rotate(30deg);
+        -moz-transform: rotate(30deg);
+        -webkit-transform: rotate(30deg);
+        -o-transform: rotate(30deg);
+        transform: rotate(30deg);
+    }
+    100% {
+        -ms-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+}
+@-webkit-keyframes uil-pacman-css-2 {
+    0% {
+        -ms-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    50% {
+        -ms-transform: rotate(30deg);
+        -moz-transform: rotate(30deg);
+        -webkit-transform: rotate(30deg);
+        -o-transform: rotate(30deg);
+        transform: rotate(30deg);
+    }
+    100% {
+        -ms-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+}
+@-o-keyframes uil-pacman-css-2 {
+    0% {
+        -ms-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    50% {
+        -ms-transform: rotate(30deg);
+        -moz-transform: rotate(30deg);
+        -webkit-transform: rotate(30deg);
+        -o-transform: rotate(30deg);
+        transform: rotate(30deg);
+    }
+    100% {
+        -ms-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+}
+@keyframes uil-pacman-css-2 {
+    0% {
+        -ms-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    50% {
+        -ms-transform: rotate(30deg);
+        -moz-transform: rotate(30deg);
+        -webkit-transform: rotate(30deg);
+        -o-transform: rotate(30deg);
+        transform: rotate(30deg);
+    }
+    100% {
+        -ms-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+}
+.uil-pacman-css {
+    background: none;
+    position: relative;
+    width: 200px;
+    height: 200px;
+}
+.uil-pacman-css > div {
+    position: absolute;
+    width: 200px;
+    height: 200px;
+}
+.uil-pacman-css > div > div {
+    background: #f0c741;
+    width: 200px;
+    height: 100px;
+    position: absolute;
+    z-index: 1;
+}
+.uil-pacman-css > div:nth-of-type(1) {
+    top: 0;
+    -ms-animation: uil-pacman-css-1 1s linear infinite;
+    -moz-animation: uil-pacman-css-1 1s linear infinite;
+    -webkit-animation: uil-pacman-css-1 1s linear infinite;
+    -o-animation: uil-pacman-css-1 1s linear infinite;
+    animation: uil-pacman-css-1 1s linear infinite;
+}
+.uil-pacman-css > div:nth-of-type(1) > div {
+    border-radius: 100px 100px 0 0;
+}
+.uil-pacman-css > div:nth-of-type(2) {
+    top: 0px;
+    -ms-animation: uil-pacman-css-2 1s linear infinite;
+    -moz-animation: uil-pacman-css-2 1s linear infinite;
+    -webkit-animation: uil-pacman-css-2 1s linear infinite;
+    -o-animation: uil-pacman-css-2 1s linear infinite;
+    animation: uil-pacman-css-2 1s linear infinite;
+}
+.uil-pacman-css > div:nth-of-type(2) > div {
+    top: 100px;
+    border-radius: 0 0 100px 100px;
+}
+.uil-pacman-css > div:nth-of-type(3) > div {
+    width: 100px;
+    height: 200px;
+    border-radius: 100px 0 0 100px;
+    background: #f0c741;
+}
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
index 70b04de74..8072368b8 100644
--- a/css/style.css
+++ b/css/style.css
@@ -4,4 +4,20 @@ html, body {
 
 body {
     background-color: darkslateblue;
+}
+
+#overlay{
+    position: fixed;
+    top: 0;
+    z-index: 999;
+    width: 100%;
+    height: 100vh;
+    background: rgba(7, 23, 37, 0.9);
+    color:white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+#wrapper{
+    display: none;
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 7f6294267..3de12c780 100644
--- a/index.html
+++ b/index.html
@@ -6,6 +6,7 @@
     <title>Fer's MDB</title>
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
     <link rel="stylesheet" href="css/style.css"/>
+    <link rel="stylesheet" href="css/pacman.css">
 </head>
 <body>
 
@@ -53,6 +54,16 @@ <h3>Add movie</h3>
     <div id="movie-cards" class="card-columns"></div>
 </main>
 
+<div id="wrapper">
+    <div id="overlay">
+        <div id="inner">
+            <h3>Loading...</h3>
+            <br>
+            <div class='uil-pacman-css' style='-webkit-transform:scale(1)'><div><div></div></div><div><div></div></div><div><div></div></div></div>
+        </div>
+    </div>
+</div>
+
 <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

From 0557319188b0647ed2a64c6fccd37300ecf9ebcf Mon Sep 17 00:00:00 2001
From: Fer <fernandoza@gmail.com>
Date: Wed, 2 Sep 2020 10:41:53 -0500
Subject: [PATCH 07/11] feat: add modals for edit

---
 index.html | 29 +++++++++++++++++++++++++++++
 js/api.js  |  3 +++
 2 files changed, 32 insertions(+)

diff --git a/index.html b/index.html
index 3de12c780..f11942c16 100644
--- a/index.html
+++ b/index.html
@@ -64,6 +64,35 @@ <h3>Loading...</h3>
     </div>
 </div>
 
+<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="exampleModalLabel">Edit Movie Details</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <form>
+                    <div class="form-group">
+                        <label for="recipient-name" class="col-form-label">Recipient:</label>
+                        <input type="text" class="form-control" id="edit-title">
+                    </div>
+                    <div class="form-group">
+                        <label for="recipient-name" class="col-form-label">Recipient:</label>
+                        <input type="text" class="form-control" id="edit-title">
+                    </div>
+                </form>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                <button type="button" class="btn btn-primary">Send message</button>
+            </div>
+        </div>
+    </div>
+</div>
+
 <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
diff --git a/js/api.js b/js/api.js
index 2ae3dc8be..02703a643 100644
--- a/js/api.js
+++ b/js/api.js
@@ -7,6 +7,9 @@ const API = {
         return fetch(URL)
             .then(response => response.json());
     },
+    getMovie: id => {
+        return fetch(`${id}`)
+    },
     postMovie: (movie) => {
 
         let options = {

From b9ddefaa2edad00ecc0fd38b0788dac9e5294396 Mon Sep 17 00:00:00 2001
From: Fer <fernandoza@gmail.com>
Date: Wed, 2 Sep 2020 11:42:53 -0500
Subject: [PATCH 08/11] feat: add a getMovie API function to populate forms
 before editing

---
 index.html | 36 +++++++++++++++++++++++++++++++-----
 js/api.js  | 23 ++++++++++++++++++++---
 2 files changed, 51 insertions(+), 8 deletions(-)

diff --git a/index.html b/index.html
index f11942c16..a9d399e42 100644
--- a/index.html
+++ b/index.html
@@ -76,12 +76,38 @@ <h5 class="modal-title" id="exampleModalLabel">Edit Movie Details</h5>
             <div class="modal-body">
                 <form>
                     <div class="form-group">
-                        <label for="recipient-name" class="col-form-label">Recipient:</label>
-                        <input type="text" class="form-control" id="edit-title">
+                        <label for="title">Title</label>
+                        <input type="title" class="form-control" id="title-edit" aria-describedby="" placeholder="Enter Title">
                     </div>
-                    <div class="form-group">
-                        <label for="recipient-name" class="col-form-label">Recipient:</label>
-                        <input type="text" class="form-control" id="edit-title">
+                    <div class="form-check form-check-inline">
+                        <input class="form-check-input" type="radio" name="rating-edit" value="1" checked>
+                        <label class="form-check-label" for="rating1">
+                            1
+                        </label>
+                    </div>
+                    <div class="form-check form-check-inline">
+                        <input class="form-check-input" type="radio" name="rating-edit" value="2" checked>
+                        <label class="form-check-label" for="rating2">
+                            2
+                        </label>
+                    </div>
+                    <div class="form-check form-check-inline">
+                        <input class="form-check-input" type="radio" name="rating-edit" value="3" checked>
+                        <label class="form-check-label" for="rating3">
+                            3
+                        </label>
+                    </div>
+                    <div class="form-check form-check-inline">
+                        <input class="form-check-input" type="radio" name="rating-edit" value="4" checked>
+                        <label class="form-check-label" for="rating4">
+                            4
+                        </label>
+                    </div>
+                    <div class="form-check form-check-inline">
+                        <input class="form-check-input" type="radio" name="rating-edit" value="5" checked>
+                        <label class="form-check-label" for="rating5">
+                            5
+                        </label>
                     </div>
                 </form>
             </div>
diff --git a/js/api.js b/js/api.js
index 02703a643..f389c43ce 100644
--- a/js/api.js
+++ b/js/api.js
@@ -4,11 +4,10 @@ const URL = "https://codeup-json-server.glitch.me/movies";
 
 const API = {
     getMovies: () => {
-        return fetch(URL)
-            .then(response => response.json());
+        return fetch(URL).then(response => response.json());
     },
     getMovie: id => {
-        return fetch(`${id}`)
+        return fetch(`${URL}/${id}`).then( response => response.json());
     },
     postMovie: (movie) => {
 
@@ -27,5 +26,23 @@ const API = {
             .catch(error => {
                 console.error(error);
             });
+    },
+    editMovie: (movie) => {
+
+        let options = {
+            method: 'PUT',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(movie),
+        };
+
+        fetch(URL, options)
+            .then(() => {
+                console.log("movie was edited successfully ");
+            })
+            .catch(error => {
+                console.error(error);
+            });
     }
 }
\ No newline at end of file

From da79186523b215b9017275ebfa050c5fd3ebcbe2 Mon Sep 17 00:00:00 2001
From: Fer <fernandoza@gmail.com>
Date: Wed, 2 Sep 2020 12:15:45 -0500
Subject: [PATCH 09/11] feat: add the edit and delete functionality withing the
 API file

---
 index.html |  5 +++--
 js/api.js  | 24 ++++++++++++++++++++----
 2 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index a9d399e42..00a56c4b3 100644
--- a/index.html
+++ b/index.html
@@ -112,8 +112,9 @@ <h5 class="modal-title" id="exampleModalLabel">Edit Movie Details</h5>
                 </form>
             </div>
             <div class="modal-footer">
-                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-                <button type="button" class="btn btn-primary">Send message</button>
+                <input type="hidden" id="movie-id">
+                <button type="button" class="btn btn-success" id="submit-changes-btn">Save changes</button>
+                <button type="button" class="btn btn-danger" id="delete-movie-btn" data-dismiss="modal">Delete</button>
             </div>
         </div>
     </div>
diff --git a/js/api.js b/js/api.js
index f389c43ce..959261f2d 100644
--- a/js/api.js
+++ b/js/api.js
@@ -7,7 +7,7 @@ const API = {
         return fetch(URL).then(response => response.json());
     },
     getMovie: id => {
-        return fetch(`${URL}/${id}`).then( response => response.json());
+        return fetch(`${URL}/${id}`).then(response => response.json());
     },
     postMovie: (movie) => {
 
@@ -21,7 +21,7 @@ const API = {
 
         fetch(URL, options)
             .then(() => {
-                console.log("movie was created successfully ");
+                console.log("movie was created successfully");
             })
             .catch(error => {
                 console.error(error);
@@ -37,9 +37,25 @@ const API = {
             body: JSON.stringify(movie),
         };
 
-        fetch(URL, options)
+        return fetch(`${URL}/${movie.id}`, options)
+            .then(() => {
+                console.log("movie was edited successfully");
+            })
+            .catch(error => {
+                console.error(error);
+            });
+    },
+    deleteMovie: id => {
+        let options = {
+            method: 'DELETE',
+            headers: {
+                'Content-Type': 'application/json',
+            }
+        };
+
+        return fetch(`${URL}/${id}`, options)
             .then(() => {
-                console.log("movie was edited successfully ");
+                console.log("movie was deleted successfully");
             })
             .catch(error => {
                 console.error(error);

From dd7cd4a4a17977c017b8c670d7191582024e9a69 Mon Sep 17 00:00:00 2001
From: Fer <fernandoza@gmail.com>
Date: Wed, 2 Sep 2020 12:29:08 -0500
Subject: [PATCH 10/11] feat: refresh after adding a movie

---
 js/api.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/api.js b/js/api.js
index 959261f2d..c255a3f3e 100644
--- a/js/api.js
+++ b/js/api.js
@@ -19,7 +19,7 @@ const API = {
             body: JSON.stringify(movie),
         };
 
-        fetch(URL, options)
+        return fetch(URL, options)
             .then(() => {
                 console.log("movie was created successfully");
             })

From 354eadb90266cf557933f5a4fd2b5707a517d232 Mon Sep 17 00:00:00 2001
From: Fer <fernandoza@gmail.com>
Date: Thu, 3 Sep 2020 10:20:59 -0500
Subject: [PATCH 11/11] feat: add the main.js to the fs

---
 .gitignore    |  1 -
 css/style.css |  3 ++-
 index.html    |  5 +++-
 js/main.js    | 73 +++++++++++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 79 insertions(+), 3 deletions(-)
 create mode 100644 js/main.js

diff --git a/.gitignore b/.gitignore
index c348be082..7d17d2199 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,5 +2,4 @@
 *.iml
 
 node_modules/
-main.js
 *.map
diff --git a/css/style.css b/css/style.css
index 8072368b8..5649dfd46 100644
--- a/css/style.css
+++ b/css/style.css
@@ -3,7 +3,7 @@ html, body {
 }
 
 body {
-    background-color: darkslateblue;
+    background-color: lightskyblue;
 }
 
 #overlay{
@@ -18,6 +18,7 @@ body {
     justify-content: center;
     align-items: center;
 }
+
 #wrapper{
     display: none;
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 00a56c4b3..7b0070262 100644
--- a/index.html
+++ b/index.html
@@ -12,7 +12,10 @@
 
 <main class="container">
 
+    <h1>Fer's Movie Database</h1>
+
     <h3>Add movie</h3>
+
     <form id="post-form">
         <div class="form-group">
             <label for="title">Title</label>
@@ -48,7 +51,7 @@ <h3>Add movie</h3>
                 5
             </label>
         </div>
-        <button id="submit-movie-btn" type="submit" class="btn btn-primary">Submit</button>
+        <button id="submit-movie-btn" type="submit" class="btn btn-primary">Add Movie</button>
     </form>
 
     <div id="movie-cards" class="card-columns"></div>
diff --git a/js/main.js b/js/main.js
new file mode 100644
index 000000000..ce9b66ce3
--- /dev/null
+++ b/js/main.js
@@ -0,0 +1,73 @@
+"use strict";
+
+//ESC key
+$(document).keyup(function(e) {
+    //ESC
+    if (e.keyCode === 27){
+        $("#wrapper").fadeOut();
+    }
+});
+
+loadMovies();
+
+function loadMovies(){
+    $('#editModal').modal('hide')
+    $("#wrapper").fadeIn();
+    API.getMovies().then((movies) => {
+        $("#wrapper").fadeOut();
+        $("#movie-cards").empty();
+        movies.forEach(({title, rating, id}) => {
+            $("#movie-cards").append(`<div class="card">
+            <img src="https://m.media-amazon.com/images/M/MV5BMTYzNDQyMzkyMV5BMl5BanBnXkFtZTgwMTE3MTI4MTE@._V1_SY1000_CR0,0,752,1000_AL_.jpg" class="card-img-top" alt="">
+            <div class="card-body">
+                <h5 class="card-title">${title}</h5>
+                <p class="card-text">${rating}</p>
+                <button data-id="${id}" class="btn btn-success edit-btn" data-toggle="modal" data-target="#editModal">Edit</button>
+            </div>
+        </div>`);
+        });
+
+        $(".edit-btn").click(function(e){
+            $("#wrapper").fadeIn();
+            e.preventDefault();
+            let id = $(this).data('id');
+
+            API.getMovie(id).then( movie => {
+                $("#wrapper").fadeOut();
+                $("#title-edit").val(movie.title);
+                $("input[value='"+movie.rating+"']").attr('checked', 'checked');
+                $("#movie-id").val(movie.id);
+            });
+        });
+
+    }).catch((error) => {
+        alert('Oh no! Something went wrong.\nCheck the console for details.')
+        console.log('error', error);
+    });
+}
+
+$("#submit-movie-btn").click(function(e){
+    e.preventDefault();
+    let movie = {
+        title: $("#title").val(),
+        rating: $("input[name='rating']:checked").val()
+    }
+    API.postMovie(movie).then( () => loadMovies());
+});
+
+$("#submit-changes-btn").click(function(e){
+    e.preventDefault();
+    let movie = {
+        id: $("#movie-id").val(),
+        title: $("#title-edit").val(),
+        rating: $("input[name='rating-edit']:checked").val()
+    }
+    API.editMovie(movie).then( () => loadMovies());
+});
+
+$("#delete-movie-btn").click(function(e){
+    e.preventDefault();
+    API.deleteMovie($("#movie-id").val()).then( () => loadMovies());
+});
+
+