At 10:12 put a capital S in readyState and you should be gucci! We can also post data using the JavaScript XMLHttpRequest. This time, we open it with a 'POST' attribute, set some headers specifying the content-type, and send it. We can register functions with the onreadystatechange to run code once we get a response. Link to challenge : https://www.freecodecamp.org/learn/data-visualization/json-apis-and-ajax/post-data-with-the-javascript-xmlhttprequest-method Concepts: XMLHttpRequest.readyState The XMLHttpRequest.readyState property returns the state an XMLHttpRequest client is in. https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/readyState XMLHttpRequest.status The read-only XMLHttpRequest.status property returns the numerical HTTP status code of the XMLHttpRequest's response. https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/status https://developer.mozilla.org/en-US/docs/Web/HTTP/Status XMLHttpRequest.onreadystatechange An EventHandler that is called whenever the readyState attribute changes. https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/onreadystatechange XMLHttpRequest.setRequestHeader() The XMLHttpRequest method setRequestHeader() sets the value of an HTTP request header. When using setRequestHeader(), you must call it after calling open(), but before calling send(). If this method is called several times with the same header, the values are merged into one single request header. https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/setRequestHeader JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate. https://www.json.org/json-en.html parse() The JSON.parse() method parses a JSON string, constructing the JavaScript value or object described by the string. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse stringify() The JSON.stringify() method converts a JavaScript object or value to a JSON string, optionally replacing values if a replacer function is specified or optionally including only the specified properties if a replacer array is specified. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify XMLHttpRequest XMLHttpRequest (XHR) objects are used to interact with servers. You can retrieve data from a URL without having to do a full page refresh. This enables a Web page to update just part of a page without disrupting what the user is doing. XMLHttpRequest is used heavily in AJAX programming. https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest XMLHttpRequest.open() The XMLHttpRequest method open() initializes a newly-created request, or re-initializes an existing one. ht ... https://www.youtube.com/watch?v=j4wM2L9xcUI

We can use hover effects to update the styling of our elements using the :hover CSS pseudo-class. Link to challenge : https://www.freecodecamp.org/learn/data-visualization/data-visualization-with-d3/add-a-hover-effect-to-a-d3-element Concepts: Hover The :hover CSS pseudo-class matches when the user interacts with an element with a pointing device, but does not necessarily activate it. It is generally triggered when the user hovers over an element with the cursor (mouse pointer). https://developer.mozilla.org/en-US/docs/Web/CSS/:hover selection.attr(name[, value]) If a value is specified, sets the attribute with the specified name to the specified value on the selected elements and returns this selection. If the value is a constant, all elements are given the same attribute value; otherwise, if the value is a function, it is evaluated for each selected element, in order, being passed the current datum (d), the current index (i), and the current group (nodes), with this as the current DOM element (nodes[i]). The function’s return value is then used to set each element’s attribute. A null value will remove the specified attribute. If a value is not specified, returns the current value of the specified attribute for the first (non-null) element in the selection. This is generally useful only if you know that the selection contains exactly one element. https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_attr -————————————————————————————————————- D3.js (also known as D3, short for Data-Driven Documents) is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. It makes use of Scalable Vector Graphics (SVG), HTML5, and Cascading Style Sheets (CSS) standards. freeCodeCamp (also referred to as “Free Code Camp”) is a non-profit organization that consists of an interactive learning web platform, an online community forum, chat rooms, online publications and local organizations that intend to make learning web development accessible to anyone. Beginning with tutorials that introduce students to HTML, CSS and JavaScript, students progress to project assignments that they complete either alone or in pairs. Upon completion of all project tasks, students are partnered with other nonprofits to build web applications, giving the students practical development experience. Thanks for Watching ... https://www.youtube.com/watch?v=P1TjH9_W4BU

