Content Creator Contracting Project Help - How to start

Wow! You’ve gotten much further than me. I have opened the index.html page and loaded it in VSC. I can’t seem to get the NPM Test to run. I think you are on the right track. I just wish there was a video accompanying it. I’ve been doing well being able to follow and example and then adjust as needed.

I hope you get it! Keep me posted if you figure out a secret!
MT

I don’t think I got the test to run the way you’re supposed to to be fair. I opened up the project in my file explorer and then right clicked on the folder, there was a button to ‘Git Bash Here’ which then opened it up in the console.

I’m not sure if this is the done thing but since we’re both stuck on the same task I’d be happy to work through it together, just shoot me an email at [email protected] if you fancy that, otherwise I’ll just update on here

Well I completed it finally,

I tried

function getContentType(filename) {

const extension = filename.match(/..([^.])$/)[1];
return ‘text/html’
}

and then tested it using npm run test.

I then got

getContentType()
√ a function called getContentType should exist
√ should return “text/html” for filenames ending in .html
1) should return “text/css” for filenames ending in .css
2) should return “image/jpeg” for filenames ending in .jpeg
3) should return “image/jpeg” for filenames ending in .jpg
4) should return “text/plain” for all other file extensions

2 passing (11ms)
4 failing

After going back and looking over if/else statements I worked it out from there.

Good luck and feel free to email me anyway, could be good to bounce off someone at the same level.

2 Likes

After an hour of struggling, I think I finally got it.
First, I used the Visual Studio code to open the folder I just uncompressed, and found the request-logic.js file under the js folder.

Then I wrote:

function getContentType(filename) {

const extension = filename.match(/..([^.])$/)[1];

/since it already gave you the variable ‘extension’ which will give you the last string, I figured just set the variable equal to what we want/

if (extension === ‘html’) {

return 'text/html';

} else if (extension === ‘css’) {

return 'text/css';

} else if (extension === ‘jpg’) {

return 'image/jpeg';

} else if (extension === ‘jpeg’) {

return 'image/jpeg';

} else {

return 'text/plain';

};

}
Then I ran the folder under Git Bash (right click the same folder and click Git Bash Here) and tested it using “npm run test”, this is what I got:

[email protected] test C:\Users\user\Downloads\project-0-content-creators-start
mocha

getContentType()
√ a function called getContentType should exist
√ should return “text/html” for filenames ending in .html
√ should return “text/css” for filenames ending in .css
√ should return “image/jpeg” for filenames ending in .jpeg
√ should return “image/jpeg” for filenames ending in .jpg
√ should return “text/plain” for all other file extensions

6 passing (6ms)

Finally I checked my demo (open the uncompressed folder and click the one name “index” with a chrome logo on it.) It worked just like the final version so I think I made it! I hope this help you guys too!

p.s. I am a high school student from Taiwan and I just joined this community recently! Please let me know if there’s any mistakes I made, whether it is coding-wise or some grammar mistakes during the interpretation! Have a great day coding y’all!

3 Likes

Did u install mocha or chai in ur computer before any of this??
Bcoz the first thing i get, when i run npm run test in Git Bash is this line followed by multiple other errors as discussed above…

'mocha' is not recognized as an internal or external command,
operable program or batch file.

So, do we have to intall mocha first??

I did not. all I did was opened the file in the git bash and typed “npm install.” I think that is how you install mocha but I might be wrong.

Came here to see how folks were getting on with this. I can’t believe how much of a jump this exercise is! Oh well, I guess it’s good to be chucked into the real world!

Here are some pointers which might help. The exercise is actually pretty straightforward, but does benefit from a bit of explanation:

  1. Make sure you’ve set up Bash (if you’re on Windows), Node.js and Visual Studio Code. The videos are pretty comprehensive, but if you don’t have them set up, you’re not getting anyway.
  2. Download and unzip the folder from Codecademy somewhere sensible.
  3. Open VS Code and select File>Add Folder to Workspace. Navigate to the folder from Codecademy and add it. This is good practice for working on these projects.
  4. Open up Bash and navigate to the folder. Top tips: pwd will show you what directory you’re in right now. ls will show you the contents of the folder. Use cd <foldername> to navigate. cd .. will take you backwards.
  5. After navigating to the folder from Codecademy in Bash, type npm install. This will download the necessary files to your project folder.
  6. Type npm run test to run the tests. You’ll see it fails on a bunch of things.
  7. In VS Code, find the ‘request-logic.js’ file in the ‘js’ folder of the workspace.
  8. Your task is just to edit the function in that folder so that it returns the right output. For clarity, const extension = filename.match(/.*\.([^\.]*)$/)[1]; is a line of code which will take the filename parameter the function received and remove everything except the extension at the end of the filename. This means the variable ‘extension’ will be equal to html, css, jpeg, jpg or nothing. You need to write an if/else statement which will return ‘text/html’, ‘text/css’, ‘image/jpeg’ or ‘text/plain’ depending on the input. Save your file.
  9. In Bash, enter npm run test and your tests should complete.

