We Keep Coding

Why does my second For Loop in JS not working?

I hope everyone is good. I am presently working on a landing page. I want the visibilities of some divs to be controlled by some buttons, i.e when a particular button is clicked, a particular div should display, and when another button is clicked, another div should display. I want this to happen at two different sections of the page. I did for the first section and it works fine, but when I did for the second section, it didn’t work. When I comment out the first section, the second starts working. Also when I interchanged their position, the second works while the first refused to work.
Kindly help me out with this.
Thank you.
/************************FAQ Section**************/
const questions = document.querySelectorAll(".btn2");
for (let j = 0; j <= questions.length; j++){
questions[j].addEventListener('click', (e) => {
const et = e.target;
const activeBtn = document.querySelector(".active");
if (activeBtn){
activeBtn.classList.remove("active");
}
et.classList.add("active");
const answers = document.querySelectorAll(".answer");
for (let x = 0; x <= answers.length; x++){
if(answers[x].getAttribute("data-number") === questions[j].getAttribute("data-number")){
answers[x].style.display = "block";
} else {
answers[x].style.display = "none";
}
}
});
}
/*************************Browse Courses**********************/
const schools = document.querySelectorAll(".btn3");
for (let y = 0; y <= schools.length; y++){
let test = schools[y].getAttribute("data-id");
console.log(test);
}
//The First Section
<div class="container-fluid mt-4">
<div class="btn-group">
<button data-number="1" class="btn btn2 active">
<h5>
What Are Coding Bootcamps?
</h5>
<i class="fa-solid fa-angle-right"></i>
</button>
<button data-number="2" class="btn btn2">
<h5>
How Do Coding Bootcamps Work?
</h5>
<i class="fa-solid fa-angle-right"></i>
</button>
<button data-number="3" class="btn btn2">
<h5>How Do I Choose My Tech Carrer Path?</h5>
<i class="fa-solid fa-angle-right"></i>
</button>
<button data-number="4" class="btn btn2">
<h5>
How Long Are The Nest Academy Coding Bootcamps?
</h5>
<i class="fa-solid fa-angle-right"></i>
</button>
<button data-number="5" class="btn btn2">
<h5>
How Much Do Coding Bootcamps Cost?
</h5>
<i class="fa-solid fa-angle-right"></i>
</button>
</div>
<div class="answer" data-number="1">
<p>
<h5>
What Are Coding Bootcamps?
</h5>
<p>
Coding bootcamps are short, intensive training coding programs and tech courses that give students the
skills they need for new careers in technology. Programming bootcamps and code schools like BrainStation
have become an increasingly popular alternative to a four-year computer science degree, allowing
students to gain real-world experience under the instruction of top industry professionals.
While "coding bootcamps" as a term has come to be used for digital skills training across disciplines,
including courses and programs relating to web development, software development, data science, UX
design, and digital marketing, the term originally was meant to describe short-term, intensive training
programs in full-stack web development, software development, or software engineering.
As one of the best coding bootcamps, BrainStation provides hands-on, project-based learning, allowing
students with no prior experience to learn how to use programming languages like HTML, CSS, JavaScript,
Python, SQL, and more.
The goal of our coding bootcamps is to prepare you for a new career in web development, software
development and engineering, data science, design, security, digital marketing, or related tech fields.
To that end, bootcamp graduates also benefit from ongoing, personalized career services meant to provide
guidance and support during the job search.
</p>
</p>
</div>
<div class="answer" data-number="2">
<p>
<h5>
How Do Coding Bootcamps Work?
</h5>
<p>
Coding bootcamps work by giving students hands-on experience with the key programming languages, knowledge areas, and technical skills needed for a career in technology.
The best coding bootcamps are taught by experienced professionals who know what employers are looking for. Many bootcamp students are looking to change careers, so the best bootcamps help with the job search, including career services, a network of hiring partners, and opportunities to build professional networks through events and guest lectures.
Ultimately, coding bootcamp students learn the skills and develop the project portfolio necessary to land a job in web and software development, software engineering, data science, UX design, digital marketing, or other tech fields.
</p>
</p>
</div>
<div class="answer" data-number="3">
<p>
<h5>
How Do I Choose my Tech Career Path?
</h5>
<p>
When trying to determine your tech career path, the first step is to understand where your interests and passions truly lie. Do you have a good sense of computer science fundamentals? Are you excited about the idea of building a website? Take a look at full-stack web development and the kinds of careers you can have after taking a web development bootcamp. Are you good with numbers and like identifying trends (that would have remained hidden)? A career in data science might be for you. Asking yourself questions like these will help guide your job search and the kind of training you need.
From there, take stock of the skills and experience you currently have – whether or not they are in computer science. Is there any overlap with skills that are most in demand? Does your education and professional experience lend itself to an emerging field like data science, software, development, or digital marketing?
</p>
</p>
</div>
<div class="answer" data-number="4">
<p>
<h5>
How Long Are BrainStation's Coding Bootcamps?
</h5>
<p>
BrainStation's coding bootcamps generally take three months to complete on a full-time basis — 12 weeks.
In that time, you will develop a comprehensive understanding of web development, data science, user experience design, or digital marketing fundamentals, and learn how to apply these new skills and knowledge. BrainStation bootcamps are immersive and project-based, allowing you to build a portfolio of completed projects by the end of the bootcamp.
For students seeking more flexibility, BrainStation also offers part-time bootcamps, which are completed over eight months.
</p>
</p>
</div>
<div class="answer" data-number="5">
<p>
<h5>
How Much Do Coding Bootcamps Cost?
</h5>
<p>
Tuition for full-time coding bootcamps can vary depending on the field of study, the location of the campus, the method of study chosen (online or in-person), or how comprehensive the course is.
Some programming bootcamps and code schools could be relatively inexpensive or quick to complete, but might not cover the full range of skills and competencies needed, especially for students interested in full-stack web development.
</p>
</p>
</div>
</div>
//The Second Section
<div class="container-fluid bg-primary">
<div class="row">
<div class="col-4 bg-dark"></div>
<div class="col-8 bg-danger">
<div class="btn-group">
<button data-number="1" class="btn btn3 active-course">
Tech
</button>
<button data-number="2" class="btn btn3">
Enter
</button>
<button data-number="3" class="btn btn3">
Creative
</button>
</div>
</div>
</div>
</div>
<div class="container">
<div data-number="1" class="browse-course1">
<div class="row">
<div class="col pt-5 bg-light"></div>
<div class="col pt-5 bg-success"></div>
<div class="col pt-5 bg-secondary"></div>
<div class="col pt-5 bg-warning"></div>
<div class="col pt-5 bg-info"></div>
</div>
</div>
<div data-number="2" class="browse-course1">
<div class="row">
<div class="col pt-5 bg-light"></div>
<div class="col pt-5 bg-success"></div>
<div class="col pt-5 bg-secondary"></div>
<div class="col pt-5 bg-warning"></div>
<div class="col pt-5 bg-info"></div>
</div>
</div>
<div data-number="3" class="browse-course1">
<div class="row">
<div class="col pt-5 bg-light"></div>
<div class="col pt-5 bg-success"></div>
<div class="col pt-5 bg-secondary"></div>
<div class="col pt-5 bg-warning"></div>
<div class="col pt-5 bg-info"></div>
</div>
</div>
</div>

