Open in app

Sign in

Write

Sign in

Greem
Greem

87 Followers

Home

Lists

About

Published in

JavaScript in Plain English

·Pinned

Styling React Forms with CSS

Your React Form works! congrats but now what. All the div boxes are stacked next to each other horizontally. It looks ugly as hell. Users…

CSS

4 min read

Styling React Forms with CSS
Styling React Forms with CSS
CSS

4 min read


Nov 20

JS Friday

code: https://github.com/labradorescence/phase-1-practice-friday-the-13th/tree/april18 vid: https://youtu.be/WsicDWRA8kY ## Challenge 1 For each movie returned from http://localhost:3000/movies create an image and add it to the movie-list nav element. $json-server --watch db.json - $open index.html - //index.js fetch("http://localhost:3000/movies") .then(response => response.json()) //1st .then return a promise…

5 min read

JS Friday
JS Friday

5 min read


Nov 20

JS Task Lister mini project

This lab doesn’t use fetch and it’s all about selecting DOM objects and manipulating. Deliverables As a user, I should be able to type a task into the input field. As a user, I should be able to click some form of a submit button. …

2 min read

2 min read


Nov 19

JS 012 — Communicating With External APIs

Define API. Give a few examples of APIs we’ve used. What can generally be found in API documentation? What is an API key? Where can we find instructions for getting and using an API key? Give an example of how an API key can be used. We are in our…

5 min read

JS 012 — Communicating With External APIs
JS 012 — Communicating With External APIs

5 min read


Nov 19

JS 011 — CRUD DELETE request

//line 42 // Create a DELETE request function deleteResource(url){ return fetch(url,{ method: 'DELETE', headers: { 'Content-Type': 'application/json', } }) .then(res => res.json()) } //line 83 function renderBookCard(cardData) { const li = document.createElement('li') li.className = 'list-li' //Event Listeners //* Pass Delete handler btn.addEventListener('click', (e)=> handleDelete(cardData.id, e.target.parentElement)) //* Add eventListener that will trigger an update when the value is changed pInventory.addEventListener('change', (e) => handleUpdateInventory(e.target.value, cardData.id)) li.append(h3,pAuthor,pPrice, pInventory, img, btn) document.querySelector('#book-list').append(li) }

1 min read

1 min read


Nov 19

JS 010 — CRUD Patch request

Lecture Goals Review how to send a PATCH request using HTML forms and JavaScript Review how to send a DELETE request using HTML buttons and JavaScript Explain the difference between optimistic and pessimistic rendering We start the server using json-server and add relative path depending on where your current directory is $json-server…

4 min read

JS 010 — CRUD Patch request
JS 010 — CRUD Patch request

4 min read


Nov 19

JS 009 — CRUD POST request

Observe how to send a POST request using HTML forms and JavaScript Explain the difference between optimistic and pessimistic rendering slide: reveal .md video: https://youtu.be/WCgaXe-b0YE lectures: https://docs.google.com/spreadsheets/d/1gp4m4u5ke1_qVa-KU9P4XZTvQCy933wvfn4DwIKYREU/edit#gid=0 Let’s code DRY (don’t repeat yourself) //index.js //line 61 //////////////////////////////////////////////////////////// // Invoking functions //initial store render…

4 min read

JS 009 — CRUD POST request
JS 009 — CRUD POST request

4 min read


Nov 19

JS 008 — CRUD GET Communicating With The Server

console.log resp.json() and data to get the Promise in the console fetch("http://localhost:3000/stores/") .then(resp => console.log(resp.json())) //this case it was fulfilled(resolved) .then(data => console.log(data)) .catch(err => console.error(err)) 2. .then method is Asynchronous code console.log("before fetch") fetch("http://localhost:3000/stores/") //promise .then method is asynchronously called from the…

3 min read

JS 008 — CRUD GET Communicating With The Server
JS 008 — CRUD GET Communicating With The Server

3 min read


Nov 19

JS 007 — CRUD GET Communicating With The Server

Explore the request-response cycle Review the differences between Server and Client List the different HTTP Verbs + corresponding actions Observe how to send GET requests using .fetch() Explain what Asynchronous means in JavaScript Explain why Promises are important in JavaScript Observe: Handling promises and errors using .then() and .catch() Using…

3 min read

JS 007 — CRUD GET Communicating With The Server
JS 007 — CRUD GET Communicating With The Server

3 min read


Nov 19

JS 006— DOM EVENT — FORM

Observe how to add a form to a webpage using HTML and JavaScript Observe how onSubmit events are used to receive information from Users via forms Explain the purpose of the .preventDefault() method Use MDN to discover and interact with JavaScript events Problem: Type anything in the form but we…

2 min read

JS 006— DOM EVENT — FORM
JS 006— DOM EVENT — FORM

2 min read

Greem

Greem

87 Followers
Following
  • Yaakov Bressler

    Yaakov Bressler

  • Women Who Code

    Women Who Code

  • MIT Media Lab

    MIT Media Lab

  • MDN

    MDN

  • Reinald Reynoso

    Reinald Reynoso

See all (37)

Help

Status

About

Careers

Blog

Privacy

Terms

Text to speech

Teams