diff --git a/README.md b/README.md
index 68f98c0..05d2bdb 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,69 @@
-# Mutably Starter Project
-For goal #383
+# CRUD Mutably #383
+[good--music.herokuapp.com](https://good--music.herokuapp.com/)
## To get this project running
1. `npm install`
1. `npm start` to run (uses nodemon)
+
+Team name: #befitting-penguin
+Team: Jeffrey Ware, Jay Cribas
+
+## Challenge Rating
+
+This goal will likely be within your ZPD if you...
+
+- Can build basic web sites with HTML & CSS
+- Can add behavior to a web site with JavaScript
+- Are familiar with DOM manipulation
+- Are interested in making more complex interactive web pages
+
+## Description
+
+[Mutably](http://mutably.herokuapp.com/) is a mutable, RESTful, CRUD API. This means that it has endpoints that you can interact with RESTfully via a front-end.
+
+Visit the repo page for information about the resources available and how to interact with them: [https://github.com/GuildCrafts/mutably](https://github.com/GuildCrafts/mutably)
+
+Your goal is to build a front-end that consumes the Mutably API. You can choose any one of the 3 resources. You front-end needs to complete all of the CRUD (Create, Read, Update, Delete) functions.
+
+For the goal, you will start with [this scaffolded template](https://github.com/GuildCrafts/mutably-starter). Fork to get started.
+You will use jQuery to complete this goal.
+
+## Context
+
+Interacting with a third-party API is a key skill for any developer. Most APIs have extensive documentation and require a fair amount of "overhead" just to get started working with them.
+
+Not Mutably. This API is _way_ simpler, with just a few _endpoints_ handling a few different _resources_.
+
+This goal is designed as an introduction to working with third-party APIs so that you can familiarize yourself with the core ideas before moving on to work with bigger, more complex APIs (like GitHub or Twitter).
+
+## Specifications
+
+- [x] __5:__ Your repo is a fork of [mutably-starter](https://github.com/GuildCrafts/mutably-starter).
+- [x] __5:__ Your repo has a README with instructions for how to run your project.
+- [x] __15:__ Your app is SPA (single page app). All CRUD actions take place on the same page, preferably the root (`/`) route.
+- [x] __10:__ All interaction with the API happens with jQuery's AJAX function -- don't submit data via forms. You can use `form` html tags, but do all your form submission in your `js`. Make use of jQuery's `event.preventDefault()`.
+- [x] __15:__ A user can read and display all the data for a resource.
+- [x] __10:__ A user can create a new item via a create form. When the user creates a new item, that item should either get appended to the page or all the items should get re-retrieved in the `js`. No full page refresh.
+- [x] __10:__ A user can update an existing item. Updating happens inline. This means that there is an edit button next to each item that, when clicked, the item text gets replaced with an pre-populated editable, input field. And the edit button becomes a save button. Once the save button is clicked and success message comes back from the server, then then input gets replaced with the updated text. No page refresh.
+ For example, this:
+
+
+ becomes:
+
+
+
+ When the user clickes the edit button.
+- [x] __10:__ A user can delete an existing item via a delete button next to each item. No page refresh.
+- [x] __10:__ Use a UI library to make your site look nice.
+- [x] __5:__ The artifact produced is properly licensed, preferably with the MIT license.
+- [x] __5:__ App is deployed on Heroku.
+
+### Stretch
+
+- [ ] Create another version of your front-end using a front-end framework such as React or Angular.
+
+---
+
+***If the mutably data gets too crazy from people adding / deleting things, you can reset the data to the seed data [here](http://mutably.herokuapp.com/).***
+
+***Insider tip: there is an example "solution" (remember, there are MANY ways to hack it!) in the [solution branch](https://github.com/GuildCrafts/mutably-starter/tree/solution) of the starter template.***
diff --git a/package.json b/package.json
index 53339ce..8d1b64b 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,8 @@
"description": "",
"main": "server.js",
"scripts": {
- "start": "nodemon server.js",
+ "start": "node server.js",
+ "start:dev": "nodemon server",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
diff --git a/public/images/speakers.jpg b/public/images/speakers.jpg
new file mode 100644
index 0000000..9b8860a
Binary files /dev/null and b/public/images/speakers.jpg differ
diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..fc47605
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,48 @@
+
+
+
+ Mutably front-end
+
+
+
+
+
+
+
+
+
+
GOOD MUSIC
+
You only need 6 albums to win.
+
+
+
+
+
+
ALBUMS
+
+
+
+
+
+
+
diff --git a/public/script.js b/public/script.js
index 35f3d68..8cbfc72 100644
--- a/public/script.js
+++ b/public/script.js
@@ -1,7 +1,101 @@
-console.log("Sanity Check: JS is working!");
+console.log("GOOD MUSIC is live!");
$(document).ready(function(){
- // code in here
+ // get all the data on load of the page
+ getAllalbums();
+ $('#new-album-form').on('submit', function(event) {
+ event.preventDefault()
+ var newAlbumData = $(this).serialize();
+ console.log(newAlbumData);
+ $(this).trigger("reset");
+ $.ajax({
+ method: 'POST',
+ url: 'https://mutably.herokuapp.com/albums/',
+ data: newAlbumData,
+ success: handleAlbumAddResponse
+ })
+ })
+
+ // becasue the delete-btn is added dynamically, the click handler needs to be written like such, bound to the document
+ $(document).on('click', '.delete-btn', function() {
+ var id = $(this).data('id')
+ $.ajax({
+ method: 'DELETE',
+ url: 'https://mutably.herokuapp.com/albums/'+id,
+ success: handleAlbumDeleteResponse
+ })
+ })
+
+ $(document).on('click', '.edit-btn', function() {
+ var id = $(this).data('id')
+
+ // hide the static name, show the input field
+ $('.name-'+id).hide()
+ $('.input-'+id).show()
+
+ // hide the edit button, show the save button
+ $('.edit-'+id).hide()
+ $('.save-'+id).show()
+
+ })
+
+ $(document).on('click', '.save-btn', function() {
+ var id = $(this).data('id')
+
+ // grab the user's inputted data
+ var updatedname = $('.input-'+id+' input').val()
+ $.ajax({
+ method: 'PUT',
+ url: 'https://mutably.herokuapp.com/albums/'+id,
+ data: {name: updatedname},
+ success: handleAlbumUpdateResponse
+ })
+ })
});
+
+function getAllalbums() {
+ $('.row').html('')
+ $.ajax({
+ method: 'GET',
+ url: 'https://mutably.herokuapp.com/albums'
+ }).done(function(data) {
+ for (var i=0; i'
+ +'
+ 
+ 