I solved the problem of loops using forEach instead
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
because maybe the problem is in one of the for < or > (array start with 0)
so with forEach you will never have this problem and is more readable
also, another problem in the school that print "null" because you didn't add data-id but you have data-number
const questions = document.querySelectorAll(".btn2");
const answers = document.querySelectorAll(".answer");
const schools = document.querySelectorAll(".btn3");
questions.forEach((question) => {
question.addEventListener("click", (e) => {
const et = e.target;
const activeBtn = document.querySelector(".active");
if (activeBtn) {
activeBtn.classList.remove("active");
}
et.classList.add("active");
answers.forEach((answer) => {
if (
answer.getAttribute("data-number") ===
question.getAttribute("data-number")
) {
answer.style.display = "block";
} else {
answer.style.display = "none";
}
})
});
});
/*************************Browse Courses**********************/
schools.forEach((school) => {
// not data-id
let test = school.getAttribute("data-number");
console.log(test);
})
<body>
<div class="container-fluid mt-4">
<div class="btn-group">
<button data-number="1" class="btn btn2 active">
<h5>
What Are Coding Bootcamps?
</h5>
<i class="fa-solid fa-angle-right"></i>
</button>
<button data-number="2" class="btn btn2">
<h5>
How Do Coding Bootcamps Work?
</h5>
<i class="fa-solid fa-angle-right"></i>
</button>
<button data-number="3" class="btn btn2">
<h5>How Do I Choose My Tech Carrer Path?</h5>
<i class="fa-solid fa-angle-right"></i>
</button>
<button data-number="4" class="btn btn2">
<h5>
How Long Are The Nest Academy Coding Bootcamps?
</h5>
<i class="fa-solid fa-angle-right"></i>
</button>
<button data-number="5" class="btn btn2">
<h5>
How Much Do Coding Bootcamps Cost?
</h5>
<i class="fa-solid fa-angle-right"></i>
</button>
</div>
<div class="answer" data-number="1">
<p>
<h5>
What Are Coding Bootcamps?
</h5>
<p>
Coding bootcamps are short, intensive training coding programs and tech courses that give students the skills they need for new careers in technology. Programming bootcamps and code schools like BrainStation have become an increasingly popular alternative
to a four-year computer science degree, allowing students to gain real-world experience under the instruction of top industry professionals. While "coding bootcamps" as a term has come to be used for digital skills training across disciplines,
including courses and programs relating to web development, software development, data science, UX design, and digital marketing, the term originally was meant to describe short-term, intensive training programs in full-stack web development,
software development, or software engineering. As one of the best coding bootcamps, BrainStation provides hands-on, project-based learning, allowing students with no prior experience to learn how to use programming languages like HTML, CSS,
JavaScript, Python, SQL, and more. The goal of our coding bootcamps is to prepare you for a new career in web development, software development and engineering, data science, design, security, digital marketing, or related tech fields. To that
end, bootcamp graduates also benefit from ongoing, personalized career services meant to provide guidance and support during the job search.
</p>
</p>
</div>
<div class="answer" data-number="2">
<p>
<h5>
How Do Coding Bootcamps Work?
</h5>
<p>
Coding bootcamps work by giving students hands-on experience with the key programming languages, knowledge areas, and technical skills needed for a career in technology. The best coding bootcamps are taught by experienced professionals who know what employers
are looking for. Many bootcamp students are looking to change careers, so the best bootcamps help with the job search, including career services, a network of hiring partners, and opportunities to build professional networks through events and
guest lectures. Ultimately, coding bootcamp students learn the skills and develop the project portfolio necessary to land a job in web and software development, software engineering, data science, UX design, digital marketing, or other tech
fields.
</p>
</p>
</div>
<div class="answer" data-number="3">
<p>
<h5>
How Do I Choose my Tech Career Path?
</h5>
<p>
When trying to determine your tech career path, the first step is to understand where your interests and passions truly lie. Do you have a good sense of computer science fundamentals? Are you excited about the idea of building a website? Take a look at
full-stack web development and the kinds of careers you can have after taking a web development bootcamp. Are you good with numbers and like identifying trends (that would have remained hidden)? A career in data science might be for you. Asking
yourself questions like these will help guide your job search and the kind of training you need. From there, take stock of the skills and experience you currently have – whether or not they are in computer science. Is there any overlap with
skills that are most in demand? Does your education and professional experience lend itself to an emerging field like data science, software, development, or digital marketing?
</p>
</p>
</div>
<div class="answer" data-number="4">
<p>
<h5>
How Long Are BrainStation's Coding Bootcamps?
</h5>
<p>
BrainStation's coding bootcamps generally take three months to complete on a full-time basis — 12 weeks. In that time, you will develop a comprehensive understanding of web development, data science, user experience design, or digital marketing fundamentals,
and learn how to apply these new skills and knowledge. BrainStation bootcamps are immersive and project-based, allowing you to build a portfolio of completed projects by the end of the bootcamp. For students seeking more flexibility, BrainStation
also offers part-time bootcamps, which are completed over eight months.
</p>
</p>
</div>
<div class="answer" data-number="5">
<p>
<h5>
How Much Do Coding Bootcamps Cost?
</h5>
<p>
Tuition for full-time coding bootcamps can vary depending on the field of study, the location of the campus, the method of study chosen (online or in-person), or how comprehensive the course is. Some programming bootcamps and code schools could be relatively
inexpensive or quick to complete, but might not cover the full range of skills and competencies needed, especially for students interested in full-stack web development.
</p>
</p>
</div>
</div>
<div class="container-fluid bg-primary">
<div class="row">
<div class="col-4 bg-dark"></div>
<div class="col-8 bg-danger">
<div class="btn-group">
<button data-number="1" class="btn btn3 active-course">
Tech
</button>
<button data-number="2" class="btn btn3">
Enter
</button>
<button data-number="3" class="btn btn3">
Creative
</button>
</div>
</div>
</div>
</div>
<div class="container">
<div data-number="1" class="browse-course1">
<div class="row">
<div class="col pt-5 bg-light"></div>
<div class="col pt-5 bg-success"></div>
<div class="col pt-5 bg-secondary"></div>
<div class="col pt-5 bg-warning"></div>
<div class="col pt-5 bg-info"></div>
</div>
</div>
<div data-number="2" class="browse-course1">
<div class="row">
<div class="col pt-5 bg-light"></div>
<div class="col pt-5 bg-success"></div>
<div class="col pt-5 bg-secondary"></div>
<div class="col pt-5 bg-warning"></div>
<div class="col pt-5 bg-info"></div>
</div>
</div>
<div data-number="3" class="browse-course1">
<div class="row">
<div class="col pt-5 bg-light"></div>
<div class="col pt-5 bg-success"></div>
<div class="col pt-5 bg-secondary"></div>
<div class="col pt-5 bg-warning"></div>
<div class="col pt-5 bg-info"></div>
</div>
</div>
</div>
</body>

