Today I Learned Aug 7 (forgot to upload!)

[paulapereira1]

Just realized I somehow didn't upload last Friday's Today I Learned, sorry!

Note: This is all relevant to the Weekend Project:

How to make a new directory and files:

1. Cd into your main directory (i.e. Bootcamp)
2. mkdir name_of_directory
3. Cd into name_of_directory
4. touch newFileName.html // you can create multiple files at once (i.e. touch index.html styles.css data.js)
5. git init
6. code . // to open VSCode

How to set up your html, css and js files:

1. Begin in the HTML, use exclamation point + tab to create the standard html structure.
2. Modify the title name, and give it a header inside the body
3. Right after the title, link to your css style sheet: <link rel="stylessheet" href="styles.css"/>
4. Right before the closing body tag,</body>, link to your js file: <script src = "data.js"></script>
5. Add a <main></main> tag inside of the body; it is common practice to have all of your content inside of the main
6. To verify it works, use npx serve to create a local host 5000 To fetch the data from the google form:
7. Start by creating an empty variable with let (since it will be updated/changed later) called responses: let responses = [];
8. Create a function to fetch the data from an https link (i.e. in this case, it is fetching the user responses):

   const fetchUserResponses = async () => {
   const response = await fetch('https://docs.google.com/spreadsheets/d/e/2PACX-1vRA9KPqwDtGfWY4Zf-dnzQLbKHSrXvQUaHnawvJNTAcxe3JBTWPRhPkfIMiaSHBEIjVgjsFojzG_PQV/pub?output=csv');
   };

   Note: Cross Origin Resource Sharing (CORS) policy error is a security measure; solution is to put a server in between the two websites you are trying to work in between (i.e. Google Forms and your LocalHost5000); there’s a free website that helps us with that: http://cors-anywhere.herokuapp.com/

Note: Google “public apis” —> tools that people use to find free apis for web projects (Github option). Easiest one to work with/Sweet spot: Auth = No, HTTPS = Yes, CORS= Yes

3. Copy and paste the cors-anywhere url in front of the https url you are trying to fetch to create the server
4. Inside the fetchUserResponses function, add `const data = await response.text() in order to grab the structured data
5. To transform the structured text (CSV) into an array of objects, reach out to a third party JS library (Papa Parse) for a content delivery network (CDN). We copy their CDN and post in inside a script tag in our html (right before the .js file script tag):
6. Next, inside your fetchUserResponses function, add const result = Papa.parse(data, {header: true})
7. Then, updated the value of the results array by adding responses = results.data to the fetchUserResponses function
8. Create a new fetchAndShowResponses function to make sure we have the array of objects before sending it to the Dom i.e.

   const fetchAndShowResponses = async () => {
   await fetchUserResponses()

9. Create a new function renderUserResponses so that we can turn the array of objects into an array of html i.e.

   const renderUserResponse = userResponse => {
   console(userResponse);
   return ``;
   };

10. Update the fetchAndShowResponses function with Map and Join these to send them to the DOM i.e.

    const fetchAndShowResponses = async () => {
    await fetchUserResponses()
    const eachUserResponseHTML = responses.map(renderUserResponse);
    const allUserResponseHTML = eachUserResponseHTML.join('');
    };

11. Create a new section within the main of the HTML with an id of “user-responses”, we will be working in here for now, and query select that id into the js file i.e.

    const userResponseSection = document.querySelector('#user-responses')

12. Don’t forget to modify the fetchAndShowResponses function in order to set that equal to the allUserResponsesHTML i.e.

    const fetchAndShowResponses = async () => {
    await fetchUserResponses()
    const eachUserResponseHTML = responses.map(renderUserResponse);
    const allUserResponseHTML = eachUserResponseHTML.join('');
    userResponsesSection.innerHTML = allUserResponsesHTML;
    };

• When splitting a string of text, use .split(): “Hello my name is Paula.split(“is”) //This will split the sentence in two strings from “is”, so that you get everything on the left of “is”, and everything on the right, separated by a comma: [“Hello my name”,”Paula”] First item of the array:[0] Second item of the array: [1] […] i.e. “Hello my name is Paula.split(“is”) [1] Will return “Paula”
• ?search= at the end of a url will allow you to search within the dataset of an api i.e. ?search=Mario

How to make a new repository on GitHub

1. Go to GitHub
2. Click create new repository
3. Give your new repository a name and click “create the repository” below
4. Copy the url that you are given
5. On VS Code use git remote add origin insert_url_here
6. git push -u origin master
7. In GitHub, verify that your files are uploaded
8. In the same GitHub page, click “Settings”, scroll down to GitHub Pages and select “master” from the drop down menu and then click save
9. This will give you a URL // note: it doesn’t work immediately, wait about 15 minutes

Pending questions: In the video how did Andy modify multiple lines in the js at once? @andyweiss1982 Can we reference/modify (with CSS) JS variables? @andyweiss1982

[andyweiss1982]

I can use command + d to make multiple cursors in vscode: https://code.visualstudio.com/docs/editor/codebasics#_multiple-selections-multicursor

We can't modify JS with CSS, but we can modify CSS using JS!

document.body.style.backgroundColor = 'red', for example.