"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { code: "code", p: "p", pre: "pre", span: "span", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsx(_components.p, { children: "I will code a simple application that converts string JSON file to object with javascript and displays it in html format. Json file is used for transmitting data between a web application and a server. JSON is widely used in Ajax Web application programming. It has become increasingly popular as an alternative to XML." }), "\n", _jsx(_components.p, { children: "First, let's create our JSON file. I'm making the name of my file posts.json and I am entering four pieces of data" }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript", children: [_jsx(_components.span, { className: "token punctuation", children: "[" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "postTitle" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"Javascript\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "category" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"Software\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "reads" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "120" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "status" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token boolean", children: "true" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "postTitle" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"Asp.Net\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "category" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"Software\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "reads" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "190" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "status" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token boolean", children: "false" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "postTitle" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"The Wild One\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "category" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"Movie\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "reads" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "190" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "status" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token boolean", children: "true" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "postTitle" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"MMA\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "category" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"Sport\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "reads" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "244" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "status" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token boolean", children: "false" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }), "\n", _jsx(_components.p, { children: "Now let's create our script.js file. We will access our json file with this code." }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript", children: ["rawFile", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "open" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "\"GET\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string", children: "\"posts.json\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token boolean", children: "true" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }), "\n", _jsx(_components.p, { children: "We convert our Json file from string to object with the following code." }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript", children: [_jsx(_components.span, { className: "token keyword", children: "let" }), " posts ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token known-class-name class-name", children: "JSON" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "parse" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token keyword", children: "this" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "responseText" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\nrawFile", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "open" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "\"GET\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string", children: "\"posts.json\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token boolean", children: "true" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }), "\n", _jsx(_components.p, { children: "We print to html with forEach loop" }), "\n", _jsx(_components.p, { children: "And with this code we show it in div" }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript", children: [_jsx(_components.span, { className: "token dom variable", children: "document" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "querySelector" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "\"# posts\"" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "innerHTML" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " html", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }), "\n", _jsx(_components.p, { children: "script.js" }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript", children: [_jsx(_components.span, { className: "token dom variable", children: "document" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "querySelector" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "\"#getPost\"" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "addEventListener" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "\"click\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " loadPost", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n\n", _jsx(_components.span, { className: "token keyword", children: "function" }), " ", _jsx(_components.span, { className: "token function", children: "loadPost" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token keyword", children: "const" }), " rawFile ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "XMLHttpRequest" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n rawFile", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "open" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "\"GET\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string", children: "\"posts.json\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token boolean", children: "true" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n\n rawFile", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method-variable function-variable method function property-access", children: "onload" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "function" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token keyword control-flow", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token keyword", children: "this" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "status" }), " ", _jsx(_components.span, { className: "token operator", children: "===" }), " ", _jsx(_components.span, { className: "token number", children: "200" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token keyword", children: "let" }), " posts ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token known-class-name class-name", children: "JSON" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "parse" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token keyword", children: "this" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "responseText" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n\n ", _jsx(_components.span, { className: "token keyword", children: "let" }), " html ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token string", children: "\"\"" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n posts", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "forEach" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token parameter", children: "post" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n html ", _jsx(_components.span, { className: "token operator", children: "+=" }), " ", _jsxs(_components.span, { className: "token template-string", children: [_jsx(_components.span, { className: "token template-punctuation string", children: "`" }), _jsx(_components.span, { className: "token string", children: " \n

\n " }), _jsxs(_components.span, { className: "token interpolation", children: [_jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "${" }), "post", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "postTitle" }), _jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "}" })] }), _jsx(_components.span, { className: "token string", children: "\n

\n " }), _jsxs(_components.span, { className: "token interpolation", children: [_jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "${" }), "post", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "category" }), _jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "}" })] }), _jsx(_components.span, { className: "token string", children: "\n

\n " }), _jsxs(_components.span, { className: "token interpolation", children: [_jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "${" }), "post", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "reads" }), _jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "}" })] }), _jsx(_components.span, { className: "token string", children: "\n

\n " }), _jsxs(_components.span, { className: "token interpolation", children: [_jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "${" }), "post", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "status" }), _jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "}" })] }), _jsx(_components.span, { className: "token string", children: "\n

\n " }), _jsx(_components.span, { className: "token template-punctuation string", children: "`" })] }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token dom variable", children: "document" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "querySelector" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "\"#posts\"" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "innerHTML" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " html", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n rawFile", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "send" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }) }), "\n", _jsx(_components.p, { children: "Let's create our html code using bootstrap." }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript", children: [_jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "!" }), "doctype html", _jsx(_components.span, { className: "token operator", children: ">" }), "\n", _jsx(_components.span, { className: "token operator", children: "<" }), "html lang", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"en\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n\n", _jsx(_components.span, { className: "token operator", children: "<" }), "head", _jsx(_components.span, { className: "token operator", children: ">" }), "\n\t", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "!" }), _jsx(_components.span, { className: "token operator", children: "--" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "Required" }), " meta tags ", _jsx(_components.span, { className: "token operator", children: "--" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n\t", _jsx(_components.span, { className: "token operator", children: "<" }), "meta charset", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"utf-8\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n\t", _jsx(_components.span, { className: "token operator", children: "<" }), "meta name", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"viewport\"" }), " content", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"width=device-width, initial-scale=1, shrink-to-fit=no\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n\n\t", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "!" }), _jsx(_components.span, { className: "token operator", children: "--" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "Bootstrap" }), " ", _jsx(_components.span, { className: "token constant", children: "CSS" }), " ", _jsx(_components.span, { className: "token operator", children: "--" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n\t", _jsx(_components.span, { className: "token operator", children: "<" }), "link rel", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"stylesheet\"" }), " href", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n\t", _jsx(_components.span, { className: "token operator", children: "<" }), "link rel", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"stylesheet\"" }), " href", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"https://use.fontawesome.com/releases/v5.2.0/css/all.css\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n\t", _jsx(_components.span, { className: "token operator", children: "<" }), "link rel", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"stylesheet\"" }), " href", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"style.css\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n\t", _jsx(_components.span, { className: "token operator", children: "<" }), "title", _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "title", _jsx(_components.span, { className: "token operator", children: ">" }), "\n", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "head", _jsx(_components.span, { className: "token operator", children: ">" }), "\n\n", _jsx(_components.span, { className: "token operator", children: "<" }), "body", _jsx(_components.span, { className: "token operator", children: ">" }), "\n\n\t", _jsx(_components.span, { className: "token operator", children: "<" }), "div ", _jsx(_components.span, { className: "token keyword", children: "class" }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"container mt-2 bg-dark text-white\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n\n\t\t", _jsx(_components.span, { className: "token operator", children: "<" }), "div ", _jsx(_components.span, { className: "token keyword", children: "class" }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"row border border-white\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n\t\t\t", _jsx(_components.span, { className: "token operator", children: "<" }), "div ", _jsx(_components.span, { className: "token keyword", children: "class" }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"col-3\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n\t\t\t\t", _jsx(_components.span, { className: "token maybe-class-name", children: "Post" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "Title" }), "\n\t\t\t", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n\t\t\t", _jsx(_components.span, { className: "token operator", children: "<" }), "div ", _jsx(_components.span, { className: "token keyword", children: "class" }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"col-3\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n\t\t\t\t", _jsx(_components.span, { className: "token maybe-class-name", children: "Category" }), "\n\t\t\t", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n\t\t\t", _jsx(_components.span, { className: "token operator", children: "<" }), "div ", _jsx(_components.span, { className: "token keyword", children: "class" }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"col-3\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n\t\t\t\t", _jsx(_components.span, { className: "token maybe-class-name", children: "Reads" }), "\n\t\t\t", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n\t\t\t", _jsx(_components.span, { className: "token operator", children: "<" }), "div ", _jsx(_components.span, { className: "token keyword", children: "class" }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"col-3\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n\t\t\t\t", _jsx(_components.span, { className: "token maybe-class-name", children: "Status" }), "\n\t\t\t", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n\t\t", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n\t\t", _jsx(_components.span, { className: "token operator", children: "<" }), "div id", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"posts\"" }), " ", _jsx(_components.span, { className: "token keyword", children: "class" }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"row\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n\n\t\t", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n\t", _jsx(_components.span, { className: "token operator", children: "<" }), "button id", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"getPost\"" }), " ", _jsx(_components.span, { className: "token keyword", children: "class" }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"btn btn-secondary btn-lg\"" }), " ", _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token maybe-class-name", children: "Get" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "Posts" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "button", _jsx(_components.span, { className: "token operator", children: ">" }), "\n\t", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n\t", _jsx(_components.span, { className: "token operator", children: "<" }), "script src", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"https://code.jquery.com/jquery-3.3.1.slim.min.js\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "script", _jsx(_components.span, { className: "token operator", children: ">" }), "\n\t", _jsx(_components.span, { className: "token operator", children: "<" }), "script src", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "script", _jsx(_components.span, { className: "token operator", children: ">" }), "\n\t", _jsx(_components.span, { className: "token operator", children: "<" }), "script src", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"script.js\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "script", _jsx(_components.span, { className: "token operator", children: ">" }), "\n", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "body", _jsx(_components.span, { className: "token operator", children: ">" }), "\n\n", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "html", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }) }), "\n", _jsx(_components.p, { children: "The result is as in the image" }), "\n", _jsx("img", { className: "w-4/5", src: "https://res.cloudinary.com/djfqidbj1/image/upload/v1704624979/eiv7fmarianufwbgpjfq.jpg", alt: "onurtaskiran" }), "\n", _jsx(_components.p, { children: "That is all. Bye 😊" })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };