First 25 Students Get it FREE https://skl.sh/3h7H68r
- Email AutoResponder
- DOM Element Maker
- Functions Arrow Plus
- AJAX fetch JSON data
- Collision Detection
- Dynamic Page Elements
- Events interactive Elements
- Animation Element Moving
Select from the interactive projects from the lessons of the course.
Create a web interaction, get the users info from an input field and then update the page content with the users name creating a custom welcome message for the user.
Share your projects to the class, projects can be shared using the source code, screenshots, live web URLs and repos at Github.
- Web page dynamic welcome message
- Function Expression vs Function Declaration This Counter
- DOM create Page elements adding style
- Slider from Dynamic Elements using JSON data
- Collision detection Checker of DOM page elements Part 2
- Element Catcher Game Part 1 set up
- Element Catcher Part 2 movement and collision detection
- Element Catcher Part 3 Final Game
- HTML Send Email via Apps Script
- Send POST request to Google Apps Script
- Send Email when the form is submitted
Create a page welcome message :
- Get the user name in the input field
- When the button is pressed add an event that get the user name and creates a welcome message on the page
- Add a check to ensure the length of the input is larger than 3 characters long
Page counters with functions :
- Select all the page buttons
- Create a function expression that will increment the counter on button press
- Create a function expression with the arrow format that will track and increment the count on the page
- Create a function declaration that will track and increment the count on the page.
- Create a global object to set the number of buttons to be created
- Create a main page element that will contain all the new elements
- Create a function to create page elements, adding the element type to a parent object. Include a parameter in the function for the inner content of the element.
- Loop through and create all the buttons, set a default total of 0 for each one. On click create a function that will update and output the current value of this element total. You can add styling to the buttons
- Add a class of “btn” to each new button so that they can be distinguished from the main total tally button. Create a button that will output all the current button total results.
- When the tally button is clicked create a function that will select all the elements with a class of “btn” and loop through them.
- For each element with the class of “btn” create a new list item element, output that into an unordered list on the main page. The list item contents should show the element total and the element textContent. You can also select the style to match the button style property values.
Page elements Events and Style Exercise :
- Add a click event to the first button, that when pressed should list out all the stored color values from the holding array. When pressed create page elements that have the color value from the holding array, and are clickable elements. Once clicked the element should be removed from the page.
- The second button should store the color value from the input field into a holding array.
- The second button should also create a page element button, that has the text content of the input field color value.
- On change of the input value update the background color to match the input field value.
- Create a function that gets invoked once the DOM content loads. Give the function a name of adder()
- Within adder() create the slides, using the data from the JSON file apply the text title, html content, and styling to the slide elements. Add them to the page.
- If it’s the first item in the data then add the class of active to the first one only
- Add an event listener to the buttons, when clicked check if it contains the next class, create a function named mover() to handle the result
- Get the current element with the active class. Using traversing, get the next sibling to the current element, if no next element exists then select the first child of the parent slider element.
- Get the previous element, if it’s null then select the last child of the parent slider.
- Remove the active class for the current element, add the active class to the new element either previous or next.
AJAX request example code exercise :
- Create 3 page buttons to make requests. Set up an element on the page to show the output of the results.
- Using the first button on click, connect to a json file and return the contents back using fetch. Output the results of the file onto the web page.
- The second button uses async on the main request function, and await to move to the next function once the request completes. Output the results of the file data into the web page.
- Create an array of the paths to several JSON files, with the same object structure in each file.
- Once the third button is pressed, use Promise.all to make fetch requests to each JSON file. Nest the map function within the Promise.all request, so that the code can iterate through each JSON file. Once all the requests are completed then output the content into the web page from the JSON files.
Set up movement of page elements and track the position exercise :
- Create a function that allows for the creation of page elements as we can then dynamically add elements to the page as needed. Give the function a name of adder() to get the parent element that the new element will be appended to. Create the element using the string value of the element tag. Add the inner HTML content for the element and also add a class using the string value.
- Create 4 page elements, 2 boxes that will be moved, and 2 areas to output the box coordinates and dimensions.
- Create a global game object that can track the animation frame, contains the x,y (horizontal,vertical) position of each box, and that contains the h,w (height and width) of each box. These values then can be used to update the position.
- Set up an object named keyz to track which keyboard keys will be used for element movement. Add 8 key code names as property names and set the values to false. This will be updated once the key is pressed.
- Add event listeners on the document that listen for keydown and keyup events. If the keys from the keyz object pressed match the object property name, set the value to true on press down and false on up. This can now be used for the element movement.
- Create and Launch the mover() function which will handle page element movement on key presses.
- Within the mover() function add conditions to check which keys are true, update the game object x,y for each box accordingly. Also apply a condition to check to ensure that before the movement is allowed that the element is within the boundaries of the main container object element.
- Update the style values of properties left and top for each box with the new game x,y values for each.
- Output the x,y,h,w of each element to the page as they move; these values should change with the new x,y coordinates of the element. These will be used to calculate the collision of the elements.
Moving exercise to check for element overlap:
- create move output areas to show the current stats of the element and the collision values. Update the style of the element if an overlap occurs.
- Create a new element in the center to use within the collision check function.
- Create a new function that requires two parameters, one for each element to check. Get the boundaries of the element.
- Create a function col() which can check the boundaries and return a boolean value if the two elements are overlapping. Use this formula to check for overlap of the elements between the various boxes on the screen.
- Update element styling and output info styling depending on the result of the collision detection.
Create basic interactive elements that move exercise:
- Create a function that can set up new page elements. Using parameters of the parent element the new element should be added too. The element tag type string name. The inner html content of the element and a class that gets added to the new elements that are created.
- Add an event listener that waits for the DOMContentLoaded to invoke an init function that creates the game board content.
- Add click events to the new elements
- Create random background colors for the new element boxes that are created. Math.random().toString(16).slice(2,8)
- When the element box is clicked add the active class to the element.
- Create a new function that will handle the animation of elements. This function should be invoked once the start game is pressed, and within itself run the requestAnimationFrame() to the function.
- Within the mover() function get all the active elements, get the offset top value of the element, and increment it by the game speed value. Apply the new top style position value to the element to make it move.
- Add a condition to stop the element from moving by removing the active class from the element once it reaches the bottom of the game container.
Update the game object and detect collision of page elements exercise:
- Create a paddle element that can move from side to side.
- Add values in the game object, to be able to stop the game play, and keep track of a score. Create different speeds for the paddle and the falling box elements. Track the main page width so that elements can be randomly placed within the game screen width.
- Randomly set the x axis values for the box elements so they are spread out randomly across the top of the screen.
- Once the paddle goes off the container then set it to move the opposite direction.
- Add the paddle movement within the animation frame.
- Within the animation frame check the position of the active elements, checking for both x and y axis overlaps of corners of the elements.
- If the position of the box plus its height is greater than the paddle y position, and the box y position is less than the paddle plus its height then there is an overlap on the y axis.
- If there is overlap of the values of the 2 objects, and box x position is less than paddle x plus the width, and also the box plus its width is greater than the paddle x position then there is a hit on the x axis.
- If a hit occurs then remove the element.
- If the element ends up having a y position off screen, then reset the random x position and update the y to the top of the screen again.
- The gameplay will continue removing only the elements that hit the paddle and resetting the misses back to the top.
- Add tracking of the hits and misses, add the element x,y and the paddle x,y to the message area for debugging if needed.
- Make adjustments to the position of the page elements to enhance the game screen area.
Game play debugging and final adjustment exercise
- Play through the game to ensure the proper messaging for the player
- Add an end game for the game over once all the elements have been landed on the paddle.
- Provide a way for the player to restart the game, reset the scoring and all the game play to start again.
- Change the elements to have their own drop speeds, apply various updates to make the game more challenging.
- Add HTML input fields for the user to be able to enter information. Apply CSS styling as needed to style your form fields
- Create an event that invokes a function named submitter() when the form submit button is clicked
- Using e.preventDefault(); to prevent the default action of the form submission to prepare for AJAX.
- Add conditions on the input field values, set up a variable to add content to if errors are caught.
- Set a timeout to remove the error element and reset the input field border colors back to default.
- Create an object the contains all the form input data with property names that match the data.
Create a web app with Google Apps Script GET method.
- create a new project
- Using the method doGet(e) create a new function that will return the e parameters from the URL request object.
- Create and return the e parameters as a string value. return ContentService.createTextOutput(JSON.stringify(e))
- Set the MimeType to JSON setMimeType(ContentService.MimeType.JSON)
- Deploy a new webapp set the configuration to execute as your account, and who has access to Anyone
- Try sending the fetch request to the Google Apps Script web app and check the response data in the console.
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.
Create a test function to send emails using data from an object
- Create a function named sendMyEmail that will handle the sending of the emails using an object as the source for the data.
- Create a function to validate an email address before trying to send an email to that user. This should be included to avoid errors in the Google Apps Script which would result in a CORS issue on the web form.
- Create a testing function with simulated object data that would be coming from the form. Include the rowval that is set from the sheet row that was inserted.
- Using the MailApp service, use the sendEmail method to send an email, with an object of parameters for the method. Set the to, subject and htmlBody to the desired values for the email. You should use the form data structure for the object, to simulate the form submission.
- Check if the email is valid that the user provided, if it is then using the sendMail send a custom response to the user.
- Using the test data ensures that you are able to send the email, and accept permissions for the app to use the mailApp service. This is required otherwise the app will not be able to send emails.
- Move the sendEmail function to the doPost() method, using the real submitted data.
- Deploy the webapp for the endpoint, if you create a new webapp then ensure you copy the new URL to the web application.
You should be able to send emails to the user, to yourself and also the data should still be added into the spreadsheet whenever the form is submitted.