25+ Projects with AJAX, JavaScript, and JSON
Intermediate
21h
By: Laurence Lars Svekis
Overview
AJAX allows you to communicate with the server, exchange data, and update the page without having to refresh the page. The two major features of AJAX allow you to do the following:
- Make requests to the server without reloading the page
- Receive and work with data from the server
This course is loaded with 25 plus mini projects to help you learn and practice connecting to endpoints, returning JSON data, making fetch requests, using JSON data with JavaScript to create page content, and explore GET POST PUT and DELETE with JavaScript AJAX. Learn how to create and manipulate page elements with modern JavaScript code to build interactive and fully dynamic web applications driven by JSON data. Get user selections, make the AJAX request from the user select, and output to the web page using JavaScript code. Explore fun interactive projects to make AJAX requests coming from page data and output the content to the page. Dynamic page elements generated from AJAX requests to endpoints and return JSON data and use it within JavaScript to update and manipulate DOM page elements. Create games, get JSON data, and let users explore the data. Dynamically generate page content with JavaScript. Connect to web endpoints - get JSON data and output that content into your web page with JavaScript. AJAX practice mini projects will help you learn more about JSON data such as making fetch requests, debugging, and more.
Modules
1. Chapter 1: Introduction to Getting Started with Objects and JSON Using JavaScript
1.1 Introduction to AJAX Course, How to Get JSON data and Update Page Elements4 min
1.2 Setup of the Development Environment and LiveServer Localhost Setup9 min
1.3 How JavaScript Arrays Work Coding Examples of JavaScript Arrays14 min
1.4 Code Example of JavaScript Objects How to Use JavaScript Objects8 min
1.5 How to Loop Through Objects, JavaScript Objects Looping and Use of Values11 min
1.6 JSON and JavaScript Objects Methods and Code Examples JSON Objects in JavaScript10 min
1.7 JavaScript JSON Methods, JSON Parse Stringify of String, and JavaScript Objects10 min
1.8 JavaScript DOM Manipulation and JavaScript DOM Element Creation Event Listeners16 min
1.9 Quick Review JavaScript Click Events and Page Interactions Within the DOM21 min
1.10 Project - Create a Dynamic List JSON LocalStorage List15 min
1.11 Project - Dynamic List with JSON JavaScript LocalStorage List Part 212 min
1.12 Project - Building a Dynamic Interactive JSON List with JavaScript Part 318 min
1.13 Project Final List Updates to Local and JSON Data List Items JavaScript Project6 min
2. Chapter 2: Section Simple JSON Endpoints Output to Web Page Content with JavaScript
2.1 JavaScript Coding Projects AJAX to JSON Data Output Web Pages Practice Lessons11 min
2.2 How to Create AJAX to Simple JSON File and Get JSON with JavaScript Coding20 min
2.3 How to Make AJAX Requests to Get JSON Data from Wiki API Coding Mini Project16 min
2.4 How to Get JSON from WikiMap API Examples with JavaScript Code Project24 min
2.5 How to Request to Multiple Endpoints Loading JSON Data Tester Coding Mini Project30 min
2.6 How to Generate Random User Data Output to Page AJAX and JS Random Project29 min
2.7 How to AJAX Request to Weather Data App with API JSON Data Coding Mini Project15 min
2.8 How to Create an Interactive App with Star Wars Data Coding Mini Project29 min
2.9 Web App with JSON Star Wars Data API Part 2 Coding Mini Project24 min
2.10 How to Get Dynamic Data Make a Game with Data from Trivia DataBase Game Project27 min
2.11 how to Create a Trivia Game from JSON data Part 2 Coding JavaScript Project32 min
2.12 Fully Interactive Trivia Game Web App Final Code JavaScript JSON Coding Project25 min
2.13 Example JavaScript Code AJAX Request to Stackexchange API Tester Request JSON26 min
2.14 JavaScript get JSON Data Stackexchange API Coding Example with JavaScript Part 231 min
2.15 Dynamic Page Content from JSON Stackexchange API Code Project Final Code Lesson10 min
2.16 JavaScript Web Page get JSON Data with AJAX to Select Country Data from API34 min
2.17 Create a User Search Country by Name get JSON Data from API18 min
3. Chapter 3: JSON AJAX JavaScript QUIZ Application
3.1 Introduction to JavaScript Quiz Game Project7 min
3.2 How to Use JavaScript JSON Data to Build and Set Up a Quiz6 min
3.3 How to Create Interactive Content from JSON with JavaScript DOM7 min
3.4 How to Add Page Elements with JavaScript from JSON Data11 min
3.5 How to Randomize the Order of Array Items with JavaScript14 min
3.6 Creating GamePlay Loading Next Question in Data with JavaScript12 min
3.7 Debugging and Fixing Code Adding Scoring to Game11 min
3.8 How to Review and Finalize JavaScript Game Project20 min
3.9 How to Load JSON Source Data from a Google Sheet File7 min
3.10 Getting Google Sheet Contents as JSON to JavaScript Object19 min
3.11 How to Create a Quiz Game Using Sheet Data in JavaScript Quiz5 min
3.12 Final Game Play How to Download Text Report on Game Score16 min
4. Chapter 4: Web APIs Practice Mini Applications with JavaScript JSON Data to Web Pages
4.1 Modern JavaScript AJAX Fetch Requests to Endpoints JavaScript Fetch Requests6 min
4.2 Creating a Joke Generating Web Page from JSON Data10 min
4.3 How to Use Multiple Endpoints for JSON Data User Selected Content14 min
4.4 How to Use JavaScript AJAX to Connect to the GitHub API Loading JSON Data30 min
4.5 How to Generate Interactive Game with Dynamic Wordlist with JSON Data29 min
4.6 How to Create Interactive Content and Gameplay with Data Contained Within Your Google Sheet29 min
4.7 Final Word Scramble Game Coding Review JavaScript JSON Coding Project32 min
4.8 How to Create a Quiz Game with JavaScript and AJAX Using JSON Data29 min
4.9 Creating a Dynamic JavaScript Quiz Game with JSON data Coding Review and Updates16 min
4.10 How to Create JavaScript YouTube Search App to API JavaScript Connect to API21 min
4.11 Updates to the YouTube Search API Output JSON Data to Page Using JavaScript 218 min
4.12 Web Coding Example for YouTube Search API from Web Page Requests AJAX JSON Data9 min
5. Chapter 5: JavaScript JSON Post Data and Mini Applications to Practice Connecting to APIs
5.1 Introduction Interactive Web Content from JSON Data AJAX Get and Post Methods4 min
5.2 How to Create a JavaScript Frontend API Tester Connecting to Endpoints Get JSON22 min
5.3 JavaScript Frontend API Tester Create AJAX Requests Mini Application Code15 min
5.4 Use JavaScript to Test Frontend API Tester Loading JSON Data to Web Page16 min
5.5 JavaScript Fetch Methods Get and POST Tester API JSON JavaScript19 min
5.6 How to Add Form Submission with JavaScript Fetch JSON Data18 min
5.7 How to Test AJAX to JSON Placeholder Tester Get JSON with JavaScript – Project12 min
5.8 Create a Dynamic Content Interactive Web Page with JS CRUD Tester Project Part 124 min
5.9 Create a Dynamic Content Interactive Web Page with JS CRUD Tester Project Part 223 min
5.10 Testing Endpoint You JSON Data Live as GitHub Json Database Custom JSON Endpoint14 min
6. Chapter 6: Local JSON Server Node NPM JSON Data Create local Server for JSON Data Testing
6.1 Introduction on How to Set Up Local JSON Server CRUD Testing Database2 min
6.2 How to Set Up JSON Local Server with Node NPM Coding Project13 min
6.3 Connect to Local Server Get and Post Requests with Fetch18 min
6.4 Connect to Local Server Put and Delete Requests with Fetch Project33 min
7. Chapter 7: Contact Form Submissions with AJAX to Google Script
7.1 AJAX Contact Form Submit Data to Google Apps Script MailApp Service Project4 min
7.2 JavaScript AJAX Web Contact Form Sending Emails with Apps Script Project25 min
7.3 Web App Endpoint Set Up Google Apps Script Project29 min
7.4 JavaScript AJAX Web Contact Form Testing and Final Code Review Project13 min
Ready to Elevate Your Team's Learning?
Talk with our sales team to see how StormWind can transform the way your organization trains and grows.
CONTACT SALES