Use JavaScript in VS Code

So I’ve made it through a decent number of the FreeCodeCamp lessons. I’m now slowly transitioning towards learning to code in a widely used text editor. For now I’ve chosen Microsoft Visual Studio Code. I’m trying to transfer the code for the Bar Chart project from the Data Visualization Certification. My HTML and CSS work fine, but my JS file isn’t showing up on the webpage. I’ve included a copy and paste of my HTML, CSS and JS below. If this is too messy, please feel free to suggest a cleaner way to show you my code in VS Code.



        <link rel="stylesheet" type="text/css" href="test.css">
        <script src=""></script>
        <script type="text/javascript" src="test.js"></script>
    <div id = "mainCont">
        <div id = "lowerCont">
            <div id = "title">U.S. Gross Domestic Product</div>
            <div id = "barChart"></div>



@import url('');

html {
  background-color: #B7EDF7;

.bar:hover {
  fill: white;

#mainCont {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

#lowerCont {
  width: 950px;
  height: 70vh;
  background-color: white;
  border-radius: 0.8%;
  padding-left: 50px;

#tooltip {
  font-family: ZCOOL QingKe HuangYou;

#title {
  font-family: ZCOOL QingKe HuangYou;
  font-size: 32px;
  padding-top: 15px;
  text-align: center;


let h = 418;
let w = 900;
let padding = 15;
let barW = w / 275;

let svg ="#barChart")
  .attr("height", h)
  .attr("width", w);

let json = d3.json("").then(function(data) {
  //Determing time for the x- and y-axis scales.
  let time = {
    return new Date(x[0]);   
  //Extending the most recent date by 12 months so that the data is displayed better.
  let maxT = new Date(d3.max(time));
  maxT.setMonth(maxT.getMonth() + 12);
  //creating the scale for the x-axis
  let xScale = d3.scaleTime()  
    .domain([d3.min(time), maxT])
    .range([0, w - 50]);
  //creating the x-axis
  let xAxis = d3.axisBottom(xScale);
    .attr("transform", "translate(40, 398)")
    .attr("id", "x-axis")
  //y-axis scale
  //this is rounding the GDP to hundreds, makes the y-axis cleaner
  let gdpRound = {
    return Math.ceil((x[1] / 100) * 100);
  let yScale = d3.scaleLinear()
    .domain([0, d3.max(gdpRound) + 1000])
    .range([h - 20, 0]);
  //creating y-axis
  let yAxis = d3.axisLeft(yScale);
    .attr("transform", "translate(40, 0)")
    .attr("id", "y-axis")
  let tooltip = d3.tip()
  .attr("id", "tooltip")
  .offset([-10, 0])
  .attr("data-date", (d, i) => {
  .html(function(d, i) {
      return "<strong>GDP</strong>: $" + (d * (gdpMax / d3.max(gScaled))).toLocaleString() + " Billion" + "<br>" + "<strong>Date</strong>: " +[i][0]
  //creating bars
  let gdp = {
    return x[1];
  let gdpMax = d3.max(gdp);
  let gdpMin = d3.min(gdp);
  let gScale = d3.scaleLinear()
    .domain([0, gdpMax])
    .range([0, h - 20]);
  let gScaled = {
    return gScale(x);
    .attr("data-date", function(d, i) {
    .attr("data-gdp", function(d, i) {
    .attr("class", "bar")
    .attr("x", function(d, i) {
      return xScale(time[i])
    .attr("y", function(d, i) {
      return h - d
    .attr("width", barW)
    .attr("height", (d) => d)
    .attr("transform", "translate(40, -20)")
    .attr("fill", "#CE6906")
    .on("mouseout", tooltip.hide);

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.


Thanks very much for your help on formatting the post. I’ll update the HTML code as well.