Beginner JavaScript Projects
POV: You’ve studied HTML and CSS, you’ve made some cool projects and now you’re moving on to learn JavaScript. If you're just starting out learning JavaScript, it can be helpful to have a list of beginner projects to work on in order to get your feet wet and gain practical experience.
I’ve combined a list of 5 mini projects to be working on - some I have done myself! Don’t worry, for each project I've added a video tutorial that you could use as a reference to help with your own version of the project!
━━━ ⋆⋅☆
Basic image gallery 📸
A web page displays a grid of images and allows the user to click on an image to view a larger version of it. This could come in handy when making Tumblr themes 👀
The JavaScript side: Handle the user's clicks!
Video tutorial: [LINK]
━ ⋆
Simple to-do list app 📝
A web page that allows the user to add, remove, and mark items on a to-do list.
The JavaScript side: Manipulate the page's HTML elements and store the to-do list data in the browser's local storage!
Video tutorial: [LINK]
━ ⋆
Basic calculator 🧮
A web page with a simple calculator that can perform basic arithmetic operations.
The JavaScript side: Handles user input, perform calculations, and display the results on the page!
Video tutorial: [LINK]
━ ⋆
Random quote generator 📜
A web page that displays a random quote from a predefined list of quotes each time the page is loaded or a button is clicked.
The JavaScript side: Selects a random quote from the list and displays it on the page.
Video tutorial: [LINK]
━ ⋆
Simple rock-paper-scissors game 🎮
A web page that allows the user to play a game of rock-paper-scissors against the computer. I did this project during my coding night classes! 😊
The JavaScript side: Handles user input, generates the computer's move and determines the winner of the game.
Video tutorial: [LINK]
━━━ ⋆⋅☆
I hope this helps someone, it's really good to build projects as you're learning! JavaScript can be a bit tricky towards the harder concepts so it's good to have a good understanding of the basics, project building helps with that! Thanks for reading and have a nice day/night! 💻👍🏾
[⏪ previous programming post]
338 notes
·
View notes
why does counting start at zero in programming?
happy friday, everyone!
this post got looong, so if you're interested, click "keep reading"! and if you're not interested, you're welcome for not making you scroll through all that on your feed :]
so, i'm currently working through harvard's cs50, which is their free online intro to computer science course. i'm really enjoying it, and learning a lot, especially as someone who up until now has been self-taught, and focused more on the higher level languages.
i'm about halfway through the fifth week's lecture right now, (which is called week 4 because the first week was week 0, which really messes me up when i'm trying to remember how many weeks i've been doing this for, lol) and we're diving into some really cool stuff around pointers and computer memory and etc.
this is the first week where we've finally started covering things i've never seen at all before, and some of what we're learning is really blowing my mind! like, some of the more abstract concepts i've always had trouble with are finally clicking into place.
one little thing in particular that i thought was fun to actually understand is why counting starts at zero in computer science.
we all learn very early on that when you're trying to find the index of an element in an array, the first element will be at array[0], not array[1].
but what we don't typically learn (or at least, not when your first learning languages are python and javascript from free online tutorials) is why.
that's because in these higher-level languages, we're typically too far removed from the lower-level concepts like pointers and memory allocation, so there's no need to dive into the specifics behind this syntax. we just keep in mind that counting starts at 0 in programming, and move on. that's the power of abstraction.
but, in cs50, the first few weeks of the course are taught in c.
c is a lower-level language that directly interacts with the computer's memory. so, just through learning about some new concepts, like pointers, it suddenly clicked for me why counting starts at zero.
i thought it would be a good test of my own understanding to see if i can explain why counting starts at zero in computer science, since the explanation involves going over a lot of these important concepts that i need to know.
so, let's dive in :]
in programming, especially in a language like c, a pointer is like a treasure map. when you're using a treasure map, you don't have the treasure itself; instead, you have directions that guide you to the treasure.
similarly, a pointer in c doesn't hold the actual value of a variable; instead, it stores the memory address where that variable is stored. just like you'd follow a treasure map to find the treasure, you can follow a pointer to access the value of a variable.
let's go through some basic pointer syntax in c.
declaring a pointer:
you can declare a pointer with an asterisk(*) before its name. you can also specify the type of variable the pointer points to. for example,
int *p;
declares a pointer to an integer.
assigning an address to a pointer:
the address operator (&) is used to get the memory address of a variable. so,
p = #
assigns the address of 'num' to the pointer 'p'.
here, p is a pointer that holds the address of the variable num:
int num = 10;
int *p;
p = #
accessing the value at an address:
the dereference operator (*) is used to get the value stored at a memory address. so, *p gives you the value stored at the memory address held by p.
int num = 10;
int *p;
p = #
printf("%d", *p);
here, *p gives you the value of num; so '10' is printed to screen.
pointer arithmetic:
you can add or subtract from a pointer to move to different locations in memory. this is commonly used when working with arrays.
in my post "how the internet works - part 2", i described computer memory as one of those fancy japanese apartment complexes, where everything is lined up in perfect cubes, and assigned an address in order, so that you can find each apartment. you can read that post if you need a refresher of the physicality of how computer memory works.
rather than storing items in an array randomly, anywhere there happens to be a spare room in the apartment complex, array items are always stored in consecutive memory blocks, with each element in order. you can imagine this as an entire floor being reserved for the array, and each element going into each next room, all the way down the hall.
that way, instead of having to make a pointer for every single item in a given array, which could be very large, we only need one pointer, that stores the address of the first element in the array.
then, when we want to grab the array from memory, it's as easy as just moving down the hallway, and checking who lives in each room, one at a time.
just imagine if the amazon delivery guy needed to keep track of an entire clipboard full of pages with every address in the apartment, and needing to check where the next address is for every single array index, and running all over the apartment complex up and down the stairs to get each one in order, and then back up again for the next one, and back down to where he just was for the one after that...
well, he'd be pretty out of breath, to say the least. that is not an efficient system, and it would just be slow and painful for everyone.
but this way, the delivery guy only needs one sticky note that says: array starts at this address: unit 7. then he can go to unit 7, and when he needs the next item in the array, he can simply tell himself, "well, i guess the next element is at unit 8."
and down the line he goes, until he reaches a special unit that contains a null flag, which is just an empty unit (well, technically it's not empty, it's a unit containing the value null) to let the pointer know that it's reached the end of the array.
this is a much simpler and efficient system, that can be used for an array of any size, without killing the delivery guy from exhaustion. (take note, amazon. respect your workers!!)
here's an example of how this looks in c:
int numbers[5] = {10, 20, 30, 40, 50};
int *p;
p = numbers; // remember, the name of an array is a pointer to the start of the array
printf("%d", *p); // prints: 10
printf("%d", *p + 1); // prints: 20
printf("%d", *p + 2); // prints: 30
printf("%d", *p + 3); // prints: 40
here, p is a pointer that we've pointed at our array of numbers. by increasing p, we're moving the pointer to the next item in the array.
now, looking at this code, you should be starting to see why counting starts at 0!
it's because we're not actually counting the number of elements themselves; we're actually doing simple math to count how many indexes away from the start we want to move.
the first index is 0 because we want to move 0 steps away from the start - the first index is the start. the second index is 1 because we want to move one step away from the start. the third index is 2 because we want to move two steps away from the start. and so on.
to sum up:
when programmers allocate memory for an array, the memory cell is referred to by its offset from the starting memory location.
so, counting starts at 0, because when we start at the first index, that first index has an offset of 0 from the starting memory location!
this 0-indexing is efficient, logical, and also happens to work well with many mathematical operations. so, that's why we count that way :]
and now you know! :]
ps: if you want an even better explanation that this, plus way more, consider signing up for harvard's cs50 course! that's where i learned all this. it's their actual intro to computer science course, and it's available completely free from start to finish, for anyone who wants to take it online.
you don't even have to sign up if you want, as all the lecture videos are also available on youtube. so if you just want to learn more about what i covered here in this post, check out their video titled "week 4 - memory" on youtube!
43 notes
·
View notes