Example of Fetch API in JAVASCRIPT step by step
1. create index.html
2. Style.css
3. Index.js
Below are the screenshots of complete code with explanation and screenshot website from where you have to take link of fake store API.
What Is ID?
An ID allows developers to identify a single element in the HTML code and apply a particular style to it. IDs are specific and targeted, similar to a proper noun. There can be multiple elements on a page, but the ID marks a specific element. Each element can only have one ID, and each page can only have one element with that specific ID.
What Is Class?
You should use a class if you need to use the same selector more than once within a page or a site. While an ID is specific to a single element, classes can be assigned to multiple elements on a page or throughout the website. They are not unique. And while a single element can only have one ID, it can have multiple classes.
Classes are denoted by a period, followed by the class name.
The <div> tag defines a division or a section in an HTML document. The <div> tag is used as a container for HTML elements — which is then styled with CSS or manipulated with JavaScript. The <div> tag is easily styled by using the class or id attribute. Any sort of content can be put inside the <div> tag! Nesting inline and block elements While nesting elements you should keep in mind, that there are inline and block elements. while block elements “add a line break in the background”, what means, other nested elements are shown in the next line automatically, inline elements can be positioned next to each other by default.
Both the margin property and the padding property insert space around an element. However, the difference is that margin inserts the space around the border, while padding inserts the space within the border of an element.
1. The box-sizing property allows us to include the padding and border in an element’s total width and height. If you set box-sizing: border-box; on an element, padding and border are included in the width and height: Both divs are the same size now!
2. em is a CSS unit relative to the font size of the parent element, while rem is a CSS unit relative to the font size of an html element. Both of these are scalable units, meaning they give us the ability to scale elements up and down, relative to a set value.
3. In a perfect world of browser support, the reason you’d choose to use flexbox is because you want to lay a collection of items out in one direction or another. As you lay out your items you want to control the dimensions of the items in that one dimension, or control the spacing between items.
4. The flex property sets the flexible length on flexible items. Note: If the element is not a flexible item, the flex property has no effect.
FETCH API
Definition and Usage
The fetch() method starts the process of fetching a resource from a server.
The fetch() method returns a Promise that resolves to a Response object.
Syntax
fetch(file)
Parameters
Parameter
Description
file
Optional.
The name of a resource to fetch.
Return Value
Description
A Promise that resolves to a Response object.
Browser Support
fetch() is an ECMAScript6 (ES6) feature.
ES6 (JavaScript 2015) is supported in all modern browsers:
JavaScript Array map() Method
The JavaScript map() method in JavaScript creates an array by calling a specific function on each element present in the parent array. It is a non-mutating method. Generally, the map() method is used to iterate over an array and calling function on every element of the array.
Syntax:
// Arrow function
map((element) => { /* … */ })
map((element, index) => { /* … */ })
map((element, index, array) => { /* … */ })
// Callback function
map(callbackFn)
map(callbackFn, thisArg)
// Inline callback function
map(function (element) { /* … */ })
map(function (element, index) { /* … */ })
map(function (element, index, array) { /* … */ })
map(function (element, index, array) { /* … */ }, thisArg)
Parameters: This method accepts two parameters as mentioned above and described below:
· function(currentValue, index, arr): It is a required parameter and it runs on each element of the array. It contains three parameters which are listed below:
· currentValue: It is a required parameter and it holds the value of the current element.
· index: It is an optional parameter and it holds the index of the current element.
· arr: It is an optional parameter and it holds the array.
· thisValue: It is an optional parameter and is used to hold the value passed to the function.
Return Value: It returns a new array and elements of arrays are the result of the callback function.
Definition and Usage
The getElementById() method returns an element with a specified value.
The getElementById() method returns null if the element does not exist.
The getElementById() method is one of the most common methods in the HTML DOM. It is used almost every time you want to read or edit an HTML element.
Note
Any id should be unique, but:
If two or more elements with the same id exist, getElementById() returns the first.
