jemwritescode / 42webdevpiscine

Web design exercises in HTML/CSS/Javascript/Node.js. (aka PHP Piscine but using NodeJS)

42WebDevPiscine (PHP Piscine Material completed in Node.js)

Work in Progress.

My projects for the 42 Silicon Valley's web development course.

Projects are done in CSS, HTML, Javascript, Node.js. This is the PHP Piscine Material, but I chose to learn Node.js because it's in much higher demand.

Tips for 42 Students:

1.) If you're doing this piscine in Node.js I recommend getting some of the material done ahead of time-- Node.js is great for medium-large projects but sometimes something small in PHP can take a while to spin up in Node.js. Keep in mind the piscine is not made for NodeJS. It would be pretty helpful to be familiar with Javascript -- but the syntax is fairly similar to C syntax-wise. You'll have to learn about asynchronous programming (that just means things don't wait, it keeps running) and callback functions.

2.) Make sure MySQL is installed for Day05. I was also thinking of learning AWS for Day05 but there's a 24hr cooldown period for student accounts so if you're interested in that sign up for an AWS account ASAP.

3.) For 42 students, the main thing with running MongoDB is the dbpath has to be set to the goinfre folder so that the datbase files are saved to that specific computer. But this also means your db files would only be saved on that computer. I recommend using MongoDB Atlas free tier so your database is in the cloud instead.

Table of Contents

Day00 - All exercises complete. (125/125)

Day01 - All exercises complete.

Day02

Day03

Day04

Rush00

Day05

Day00:

up ▲

Day00 focuses mostly on HTML & CSS, though the last exercise gives you the chance to work on some Javascript. This day isn't really different for NodeJS people.

Day00 PDF Instructions

Ex00:

Ex01:

Ex03 is Ex01 but responsive, so just go ahead and make ex01 responsive and save yourself some time.

I used a CSS Grid and a class for .element .symbol .atomicWeight and .atomicNumber. I tweaked a spreadsheet from my friend which generated the code for each element using a formula that read the element's info. This speeded things up considerably.

Ex02:

Ex05 is Ex02 but built out into a full game. Try to think of how to make your classes reusable for building things out. To make things clickable on the image you can use GIMP to create areas for a HTML Image Map.

Ex03:

It can shrink!

Ex04:

I suppose one simply adds a dropdown.

Ex05:

Making the game work -- the actions on the left and the items on the right can be used on things in the image maps in the middle.

🎮Click HERE to try out the game 🎮

Day01

up ▲

Day01 takes you into the basics of Node and Javascript. From printing to the screen to creating objects and searching through them.

Day01 PDF Instructions

Ex00:

Ex01:

Ex02:

Ex03:

Use RegEx and you can make the function 1 line. Uncomment the code to test.

Ex04:

Ex05:

Ex06:

Ex07:

Note per the PDF's example only the first param is rotated and printed.

Ex08:

Ex09:

There's probably a more eloquent way to write sort rules but seperating into alpha, symbol, and numeric arrays was a fast solution.

Ex10:

When using the * operator you need to wrap it in quotes like "*" to avoid the shell using it as a wildcard.

Ex11:

Ex12:

I put the pairs into a JSON object so I could easily call on it.

Ex13:

I store the info in objects and get the information out using Object.entries() Also there is a slight calculation difference in PHP vs Javascript. Using .toFixed(13) mostly makes it match.

Day02

up ▲

Day02 PDF Instructions

Day02 focuses a lot on Regex. The instructions on this day are in a crazy Myst style story format!

Ex00:

• Replace space(s) and tab(s) with a single space.

Ex01:

• Change the date from French long format to seconds past epoc.
• This was a bit tricky because you have to account for changing to Paris time.

Ex02:

• Turn the titles of links Uppercase, and things between tags Uppercase.

Ex03:

• Recreating the who command. (The who utility displays a list of all users currently logged on, showing for each user the login name, tty name, the date and time of login, and hostname if not local.)
• The instructions mention "utmp" -- this is actually login records. (man utmp for info)

Day03

up ▲

Day03 PDF Instructions Didn't really have time to work on this much this day

Day04

up ▲

Code doesn't work, I decided to start watching some more beginner Node.js videos as well. Express is used for the server framework. I chose it because it's part of the popular MERN stack that I want to learn.

Rush00

up ▲

Rush00 PDF Instructions

The NodeJS / Express / MongoDB - Build a Shopping Cart tutorial series by Acedemind on was really helpful and was a good stepping stone to learning MERN. It's not exactly the same as the school project, but it gets you close enough. That said the tutorial DOES NOT COVER REACT. This project normally has a partner but I did this solo. I ended up moving my database over to MongoDB Atlas so instead of trying to host your database on the school computers it can be in the cloud. Just set your connection string to the one you get from MongoDB Atlas instead of the one mentioned in the tutorial.

I used:

• Express for my web server framework. Controls the router.
• Express-session to store my session information. It stores the sessionID in the browser, and the items in the cart in MongoDB.
• Bootstrap for styling so that it would look nice without too much work and be responsive to screen size. (Card components for inventory items, Navbar component) Tip: Look at the components part of the bootstrap documentation and learn how to use them to quickly style your websites.
• Mongoose to connect to my MongoDB.
• Express-Handlebars for my view engine. This is what parses my views so I can use the variables that are inside curly braces like {{variable}} as well as the helpers like {{# each}} for looping in the view.
• Passport for User Creation/Validation (bcrypt-nodejs for password encryption)
• connect-mongo for session storage.

Bonuses:

• Bootstrap is used extensively for a responsive, beautiful, and consistent UI.
• Font Awesome Icons are used throughout to create a more intuative interface.
• Advanced User Information (Users can fill out their profile)
• Password encryption with bcrypt
• Stripe Integration
• Sales Report
• Stock Management
• Delete All Users/Products

Day05

up ▲

I had to stop after the Rush because I had work. I will say for Day06 you're supposed to write code that passes php unit tests -- for those doing NodeJS it may be best to skip this day or do it ahead of time so you can write your own tests. Or just do this in php.