W2D1 Today I Learned

[paulapereira1]

Basic Commands & Refreshers

• When setting an empty link, make sure to add # to the href i.e.

  <a href=“#”></a>

• object-fit:cover won't crop your images
• When creating an image that links to another webpage (i.e. a logo)

  <a href=“#”> <image src=“imagesource” alt=“logo” /></a>

• Don't forget to use <buttons> when creating buttons for your page i.e <button>sign up </button>. Reminder: for accessibility purposes, don't use divs as buttons!
• To create a button with an image i.e. shopping cart button

  <button>
  <img src=“imagesource” alt=“Cart”/>
  <span>0</span> // this would have to be updated as a function once actually running the website with JS 
  </button>

• Use dev tools to help debug through console and elements.style{} to test modifications
• Define images with id/classes (classes preferred) so that it’s easy to modify
• Display flex defaults to positioning items/elements into a row; for column use display: flex-direction column
• For bugs, the first part is the name of the file and extension, and the first number refers to the line where the error can be found i.e. script.js:24:9

Creating a grid in JS using map, join, and the categories Pre-set up:

1. Create an array with a function withconst functionname = [{}] i.e.

   const categories = [
   {
   name: "chicken sandwich", 
   icon: "🍔",
   image: "https://cdn.sanity.io/images/czqk28jt/prod_plk_us/7304dfe16fc5c9b945b5450f0a208583a0acaa6c-8116x6612.jpg?w=750&fm=webp&q=40&fit=max"
   },

2. Rendering category and defining a parameter i.e.

   const renderCat = categories => `
   <section style="border: 2px solid;">
   <h2>${categories.name} ${categories.icon}</h2>
   <img src="${categories.image}" alt="${categories.name}" id="image"/>
   <a href="${categories.link}" id="link"></a>
   </section>

   Step 1: Select the main element

   const main = document.querySelector("main") // connects you to main tag on HTML

   Step 2:Use map and join to transform the categories array into a single string of HTML that represents one card for each category

   const eachCatHTML = categories.map(renderCat)
   const allCatHTML = eachCatHTML.join("")

   Step 3: Insert that HTML into the main element

   main.innerHTML = allCatHTML

   Reference: https://repl.it/@ppereira1/MiniPopeyesMenu#script.js

Popeyes Menu Website (weekend Project)

CSS for Nav (where I had the hardest time -- reference step-by-step by Shaila)

1. Body: Start with setting up a background color within the body, as well as defining the font-family that will be used across the page. Also add margin:0 so that it defaults to the full page length i.e.

   Body {
   background-color: white;
   Font-family: “chicken-sandwich”;
   Margin: 0;
   }

2. Nav: Set background color. Use display flex to make elements display in a row (instead of a column by default). Use justify-content to add spacing between elements and align-items to align the elements horizontally. Use position: fixed so that it remains locked over the page as you scroll. Add z-index in order to layer elements over each other. Overflow scroll will allow your page to be responsive with scrolling it to the side when the screen is smaller. i.e.

   Nav {
   Background-color: white;
   display: flex;
   justify-content: space-between;
   align-items: center;
   position: fixed;
   padding: 18px 40px;
   z-index: 1;
   top: 0;
   right: 0;
   left: 0;
   max-width: 100%;
   overflow: auto;
   }

3. Nav Elements: To target elements within the nav (i.e. links with a tags) use nav a{}. Use text-decoration to remove the underline that defaults with links. Adjust color and font size. Use :hover to define action when someone hovers over the links (i.e. change color). i.e.

nav a{
text-decoration: none;
color: black;
Font-size: 1.5rem;
Padding-right: 1.5rem;
}
nav a:hover{
color: grey 
}

4. Nav Elements: Give the Popeyes logo a class so that it can be targeted specifically. Set a proportion using width so that you can just set (this is only true because the logo is wrapped but an a tag). i.e.

   .popeyeslogo {
   Width: 100%;
   }

5. Nav Elements: To adjust buttons first define a class for the buttons. Use a div to wrap the button elements and arrange them horizontally instead of vertically, align and add padding i.e.

   .rightNavWrapper{
   Display: flex;
   Align-items: center;
   Padding: 5 px;
   }

Override native button display i.e. make it look less like an old-school button and customize the style

.signupbutton{
Background-color: orange;
color: white;
border: none;
Padding: 0.5rem 2rem; // first number defines top and bottom, second number defines left and right
Border-radius: 1 rem;
Text-transform: uppercase;
Letter-spacing: 0.5px;
Cursor: pointer;
}

.Json .Json is a universally accepted standard to transmit code to the internet (any language can speak back and forth using Jason) Important considerations when using .json

• Very similar to JavaScript language style
• All the code must be inserted within {}
• async is used when declaring a function that happens asynchronously. It is often paired with await command. Once you await inside a function, you must mark the function as async

• Use this when fetching data-within-data (i.e. list of followers); not a normal url, but a url that contains an array of data within itself i.e.

  const renderRepo = repository => `
  <li>
  <a 
    href="${repository.html_url}"
    target="_blank"
  >${repository.name}</a>
  </li>
  `
  const fetchRepos = async reposUrl => {
  const response = await fetch(reposUrl)
  const reposData = await response.json()
  
  const reposUl = document.querySelector('#repositories')
  
  const eachRepoHTML = reposData.map(renderRepo)
  const allReposHTML = eachRepoHTML.join("")
  reposUl.innerHTML = allReposHTML
  }

  Reference: https://repl.it/@ppereira1/GithubProfileAPI#script.js