Since you have your answer here's an alternative example.
Instead of attaching listeners to all the buttons use event delegation to attach one listener to the buttons' parent element which can catch events from the child elements as they "bubble up" the DOM. When an event is captured a function is called, and if the child element is a button .
Note: your HTML is invalid at the moment - you can't have block elements like headings inside paragraphs or buttons which only accept phrasing content. So I've introduced some semantic mark-up in this example: nav, and article, and section.
// Cache your elements/containers
const answerSection = document.querySelector('.answers');
const nav = document.querySelector('nav');
// Add an event listener to the navigation section
nav.addEventListener('click', handleNav);
// Accepts a nodelist, and removes the active class
// from each node
function removeActive(nodelist) {
nodelist.forEach(node => node.classList.remove('active'));
}
// Called when a child element of `nav` is clicked
function handleNav(e) {
// Check that the child element that was clicked
// was a button
if (e.target.matches('button')) {
// Get all the buttons from `nav`,
// remove all the active classes, and then
// add an active class to the button that was clicked
const buttons = nav.querySelectorAll('button');
removeActive(buttons);
e.target.classList.add('active');
const answers = answerSection.querySelectorAll('.answer');
removeActive(answers);
// Get the number from the clicked button's dataset
const { number } = e.target.dataset;
// Form a selector with that number
const selector = `[data-number="${number}"]`;
// Find that corresponding answer in the answer section
const answer = answerSection.querySelector(selector);
// Add an active class to that answer
answer.classList.add('active');
}
}
nav { display: flex; flex-direction: row; }
nav button { padding: 0.25em 0.4em; }
nav button:not(:last-child) { margin-right: 0.5em; }
nav button:hover { cursor: pointer; background-color: #fffff0; }
nav button.active { background-color: lightblue; }
.answer { display: none; }
.answer.active { display: block; }
<nav>
<button data-number="1" class="active">
What Are Coding Bootcamps?
</button>
<button data-number="2">
How Do Coding Bootcamps Work?
</button>
<button data-number="3">
How Do I Choose My Tech Carrer Path?
</button>
<button data-number="4">
How Long Are The Nest Academy Coding Bootcamps?
</button>
<button data-number="5">
How Much Do Coding Bootcamps Cost?
</button>
</nav>
<section class="answers">
<article class="answer active" data-number="1">
<h3>
What Are Coding Bootcamps?
</h3>
<p>
Coding bootcamps are short, intensive training coding programs and tech courses that give students the skills they need for new careers in technology. Programming bootcamps and code schools like BrainStation have become an increasingly popular alternative to a four-year computer science degree, allowing students to gain real-world experience under the instruction of top industry professionals. While "coding bootcamps" as a term has come to be used for digital skills training across disciplines, including courses and programs relating to web development, software development, data science, UX design, and digital marketing, the term originally was meant to describe short-term, intensive training programs in full-stack web development, software development, or software engineering. As one of the best coding bootcamps, BrainStation provides hands-on, project-based learning, allowing students with no prior experience to learn how to use programming languages like HTML, CSS, JavaScript, Python, SQL, and more. The goal of our coding bootcamps is to prepare you for a new career in web development, software development and engineering, data science, design, security, digital marketing, or related tech fields. To that end, bootcamp graduates also benefit from ongoing, personalized career services meant to provide guidance and support during the job search.
</p>
</article>
<article class="answer" data-number="2">
<h3>
How Do Coding Bootcamps Work?
</h3>
<p>
Coding bootcamps work by giving students hands-on experience with the key programming languages, knowledge areas, and technical skills needed for a career in technology. The best coding bootcamps are taught by experienced professionals who know what employers are looking for. Many bootcamp students are looking to change careers, so the best bootcamps help with the job search, including career services, a network of hiring partners, and opportunities to build professional networks through events and guest lectures. Ultimately, coding bootcamp students learn the skills and develop the project portfolio necessary to land a job in web and software development, software engineering, data science, UX design, digital marketing, or other tech fields.
</p>
</article>
<article class="answer" data-number="3">
<h3>
How Do I Choose my Tech Career Path?
</h3>
<p>
When trying to determine your tech career path, the first step is to understand where your interests and passions truly lie. Do you have a good sense of computer science fundamentals? Are you excited about the idea of building a website? Take a look at full-stack web development and the kinds of careers you can have after taking a web development bootcamp. Are you good with numbers and like identifying trends (that would have remained hidden)? A career in data science might be for you. Asking yourself questions like these will help guide your job search and the kind of training you need. From there, take stock of the skills and experience you currently have – whether or not they are in computer science. Is there any overlap with skills that are most in demand? Does your education and professional experience lend itself to an emerging field like data science, software, development, or digital marketing?
</p>
</article>
<article class="answer" data-number="4">
<h3>
How Long Are BrainStation's Coding Bootcamps?
</h3>
<p>
BrainStation's coding bootcamps generally take three months to complete on a full-time basis — 12 weeks. In that time, you will develop a comprehensive understanding of web development, data science, user experience design, or digital marketing fundamentals, and learn how to apply these new skills and knowledge. BrainStation bootcamps are immersive and project-based, allowing you to build a portfolio of completed projects by the end of the bootcamp. For students seeking more flexibility, BrainStation also offers part-time bootcamps, which are completed over eight months.
</p>
</article>
<article class="answer" data-number="5">
<h3>
How Much Do Coding Bootcamps Cost?
</h3>
<p>
Tuition for full-time coding bootcamps can vary depending on the field of study, the location of the campus, the method of study chosen (online or in-person), or how comprehensive the course is. Some programming bootcamps and code schools could be relatively inexpensive or quick to complete, but might not cover the full range of skills and competencies needed, especially for students interested in full-stack web development.
</p>
</article>
</section>

Pie Chart using chart.js not showing up but bar charts are?

Currently working on my portfolio and I am including some graphs using chart.js. I am able to get two bar charts up and working on my cloud storage case study, but cannot get the pie chart to work on my BusyBus case study. Here is the chart js code for the pie chart and my BusyBus case study code. Ideally the pie chart would show up where I commented <!---BusyBus Pie Chart Here---> Thank you in advance!
var pieChart = new Chart(buspie, {
type: 'pie',
data: {
labels: ["Green", "Blue", "Gray", "Purple", "Yellow", "Red", "Black"],
datasets: [{
backgroundColor: [
"#2ecc71",
"#3498db",
"#95a5a6",
"#9b59b6",
"#f1c40f",
"#e74c3c",
"#34495e"
],
data: [12, 19, 3, 17, 28, 24, 7]
}]
}
});
-----------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>Portfolio | Lily Wu</title>
</head>
<body>
<div class="container">
<header>
<img class="logo" src="images/logo.svg" alt="logo">
<nav>
<ul class="nav__links">
<li>Work</li>
<li>About</li>
<li>Resume</li>
</ul>
</nav>
<a class="cta" href="contact.html"><button>Contact</button></a>
<a onclick="openNav()" class="menu" href="#"><button>Menu</button></a>
</header>
<!---Mobile Nav--->
<div id="mobile__menu" class="overlay">
<a class="close" onclick="closeNav()">×</a>
<div class="overlay__content">
Work
About
Resume
Contact
</div>
</div>
<script type ="text/javascript" src="mobile.js"></script>
<!---BusyBus Case Study Info--->
<section class="canopy-title">
<h1>BusyBus</h1>
</section>
<section class="canopy-description">
<p id="canopy-header-p">BusyBus is a public transit application that helps bus riders determine what time their bus is arriving to plan trips efficiently.</p>
</section>
<!---BusyBus BUTTONS--->
<section class="busybus-buttons">
<article>
<a class="view-mobile" href="canopy.html"><button>View Mobile Prototype</button></a>
</article>
</section>
<!---BusyBus PICS--->
<section class="busybus-pics">
<article class="busybus-mobile-img">
<img id="busybus-mobile-pic" src="images/busybusmain.jpg" alt="canopy">
</article>
</section>
<!---BusyBus Design Roles, Deliverables, Specifications--->
<section class="canopy-overview">
<article class="canopy-design-roles">
<h4>Design Roles</h4>
<ul>
<li>UX Design</li>
<li>Visual Design</li>
<li>Branding & Identity</li>
</ul>
</article>
<article class="canopy-deliverables">
<h4>Deliverables</h4>
<ul>
<li>User Surveys</li>
<li>Personas</li>
<li>Competitive Analysis</li>
<li>Concept & Brand Identity</li>
<li>User Stories</li>
<li>User Flows</li>
<li>Wireframes</li>
<li>User Testing</li>
</ul>
</article>
<article class="canopy-specifications">
<h4>Specifications</h4>
<ul>
<li><strong>Tools & Software</strong></li>
<li>Figma</li>
<li>UsabilityHub</li>
<li>Duration: 2 weeks</li>
</ul>
</article>
</section>
<!---BusyBus Problem & Solution--->
<section class="canopy-problem-solution">
<article>
<h4>Problem: Addition of New Bus Routes Cause Rider Confusion </h4>
<p id="canopy-body-text">Due to the addition of new bus routes, there are different buses stopping at the same bus stop. Bus riders need to know if the approaching bus is the bus they need to get on, or what time their desired bus is arriving at.</h4>
<h4>Solution: Bus Arrival Times Helps Riders Plan Efficient Trips</h4>
<p id="canopy-body-text">Design an app for bus riders to see what time their bus is arriving at the current bus stop. The app should show:<br><br>1) Bus number and terminal name<br><br>2) Show bus arrival time in minutes<br><br>3) Ability to see when the following bus is arriving</p>
</article>
</section>
<!---BusyBus 01 Research & Define--->
<section class="canopy-process-section">
<h2>What Public Transit Apps Are Out There?</h2>
<h6>Competitive Analysis</h6>
<p id="canopy-body-text">In order to better understand the competition and the client's required features for this product, I did a competitive analysis of two public transit apps Moovit and Google Maps</p>
</section>
<div class="busybus-competition-container">
<div class="busybus-competition">
<h5>Moovit</h5>
<img id="moovit-pic" src="images/moovit.png" alt="google">
<div class="busybus-competition-text">
<img id="check-icon" src="images/check-icon.png" alt="check-icon">
<p id="busybus-card-text">Suggests the bus route to get to the desired destination</p>
<img id="x-icon" src="images/x-icon.png" alt="x-icon">
<p id="busybus-card-text">Does not show what direction the bus is bound for.</p>
<img id="x-icon" src="images/x-icon.png" alt="x-icon">
<p id="busybus-card-text">The mintues next to the bus number may be misleading since it shows the minutes it takes to get to the destination, and not in how many minutes the bus will arrive</p>
</div>
</div>
<div class="busybus-competition">
<h5>Google Maps</h5>
<img id="googlemaps-pic" src="images/googlemaps.png" alt="google">
<div class="busybus-competition-text">
<img id="check-icon" src="images/check-icon.png" alt="check-icon">
<p id="busybus-card-text">Recommends a bus route to get to the desired destination</p>
<img id="x-icon" src="images/x-icon.png" alt="x-icon">
<p id="busybus-card-text">Does not fully show the whole bus route name/direction</p>
<img id="x-icon" src="images/x-icon.png" alt="x-icon">
<p id="busybus-card-text">The minutes next to the bus number may be misleading since it shows the minutes it takes to get to the destination, and not in how many minutes the bus will arrive</p>
</div>
</div>
</div>
<section class="canopy-text-block">
<p id="canopy-body-text">These platforms are well established within the public transit app space. They have a great set of features that keep users satisfied. However, improvements can be made in regards to the display of bus information. This allows a newcomer to enter the market. As a newcomer, BusyBus can provide clear bus information to the rider and help them better plan and schedule trips that require public transit.</p>
</section>
<section class="results-button">
<a class="click-through-button" href="canopy.html"><button>View SWOT Analysis</button></a>
</section>
<!---BusyBus User Surveys--->
<section class="canopy-text-block">
<h6>User Survey</h6>
<p id="canopy-body-text">To better understand the features that would a part of BusyBus, I conducted a user survey to find out what information is the most important to bus riders.</p>
</section>
<!---BusyBus Pie Chart Here--->
<section class="user-graph-1">
<canvas id="pieChart"></canvas>
</section>
<section class="canopy-text-block">
<p id="canopy-body-text">The majority of public transit app users believe improvements could be made on the current app they are using.</p>
</section>
<!---BusyBus Bar Chart Here--->
<section class="canopy-text-block">
<p id="canopy-body-text">The survey results indicate a majority of users value features such as seeing real time updates in regards to alerts on bus routes, as well as seeing when the following bus is arriving.</p>
</section>
<section class="cloud-uses-title">
<h4>Top 2 Features To Include in BusyBus First Iteration</h4>
</section>
<div class="busybus-competition-container">
<div class="busybus-feature">
<h5>Alerts for bus routes</h5>
<img id="bus-icon" src="images/alert_bus.png" alt="google">
</div>
<div class="busybus-feature">
<h5>Arrival time of current bus and next bus</h5>
<img id="bus-icon" src="images/arrival_bus.png" alt="google">
</div>
</div>
<section class="canopy-text-block">
<p id="canopy-body-text">Additional features that users would also like to see in an improved public transit app include being able to see how long it would take to get to the bus stop from their current location. This can help users better plan their trips. These additional features will be factored into later iterations of this app.</p>
<p id="canopy-body-text"><b>The user survey has helped identify the first set of features for BusyBus. BusyBus will help users identify different buses and arrival times due to the bus route expansion in the city.</b></p>
</section>
<section class="results-button">
<a class="click-through-button" href="canopy.html"><button>View User Survey Analysis</button></a>
</section>
<section class="canopy-process-section">
<h2>Identifying the Users</h2>
<h6>02 Strategy</h6>
<p id ="canopy-body-text">Based on the user research results, two personas were created to help further identify the direction of this new public transit app.</p>
</section>
<section class="user-personas">
<article>
<h5>Aleena, 32 years old - Sr. Software Engineer</h5>
<img id="user1" src="images/bus_user1.png" alt="persona1">
<p>"There are so many buses that stop at my stop, it would be great to know when the bus I want to get on is arriving. Also if there were any delays, I would like to know in advance."</p>
<div class="user-needs">
<p>Goals</p>
<ul>
<li>Being able to see what time the desired bus is arriving at, as well as what time the next bus is arriving</li>
<li>Being able to see any sudden changes in the bus schedule</li>
</ul>
</div>
<div class="user-needs">
<p>Frustrations</p>
<ul>
<li>Delayed buses causes delay in getting to work</li>
<li>Not knowing about bus delays in advance in order to find alternative modes of transportation</li>
<li>Changes in bus routes might mean getting on the wrong bus</li>
</ul>
</div>
</article>
<article>
<h5>Kevin, 22 years old - Business Student</h5>
<img id="user1" src="images/bus_user2.png" alt="persona1">
<p>"I take the bus to get to my part-time job. I need to know the intervals of my bus in case I miss the first one so I can give my co-workers a heads up I might be running a few minutes behind."</p>
<div class="user-needs">
<p>Goals</p>
<ul>
<li>Being able to see what time the desired bus is arriving at, as well as what time the next bus is arriving.</li>
<li>Being able to see sudden changes in the bus schedule</li>
</ul>
</div>
<div class="user-needs">
<p>Frustrations</p>
<ul>
<li>Delayed buses causes delay in getting to work</li>
<li>Desired bus that is arriving is labeled "Out of Service", therefore rider has to wait for another bus</li>
<li>Not knowing if multiple buses run through the desired destination.</li>
<li>Hard to keep track of changes for a file</li>
</ul>
</div>
</article>
</section>
<section class="canopy-text-block">
<h6>User Stories</h6>
<p id ="canopy-body-text">Before the design started it was important to create user stories and highlight the important tasks to create a prodcut that would be viable. A list of user stories were created with the high priorty tasks being the main focus for the first iteration.</p>
</section>
<section class="client-features">
<article>
<h5>High Priority Tasks For A BusyBus New User</h5>
<ul>
<li>As a new user, I want to see all bus routes at a specific bus stop.</li>
<li>As a new user, I want to find out what time my bus will be arriving.</li>
<li>As a new user, I want to be notified of any alerts/delays on my bus route.</li>
<li>As a new user, I want to see a map of the bus routes.</li>
</ul>
</article>
</section>
<section class="results-button">
<a class="click-through-button" href="canopy.html"><button>View User Stories</button></a>
</section>
<section class="canopy-process-section">
<h2>Prototyping for BusyBus</h2>
<h6>03 Information Architecture</h6>
<p id ="canopy-body-text">Before the actual designing started, it was important to create a paper prototype of the app with features that would allow users to complete the high priority tasks. The results from this user test will be used to help build out the actual app.</p>
</section>
<section class="bus-sketch-screens">
<article>
<img id="bussketch1" src="images/bus-sketch1.png" alt="bus_sketch">
</article>
<article>
<img id="bussketch1" src="images/bus-sketch1.png" alt="bus_sketch">
</article>
<article>
<img id="bussketch1" src="images/bus-sketch1.png" alt="bus_sketch">
</article>
</section>
<section class="canopy-text-block">
<h6>Usability Test</h6>
<p id ="canopy-body-text">The task for this usability test with the paper prototype was for the user to find out when the N4 bus was arriving at the Washington & State stop. The 3 users were able to do so by clicking on the Washington & State stop under "nearby stops," and were able to navigate to the next screen showing all 7 bus lines.</p>
</section>
<section class="canopy-text-block">
<h6>Key Findings From Usability Test</h6>
<p id="canopy-body-text">Users wanted to know what was the purpose of the "sort by" field next to near by stops. They wanted to know what was being sorted. Ideally in a second round of testing, this feature would be tested to see if it adds any value for the user.</p>
</section>
<section class="busy-sketch-screens">
<article>
<img id="bussketch1" src="images/sortby.png" alt="sortby_sketch_1">
</article>
</section>
<section class="canopy-text-block">
<p id ="canopy-body-text">Users were not sure what was meant by "Washington & State." It was not clear to users that it was a bus stop and not a bus line.</p>
</section>
<section class="busy-sketch-screens">
<article>
<img id="bussketch1" src="images/bus_stop.png" alt="sortby_sketch_1">
</article>
</section>
<section class="canopy-text-block">
<p id ="canopy-body-text">Under the favorite stops section it currently shows the bus stop name rather than the bus number. In the next iteration this will be changed to show the bus line number that users frequent the most to make that information compatible with the bus arrival time that is listed.</p>
</section>
<section class="busy-sketch-screens">
<article>
<img id="bussketch1" src="images/bus_stop_b.png" alt="sortby_sketch_1">
</article>
</section>
<section class="canopy-text-block">
<p id ="canopy-body-text">Users were confused by what the "up and down" arrows meant. This was meant to change the direction of where the buses were headed, for example "inbound" vs. "outbound". However this is feature confused users and will be removed and not included in the final design.</p>
</section>
<section class="busy-sketch-screens">
<article>
<img id="bussketch1" src="images/bus_arrow.png" alt="sortby_sketch_1">
</article>
</section>
<section class="canopy-text-block">
<p id ="canopy-body-text">With the results from the usability test, the next step is to design the screen that users will use to determine what time their bus is arriving. </p>
</section>
<section class="results-button">
<a class="click-through-button" href="canopy.html"><button>View Marvel Prototype</button></a>
</section>
<section class="canopy-process-section">
<h2>Branding & Identity</h2>
<h6>04 Colors</h6>
<p id ="canopy-body-text">To convey a feeling of trust and reliability for BusyBus, the main color that will be used is blue. Users expect accuracy and dependability when they use the public transit app to plan their trip, and blue can help get this message across. Grey colors will be used for the text.</p>
</section>
<section class="cloud-uses-title">
<h4>Primary Brand Colors for BusyBus</h4>
</section>
<section class="cloud-usage-colors">
<article class="cloud-uses-pics">
<img id="use-pic" src="images/busy_color1.png" alt="busybus_color">
<p id="use-text">Main Color<br>HEX # 2A56C6<br>RGB 42/ 86/ 198</p>
</article>
<article class="cloud-uses-pics">
<img id="use-pic" src="images/busy_color2.png" alt="content">
<p id="use-text">Main Color<br>HEX # 4D4D4D<br>RGB 77/ 77/ 77</p>
</article>
<article class="cloud-uses-pics">
<img id="use-pic" src="images/busy_color3.png" alt="share">
<p id ="use-text">Main Color<br>HEX # 8B8A93<br>RGB 139/ 138/ 147</p>
</article>
<article class="cloud-uses-pics">
<img id="use-pic" src="images/busy_color4.png" alt="share">
<p id="use-text">Alert Color<br>HEX # E46B75<br>RGB 228/ 107/ 117</p>
</article>
</section>
<section class="canopy-text-block">
<p id="canopy-body-text">Red is used as an alert color to signal to users any unexpected changes that may occur regarding the bus schedule.</p>
</section>
<section class="canopy-text-block">
<h6>Typography</h6>
<p id="canopy-body-text">Roboto was chosen as a typeface for the BusyBus app. This version of BusyBus is designed for Android and Roboto is a simple typeface developed for Android systems. The basic and clean look of Roboto helps deliver the bus information to the user in a straightforward manner.</p>
</section>
<section class="canopy-process-section">
<h2>05 Visual Design</h2>
<h6>High Fidelity Mock Ups</h6>
<p id ="canopy-body-text">With wireframes in place and a defined brand identity, I went on to develop the high fidelity mockups of BusyBus. The screen that will be mock up is the screen where users will see what bus is arriving and the time it will arrive. The following are screens of the design progression.</p>
</section>
<section class="bus-hifi-screens">
<article class="bus-uses-pics">
<h5>First Iteration</h5>
<img id="bus-design-pic" src="images/bus-design-1.png" alt="busybus_screen">
<p id="use-text">There is not enough distinction between the bus number and desitination. There needs to be more hierarchy</p>
</article>
<article class="bus-uses-pics">
<h5>Second Iteration</h5>
<img id="bus-design-pic" src="images/bus-design-2.png" alt="busybus_screen">
<p id="use-text">Distinction between the bus number and destination is clearer, but there is still opportunity to improve on the type of information being displayed.</p>
</article>
<article class="bus-uses-pics">
<h5>Third Iteration</h5>
<img id="bus-design-pic" src="images/bus-design-3.png" alt="busybus_screen">
<p id ="use-text">There is a clear distinction between bus number and destination. The alert info is being displayed to the bus rider as well.</p>
</article>
</section>
<section class="results-button">
<a class="click-through-button" href="canopy.html"><button>View Final Prototype</button></a>
</section>
<section class="canopy-process-section">
<h2>Coding the BusyBus Screen</h2>
<h6>Using HTML & CSS</h6>
<p id="canopy-body-text">To further move this prototype along, the next step was to translate the design into code. The overall structure of this code is written semantically to allow for organization and clarity when going through the code. <b>There are 3 sections for this screen: the header, the bus list, and the bottom navigation bar. The main component showing the arrival time of the buses was coded using list items.</b></p>
</section>
<section class="canopy-process-section">
<h2>Next Steps for BusyBus</h2>
<h6>Moving Forward</h6>
<p id="canopy-body-text">Some things to consider next is incorporating a map somewhere on the solution screen because this was a high priority tasks that was missed in the process. In addition, even though the solution screen has an established hierarchy, that can still be pushed further. For example, having a clearer distinction between buses that are in service versus out of service. This could be done by completely highlighting the out of service buses section in a muted color to indicate that they are not running.</p>
<p id="canopy-body-text">Further steps would be to test how users prefer the bus time to show up on the app. Would users prefer to see the actual arrival time of the bus such as "11:25 am", or would they prefer to see it as what it is currently, in time intervals such as the bus is arriving in "5 min, 20 min".</p>
<p id="canopy-body-text">These are a few things to consider as the project continues to develop and more users needs come to light through additional rounds of user testing.</p>
</section>
<section class="canopy-thankyou">
<p id="canopy-thanks">Thank you for stopping by!</p>
</section>
<section class="canopy-smile">
<img id="canopy-color-tag2" src="images/canopy-smiley.svg" alt="canopy_user_test_pic">
</section>
<section class="results-button">
<a class="click-through-button" href="canopy.html"><button>Next Project</button></a>
</section>
<!--- <article>
<p id="next-project">Next Project</p>
<img id ="next-arrow" src="images/next-arrow.svg" alt="next_arrow">
</article>--->
<!---Footer Section--->
<footer>
<h3>Let's connect and work together!</h3>
<ul class="socials">
<li><img id="social_icons" src="images/gmail.svg" alt="gmail"></li>
<li><img id="social_icons" src="images/linkedin.svg" alt="linkedin"></li>
<li><img id="social_icons" src="images/instagram.svg" alt="instagram"></li>
<li><img id="social_icons" src="images/github.svg" alt="instagram"></li>
</ul>
<p id="copyright">Copyright 2020 Designed & Developed by Lily Wu</p>
</footer>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script src="chartinfo.js"></script>
</body>
</html>

