Exercise init

README.md

@@ -0,0 +1,24 @@
+# Dog Owners
+
+In this exercise we practice using events and forms. This is a combo that you will find all the time when writing front-end applications. Your end result should be similar to below:
+
+![Result](dog_owner.gif)
+
+## Learning Objectives
+* Use event listeners to render dynamic content in response to a click event
+* Render dynamic content based on the contents of a submitted form 
+
+## Instructions Part 1
+- Use the provided `index.js` as a starting point.
+- You'll find a variable called `data` in the console.log. That's your **list of dogs**
+- Render the top list of dogs using the list item template you'll find on the HTML file
+- Each list item **should be clickable**. When you click on an item, the selected dog should display on the main card
+- The main card should contain all the information from the selected dog. **Follow the template for the main card that you'll find on the HTML file.**
+- There should be only **one card at the time** on the screen
+
+## Instructions Part 2
+- When the plus button is clicked, it should replace the main card with a form to add a new dog to the list. You'll find a template for the form on the HTML page. 
+- Once the form is submitted, add the new dog to the beginning of the list, right next to the plus button.
+
+## Instructions Part 3
+- The dog card should have a button that toggles for the selected dog between good dog/ bad dog

hints/hints.MD

@@ -0,0 +1,6 @@
+* Breakdown tasks a step at a time. Start by adding a list item to the top of the page for each dog.
+* Then, add an event listener on click.
+* Then, in that event listener, just display the dogs name on the page.
+* From there, you can build up the information on the card (add the image, then the bio, etc)
+
+Finally, if you are really stuck, you can use the `index-starting.js` file - copy the contents in to your index.js file and update the sections marked with `TODO`.

hints/index-starting.js

@@ -0,0 +1,163 @@
+
+function createDogListItem(dog){
+  const li = document.createElement("li");
+  const dogContainer = document.querySelector(".main");
+
+  li.className = "dogs-list__button";
+  li.innerText = dog.name;
+
+  // (1)
+  //TODO: Here, add a click event listener
+  //on to the li element. Inside that listener,
+  //call the createDogCard method and pass
+  //the dog variable as a parameter. You will
+  //also need to remove any existing dog card
+  //from the dogContainer
+
+  return li;
+};
+
+function createSection() {
+  const section = document.createElement("section");
+  section.className = "main__dog-section";
+  return section;
+};
+
+const createDogCardDesc = (bio) => {
+  const div = document.createElement("div");
+  div.className = "main__dog-section__desc";
+
+  //(2)
+  //TODO: Update this section to create new elements
+  //for the bio header and the bio text. Add those
+  //elements to the div.
+  div.append(header, text);
+
+  return div;
+};
+
+function createDogCardBottomSection(dog) {
+  const button = document.createElement("button");
+  const text = document.createElement("p");
+  const div = document.createElement("div");
+
+  div.className = "main__dog-section__btn";
+
+  // (6)
+  //TODO: If the isGoodDog flag is true, set
+  //the button text to "Bad Dog". If false,
+  //set it to "Good Dog"
+
+  div.append(text, button);
+  return div;
+};
+
+const createDogCard = (dog) => {
+  const section = createSection();
+  const header = document.createElement("h2");
+  header.innerText = dog.name;
+
+  // (3)
+  //TODO: Update this section to create a new image
+  //element and add it to the dog card. Set the source of 
+  //the image to the image path on the dog object
+
+  const desc = createDogCardDesc(dog.bio);
+  const bottomSection = createDogCardBottomSection(dog);
+
+  section.append(header, desc, bottomSection);
+
+  return section;
+};
+
+function createForm() {
+  const form = document.createElement("form");
+
+  const nameInput = createInput("name");
+  const imgInput = createInput("image", "url");
+  const bioInput = createInput("bio", "textarea");
+  const submitInput = createInput("submit", "submit", "Let's add a dog!");
+
+  const nameLabel = createLabel("name", "Dog's name");
+  const imgLabel = createLabel("image", "Dog's picture");
+  const bioLabel = createLabel("bio", "Dog's bio");
+
+  form.className = "form";
+  submitInput.className = "form__button";
+
+  //(5)
+  //TODO: Add an event listener on to the form to capture the
+  //submit event. In the submit event, add a item  to the
+  //list of dogs at the top of the page, and add a new object
+  //in to the dogs array with the data captured from the form.
+
+  form.append(
+    nameLabel,
+    nameInput,
+    imgLabel,
+    imgInput,
+    bioLabel,
+    bioInput,
+    submitInput
+  );
+  return form;
+};
+
+function createInput(idName, type = "text", value) {
+  let input = null;
+
+  if (type === "textarea") {
+    input = document.createElement("textarea");
+    input.setAttribute("rows", "5");
+  } else {
+    input = document.createElement("input");
+    input.setAttribute("type", type);
+  }
+
+  input.setAttribute("id", idName);
+  input.setAttribute("name", idName);
+
+  if (value) input.setAttribute("value", value);
+
+  return input;
+}
+
+function createLabel(forAttr, text) {
+  const label = document.createElement("label");
+  label.attributes.for = forAttr;
+  label.innerText = text;
+
+  return label;
+};
+
+function renderMainForm() {
+  const section = createSection();
+  const form = createForm();
+  const h2 = document.createElement("h2");
+
+  h2.innerText = "Add a new Dog";
+
+  section.append(h2, form);
+
+  return section;
+};
+
+function renderDogList(dogsArr) {
+  const listContainer = document.querySelector(".dogs-list");
+  for (const dog of dogsArr) {
+    const item = createDogListItem(dog);
+    listContainer.append(item);
+  }
+};
+
+renderDogList(data);
+
+const formButton = document.querySelector(".dogs-list__button--add");
+const dogContainer = document.querySelector(".main");
+
+// (4)
+//TODO: Add an event listener on to form button so that
+//when the user clicks the button, the form is displayed.
+//the renderMainForm method will return an element that
+//contains the form, so you only need to add it to the 
+//dogContainer and remove any existing children.

