richardsaci

[
    {
        "name": "William Tecumseh,Sherman", 
        "nickname": "Cump, Uncle Billy", 
        "highestRank": "Commanding General of the U.S. Army,North", 
        "DOB": "2/8/1820", 
        "DOD": "2/14/1891"
    }, 
    {
        "name": "Ulysses S.,Grant", 

richardsaci

console.log('Hello from teams.js');

const teams = [{
    "id": 1001,
    "teamName": "Baltimore Orioles",
    "teamCity": "Baltimore",
    "teamState": "MD",
    "teamLeague": "AL",
    "teamDivision": "East",
    "teamWebsite": "https://www.mlb.com/orioles",

richardsaci

console.log('Hello from getAverage.js');

function getAverage() {
    let a = teams.reduce((acc, cur) => acc + cur["teamPayroll"], 0)
    console.log(`Total MLB Payroll: ${a}`);
    let numberOfTeams = teams.length;
    console.log(`Total Number of MLB Teams: ${numberOfTeams}`);
    let avg = a / numberOfTeams;
    console.log(`The Average Payroll for a MLB Team is:  ${avg}`);
    return avg;

richardsaci

console.log('Hello from buildTeamsTable.js');


// New code for this lesson - Add Above or Below League Average Column to Our Table
let averageTeamPayroll = getAverage(); // Get and store the league average for payroll.
// 



function buildTeamsTable(teams) {

richardsaci

Link to Bootswatch Yeti. We are going to use Bootswatch Yeti as our CSS Theme.

<link rel="stylesheet" href="https://bootswatch.com/4/yeti/bootstrap.min.css">

---

** Link to Numeral Script.** Numeral is our NPM Library for formatting our numbers.

<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>

richardsaci

#Heading 1

##Heading 2

###Heading 3

####Heading 4

#####Heading 5

richardsaci

console.log('Hello from main.js');

// Create the elements I will need as Objects.
// I can use JavaScript to manage.
// Lesson Getting started with the Document Object Model API and JavaScript
const body = document.getElementById('body');
const header = document.createElement('header');
const h1 = document.createElement('h1');
const h4 = document.createElement('h4');
const title = document.getElementById('title');

richardsaci

Google Chrome Web Browser and Developer Tools:

Both Google Chrome and Microsoft Edge are built on the open source project chromium.

You are going to find the Developer tools experience very similar in these two browsers.

The best way to get Google Chrome is to search for "Google Chrome Download."

If you are on Windows 10 or 11 you already have Microsoft Edge.

I recommend making Google Chrome or Microsoft Edge your default browser in your operating system.

richardsaci

Visual Studio Code

Visual Studio Code is recommended, but you can use your preferred IDE (Integrated Development Environment). Honestly, I cannot compare it to many of its competitors since I have been using some version of Microsoft Visual Studio for over two decades. It is a great integrated development environment with extensions galore and new features added monthly.

I find it the most popular IDE by far and used by 90% of the development teams I have met and consulted.

For this project, the only Visual Studio Code Extension requirement is "Live Server." The version I am using is 5.6.1. Ritwick Dey developed the extension.

• Download and install Visual Studio Code.

richardsaci

Document Object Model 1 of 3

"The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document." - World Wide Web Consortium

Resources for more information: MDN w3schools

• The HTML DOM is a standard object model and programming interface for HTML. It defines:
• The HTML Elements as Objects