Learn JavaScript DOM Coding Projects Interactive and Dynamic Web Pages

Modern coding exercises to develop your jаvascript coding skills from the most commonly asked for questions about jаvascript
Explore the jаvascript DOM how to
Email AutoResponder
DOM Element Maker
Functions Arrow Plus
AJAX fetch JSON data
Collision Detection
Dynamic Page Elements
Events interactive Elements
Animation Element Moving
Following coding exercises are designed to help develop your jаvascript skills on applying jаvascript to create interactive and dynamic content on web pages.
Web page dynamic welcome messageThe web page exercise is a simple example of how you can get input from a user, and then apply that input value within jаvascript to create a dynamic web response. Input field provides a way for the user to interact with the web page. To get the input value, select the page element, then from within that element property values there is a property name value which is holding the input field value. Return the value in a variable then use that value within a string response which then gets output into the web page as a customized message to the web user.Function Expression vs Declaration vs Arrow One of the most asked questions is about functions, and which ones to use. There are different ways to create function and this exercise is designed to highlight how to use them. Along with the arrow format for functions and use of the "this" keyword to reference the current object within the function scope. Create 3-page counters using different functions, expression, declaration, and arrow format. Counters will all work independently as the value of the total is contained within the instance of the function object using this.Dynamic jаvascript DOM page counters Element Objects examplesDynamically create page buttons that can be used to count totals separately. Create a button to output all the result totals. Only using jаvascript NO HTML elements. Store values of the page elements, get the values from the page elements and output the results to the web page.DOM create Page elements adding styleCreate interactive elements that can store the current color value input an array, for later use. Also creates buttons to update the body background color to the value of the button text. Color style and events with Dynamic Elements DOM.When multiple elements need to be created, best practice is to create a function to handle the element creation, this will avoid repetition of code. This exercise will demonstrate how to create elements, how to store values into element objects, how to update style properties of elements, and how to remove elements from the page. Storing the values of the elements and retrieving value of elements and using those element values as new page elements are created. Use of appendChild() vs append() allows the code to return the element that was appended to the parent. This saves a line of code where the return of the function can be combined with adding the element that was just created into the page.Dynamic jаvascript Slider from JSON data Dynamic Carousel Slider from JSON data Sliders are a commonly used component within web pages. They provide a way to display content and create interaction for the user. When the web page user is engaged in the page element, they are more likely to read and remember the content being presented. Sliders, slideshow, Carousel are various ways this component is referred to on the web. The functionality of the component allows for cycling through elements, which can be images text or others. The carousel or slider is a slideshow for cycling through a series of content that the user can control. They can move through the content with the previous or next item buttons. The content that gets displayed in the carousel, is not contained in the jаvascript file. This example will help demonstrate how to separate data, which then can be updated without having to update the code. The code and logic within the code should work independently of the data. Change the JSON file data and should change the output in the HTML web page without breaking the jаvascript code. AJAX JSON data with fetch using promisesExercise to demonstrate using, AJAX in jаvascript with the Fetch method and how to get multiple JSON data files content with the PromiseAll Method connecting to multiple URLs within one block of code. Exercise lesson to practice making fetch requests, using async and await with fetch and how you can connect to multiple endpoints using promiseAll and return the results as one object value. This example will use three separate JSON files, all with the same data structure, which will make it possible to combine the data into one object once all the responses complete separately. PromiseAll provides a way to use promises and join the results as one chaining them together. Fetch can be used to connect to external files, like JSON and return the results of those data files into jаvascript code. The data needs time to load, that is why promises are used to handle the data once it's ready and returned from the endpoint. Using async and await in the function can set up the promise to wait until a response is returned. Fetch can do the same with the chaining of then promises to handle the data once its arrived. You can also use promiseAll if there are multiple files that need to load data into one object. Once all the data is ready then the file contents can be used in the code and output on the page. jаvascript DOM element Collision detectionThe overlap of elements is what can be referred to as collision detection. This is a standard part of most games, when moving page elements to be able to detect the position and calculate if they are overlapping.This exercise is designed to test and learn more about how to check for overlap of elements that move on the page. It will demonstrate how to set up movement of page elements, and output the values needed to calculate the collision between two-page elements. Moving elements on the page can be done by tracking the key presses from the user. Creating an object that will store the keydown and keyup boolean values of specific keys, can then be used within the animation frame to move the elements depending on the boolean values within the key object. If the key is pressed down the object will have a true value, which can then be used to determine which keys are being pressed down and apply the movement accordingly. Page Element Collision detection part 2The overlap of elements is what can be referred to as collision detection. This is a standard part of most games, when moving page elements to be able to detect the position and calculate if they are overlapping. This exercise will also demonstrate how to simplify the collision detection using getBoundingClientRect() method to get the element boundaries and dimensions within the checking function. Using getBoundingClientRect() method can eliminate the need to track element positions in an object and return back the needed X, Y, height, width values when needed. Using the same overlap formula as before and placing the returned object values of the element provides a quick checking function that can be used for collision detection on any element. Within the function arguments it only requires the elements objects which can also be selected or used from preselect element variables. This exercise is designed to test and learn more about how to check for overlap of elements that move on the page. It will demonstrate how to set up movement of page elements, and output the values needed to calculate the collision between two-page elements.DOM Element Catcher Game Set UpObjective of the game is to click the elements, as they drop, try to land them on the moving platform to score. First lesson is to set up the basic game board and simple interaction with elements and movement. This exercise will demonstrate how to create elements, how to move elements by updating style values, and how to create interactive elements that respond to a user's interaction. Use the requestAnimationFrame() method to create smooth movement between elements on the page.Element Movement and Collision DetectionExplore how to apply game logic and create animation within the game. Moving the elements on the page once the user clicks them. This is the action that the game is waiting for from the user, and it initiates the sequence of the game. The use of jаvascript Math random method allows for the creation of more engaging content. Random positions create non repetitive game interactions that make the game more engaging. Automatic movement of the paddle will create the challenge in the game play, as the play must now be able to anticipate the position and plan for an intersection of the two elements. This is the challenge of the game that the player accomplishing. For gameplay to be effective the interactions must be possible but not always certain.Adding collision detection between the two elements will allow the code to create the necessary logic to check for a successful outcome from the user action.DOM element catching Game Final CodeCreate and update the code with game logic, the allows a player to get information and have information on what is expected. There should also be a way to end the game and provide the player a way to restart and play again.Best way to achieve smooth game play is to play through the game and apply any changes that help smooth the player experience. Test and debug any issues that might occur.Once the game is playable and the game catching.How to Create a Web Form that can send emails using your Gmail accountExercise : Create an HTML form with fields for the data that you want to send. Setup the jаvascript to validate the form input values, and create an object of data to send to the Apps Script endpoint. HTML Send Email via Apps Script How to send an email from a HTML form, using Google Apps Script and jаvascript. Front-end code to send emails from html forms. Exercise : Create an HTML form with fields for the data that you want to send. Setup the jаvascript to validate the form input values, and create an object of data to send to the Apps Script endpoint. Send POST request to Google Apps Script In this lesson the application will be updated to make a fetch request using the POST method to the Google Apps Script endpoint, and insert the form field data into a spreadsheet. Exercise : Update the fetch method to POST, include the form field data as an object in the POST request body contents. Create the Google Apps Script endpoint using a webapp to receive the GET and POST request data from the AJAX request from jаvascript. Send Email when the form is submitted Send an email to your email address with the form content when the web form is submitted. Send a response confirmation email to the user's email address from the submitted form content. Exercise : Update the Google Apps Script to send emails to the user's email address in response to the web form submission, send a second email to your email when the form data is submitted with the form field information.

Homepage

https://www.skillshare.com/classes/Learn-JavaScript-DOM-Coding-Projects-Interactive-and-Dynamic-Web-Pages/1995129158