index.html

@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>JS</title>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="style.css" />
+    <script type="text/javascript" src="src/data.js"></script>
+    <script defer src="src/index.js"></script>
+  </head>
+  <body>
+    <header class="header">
+      <h1>The Show Off Dog Owner's App</h1>
+      <ul class="dogs-list">
+        <li class="dogs-list__button dogs-list__button--add">+</li>
+      </ul>
+    </header>
+    <main class="main">
+      <section class="main__dog-section">
+        <h2>No dogs ?!?</h2>
+      </section>
+    </main>
+  </body>
+</html>
+
+<!-- 
+  This is a template for the dog list item
+
+  <li class="dogs-list__button">Mr. Bonkers</li> 
+
+-->
+
+<!-- This is a template for the main dog card -->
+
+<!-- <section class="main__dog-section">
+        <h2>Mr. Bonkers</h2>
+        <img
+          src="https://curriculum-content.s3.amazonaws.com/js/woof-woof/dog_1.jpg"
+          alt=""
+        />
+        <div class="main__dog-section__desc">
+          <h3>Bio</h3>
+          <p>
+            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Harum,
+            minima voluptates libero cumque rerum consequatur optio aliquid sint
+            eum maxime illo laborum omnis quo ab rem cupiditate nulla
+            perspiciatis ipsum!
+          </p>
+        </div class="main__dog-section__btn">
+        <p><em>Is naughty?</em> yes!</p>
+        <button>Good dog!</button>
+  </section>  -->
+
+<!-- 
+    This is a template for the add dog form
+
+    <section class="main__dog-section">
+      <h2>Add a new Dog</h2>
+      <form class="form">
+
+        <label for="name">Dog's name</label>
+        <input type="text" id="name" name="name">
+
+        <label for="image">Dog's picture</label>
+        <input type="url" id="image" name="image">
+
+        <label for="bio">Dog's bio</label>
+        <textarea rows="5" id="bio" name="bio"></textarea>
+
+        <input type="submit" id="submit" name="submit" value="Let's add a dog!" class="form__button">
+      </form>
+  </section>
+   -->

src/data.js

@@ -0,0 +1,71 @@
+const data = [
+  {
+    id: 1,
+    name: "Mr. Bonkers",
+    bio: `Lorem, ipsum dolor sit amet consectetur adipisicing elit. Harum,
+            minima voluptates libero cumque rerum consequatur optio aliquid sint
+            eum maxime illo laborum omnis quo ab rem cupiditate nulla
+            perspiciatis ipsum!`,
+    isGoodDog: true,
+    image: "https://curriculum-content.s3.amazonaws.com/js/woof-woof/dog_1.jpg"
+  },
+  {
+    id: 2,
+    name: "Nugget",
+    bio: `Bio 2`,
+    isGoodDog: false,
+    image: "https://curriculum-content.s3.amazonaws.com/js/woof-woof/dog_2.jpg"
+  },
+  {
+    id: 3,
+    name: "Skittles",
+    bio: `Lorem, ipsum dolor sit amet consectetur adipisicing elit. Harum,
+            minima voluptates libero cumque rerum consequatur optio aliquid sint
+            eum maxime illo laborum omnis quo ab rem cupiditate nulla
+            perspiciatis ipsum!`,
+    isGoodDog: true,
+    image: "https://curriculum-content.s3.amazonaws.com/js/woof-woof/dog_3.jpg"
+  },
+  {
+    id: 4,
+    name: "Buttercup",
+    bio: `Lorem, ipsum dolor sit amet consectetur adipisicing elit. Harum,
+            minima voluptates libero cumque rerum consequatur optio aliquid sint
+            eum maxime illo laborum omnis quo ab rem cupiditate nulla
+            perspiciatis ipsum!`,
+    isGoodDog: false,
+    image: "https://curriculum-content.s3.amazonaws.com/js/woof-woof/dog_4.jpg"
+  },
+  {
+    id: 5,
+    name: "Lucipher",
+    bio: `Lorem, ipsum dolor sit amet consectetur adipisicing elit. Harum,
+            minima voluptates libero cumque rerum consequatur optio aliquid sint
+            eum maxime illo laborum omnis quo ab rem cupiditate nulla
+            perspiciatis ipsum!`,
+    isGoodDog: false,
+    image: "https://curriculum-content.s3.amazonaws.com/js/woof-woof/dog_5.jpg"
+  },
+  {
+    id: 6,
+    name: "Snooper Pooper",
+    bio: `Lorem, ipsum dolor sit amet consectetur adipisicing elit. Harum,
+            minima voluptates libero cumque rerum consequatur optio aliquid sint
+            eum maxime illo laborum omnis quo ab rem cupiditate nulla
+            perspiciatis ipsum!`,
+    isGoodDog: false,
+    image: "https://curriculum-content.s3.amazonaws.com/js/woof-woof/dog_6.jpg"
+  },
+  {
+    id: 7,
+    name: "Puddles",
+    bio: `Lorem, ipsum dolor sit amet consectetur adipisicing elit. Harum,
+            minima voluptates libero cumque rerum consequatur optio aliquid sint
+            eum maxime illo laborum omnis quo ab rem cupiditate nulla
+            perspiciatis ipsum!`,
+    isGoodDog: true,
+    image: "https://curriculum-content.s3.amazonaws.com/js/woof-woof/dog_7.jpg"
+  }
+];
+
+window.data = data;

src/index.js

@@ -0,0 +1,3 @@
+console.log(data);
+
+// WRITE YOUR CODE BELOW!