1"use strict";(globalThis.webpackChunkdocs||=[]).push([[6250],{12689(e,n,t){t.r(n),t.d(n,{assets:()=>l,contentTitle:()=>c,default:()=>p,frontMatter:()=>a,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"tutorials/advanced/monster-search-with-javascript","title":"Interactive Monster Search with JavaScript","description":"Welcome to this step-by-step tutorial on building an interactive monster search using JavaScript! If you have moderate experience with JavaScript, you\'re in the right place. By the end of this tutorial, you\'ll have a simple web application that allows users to search for and view Dungeons & Dragons 5th Edition (D&D 5e) monsters.","source":"@site/versioned_docs/version-2014/tutorials/advanced/monster-search-with-javascript.mdx","sourceDirName":"tutorials/advanced","slug":"/tutorials/advanced/monster-search-with-javascript","permalink":"/tutorials/advanced/monster-search-with-javascript","draft":false,"unlisted":false,"tags":[],"version":"2014","frontMatter":{},"sidebar":"tutorialsSidebar","previous":{"title":"Discover D&D Races with Shell Scripting","permalink":"/tutorials/basic/discover-dnd-races-with-shell-scripting"},"next":{"title":"Creating a Spell Card Library with React","permalink":"/tutorials/advanced/react-spell-cards"}}');var s=t(86195),i=t(94758),o=t(50942);const a={},c="Interactive Monster Search with JavaScript",l={},d=[{value:"Setting Up the Project",id:"setting-up-the-project",level:2},{value:"Building the Frontend",id:"building-the-frontend",level:2},{value:"<code>index.html</code>",id:"indexhtml",level:3},{value:"<code>styles.css</code>",id:"stylescss",level:3},{value:"Adding Functionality with JavaScript",id:"adding-functionality-with-javascript",level:2},{value:"<code>script.js</code>",id:"scriptjs",level:3},{value:"Testing the Application",id:"testing-the-application",level:2},{value:"Conclusion",id:"conclusion",level:2}];function h(e){const n={code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",...(0,i.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.header,{children:(0,s.jsx)(n.h1,{id:"interactive-monster-search-with-javascript",children:"Interactive Monster Search with JavaScript"})}),"\n",(0,s.jsx)(n.p,{children:"Welcome to this step-by-step tutorial on building an interactive monster search using JavaScript! If you have moderate experience with JavaScript, you're in the right place. By the end of this tutorial, you'll have a simple web application that allows users to search for and view Dungeons & Dragons 5th Edition (D&D 5e) monsters."}),"\n",(0,s.jsx)(o.A,{objectives:["Learn to make a simple HTML webpage","Learn to interact with the API using HTTP requests in Javascript","Learn to create a form that allows users to get monsters from the API"]}),"\n",(0,s.jsx)(n.h2,{id:"setting-up-the-project",children:"Setting Up the Project"}),"\n",(0,s.jsxs)(n.ol,{children:["\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"Create a New Directory:"}),' Start by creating a new directory for your project. You can name it something like "monster-search-app".']}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"Initialize a Node.js Project:"})," Open your terminal, navigate to the project directory, and run the following command to initialize a Node.js project:"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{children:"npm init -y\n"})}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"Install Axios:"})," Axios is a library for making HTTP requests. Install it by running the following command:"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{children:"npm install axios\n"})}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"Create Files:"})," Inside your project directory, create three files: ",(0,s.jsx)(n.code,{children:"index.html"}),", ",(0,s.jsx)(n.code,{children:"styles.css"}),", and ",(0,s.jsx)(n.code,{children:"script.js"}),"."]}),"\n"]}),"\n"]}),"\n",(0,s.jsx)(n.h2,{id:"building-the-frontend",children:"Building the Frontend"}),"\n",(0,s.jsx)(n.h3,{id:"indexhtml",children:(0,s.jsx)(n.code,{children:"index.html"})}),"\n",(0,s.jsx)(n.p,{children:"Let's start by creating the HTML structure for our web application:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-html",children:'<!DOCTYPE html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" />\n <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n <link rel="stylesheet" href="styles.css" />\n <title>Monster Search</title>\n </head>\n <body>\n <div class="container">\n <h1>Monster Search</h1>\n <input type="text" id="monsterInput" placeholder="Enter a monster name" />\n <button id="searchButton">Search</button>\n <div id="monsterResult" class="monster-result"></div>\n </div>\n <script src="script.js"><\/script>\n </body>\n</html>\n'})}),"\n",(0,s.jsx)(n.h3,{id:"stylescss",children:(0,s.jsx)(n.code,{children:"styles.css"})}),"\n",(0,s.jsx)(n.p,{children:"Let's style our web application to make it visually appealing:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-css",children:"body {\n font-family: Arial, sans-serif;\n background-color: #f0f0f0;\n margin: 0;\n padding: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n}\n\n.container {\n background-color: white;\n border-radius: 8px;\n padding: 20px;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);\n text-align: center;\n}\n\nh1 {\n color: #333;\n}\n\n#monsterInput {\n width: 100%;\n padding: 8px;\n margin-bottom: 10px;\n border: 1px solid #ccc;\n border-radius: 4px;\n}\n\n#searchButton {\n background-color: #007bff;\n color: white;\n border: none;\n border-radius: 4px;\n padding: 8px 12px;\n cursor: pointer;\n}\n\n.monster-result {\n margin-top: 20px;\n padding: 10px;\n border: 1px solid #ccc;\n border-radius: 4px;\n text-align: left;\n}\n"})}),"\n",(0,s.jsx)(n.h2,{id:"adding-functionality-with-javascript",children:"Adding Functionality with JavaScript"}),"\n",(0,s.jsx)(n.h3,{id:"scriptjs",children:(0,s.jsx)(n.code,{children:"script.js"})}),"\n",(0,s.jsx)(n.p,{children:"Now, let's add the functionality to our web application using JavaScript:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-javascript",children:'const monsterInput = document.getElementById("monsterInput");\nconst searchButton = document.getElementById("searchButton");\nconst monsterResult = document.getElementById("monsterResult");\n\nsearchButton.addEventListener("click", () => {\n const monsterName = monsterInput.value.toLowerCase();\n if (monsterName) {\n searchMonster(monsterName);\n } else {\n monsterResult.innerHTML = "Please enter a monster name.";\n }\n});\n\nfunction searchMonster(monsterName) {\n monsterResult.innerHTML = "Searching...";\n\n axios\n .get(`https://www.dnd5eapi.co/api/2014/monsters`)\n .then((response) => {\n const monsters = response.data.results;\n const matchedMonster = monsters.find(\n (monster) => monster.name.toLowerCase() === monsterName\n );\n\n if (matchedMonster) {\n axios\n .get(matchedMonster.url)\n .then((monsterResponse) => {\n const monsterData = monsterResponse.data;\n monsterResult.innerHTML = `\n <h2>${monsterData.name}</h2>\n <p><strong>Index:</strong> ${monsterData.index}</p>\n \x3c!-- You can display more monster details here --\x3e\n `;\n })\n .catch((error) => {\n monsterResult.innerHTML = "Error fetching monster details.";\n });\n } else {\n monsterResult.innerHTML = "Monster not found.";\n }\n })\n .catch((error) => {\n monsterResult.innerHTML = "Error fetching monsters.";\n });\n}\n'})}),"\n",(0,s.jsx)(n.h2,{id:"testing-the-application",children:"Testing the Application"}),"\n",(0,s.jsxs)(n.ol,{children:["\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsx)(n.p,{children:"Open your terminal and navigate to the project directory."}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsx)(n.p,{children:"Run the following command to start a simple server:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{children:"npx serve\n"})}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:["Visit ",(0,s.jsx)(n.code,{children:"http://localhost:5000"})," in your web browser to see the monster search application in action."]}),"\n"]}),"\n"]}),"\n",(0,s.jsx)(n.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,s.jsx)(n.p,{children:"Congratulations! You've successfully built an interactive monster search web application using JavaScript, HTML, and CSS. Users can now search for D&D 5e monsters and view their details."})]})}function p(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(h,{...e})}):h(e)}},50942(e,n,t){t.d(n,{A:()=>s});t(98067);var r=t(86195);function s({children:e,objectives:n}){return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("h2",{children:"\u2705 Learning Objectives"}),(0,r.jsx)("ol",{children:n.map((e,n)=>(0,r.jsx)("li",{children:e},n))}),(0,r.jsx)("div",{children:e})]})}},94758(e,n,t){t.d(n,{R:()=>o,x:()=>a});var r=t(98067);const s={},i=r.createContext(s);function o(e){const n=r.useContext(i);return r.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:o(e.components),r.createElement(i.Provider,{value:n},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.