populate with content from JS3

Author: SallyMcGrath

.gitignore

@@ -0,0 +1,4 @@
+node_modules
+**/node_modules
+.DS_Store
+**/.DS_Store

.prettierrc

@@ -0,0 +1,19 @@
+{
+  "arrowParens": "always",
+  "bracketSpacing": true,
+  "embeddedLanguageFormatting": "auto",
+  "htmlWhitespaceSensitivity": "css",
+  "insertPragma": false,
+  "jsxBracketSameLine": false,
+  "jsxSingleQuote": false,
+  "printWidth": 80,
+  "proseWrap": "preserve",
+  "quoteProps": "as-needed",
+  "requirePragma": false,
+  "semi": true,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "useTabs": false,
+  "vueIndentScriptAndStyle": false
+}

Example-Image.jpeg

@@ -0,0 +1,17 @@
+# How To Get Help
+
+Learning to ask good questions is a key skill for a developer and you should practice this every week at CYF. You must spend a lot of time learning how to describe problems clearly and systematically:
+
+https://curriculum.codeyourfuture.io/guides/asking-questions
+
+Problem-solving is the real (marketable) skill of software developers. If you do not have questions to ask about your work, ask for some different work. Don't miss this opportunity to break down challenging problems with a large team of developers.
+
+## Reporting Issues in Coursework
+
+- Is there a problem with this coursework?
+- Have you noticed a bug?
+- Is there a typo or a mistake you can help clean up?
+
+Open an issue or PR directly to the main repo. CYF Curriculum is an Open Source project developed on GitHub and you are invited to contribute. Read the Issue Template carefully.
+
+https://github.com/CodeYourFuture/curriculum/

HOW-TO-GET-HELP.md

@@ -1,11 +1,7 @@
-<!--
-Do not edit this file.
-Make a change to the template and then pull changes
-Repo: https://github.com/CodeYourFuture/Module-Template
--->
-
 # Everyone reviews code at CYF
 
+https://curriculum.codeyourfuture.io/guides/reviewing/
+
 Mentors and trainees all review code, and collaborate on improving code quality. We are all helping each other to talk, write, and think about code more clearly.
 
 We are not reviewing code as if we were to merge this PR into production; we are opening a technical conversation for the purpose of insight and development.
@@ -53,14 +49,4 @@ Use these resources to inform your code review, get unstuck, and improve your un
 
 ## Guides
 
-Here's a detailed checklist of the sorts of things we should check code for:
-
-https://syllabus.codeyourfuture.io/guides/marking-guide
-
-Here's a detailed style guide to help us all write clear, high quality code:
-
-https://syllabus.codeyourfuture.io/guides/code-style-guide
-
-Here's some help with giving good feedback during code review:
-
-https://teachertraining.codeyourfuture.io/tasks/code-review
+https://curriculum.codeyourfuture.io/guides/reviewing/

HOW_TO_REVIEW.md

@@ -0,0 +1,13 @@
+import { title, author, pages, read } from "./index.js";
+
+const createBook = (title, author, pages, read) => {
+  const book = {
+    title,
+    author,
+    pages,
+    read,
+  };
+  return book;
+};
+
+export default createBook;

contributing.md

@@ -0,0 +1,18 @@
+import createBook from "./book";
+
+describe("createBook", () => {
+  test("should create a book object", () => {
+    const title = "The Shining";
+    const author = "Stephen King";
+    const pages = 447;
+    const read = true;
+    const book = createBook(title, author, pages, read);
+
+    expect(book).toEqual({
+      title: "The Shining",
+      author: "Stephen King",
+      pages: 447,
+      read: true,
+    });
+  });
+});

debugging/book-library/book.js

@@ -0,0 +1,10 @@
+import createBook from "./book.js";
+const addBook = (books, newBook) => [...books, newBook];
+
+// removeBook removes the book at the given index from the list of books
+const removeBook = (books, index) => [
+  ...books.slice(0, index),
+  ...books.slice(index + 1),
+];
+
+export { createBook, addBook, removeBook };

debugging/book-library/book.test.js

@@ -0,0 +1,40 @@
+import { createBook, addBook, removeBook } from "./books";
+
+describe("addBook", () => {
+  test("adds valid book to list", () => {
+    const books = [];
+    const newBook = createBook("ABC", "Author", 100, false);
+
+    const updatedBooks = addBook(books, newBook);
+
+    expect(updatedBooks).toEqual([newBook]);
+  });
+
+  test("does not add invalid book missing fields", () => {
+    const books = [];
+    const invalidBook = createBook("ABC");
+
+    const updatedBooks = addBook(books, invalidBook);
+
+    expect(updatedBooks).toEqual([]);
+  });
+});
+
+describe("removeBook", () => {
+  test("removes book at index", () => {
+    const books = [
+      createBook("A", "A", 1),
+      createBook("B", "B", 2),
+      createBook("C", "C", 3),
+    ];
+
+    const updatedBooks = removeBook(books, 1);
+
+    expect(updatedBooks).toEqual([
+      createBook("A", "A", 1),
+      createBook("C", "C", 3),
+    ]);
+  });
+});
+  });
+});

debugging/book-library/books.js