Try Using :
new Chart(document.getElementById("pieChart"), {
type: 'pie',
data: {
labels: ["Green", "Blue", "Gray", "Purple", "Yellow", "Red", "Black"],
datasets: [{
backgroundColor: ["your color list"],
data: [12, 19, 3, 17, 28, 24, 7]
}]
}
});

Why does a script at the end of the body block the page from loading?

If I add an alert in the page head the alert shows up normally and after clicking on OK the website loads, but when I move the alert into the end of the body element the webpage (according to YT videos) should load immediately but it doesn't. It still waiting on me on clicking "OK".
So where I did mistake?
<body>
<div id="contact-us">
<h2>Contact Us</h2>
<p>You can contact Mr Green in various ways ...</p>
<div class="contact-method">
<h3>By Phone</h3>
<p>222-222-FISH</p>
</div>
<div class="contact-method">
<h3>By Email</h3>
<p>iammrgreen#green.com</p>
</div>
<div class="contact-method">
<h3>By carrier pidgeon</h3>
<p>To do this, order your podgeon at www.mrgreenspidgeonemporium.com</p>
</div>
</div>
Go to top
<script>
alert("Yo Ninja, welcome to my website!");
</script>
</body>

You can do an experiment for example with setTimeout.
In this snippet if the timeout is too small the alert will appear before anything is painted on the screen, slightly bigger and the whole screen gets painted before the alert appears. It doesn't happen in bits.
<body>
<div id="contact-us">
<h2>Contact Us</h2>
<p>You can contact Mr Green in various ways ...</p>
<div class="contact-method">
<h3>By Phone</h3>
<p>222-222-FISH</p>
</div>
<div class="contact-method">
<h3>By Email</h3>
<p>iammrgreen#green.com</p>
</div>
<div class="contact-method">
<h3>By carrier pidgeon</h3>
<p>To do this, order your podgeon at www.mrgreenspidgeonemporium.com</p>
</div>
</div>
Go to top
<script>
function afterwait() {
alert("Yo Ninja, welcome to my website!");
}
setTimeout(afterwait, 10);
</script>
</body>