Hope that helps a little. Hit me up with a reply if it doesn’t make sense .

6 Likes

no you are right, it was installed by npm install and then we had to run npm run test and it worked the magic, Anyway thanks for the reply :slightly_smiling_face:
this project was really simple just had to see the tests and apply all the testing suite into it and there you go.

1 Like

At least from my tests, it looks like if you don’t create the project0 directory (unzipping from the project zip file) from your user’s actual home directory, the npm commands will fail, and constantly.
I had a deep directory structure where my study files were deep in /home/sina/host/Codecademy/BackendAppWithJavaScript/Projects/project0
and I’ve been stuck trying different things for nearly a week.

thank you so much! i was haveing a really hard time with this, it was huge challenge compared to how we had been studying so far.

I am honestly stuck on the 4th step you identified. I keep inserting pwd command and it tells me I am still in my users folder, but do not know how to navigate from to the folder that is holding the project contents.

Do you know where the folder holding the project contents is on your computer? You can use the regular file explorer to move the project folder to somewhere easier to find if it’d help. You could even create a folder called ‘coding’ inside your user folder and then put all of your project files inside that – it would make navigating to it with your terminal much faster!

Wow this was a real step up to try and understand the project. After spending the previous day installing the new apps and watching the videos I had no idea where to even begin - bit of a setback for my confidence.

I won’t lie I decided to go ahead and look at the solution files and was like ‘what? Thats it?’. It was only afterwards I worked out the rest, how to get the testing working which i think if that had been clearer from the start would have made things easier.

I planned to come on here and give a few pointers for anyone struggling but i think @jsivwri gave a pretty thorough run through :+1:

Hey everyone, a little piece of advice… in VS Code, open the content creators contracting project, then in VS Code, it has an integrated terminal that you can open using CTRL + SHIFT + backtick if you do that… you don’t have to do all the cd commands!
Hope this helps more! :grinning:

Hey man,

Just wanted to thank you for clarifying. This helped me big time. Good luck!

I’m lost… what file…where is it?

i alot myself 2-3 hours a day after working my night shift to learn this stuff. I probably spend 3 days alone to get mocha and chai installed into my mac, and another day trying to determine which file is actually needed to edit the code in.

For those getting write errors while trying to install mocha or npm or literally anything… entering sudo in front of the command you are trying to enter will let you enter it as an administrator

e.g. (sudo npm install --global mocha) instead of just npm install --global mocha

another good thing to recommend is to review how to navigate through your terminal using the cd/ls commands so you know where to install npm.

I’m glad to hear that i wasn’t alone in the frustration. I’ll update accordingly in hopes this helps others.

Just want to say THANK YOU for this! I was actually able to get the tests to run but I felt like the instructions were unclear as to what exactly we’re trying to solve here. I was completely stuck. Your comment helped me to understand, and I was able to work it out. Much appreciated!

Hi There! As I was stuck at the very beginning, not knowing where to start as I wasn’t able to figure out what to do in terminal (using Mac here), just writing up a couple of sentences that could be helpful to someone:

  • The sentence "To run these tests, first open the root project directory in your terminal. " was completely misleading for me. Instead of “opening”, I’d call it “navigating” to your folder where you have the project’s “package.json” file saved. For this, I used
    -“pwd” to display which folder I’m currently in
    -“ls” to see the contents (files/folders) in the folder
    -“cd directory-name-you-want-to-navigate-to” to define which directory you want to navigate to.

Once you’ve navigated to the folder that holds your projects “package.json” file, you can run the “npm install” and “npm run test” :slight_smile: Good luck to us!

I agree, this assignment could have been clearer. But with method7493314847’s help I was able to figure out that I needed to navigate to the downloaded folder through the terminal. First I placed the downloaded folder into a codecademy folder that I created in my User folder.

While in the terminal as User, I used ‘cd codecademy’ to navigate to the codecademy folder, then I used ‘cd project-0-content-creators-start’ to navigate to that folder. Then I ran ‘npm install’ and pressed enter. Then I ran ‘npm run test’, which revealed the errors needing to be fixed.

From there the article indicates that the javascript file to edit is ‘request-logic.js’, so I edited that particular file and my file destination looked like: codecademy > project-0-content-creators-start > js > request-logic.js. After editing the file I tried ‘npm run test’ in the terminal again and had a few tries before getting all passing. Hope this helps!