@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>My Book Library</title>
+    <link
+      href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
+      rel="stylesheet"
+    />
+  </head>
+
+  <body class="bg-gray-100 p-8 bg-gradient-to-r from-indigo-100">
+    <h1 class="text-8xl font-bold mb-4">My Book Library</h1>
+
+    <form id="add-book" class="bg-white p-4 rounded-lg shadow-md max-w-2xl">
+      <div class="mb-4">
+        <label for="titleInput" class="block font-bold">Title:</label>
+        <input
+          id="titleInput"
+          type="text"
+          name="titleInput"
+          class="border p-2 w-full"
+          required
+        />
+      </div>
+
+      <div class="mb-4">
+        <label for="authorInput" class="block font-bold">Author:</label>
+        <input
+          id="authorInput"
+          type="text"
+          name="authorInput"
+          class="border p-2 w-full"
+          required
+        />
+      </div>
+
+      <div class="mb-4">
+        <label for="pagesInput" class="block font-bold">Pages:</label>
+        <input
+          id="pagesInput"
+          type="number"
+          name="pagesInput"
+          class="border p-2 w-full"
+          min="1"
+          required
+        />
+      </div>
+
+      <div class="flex items-center mb-4">
+        <input id="readInput" name="readInput" type="checkbox" class="mr-2" />
+        <label for="readInput">Read</label>
+      </div>
+
+      <button
+        type="submit"
+        class="bg-blue-500 text-white py-2 px-4 rounded-lg hover:bg-blue-600"
+      >
+        Add Book
+      </button>
+    </form>
+
+    <table class="bg-white rounded-lg shadow-md mt-8 w-full">
+      <thead>
+        <tr>
+          <th>Title</th>
+          <th>Author</th>
+          <th>Pages</th>
+          <th>Read</th>
+          <th>Remove</th>
+        </tr>
+      </thead>
+      <template id="book-row" class="max-w-3xl">
+        <tr>
+          <td></td>
+          <td></td>
+          <td></td>
+          <td></td>
+          <td></td>
+        </tr>
+      </template>
+    </table>
+
+    <script>
+      const bookRowTemplate = document.getElementById('book-row');
+      const bookTable = document.querySelector('table');
+
+      const addBookForm = document.getElementById('add-book');
+      const titleInput = document.getElementById('titleInput');
+      const authorInput = document.getElementById('authorInput');
+      const pagesInput = document.getElementById('pagesInput');
+      const readInput = document.getElementById('readInput');
+
+      const books = [];
+
+      function addBook(e) {
+        e.preventDefault();
+
+        const book = {
+          title: titleInput.value,
+    </script>
+  </body>
+</html>

debugging/book-library/books.test.js

@@ -0,0 +1,56 @@
+import { addBook, removeBook, createBook, books } from "./books.js";
+
+// UI logic
+
+const addNewBook = (book) => {
+  books = addBook(books, book);
+  render();
+};
+
+const removeSelectedBook = (index) => {
+  books = removeBook(books, index);
+  render();
+};
+
+// get form elements
+const form = document.getElementById("add-book");
+const title = document.getElementById("titleInput");
+const author = document.getElementById("authorInput");
+const pages = document.getElementById("pagesInput");
+const read = document.getElementById("readInput");
+
+// Render UI
+const render = () => {
+  const template = document.getElementById("book-row");
+
+  const rows = books.map((book) => {
+    const row = template.content.cloneNode(true);
+
+    row.querySelector("[title]").textContent = book.title;
+    row.querySelector("[author]").textContent = book.author;
+    row.querySelector("[pages]").textContent = book.pages;
+    row.querySelector("[read]").textContent = book.read;
+
+    const removeBtn = row.querySelector("[remove]");
+
+    removeBtn.addEventListener("click", () => {
+      removeSelectedBook(books.indexOf(book));
+    });
+
+    bookList.appendChild(row);
+  });
+};
+
+// Event listeners
+form.addEventListener("submit", (e) => {
+  e.preventDefault();
+  const newBook = createBook(
+    title.value,
+    author.value,
+    pages.value,
+    read.checked
+  );
+  addNewBook(newBook);
+});
+
+export { title, author, pages, read };

debugging/book-library/index.html

@@ -0,0 +1,24 @@
+# My Book Library
+
+## topics: debugging, DOM
+
+My website should be able to:
+
+- View a list of books that I've read
+- Add books to a list of books that I've read
+  - Including title, author, number of pages and if I've read it
+  - If any of the information is missing it shouldn't add the book and should show an alert
+- Remove books from my list
+
+## Bugs to be fixed
+
+1. Website loads but nothing works in my javascript
+2. Website loads but nothing happens
+3. Error in console when you try to add a book
+4. It uses the title name as the author name
+5. Delete button is broken
+6. When I add a book that I say I've read - it saves the wrong answer
+
+I think there are other some other small bugs in my code...but I'm lazy so I can't fix them all.
+
+I wish somebody would help me!

debugging/book-library/index.js

@@ -0,0 +1,19 @@
+.form-group {
+  width: 400px;
+  height: 300px;
+  align-self: left;
+  padding-left: 20px;
+}
+
+.btn {
+  display: block;
+}
+
+.form-check-label {
+  padding-left: 20px;
+  margin: 5px 0px 5px 0px;
+}
+
+button.btn-info {
+  margin: 20px;
+}