Intro to JS: Planetary Gravity Calculator

This workshop is available on GitHub

The working project is hosted right here on GitHub Pages!

Wifi Password is: "Prairie Den" / "DenDawgs"

To download, visit: https://tinyurl.com/eda-js-ws

To get started:

• Open the URL in your browser
• Go to the green 'Code' button, click 'Download Zip'
• Extract the zip file to your computer
• Open the whole folder in Atom or VS Code
• Open index.html in your browser and refresh every time there's a code change

About This Workshop

The HTML is already good to go! We're going to build out the vanilla javascript in script.js and the styling in style.css.

See the checkpoints/ folder to follow along. In addition the final working solution is available in the solution branch.

There are already images set up in the images/ folder, and a corresponding data array in the script.js file.

Key concepts for this workshop include:

• Accessing form inputs and buttons with the document API (document.addEventListener, document.getElementById, element.value)
• Using console.log() to create debug messages in the console
• Functions and function callbacks
• Using Number() to convert strings to numbers
• Using toFixed() to turn a number into a string with fixed decimal points
• Using const and let to create variables
• Objects and Arrays (arrays of planet objects!)
• Using a for-loop to iterate over an array of objects
• Accessing key/value pairs of an object
• Appending html and CSS to the DOM using document.insertAdjacentHTML
• Clearing the innerHTML using element.innerHTML
• Using string templating to insert variable data into a string