Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
AJAX API exercises JavaScript Trivia web application
Rating: 4.6 out of 5(23 ratings)
1,816 students

AJAX API exercises JavaScript Trivia web application

Create a Trivia Application using JavaScript and AJAX retrieving data from various web API endpoints
Created byLaurence Svekis
Last updated 11/2024
English

What you'll learn

  • Build a Quiz Application
  • Connect to Trivia database and return JSON data for web pages
  • Make AJAX requests and retrieve response data

Course content

2 sections • 19 lectures • 59m total length

  • Introduction to working with AJAX2:13
  • Development Environment Setup4:11
  • Page Setup3:34
  • Make Request Callback3:28
  • Get API content4:18

    Fetches trivia data via Ajax and extracts the results array. Renders one question at a time with multiple choice or true/false and tracks correct/wrong score.

  • Output Question format4:58
  • Source Code 40:23
  • Build Buttons6:19
  • JavaScript Dynamically Build Elements4:25

    Create and append answer elements on the fly using a for loop, assign data-correct attributes, attach click event listeners, and implement a string-based scoring flow for a JavaScript trivia app.

  • Source Code 60:31
  • Tweak Quiz and add Scoring6:05

    Tweak the quiz by turning divs into clickable buttons, handle true/false answers, and update a live score with correct and wrong counters while refining styling and question display.

  • Show correct answers6:59

    Build a JavaScript trivia app by implementing a correct answer function, iterating through answer options with querySelectorAll, validating attributes, displaying correct or wrong messages, and managing next-question flow via api.

  • Source Code Quiz0:45
  • More fun with APIs7:10

    Develop skills in fetching and parsing JSON from multiple APIs, including random user, trivia, and quote databases, then display results in code pen.

  • AJAX conclusion2:40
  • Source Code 100:17
  • Resources0:02

Requirements

  • JavaScript and Programming Experience
  • Computer access
  • Basic HTML and CSS knowledge

Description

Explore how to use a web API to make an AJAX request for data.  Retrieve the response data and make use of it to build a mini trivia game using JavaScript.

This fun exercise is designed to help students practice using AJAX, JSON and JavaScript to explore fun ways to use APIs.   AJAX allows web developers a way to make http requests in the background to help improve the web users experience by providing a seamless way to load new data and update the page elements.

Learn and see how you too can build web based applications.

Source code is included to get you started quickly so you can jump right in and create your own version of the application.  Extend and expand on the code provided adding in your own additions to make the application even better.

Taught by an instructor with many years of web development experience, ready to help you learn.

Fast and friendly advice is always available within the Q&A section.

Please note there are prerequisites to this course, beginner level JavaScript knowledge is required as well as HTML and CSS.   This course is perfect for those students who want to practice JavaScript and AJAX.

Course provides an opportunity to see step by step build of an application using AJAX to get JSON data into a web page.  Learn by seeing how the application is build and how to make use of AJAX to quickly create useful applications.  

What are you waiting for?  Join now and see what you can build with JavaScript and AJAX.

Who this course is for:

  • Beginners to JavaScript
  • Developers who want to learn more about AJAX
  • JavaScript developers who want to learn to build an application from Scratch

Report abuse