Fade out when other list items are clicked

Earlier this week I was using a tutorial to achieve something similar, but I have decided to strip it down to a basic functionality. I want the user to be able to click on the bottle they want to know about and a content opens up. But if a person does not click the X and instead clicks on other bottles, it should fade out the current content and then show the newly clicked one.
My knowledge of J Query is limited, so I know I am using a longer technique by targeting each one by their id. I would love a more structured shorter version if someone can show it to me.
But based on my knowledge this is what I could construct.
HTML
<div id="two" class="colorbottle">
<img src="images/2.png">
</div>
<div id="three" class="colorbottle">
<img src="images/3.png">
</div>
<div id="four" class="colorbottle">
<img src="images/4.png">
</div>
<div class="clearer"></div>
</div>
<div class="ei_descr" id="onedescr">
<div class="contact_close">X</div>
<h2>Gary</h2>
<h3>Vocals</h3>
<p>
A wonderful serenity has taken possession of my
entire soul, like these sweet mornings of
spring which I enjoy with my whole heart.
</p>
<p>
I am alone, and feel the charm of existence in
this spot, which was created for the bliss of
souls like mine.
</p>
</div>
<div class="ei_descr" id="twodescr">
<div class="contact_close">X</div>
<h2>Gary</h2>
<h3>Vocals</h3>
<p>
A wonderful serenity has taken possession of my
entire soul, like these sweet mornings of
spring which I enjoy with my whole heart.
</p>
<p>
I am alone, and feel the charm of existence in
this spot, which was created for the bliss of
souls like mine.
</p>
</div>
<div class="ei_descr" id="threedescr">
<div class="contact_close">X</div>
<h2>Gary</h2>
<h3>Vocals</h3>
<p>
A wonderful serenity has taken possession of my
entire soul, like these sweet mornings of
spring which I enjoy with my whole heart.
</p>
<p>
I am alone, and feel the charm of existence in
this spot, which was created for the bliss of
souls like mine.
</p>
</div>
<div class="ei_descr" id="fourdescr">
<div class="contact_close">X</div>
<h2>Gary</h2>
<h3>Vocals</h3>
<p>
A wonderful serenity has taken possession of my
entire soul, like these sweet mornings of
spring which I enjoy with my whole heart.
</p>
<p>
I am alone, and feel the charm of existence in
this spot, which was created for the bliss of
souls like mine.
</p>
</div>
Javascript
$(document).ready(function() {
$(".colorbottle").click(function () {
if(!$(this).hasClass('selected'))
{
$(".colorbottle.selected").removeClass("selected");
$(this).addClass("selected");
}
});
$("#one").click(function() {
$("#onedescr").fadeIn(1000);
$(".colorbottle").not( ".selected").animate({opacity:0.2});
$(".selected").animate({opacity:1});
})
$(".contact_close").click(function() {
$(".ei_descr").fadeOut("slow");
$(".colorbottle").animate({opacity:1});
});
$("#two").click(function() {
$("#twodescr").fadeIn(1000);
$(".colorbottle").not( ".selected").animate({opacity:0.2});
$(".selected").animate({opacity:1});
})
$("#three").click(function() {
$("#threedescr").fadeIn(1000);
$(".colorbottle").not( ".selected").animate({opacity:0.2});
$(".selected").animate({opacity:1});
})
$("#four").click(function() {
$("#fourdescr").fadeIn(1000);
$(".colorbottle").not( ".selected").animate({opacity:0.2});
$(".selected").animate({opacity:1});
})
});
Right now all it does is, fade in the one that is clicked, and makes the other bottles transparent.
here is the fiddle
Thanks

