I’m interested in using Codepen to solve some of the JS challenges, however I am having trouble because nothing is being outputted to the console. I have added the jQuerey library and still nothing. For example:
For the “Use Bracket Notation to Find the Last Character in a String” challenge, I simply copied what was in the text editor(provided starting code) into the JS editor in Codepen. From there I was going to edit the code until I got the result that i believed should satisfy the challenge requirement, and submit it in FCC to verify. But since I’m not seeing anything being displayed, this doesn’t really work out all too well.
Obviously it’s less of a hassle to just edit the code in FCC, but because they have already set up the coding that does the “background”/outputting for the student, I wanted to learn how to do that myself.
Could someone please shed some light on this? I’m sure I’m missing something simple but it’s driving me crazy that I can’t figure it out.
I’m not sure what the problem is. I use codepen all the time for the challenges and use the console often. Put the following code in your JS:
console.log("Hello, console!");
You don’t need any libraries or anything. Just run the program (if it isn’t on auto update).
There are two consoles. The first is the one that is always in your browser. I have Chrome on Windows so it is ctrl-shift-J for me. There is also a console built into codepen. On my browser, it is at the bottom there is a button for the console pane, below the rendering pane. You may have to slide the panes up and down, but it is there when it’s turned on.
The “output” screen is where your HTML renders - assuming we’re talking about the same thing - the blank white pane below your code. That is mimicking what the user would see in their web browser. Just type something in the HTML pane.
Yes, that’s what I am referring to as well. What would be the code to output JS code to that output screen? Lets use the “Reverse Arrays with reverse” challenge for example. I have completed the challenge with the code below:
var array = [1,2,3,4,5,6,7];
var newArray = [];
// Only change code below this line.
newArray = array.reverse();
The output should be [7,6,5,4,3,2,1], and would like to get it to the output screen.
document.body.innerHTML = "This writes to the screen!";
There are other selectors you can use, and of course, JQuery makes it even easier.
I don’t usually use the render pane for debugging the programming challenges, finding console quicker and easier. The dev tools in general (like console) are a wealth of untapped power.
I think, based on your original question, all you really need is console.log();.
In order to verify whatever function you’ve written is working correctly, just run a console.log(); before your final return call in the function. For example, if you just want to return “Hello World”, you would do this:
console.log("Hello World");
return "Hello World";
return by itself won’t show you anything, which is, I think, the problem you’ve been having. But for most of the FCC challenges, getting the return to display in the browser window is not really what is being asked of you. You just want to verify that your code works by displaying it in the console. Just remember to either remove or comment out the console.log(); when you paste your code back into the FCC’s text editor space to validate your code.
I’ve been using CodePen this way to work out the more complex code problems. It’s definitely been handy.
janusoo makes a good point. To elaborate on that, you can either console.log from inside the function, or from outside:
function sum(a, b) {
var c = a + b;
console.log("Logging from inside the function -> " + c);
return c;
}
console.log("Logging the returned value - > " + sum(1, 2));
This yields:
// Logging from inside the function -> 3
// Logging the returned value - > 3
I should also add that one huge advantage of writing to the console for testing code is that it will also log errors and often give you useful information about what line the error is on and what the problem was.
Yes, there is an autorun. I always find it annoying - runs before I’m ready and when I want it to run, I’m never quite sure if it has. I prefer to do in manually.
Go to Settings/Behavior and deselect Auto-Updating Preview. Now it won’t run until you tell it to. There will be a “Run” button to the left of the “Save” button. That’s always the first thing I do with a new pen. I wish it was the default.
Got it. Changed the settings and now have the run feature. However, the console still will not “run” the program as it would in my Chrome or Firefox developer tools (web console?). Here is some sample code that worked in a challenge and works in my browser but doesn’t work in Codepen. Any suggestions on how to get it to run? Thanks for the help!
function titleCase(str) {
// 1. Make string all lowercase
str = str.toLowerCase();
// 2. Use split, create array from string
var arr = str.split(" “);
// 3. Create array to push modified elements
var holdingArr = [];
// 4. For loop through each array element
for (i=0; i < arr.length; i++){
holdingArr.push(arr[i].charAt(0).toUpperCase() + arr[i].slice(1));
}
// 5. Use join to convert array to string
var newStr = holdingArr.join();
// 6. Replace commas in string with spaces
str = newStr.replace(/,/g,” ");
return str;
}
First of all, when you post code, enclose it in back ticks to make it look good. If you are doing a block like above, use three back ticks on the line before the block, and three on the line after. The back tick key is usually below the ESC key.
Looking at your code, when I run it in my codepen it runs fine. The problem is that it outputs nothing so you have no idea that it is running. The statement titleCase("I'm a little tea pot"); runs the function and returns the results to … well … nowhere. Usually we do a console.log statement and see the output in the console. Replace the last line with console.log(titleCase("I'm a little tea pot")); This will now send the output to the console.
There are two consoles. There is one built into codepen - you can click “console” at the bottom of the window and expand that pane. But most coders prefer the browser console, usually opened with ctrl-shft-j.