This is a quick introduction to the Managing Packes with NPM course on freeCodeCamp. We look at the structure of a node project, mainly the package.json file and node_modules folder and how to submit the challenges using Glitch. Link to Challenge : https://www.freecodecamp.org/learn/apis-and-microservices/managing-packages-with-npm/ Written Guide : https://www.notion.so/ganeshh123/Introduction-to-the-Managing-Packages-with-npm-Challenges-8f6bed241f9a42339483a1fd29174c05 Full Playlist for this course : https://www.youtube.com/playlist?list=PLhGp6N0DI_1RO7qDtCW9Cn9FyRJ1Dk6xk All Writen Guides for this course : https://www.notion.so/ganeshh123/4d5e59dbe72940aeb68fe6f38ebf28e1 All My Tutorials can be found at : https://www.notion.so/Tutorials-Ganesh-H-293ea420d34a464f9a1907e0405b5f26 Concepts: npm npm is a package manager for the JavaScript programming language. It is the default package manager for the JavaScript runtime environment Node.js. It consists of a command line client, also called npm, and an online database of public and paid-for private packages, called the npm registry. https://www.npmjs.com/ package.json All npm packages contain a file, usually in the project root, called package.json - this file holds various metadata relevant to the project. This file is used to give information to npm that allows it to identify the project as well as handle the project's dependencies. It can also contain other metadata such as a project description, the version of the project in a particular distribution, license information, even configuration data - all of which can be vital to both npm and to the end users of the package. The package.json file is normally located at the root directory of a Node.js project. https://nodejs.org/en/knowledge/getting-started/npm/what-is-the-file-package-json/ node_modules Packages are dropped into the node_modules folder under the prefix. When installing locally, this means that you can require("packagename") to load its main module, or require("packagename/lib/path/to/sub/module") to load other modules. https://docs.npmjs.com/configuring-npm/folders.html#node-modules -————————————————————————————————————- The Node Package Manager (npm) is a command-line tool used by developers to share and control modules (or packages) of JavaScript code written for use with Node.js. freeCodeCamp (also referred to as “Free Code Camp”) is a non-profit organization that consists of an interactive learning web platform, an online community forum, chat rooms, online publications and local organizations that intend to make learning web development accessible to anyone. Beginning with tutorials that introduce students to HTML, CSS and JavaScript, students progres ... https://www.youtube.com/watch?v=0xlvK7Bt8vI

We're gonna change the presentation of our bar charts. We'll separate them out by adding some margins and multiplying our heights by a constant to scale the bars. Link to challenge : https://www.freecodecamp.org/learn/data-visualization/data-visualization-with-d3/change-the-presentation-of-a-bar-chart Concepts: selection.style(name[, value[, priority]]) If a value is specified, sets the style property with the specified name to the specified value on the selected elements and returns this selection. If the value is a constant, then all elements are given the same style property value; otherwise, if the value is a function, it is evaluated for each selected element, in order, being passed the current datum (d), the current index (i), and the current group (nodes), with this as the current DOM element (nodes[i]). The function’s return value is then used to set each element’s style property. A null value will remove the style property. An optional priority may also be specified, either as null or the string important (without the exclamation point). If a value is not specified, returns the current value of the specified style property for the first (non-null) element in the selection. The current value is defined as the element’s inline value, if present, and otherwise its computed value. Accessing the current style value is generally useful only if you know the selection contains exactly one element. https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_style selection.attr(name[, value]) If a value is specified, sets the attribute with the specified name to the specified value on the selected elements and returns this selection. If the value is a constant, all elements are given the same attribute value; otherwise, if the value is a function, it is evaluated for each selected element, in order, being passed the current datum (d), the current index (i), and the current group (nodes), with this as the current DOM element (nodes[i]). The function’s return value is then used to set each element’s attribute. A null value will remove the specified attribute. If a value is not specified, returns the current value of the specified attribute for the first (non-null) element in the selection. This is generally useful only if you know that the selection contains exactly one element. https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_attr D3.js (also known as D3, short for Data-Driven Documents) is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. It makes use of Scalable Vector Graphics (SVG), HTML5, and Cascading Style Sheets (CSS) standards. -————————————————————————————————————- D3.js (also known as D3, ... https://www.youtube.com/watch?v=UGLT8Z_G9vg