var d=Object.defineProperty,c=Object.defineProperties;var m=Object.getOwnPropertyDescriptors;var t=Object.getOwnPropertySymbols;var r=Object.prototype.hasOwnProperty,o=Object.prototype.propertyIsEnumerable;var F=(e,n,s)=>n in e?d(e,n,{enumerable:!0,configurable:!0,writable:!0,value:s}):e[n]=s,a=(e,n)=>{for(var s in n||(n={}))r.call(n,s)&&F(e,s,n[s]);if(t)for(var s of t(n))o.call(n,s)&&F(e,s,n[s]);return e},l=(e,n)=>c(e,m(n));var i=(e,n)=>{var s={};for(var p in e)r.call(e,p)&&n.indexOf(p)<0&&(s[p]=e[p]);if(e!=null&&t)for(var p of t(e))n.indexOf(p)<0&&o.call(e,p)&&(s[p]=e[p]);return s};const makeShortcode=e=>function(s){return console.warn("Component "+e+" was not imported, exported, or provided by MDXProvider as global scope"),mdx("div",a({},s))},Callout=makeShortcode("Callout"),layoutProps={},MDXLayout="wrapper";function MDXContent(s){var p=s,{components:e}=p,n=i(p,["components"]);return mdx(MDXLayout,l(a(a({},layoutProps),n),{components:e,mdxType:"MDXLayout"}),mdx("p",null,"So in this piece, I am building a grammar checker app that will show us different grammar errors. So without any further ado, let\u2019s jump in!"),mdx("h2",a({},{id:"stack"}),mdx("a",a({parentName:"h2"},{href:"#stack"}),"Stack")),mdx("p",null,"We need to choose a stack first to build this application. I have decided to go with the ",mdx("a",a({parentName:"p"},{href:"https://jamstack.org/"}),"Jamstack"),"."),mdx("p",null,"I am going to use ",mdx("a",a({parentName:"p"},{href:"https://nextjs.org/"}),"Next.js")," for the frontend and ",mdx("a",a({parentName:"p"},{href:"https://tailwindcss.com/"}),"TailwindCSS")," for the styling."),mdx("p",null,"If you don\u2019t know about Next.js, it is a JavaScript framework built on top of React and provides features like server-side rendering, static site generation, etc. Tailwind is a CSS framework that provides utility classes to speed up the development process."),mdx("h2",a({},{id:"choosing-the-api"}),mdx("a",a({parentName:"h2"},{href:"#choosing-the-api"}),"Choosing The API")),mdx("p",null,"Let\u2019s find an API that we can use to check the grammar. Go to ",mdx("a",a({parentName:"p"},{href:"https://RapidAPI.com/hub"}),"RapidAPI Hub")," and ",mdx("a",a({parentName:"p"},{href:"https://RapidAPI.com/auth/sign-up?referral=/hub"}),"create an account")," if you haven\u2019t already and then search for \u201Cgrammar api\u201D in the search section."),mdx(Callout,{title:"Deep dive",linkText:"Read more",linkHref:"https://rapidapi.com/learn/hub",mdxType:"Callout"},"Learn more about how to use RapidAPI Hub."),mdx("p",null,"You will see different search results related to grammar APIs. For this piece, I am using ",mdx("a",a({parentName:"p"},{href:"https://RapidAPI.com/grammarbot/api/grammarbot"}),"GrammarBot API"),"."),mdx("p",null,"To use this API, you need to subscribe to it first. You can do this by clicking on ",mdx("strong",{parentName:"p"},"Subscribe to Test")," button."),mdx("img",a({},{src:"https://devrelstack.kinsta.cloud/wp-content/uploads/2022/05/subscribe-9.png",alt:"Subscribe to GrammarBot API"})),mdx("p",null,"Once you click the button, you will be redirected to another page where different available subscription packages will be shown. Let\u2019s go with the free one for now."),mdx("p",null,"After all this, you will be redirected back to the original page. Here you will have a key ",mdx("inlineCode",{parentName:"p"},"x-rapidapi-key"),". Save it. It will be used later in the application."),mdx("h2",a({},{id:"building-the-ui"}),mdx("a",a({parentName:"h2"},{href:"#building-the-ui"}),"Building The UI")),mdx("p",null,"You can create a Next.js boilerplate with TailwindCSS integrated by running the following command in your terminal. So let\u2019s do that."),mdx("pre",a({},{className:"shiki Shades of Purple",style:{backgroundColor:"#2D2B55",color:"#FFFFFF"}}),mdx("div",a({parentName:"pre"},{className:"language-id"}),"sh"),mdx("div",a({parentName:"pre"},{className:"code-container"}),mdx("code",{parentName:"div"},mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}}),"npx create-next-app -e with-tailwindcss grammar-checker-app"))))),mdx("p",null,"This command is going to take a minute to set everything up. After generating the boilerplate, you will see a folder with the name ",mdx("inlineCode",{parentName:"p"},"grammar-checker-app")," has been created. Open this folder in your preferred code editor. I will use ",mdx("a",a({parentName:"p"},{href:"https://code.visualstudio.com/"}),"VSCode")," for this project."),mdx("h3",a({},{id:"project-files"}),mdx("a",a({parentName:"h3"},{href:"#project-files"}),"Project Files")),mdx("p",null,"When you open the project in your code editor, you will see the following directories and files in the root directory:"),mdx("ul",null,mdx("li",{parentName:"ul"},mdx("inlineCode",{parentName:"li"},"pages")," directory: Inside it, you will have files ",mdx("inlineCode",{parentName:"li"},"index.js"),", ",mdx("inlineCode",{parentName:"li"},"_app.js"),", and another directory called ",mdx("inlineCode",{parentName:"li"},"api"),". You only need to know about the ",mdx("inlineCode",{parentName:"li"},"index.js")," file that is the main entry point in your project."),mdx("li",{parentName:"ul"},mdx("inlineCode",{parentName:"li"},"public")," directory: This directory contains icons. You place your static files here to load later in the application."),mdx("li",{parentName:"ul"},mdx("inlineCode",{parentName:"li"},"node_modules"),": It\u2019s another directory that contains all the node modules you are using in your application."),mdx("li",{parentName:"ul"},mdx("inlineCode",{parentName:"li"},"package.json"),": This file contains the metadata of your project."),mdx("li",{parentName:"ul"},mdx("inlineCode",{parentName:"li"},"package-lock.json"),": This file is responsible for tracking the exact version of every installed package."),mdx("li",{parentName:"ul"},mdx("inlineCode",{parentName:"li"},"postcss.config.js"),": This file contains ",mdx("a",a({parentName:"li"},{href:"https://github.com/postcss/postcss"}),"PostCSS")," configurations."),mdx("li",{parentName:"ul"},mdx("inlineCode",{parentName:"li"},"tailwind.config.js"),": It contains ",mdx("a",a({parentName:"li"},{href:"https://tailwindcss.com/"}),"TailwindCSS")," configurations."),mdx("li",{parentName:"ul"},mdx("inlineCode",{parentName:"li"},"readme.md"),": It\u2019s a markdown file for documentation.")),mdx("p",null,"Before we move on to writing the code, open ",mdx("a",a({parentName:"p"},{href:"https://github.com/RapidAPI/DevRel-Examples-External/blob/main/grammar-checker-app/tailwind.config.js"}),"this")," file, and copy all of its content, then paste it inside the ",mdx("inlineCode",{parentName:"p"},"tailwind.config.js")," file in your project. These are some TailwindCSS configurations I have done specifically for this project. I have added some colors that you do not have by default with TailwindCSS and set some screen sizes."),mdx("p",null,"Now let\u2019s start writing the code. I am going to do it in steps so you can follow along:"),mdx("h3",a({},{id:"-step-1"}),mdx("a",a({parentName:"h3"},{href:"#-step-1"}),"\u2192 STEP #1")),mdx("p",null,"Open the ",mdx("inlineCode",{parentName:"p"},"pages/index.js")," file and remove all the existing code. After this, copy-paste the following code there:"),mdx("pre",a({},{className:"shiki Shades of Purple",style:{backgroundColor:"#2D2B55",color:"#FFFFFF"}}),mdx("div",a({parentName:"pre"},{className:"language-id"}),"jsx"),mdx("div",a({parentName:"pre"},{className:"code-container"}),mdx("code",{parentName:"div"},mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"export"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"default"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"function"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"Home"),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"()"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"return"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"(")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"div "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"flex flex-col items-center relative min-h-screen"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"h2 "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," Grammar "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"span "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"text-danger"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">"),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}}),"Checker"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),""),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," App")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"h3 "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"text-lightYellow text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," Check to see if what you have written is Grammarly correct")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}"))))),mdx("p",null,"It will create two headings for you with the text \u201CGrammar Checker App\u201D and \u201CCheck to see if what you have written is Grammarly correct\u201D. You can change it to anything you prefer."),mdx("h3",a({},{id:"-step-2"}),mdx("a",a({parentName:"h3"},{href:"#-step-2"}),"\u2192 STEP #2")),mdx("p",null,"Now let\u2019s create two text areas, one for user content and the other to show the grammar mistakes, and a check button. For this, copy the following code and paste it in ",mdx("inlineCode",{parentName:"p"},"pages/index.js"),":"),mdx("pre",a({},{className:"shiki Shades of Purple",style:{backgroundColor:"#2D2B55",color:"#FFFFFF"}}),mdx("div",a({parentName:"pre"},{className:"language-id"}),"jsx"),mdx("div",a({parentName:"pre"},{className:"code-container"}),mdx("code",{parentName:"div"},mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"export"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"default"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"function"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"Home"),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"()"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"return"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"(")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"div "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"flex flex-col items-center relative min-h-screen"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"h2 "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," Grammar "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"span "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"text-danger"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">"),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}}),"Checker"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),""),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," App")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"h3 "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"text-lightYellow text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," Check to see if what you have written is Grammarly correct")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"div "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"flex justify-between w-5/6 h-96 mt-8 md:flex-col md:items-center md:justify-start"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"textarea")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"type"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"text"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"')),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"border border-primary outline-none w-2/5 px-4 py-2 rounded-sm font-raleway bg-bc text-primary md:w-full"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"')),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"placeholder"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"Write/paste any content..."),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"')),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"autoFocus"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#FF628C"}}),"true"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"/>")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"div "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"flex items-center"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"button "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"h-1/6 outline-none border border-danger font-bold font-raleway mx-12 px-12 rounded-sm bg-danger text-bc transition duration-300 hover:bg-bc hover:text-primary md:h-16 md:my-12"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," Check")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"textarea")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"type"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"text"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"')),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"border border-primary outline-none w-2/5 px-4 py-2 rounded-sm font-raleway bg-bc text-primary md:w-full"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"')),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"placeholder"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"See if its correct..."),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"')),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"readOnly"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#FF628C"}}),"true"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"/>")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}"))))),mdx("p",null,"This code is going to create two text areas and a button. I have also styled them a little bit using ",mdx("a",a({parentName:"p"},{href:"(https://tailwindcss.com/)"}),"TailwindCSS"),"."),mdx("h3",a({},{id:"-step-3"}),mdx("a",a({parentName:"h3"},{href:"#-step-3"}),"\u2192 STEP #3")),mdx("p",null,"Let\u2019s create some states to store the user content and the response that we will receive from the API. For this, copy-paste the following code in ",mdx("inlineCode",{parentName:"p"},"pages/index.js"),"."),mdx("pre",a({},{className:"shiki Shades of Purple",style:{backgroundColor:"#2D2B55",color:"#FFFFFF"}}),mdx("div",a({parentName:"pre"},{className:"language-id"}),"jsx"),mdx("div",a({parentName:"pre"},{className:"code-container"}),mdx("code",{parentName:"div"},mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"import"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"useState"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"from"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"react"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),";")),mdx("div",a({parentName:"code"},{className:"line"})),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"export"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"default"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"function"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"Home"),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"()"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"const"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"["),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"text"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),","),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," settext"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"]"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"useState"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"Sam are off to garden."),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"const"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"["),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"res"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),","),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," setRes"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"]"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"useState"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"''"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");")),mdx("div",a({parentName:"code"},{className:"line"})),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"return"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"(")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"div "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"flex flex-col items-center relative min-h-screen"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"h2 "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," Grammar "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"span "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"text-danger"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">"),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}}),"Checker"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),""),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," App")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"h3 "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"text-lightYellow text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," Check to see if what you have written is Grammarly correct")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"div "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"flex justify-between w-5/6 h-96 mt-8 md:flex-col md:items-center md:justify-start"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"textarea")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"type"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"text"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"')),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"border border-primary outline-none w-2/5 px-4 py-2 rounded-sm font-raleway bg-bc text-primary md:w-full"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"')),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"placeholder"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"Write/paste any content..."),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"')),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"autoFocus"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#FF628C"}}),"true"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"value"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"text"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"onChange"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"e "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"=>"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"settext"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"e"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"target"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"value"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),")}")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"/>")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"div "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"flex items-center"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"button "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"h-1/6 outline-none border border-danger font-bold font-raleway mx-12 px-12 rounded-sm bg-danger text-bc transition duration-300 hover:bg-bc hover:text-primary md:h-16 md:my-12"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," Check")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"textarea")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"type"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"text"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"')),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"border border-primary outline-none w-2/5 px-4 py-2 rounded-sm font-raleway bg-bc text-primary md:w-full"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"')),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"placeholder"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"See if its correct..."),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"')),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"readOnly"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#FF628C"}}),"true"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"value"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"res"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"/>")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}"))))),mdx("p",null,"You can see that I have added an ",mdx("inlineCode",{parentName:"p"},"onChange")," event handler to set the state value as soon as the user writes something. I am also setting the value of a text area to the state variable ",mdx("inlineCode",{parentName:"p"},"res"),". It is going to show the grammar error when this state variable will update."),mdx("h3",a({},{id:"-step-4"}),mdx("a",a({parentName:"h3"},{href:"#-step-4"}),"\u2192 STEP #4")),mdx("p",null,"Let\u2019s integrate the API now. For this, first, create a ",mdx("inlineCode",{parentName:"p"},".env.local")," file and paste the following in it:"),mdx("pre",a({},{className:"shiki Shades of Purple",style:{backgroundColor:"#2D2B55",color:"#FFFFFF"}}),mdx("div",a({parentName:"pre"},{className:"language-id"}),"sh"),mdx("div",a({parentName:"pre"},{className:"code-container"}),mdx("code",{parentName:"div"},mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}}),"NEXT_PUBLIC_RAPIDAPI_KEY=YOUR-RAPIDAPI-KEY"))))),mdx("p",null,"You need to replace ",mdx("inlineCode",{parentName:"p"},"YOUR-RAPIDAPI-KEY")," here with the API key you got when you subscribed to the ",mdx("a",a({parentName:"p"},{href:"https://RapidAPI.com/grammarbot/api/grammarbot"}),"GrammarBot API"),". It is the value of ",mdx("inlineCode",{parentName:"p"},"x-rapidapi-key")," that you saved earlier."),mdx("p",null,"Now download and add ",mdx("inlineCode",{parentName:"p"},"axios")," to your project. For this, run the following command in the terminal:"),mdx("pre",a({},{className:"shiki Shades of Purple",style:{backgroundColor:"#2D2B55",color:"#FFFFFF"}}),mdx("div",a({parentName:"pre"},{className:"language-id"}),"sh"),mdx("div",a({parentName:"pre"},{className:"code-container"}),mdx("code",{parentName:"div"},mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}}),"npm install axios"))))),mdx("p",null,"Now import ",mdx("inlineCode",{parentName:"p"},"axios")," at the top of the ",mdx("inlineCode",{parentName:"p"},"pages/index.js"),"."),mdx("pre",a({},{className:"shiki Shades of Purple",style:{backgroundColor:"#2D2B55",color:"#FFFFFF"}}),mdx("div",a({parentName:"pre"},{className:"language-id"}),"js"),mdx("div",a({parentName:"pre"},{className:"code-container"}),mdx("code",{parentName:"div"},mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"import"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," axios "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"from"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"axios"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),";"))))),mdx("h3",a({},{id:"-step-5"}),mdx("a",a({parentName:"h3"},{href:"#-step-5"}),"\u2192 STEP #5")),mdx("p",null,"RapidAPI Hub provides you with code snippets in different languages for integrating the API. I am going to use the ",mdx("inlineCode",{parentName:"p"},"(JavaScript) Axios")," one."),mdx("img",a({},{src:"https://devrelstack.kinsta.cloud/wp-content/uploads/2022/05/code-snippet-12.png",alt:"Fetching data using (JavaScript) Axios"})),mdx("p",null,"Now create a file with the name ",mdx("inlineCode",{parentName:"p"},"check.js")," inside the ",mdx("inlineCode",{parentName:"p"},"pages/api")," directory. It is going to create a REST API endpoint for you. The endpoint point will look like this:"),mdx("pre",a({},{className:"shiki Shades of Purple",style:{backgroundColor:"#2D2B55",color:"#FFFFFF"}}),mdx("div",a({parentName:"pre"},{className:"language-id"}),"sh"),mdx("div",a({parentName:"pre"},{className:"code-container"}),mdx("code",{parentName:"div"},mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}}),"http://localhost:3000/api/check"))))),mdx("p",null,"Now copy the following code in this file:"),mdx("pre",a({},{className:"shiki Shades of Purple",style:{backgroundColor:"#2D2B55",color:"#FFFFFF"}}),mdx("div",a({parentName:"pre"},{className:"language-id"}),"js"),mdx("div",a({parentName:"pre"},{className:"code-container"}),mdx("code",{parentName:"div"},mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"import"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," axios "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"from"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"axios"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),";")),mdx("div",a({parentName:"code"},{className:"line"})),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"export"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"default"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FB94FF"}}),"function"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"handler"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"req"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),","),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," res"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),")"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"if"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"req"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"method"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"==="),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"POST"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),")"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"const"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," options "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#80FFBB"}}),"method"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),":"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"POST"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),",")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#80FFBB"}}),"url"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),":"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"https://grammarbot.p.rapidapi.com/check"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),",")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#80FFBB"}}),"headers"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),":"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"content-type"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),":"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"application/x-www-form-urlencoded"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),",")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"x-rapidapi-host"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),":"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"grammarbot.p.rapidapi.com"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),",")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"x-rapidapi-key"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),":"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," process"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"env"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"NEXT_PUBLIC_RAPIDAPI_KEY")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"},")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#80FFBB"}}),"params"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),":"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#80FFBB"}}),"text"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),":"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," req"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"body"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"text"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),","),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#80FFBB"}}),"language"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),":"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"en-US"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"};")),mdx("div",a({parentName:"code"},{className:"line"})),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," axios")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"request"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"options"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),")")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"then"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#FB94FF"}}),"function"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"response"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),")"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," res"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"status"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#FF628C"}}),"200"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),")."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"json"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"response"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"data"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"})")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"catch"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#FB94FF"}}),"function"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"error"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),")"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," console"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"error"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"error"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"});")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"else"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," res"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"status"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#FF628C"}}),"400"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}"))))),mdx("p",null,"This code makes an API call to the ",mdx("a",a({parentName:"p"},{href:"https://RapidAPI.com/grammarbot/api/grammarbot"}),"GrammarBot API")," on the server and returns the results to the user. It executes when the user makes an API call to the ",mdx("inlineCode",{parentName:"p"},"check")," endpoint I mentioned above."),mdx("p",null,"Once you are done, copy the following code in the ",mdx("inlineCode",{parentName:"p"},"pages/index.js")," file:"),mdx("pre",a({},{className:"shiki Shades of Purple",style:{backgroundColor:"#2D2B55",color:"#FFFFFF"}}),mdx("div",a({parentName:"pre"},{className:"language-id"}),"jsx"),mdx("div",a({parentName:"pre"},{className:"code-container"}),mdx("code",{parentName:"div"},mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"import"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"useState"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"from"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"react"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),";")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"import"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," axios "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"from"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"axios"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),";")),mdx("div",a({parentName:"code"},{className:"line"})),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"export"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"default"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"function"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"Home"),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"()"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"const"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"["),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"text"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),","),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," settext"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"]"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"useState"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"Sam are off to garden."),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"const"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"["),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"res"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),","),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," setRes"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"]"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"useState"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"''"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"const"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"["),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"btnText"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),","),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," setBtnText"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"]"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"useState"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"Check"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");")),mdx("div",a({parentName:"code"},{className:"line"})),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#B362FF"}}),"/**")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#B362FF"}})," *")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#B362FF"}})," *")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#B362FF"}})," * Check the text for grammar mistakes")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#B362FF"}})," */")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"const"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"checkGrammar"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"async"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"()"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"=>"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"try"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"setBtnText"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"Checking..."),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"const"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," res "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"await"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," axios"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"post"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"/api/check"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),","),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," text")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"});")),mdx("div",a({parentName:"code"},{className:"line"})),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"setRes"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"res"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"data"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"matches"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"["),mdx("span",a({parentName:"div"},{style:{color:"#FF628C"}}),"0"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"]."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"message"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"catch"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"err"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),")"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," console"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"log"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"err"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}")),mdx("div",a({parentName:"code"},{className:"line"})),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"setBtnText"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"Check"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"};")),mdx("div",a({parentName:"code"},{className:"line"})),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"return"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"(")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"div "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"flex flex-col items-center relative min-h-screen"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"h2 "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," Grammar "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"span "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"text-danger"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">"),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}}),"Checker"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),""),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," App")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"h3 "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"text-lightYellow text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," Check to see if what you have written is Grammarly correct")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"div "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"flex justify-between w-5/6 h-96 mt-8 md:flex-col md:items-center md:justify-start"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"textarea")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"type"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"text"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"')),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"border border-primary outline-none w-2/5 px-4 py-2 rounded-sm font-raleway bg-bc text-primary md:w-full"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"')),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"placeholder"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"Write/paste any content..."),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"')),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"autoFocus"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#FF628C"}}),"true"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"value"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"text"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"onChange"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"e "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"=>"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"settext"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"("),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"e"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FFEE80"}}),"target"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"."),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"value"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),")}")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"/>")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"div "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"flex items-center"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"button")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"h-1/6 outline-none border border-danger font-bold font-raleway mx-12 px-12 rounded-sm bg-danger text-bc transition duration-300 hover:bg-bc hover:text-primary md:h-16 md:my-12"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"')),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"onClick"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"checkGrammar"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"btnText"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"textarea")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"type"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"text"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"')),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"border border-primary outline-none w-2/5 px-4 py-2 rounded-sm font-raleway bg-bc text-primary md:w-full"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"')),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"placeholder"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"See if its correct..."),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"')),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"readOnly"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#FF628C"}}),"true"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"value"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"res"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"/>")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"div "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"flex flex-col mt-10 justify-end h-36 md:h-24"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"p "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"block mb-10 text-center text-secondary text-xs"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," Made by RapidAPI DevRel Team -"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"<"),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}}),"a")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"className"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"hover:text-primary"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"')),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#FAD000"}}),"href"),mdx("span",a({parentName:"div"},{style:{color:"#FF9D00"}}),"="),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"'),mdx("span",a({parentName:"div"},{style:{color:"#A5FF90"}}),"https://github.com/RapidAPI/DevRel-Examples-External"),mdx("span",a({parentName:"div"},{style:{color:"#92FC79"}}),'"')),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),">")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," See more examples like this")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#FFFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),");")),mdx("div",a({parentName:"code"},{className:"line"}),mdx("span",a({parentName:"div"},{style:{color:"#E1EFFF"}}),"}"))))),mdx("p",null,"You can see that I have created a function, ",mdx("inlineCode",{parentName:"p"},"checkGrammar"),", for analyzing the content for grammatical errors. It will fetch the grammar errors from the API and then show it to the user in the right text area."),mdx("h2",a({},{id:"wrap-up"}),mdx("a",a({parentName:"h2"},{href:"#wrap-up"}),"Wrap Up")),mdx("p",null,"That\u2019s it. We have successfully built a ",mdx("a",a({parentName:"p"},{href:"https://rapidapi-example-grammar-checker-app.vercel.app/"}),"Grammar Checker App")," using ",mdx("a",a({parentName:"p"},{href:"https://RapidAPI.com/grammarbot/api/grammarbot"}),"GrammarBot API"),". You can find the source code ",mdx("a",a({parentName:"p"},{href:"https://github.com/RapidAPI/DevRel-Examples-External/tree/main/grammar-checker-app"}),"here")," of this web app."),mdx("p",null,"In the end, it will look something like this:"),mdx("img",a({},{src:"https://devrelstack.kinsta.cloud/wp-content/uploads/2022/05/cover-12.png",alt:"Grammar Checker App built with Next.js and GrammarBot API"})))}MDXContent.isMDXComponent=!0;

carbon-footprint

How To Build A Carbon Footprint App Using An API?

In this guide, we will build a Carbon Footprint App that will use an API from RapidAPI Hub to calculate the carbon footprint of travel.