Output window on My Workspace (Personal project)

Hello everyone, I’m new on Codecademy, so i might be doing it wrong, but seems that the output window on My Workspace doesn’t work, no matter what i type in code window and then click save & run, nothing happens (output remains blank/ white).
Here’s a link to my project:

https://www.codecademy.com/workspaces/61427879b497f062ba2c1c29

And a screenshot of what i see on my laptop:

Help appreciated

1 Like

Hi Cloud!

The window you’re looking at there is loading the index.html file, I expect it’s empty. Once that’s populated, you should see it in the output window. Then, once you’ve written working JavaScript for the web page and included it as a script in index.html, you’ll see it take effect on the webpage.

I just checked creating a workspace as I hadn’t used one before, this is because the workspace is designed to be a HTML/CSS/JS project. If you were looking to just work with JavaScript in the terminal you’d want to set this up locally so that you can interact with your JS code via terminal.

Hope this helps!

Cheers,

Alex.

1 Like

Hello Alex,

Thanks for a swift reply. I haven’t started learning html yet, so i wouldn’t know how to do that.

So how do i set this up locally? i thought that this workspace was designed to work with js as well, don’t i just choose to work with JS just by clicking “script.js”?

Yes, and, well, no. script.js is the JS file that is loaded by the HTML document. The screen on the right is a browser, albeit an embedded one in this case (it is set in an iframe).

If you right click the browser window and select Inspect it will open the developer tools. Click on Console then click the trash can icon to clear it. You should see a prompt, > which is akin to a command line that takes JavaScript commands.

If you Save and Run your code, the output will appear in the console.

To get the text output to appear in the browser, we will need some DOM interaction. That part of the learning will come up eventually in the HTML course.

If you are looking for a sandbox to run just JavaScript, join repl.it and start a new REPL. Select JavaScript as the language and new workspace will set up for you with a text editor pane, and a console pane. Code to your heart’s content.

1 Like

Thanks a million! If i’m understanding you, i’ll start having an output in the Console, when i somehow translate my JS code into HTML or something along these lines?

Signing up for repl.it right now boss.

1 Like

The console is a special object that is not connected to the HTML page, per se, but is threaded to the DOM so we can inspect variables and objects, and test output. The normal user will not see what we send to the console unless they open it in their browser. We don’t generally expect this.

There is no translating JS to HTML. They are completely different languages. One is declarative and static, HTML, and the other is programmatic and dynamic. Along with CSS, they make up the three de facto APIs of the modern browser (they are all built in but run on different engines).

It’s okay to play around with JS in the terminal, but eventually you will learn how to interact with the user, via the browser window (the web page). Might I suggest you at least study HTML alongside JS, with the emphasis on HTML, for the time? It will get to JS shortly.

2 Likes

Thanks again

Yep, just started the HTML course, while waiting for the book from my career path syllabus. Got a head start with JS, because i started reading recommended “Eloquent Java Script”, before enrolling fully to Codecademy. Also the career path (Full stack engineer, focuses only on JS in the beginning, i think if they constructed th course in a way that HTML is explained first, that may have avoided confusions for beginners.

BTW, i’ve signed up for repl.it, there doesn’t seem to be JavaScript in language selection.

Just go ahead and select HTML, CSS, JS. It will give the same sort of spaces as your Workspace, but has a Console tab above the browser window. Type your code in the editor, and Run it to save and run.


In the HTML, just above the <script/> in the BODY, type,

<p></p>

When you Run it, nothing will happen.

Now open the script.js file and paste in these lines. You might wish to change the color theme, first, though. In the left pane is the gear for settings. Select the dark theme so the console is easier to read.

const p = document.querySelector('p')
p.textContent = "Hello World!"
console.log("This is the console.")

Run. This time you will see output in the HTML browser, and in the console.

The source that is present in the DOM will look like,

<body>
  <p>Hello World!</p>
  <script src="script.js"></script>
</body>
1 Like

Nice! so one action from JS impacts simultaneosly (and differently) a website and the console.

1 Like

We’ll be mostly concerned with the impact for the user in a conventional browser. The console is meant for the developer, not the user. That’s why we call it logging. It is a behind the scenes record of what is going on so we can trace it back to what the user experiences.

The first two lines above relate to the browser. Only the last one is outside of the UX. Think terminal rather than document.

Yesterday, after creating that example for you I wrote a couple more samples in response to other questions, but I put them together in the same code space for you see. DM me your username an I will invite you to the REPL.

1 Like

yes, i can see it now. the code that i wrote in JS was written thinking that console was like a user interface, now I know better.

1 Like