Today I Learned 08/11

[paulapereira1]

Basics & Refreshers

• By default, if a dialog tag doesn’t have an open attribute, it has display none (aka, you can’t see it)…in order to unhide, especially when the user clicks a button, we can do so by:
  1. Declare a const with a query selector the modal and the button the user will click: i.e.

     const showFormButton = document.querySelector('#show-form')
     const modal = document.querySelector('dialog')

  2. Declare a function for the open modal: i.e.

     const openModal = () => {
     modal.open = true
     }

  3. And add an event listener so that when the user clicks, it will open: i.e. showFormButton.addEventListener('click', openModal)
• In order to close the dialog…
  1. First, declare a function…

     const handleModalClick = (event) => {
     if(!event.target.closest('form’)) {   // `!` or bang is used to “flip” a boolean; this is used to see if the click was made by the user outside of the form 
     modal.open = false
     }}

  2. Create an event listener so that the function works: modal.addEventListener('click',handleModal)
• Setting width: 100vw and height: 100vh = 100% of the viewport width and 100% of the viewport height
• Alignment of displays:

  Display: flex; 
  justify-content: center;
  align-items: center; 
  Is the same as 
  Display: grid;
  place-items: center; 

• To make an entire element invisible set opacity: 0 in CSS
• To make sure the same function runs with the key up:

  function handleKeyUp(event){
  }
  window.addEventListener('keyup’, handleKeyUp) // adding the event listener to a window

• When you want a button to always stick to the bottom right of the page: i.e

  button#show-form {
  Position: fixed;
  Bottom: 2rem;
  Right: 2rem;
  Width: 3rem
  Height: 4rem;
  }

• .createContextualFragment(html) and .prepend(fragment) allows us to work on a string of html and can be queried like a DOM element, even though it’s not in the DOM yet i.e.

  const fragment = document.createRange.createContextualFragment(html) //the `.createRange` acts as a stepping stone to `.createContextualFragment`
  tasksList.prepend(fragment) // `.prepend` is used here instead of `.innerHTML` since we used `.createContextualFragment` and it will take new input items to the top of the list; vs. `.append` will take new input items to the bottom of the list 

• Dot notation only works with single words, as soon as you have a space (two or more words), you have to use quotes i.e. const location = {Canada: 0, ‘United States’: 0}

Building our own API API server = long-lived process (stored data) Reference: https://repl.it/@andyweiss1982/MyFirstAPI

• First, create a Node.js
• Use express: const express = require(“express”) // within the node.js environment, this allows us to get access to a registry of third party snippets of codes; here specifically we are looking for the package/function express
• To call the function: const app = express()

  Expose the server to the world using (port 3000 often used): App.listen(3000,() => console.log(“Server is on”))

  Most important http verbs (Restful Architecture):

  1. GET request = API will get some information (i.e. fetch a task) i.e.

     app.get(“/message”, (_request, response) => {
     response.json({hello: “world”}) // The use of `_` here before request just means that we don’t need the request right now
     })

  2. POST request = API will create something new (i.e. create a new task)
  3. PUT/PATCH request = API will update some information that is already stored (i.e. mark an existing task as complete)
  4. DELETE request = API deletes some existing information
  5. HEAD request = is everything okay? (Summary information) ^These are important because the way you communicate with an API depends on the url we use and the verb we use
• Postman is an app we will be using that is useful when testing requests

Help Wanted: filters and charts for some reason still don't work on my weekend projection website :( @Limlight86

[paulapereira1]

Homework: https://repl.it/@ppereira1/BackToTheFrontEnd#script.js