You need to use html data- attribute to store the id of div which needs to be shown on click of bottle div:
HTML:
<div id="wrapcraft">
<div id="one" class="colorbottle" data-id="onedescr">
<img src="http://i61.tinypic.com/v8n2hv.png">
</div>
<div id="two" class="colorbottle" data-id="twodescr">
<img src="http://i61.tinypic.com/v8n2hv.png">
</div>
<div id="three" class="colorbottle" data-id="threedescr">
<img src="http://i61.tinypic.com/v8n2hv.png">
</div>
<div id="four" class="colorbottle" data-id="fourdescr">
<img src="http://i61.tinypic.com/v8n2hv.png">
</div>
<div class="clearer"></div>
</div>
<div class="ei_descr" id="onedescr">
<div class="contact_close">X</div>
<h2>Gary</h2>
<h3>Vocals</h3>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<p>I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine.</p>
</div>
<div class="ei_descr" id="twodescr">
<div class="contact_close">X</div>
<h2>Gary</h2>
<h3>Vocals</h3>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<p>I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine.</p>
</div>
<div class="ei_descr" id="threedescr">
<div class="contact_close">X</div>
<h2>Gary</h2>
<h3>Vocals</h3>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<p>I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine.</p>
</div>
<div class="ei_descr" id="fourdescr">
<div class="contact_close">X</div>
<h2>Gary</h2>
<h3>Vocals</h3>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<p>I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine.</p>
</div>
JQUERY:
$(document).ready(function () {
$(".colorbottle").click(function () {
if (!$(this).hasClass('selected')) {
$(".colorbottle.selected").removeClass("selected");
$(this).addClass("selected");
$(".ei_descr").fadeOut(1000);
$('#' + $(this).data("id")).fadeIn(1000);
$(".colorbottle").not(".selected").animate({
opacity: 0.2
});
$(".selected").animate({
opacity: 1
});
}
});
});
UPDATED DEMO

