13 Coding an interactive course catalog

 

This chapter covers

  • Getting Excel data ready to use on the web
  • Learning about the JSON data format
  • Using ChatGPT to convert Excel data to JSON
  • Using JSON data to make a web page interactive
  • Crafting a ChatGPT prompt to a course catalog page
  • Examining and customizing the ChatGPT-generated code

The projects you’ve seen so far in this book have produced useful and reasonably attractive web pages. However, you may have noticed one thing that’s common to the pages you’ve built with the help of ChatGPT: that’s right, they just kind of sit there. Granted, there’s nothing wrong with a page that doesn’t do much, if that page offers information that’s useful, informative, or fun. However, it can really add to a page’s appeal if the page is interactive in some way. And by “interactive,” I mean readers can manipulate the page to change what data is displayed. For example, on a page with lots of data, you might include controls that enable users to display just a subset of the data or to search the data.

13.1 Checking out this chapter’s project

13.2 Getting data from Excel

13.2.1 Getting your Excel data ready

13.2.2 Getting to know the JSON data format

13.2.3 Uploading your Excel file to ChatGPT

13.2.4 Prompting ChatGPT to convert your Excel data to JSON

13.3 Fetching and displaying the JSON data

13.4 Searching, sorting, and filtering the course catalog

13.4.1 Searching the data

13.4.2 Filtering the data

13.4.3 Sorting the data

13.5 Crafting the prompt for the course catalog

13.6 Examining the course catalog code

13.6.1 Examining the HTML

13.6.2 Examining the CSS

13.6.3 Examining the JavaScript

13.7 Customizing the course catalog

13.8 Where to go from here

Summary