JavaScript Quick Coding Array Methods Tips and Examples
Explore how you can use JavaScript to get array items with commonly used array methods
Welcome to the JavaScript array methods quick coding course.
Google Apps Script Projects for Beginners Create PDF WebForm
Google Apps Script is just like JavaScript – running in the cloud.
Learn JavaScript DOM Coding Projects Interactive and Dynamic Web Pages
Learn JavaScript DOM Coding Projects Interactive and Dynamic Web Pages
AJAX API JSON Connect to JSON data using AJAX webpage
JavaScript for beginners JavaScript Objects and JSON data for web pages AJAX request for JSON data to use in JavaScript Explore how you can connect to various endpoints on the web and get JSON data to use on your website.
JavaScript Projects DOM Interactive Dynamic web pages
Learn how to create interactive, dynamic effects on your website with JavaScript using the DOM Introduction to JavaScript how it works and how you can write code
Create your own version post links and your updated code. Share URLs and web source code that you created from the lessons within this course
Create an interactive web page project – using JavaScript with actions from the user as click events. Update the page content using the DOM
Select from several projects presented in the course
Share you project with its URL, or Source Code at GitHub or as a Screenshot in the projects area of the course.
Page Clickers Create Dynamic Interactive Click Counters
This exercise will demonstrate how to attach custom property values into the element object. You can set a value just like within any object, and then access that value using its property name. This is ideal for tracking clickers that need to hold their own values and work independently of the other page elements and the other click values.
Coding to practice applying code to add event listeners on dynamic page elements. Create functions to clean up the code, and avoid repeat statements. Set element attributes, like type min and max. Create page elements with document.createElement() and then append it to the parent with append() prepend() or appendChild() Set element style properties with color, fontSize, backgroundColor, and content values textContent, innerHTML. Use forEach to loop through an array or nodeList.
Exercise :
- Select the main page element that will be updated.
- Create an input field and a button. Set the attributes to the input field so that it is a number type, and has a min of 1 and max of 20. Set a default value of 5 to the input.
- Create a function to create elements, with parameters of the element tag name, and the parent that the element will be appended to.
- Create an empty array to hold the main clicker elements, and the values of the clicks.
- Add a button to generate a report of the clicker values. When the button is clicked, loop through the holding array, and add to the report the value of the clicker element with how many times it’s been clicked.
- On the button beside the input field, get the input value and create the number of clickers in the input value. Create a separate function to generate the clicker.
- In the clicker maker function, create a main element container. Add a trackingValue property to the element, setting the value to 0. Add the new element into the holder array.
- Create a div to hold the clicked value, a button to decrease, a button to increase and an input with a button to save the value from the input to the element clicked value.
- Apply styling to the elements, create a function to add the attributes to each input field.
- Create a function that will update the click values, using arguments for the input element, the text output element and the value of the clicker. Call it updater().
- Add the event listeners to the clicker buttons, to increase and decrease. Send the values to the updater() function.
- The 3rd button should take the value from the input and apply that value to the click value when pressed.
AJAX with JavaScript Load JSON Data Dynamically from API
Create your own version post links and your updated code. Share URLs and web source code that you created from the lessons within this course
Select from the coding exercises – share your code in a Git Repo, upload a screen shot of the code and web page, or link to the web page directly as the class project
- Create a JSON file add some data
- Using JavaScript get the data from the JSON file
- Output and update the page with the new JSON file data
Google Sheets 2022 Google Workspace Spreadsheet Help Tips
Create a mortgage calculator where you can input the house price, the down payment, interest rate and years to pay down the mortgage. Setup the sheet to calculate the totals for each payment month, including how much was paid in interest, how much the new balance owed is and how much is left to be paid. Once you have completed the project you can screenshot it, or use the publish to the web and share your project to the class.
Create a loan calculator applying formulas to calculate the amount borrowed and the payments needed until the original amount is paid off. Include the payment period and the interest rate.
JavaScript Dynamic Web Pages AJAX 30 Projects APIs JSON
Select from over 30 different web projects –
Share your project to the class with Github and the source code, a live web page, screenshots of the application in action or as a video.
Connect to an API and retrieve data from an endpoint and output the content into your web page using AJAX.
Project MUST HAVE and include – web page that a user can interact with – that makes a request to a server for data and updates the web page with the new data without a page reload.
Project #1
- Create a JSON file with several people, listing a first name and last name and id for the person.
- Create a way for the web user to trigger the event and request the data from the JSON file.
- Output the JSON data onto a web page using JavaScript NO PAGE refresh
Bootstrap 5 Responsive Website 2022 Mobile first web design HTML CSS framework
Create a Bootstrap website and share the URL, Screenshot, or source code. Explore how you can use Bootstrap to create amazing looking websites that are fully responsive and mobile ready.
Use the attached guide PDF for source code
Project – create a Bootstrap web site from scratch
- Web site should be responsive
- Have a Navigation bar that resizes
- Use several Bootstrap components like the Cards and the List
- Use Slideshow or accordion
- Build using the Grid and resize looking properly on different size screens Built responsive!
- Upload your website to a server or to a web page and share the URL
- Share the source code
- Take a screenshot and share the image to the class