<div id="two" class="colorbottle" onlick = "goto('two')">
<img src="images/2.png">
</div>
<div id="three" class="colorbottle" onlick = "goto('three')">
<img src="images/3.png">
</div>
<div id="four" class="colorbottle" onlick = "goto('four')">
<img src="images/4.png">
</div>
<script>
function goto(id){
$("#"+id+"descr").fadeIn(1000);
$(".colorbottle").not( ".selected").animate({opacity:0.2});
$(".selected").animate({opacity:1});
}
<script>

You just need to tell the descriptions to fadeout on click and only fadein the one you clicked: http://jsfiddle.net/Lvqn2sk5/5/
$('.ei_descr').fadeOut();
$('#'+this.id+'descr').fadeIn();

Check the below simplification code and working demo
$(".colorbottle").click(function () {
$(".colorbottle").removeClass("selected");
$(this).addClass("selected");
var popupId= $(this).attr("id").split("_")[1];
$("#"+popupId).fadeIn(1000);
$(".colorbottle").not( ".selected").animate({opacity:0.2});
$(".selected").animate({opacity:1});
});
$(".contact_close").click(function() {
$(".ei_descr").fadeOut("slow");
$(".colorbottle").animate({opacity:1});
});
Also, you need to rename the id of 4 bottles div (for example bootle1 as follows)
<div id="b_onedescr" class="colorbottle">
instead of
<div id="one" class="colorbottle">

