Week 11 Sandbox

Modules

Modules allow one to export part of a script to be used by other parts of a program, or by other users, distributed typically through a package manager. The export keyword specifies what to export, and can export function and object definitions or bindings. The import keyword imports what has been opened to use via export. Importing inside { } allows one to import just parts of a module (ex. a couple methods) where importing without { } imports whatever was exported using the default keyword.

Using modules allows a program to better split code into different parts, to avoid the "big ball of mud" issue often seen with poorly structured programs. Modules allow better defined encapsulation and provide specific interfaces via exports. Use of modules in functional programming allows encapsulation and use that would be hard to achieve otherwise.

        
          //AdditionModule.js

          function add(n, m){
            return n + m;
          }

          const style = {
            width: 100px;
            color: black;
          }

          //exports specified function binding and const
          export {add, style};
          //defines and exports function
          export function subtract(n, m){return n - m };
          //exports default as array of strings
          export default ["one", "two", "three"];

        
          //week11-practice.js

          import {add, subtract, style} from "./AdditionModule.js";
          import theDefault from "./AdditionModule.js";

          console.log(add(3,4));
          console.log(subtract(3,4));
          console.log(theDefault);
          console.log(style.color);

OUTPUT

        
        7
        -1
        Array(3) [ "one", "two", "three" ]
        black

Change Box Color

      
        //change color of div based on form input
        document.getElementById('color-form').addEventListener("submit", event => {
          event.preventDefault();
          document.getElementById('color-div').style.backgroundColor = document.getElementById('color-input').value;
        });

Read Book Descriptions via REST API

      
        //global variable to tell if book exists or not
        let bookExists = false;

        document.getElementById('book-form').addEventListener("submit", event => {
            //prevents page from re-loading
            event.preventDefault();
            let section = document.getElementById('book-section');

            //if book details already exist, remove
            if(bookExists)
              section.removeChild(document.getElementById("the-book"));

            //fetch book from google api based on input from form "book-section"
            fetch(`https://www.googleapis.com/books/v1/volumes?q=${document.getElementById('book-input').value}`,
                  {headers: {"Access-Control-Allow-Origin": '*'}})
            .then(resp => resp.json())
            .then(json => {
              //create book with unique id to allow removal for next book
              let book = document.createElement("div");
              book.setAttribute("id", "the-book");

              //add title and author
              book.appendChild(document.createElement("strong"))
                  .appendChild(document.createTextNode(json.items[0].volumeInfo.title + " by " + json.items[0].volumeInfo.authors));
              //double break via paragraph
              book.appendChild(document.createElement("p"));
              //add description
              book.appendChild(document.createTextNode(json.items[0].volumeInfo.description));

              //append book to section and set that book exists
              section.appendChild(book);
              bookExists = true;
            })
        });