Google Analytics Event tracking setup

Can someone help me write the proper GA setup for the following HTML code?
I"m trying to track the downloads of the media kit and the capabilities (both PDF's)
I'm running analytics.js and it's pretty connfusing to me unfortunately.
Here is the code.
<div class="row">
<div class="twelve columns">
<div class="tabs-content-container">
<div class="eight columns">
<img src="img/brochure.jpg" alt="blog" style="padding-bottom: 10px;">
</div>
<div class="four columns">
<h3>Download Company Overview</h3>
<p>Thank you for taking the time to learn more about our company. The additional information in these brochures will tell you more about our history, products and references.</p>
<p>Our printable company overview brochure is now available for download. Both documents require <a target="_blank" href="http://get.adobe.com/reader/"> Adobe Reader</a>. Click the links below to download our company’s Capabilities and Media Kit.</p>
<a target="_blank" href="Capabilities.pdf">Download Capabilities →</a>
</div>
</div>
</div>
</div>
</section>
<!-- end section-tabs -->
<section class="msg-container diff-msg" style="margin-bottom:0;">
<div class="msg-inner-container">
<a target="_blank" href="MediaKit.pdf" class="download">Download Media Kit</a>
</div>
</section>
the issue is that I'm used to the ga.js style of event tracking in which I would have done something like this: Download Media Kit. That however doesn't work with analytics.js and the documentation doesn't really make sense to me.
Thank you

I figured it out.
onClick="ga('send', {'hitType': 'event', 'eventCategory': 'download', 'eventAction': clickedDownload', eventLabel': 'Capabilities' });"
thanks to everyone who tried to help.