Forem: DataMoshing

Library project completed

DataMoshing — Wed, 14 Sep 2022 06:12:38 +0000

Hello all! I am currently wrapping up the library project from TOP (The Odin Project) boy it was sure a doozy. The first obstacle I ran into was looping through the array that held the books and displaying it on a card/table. I managed to create the table and display it using the DOM but ran into yet another problem, my array kept duplicating each "book".

After asking for help from some lovely folks it turns out I had to reset the form after each book! After that was settled the next step was pretty simple, which was add a button that brings up the form for the user to input their author, title, number of pages, etc. The next step was when I hit another wall.

Add a button on each book’s display to remove the book from the library.
You will need to associate your DOM elements with the actual book objects in some way. One easy solution is giving them a data-attribute, that corresponds to the index of the library array.

To be quite honest I had little to no idea how I could implement data-attributes to each book giving them a unique id. Yet again asked another question with as much detail into what I'm trying to achieve (Quick tip asking great questions not only helps you as a programmer/developer it also makes it easier to work with being the other person who is trying to help you. So ask questions but also give great detail!) After asking for help, and turns out It could be solved with just a few lines of slapping an attribute to each book and adding another parameter to my loop and tada! Each book had its own unique id!

The last step was a bit challenging, prototypes were difficult at first but after learning that it is a property on a function that points to an object it became a little clearer as to how to update the read status on the books.

One month later, here we are ! After many headaches and breaks this project is finished. Thank you to everyone that helped and also thank you to the peeps who read my very "professional" blogs. ❤️

Intermediate HTML and CSS completed

DataMoshing — Tue, 09 Aug 2022 01:20:00 +0000

Greetings! It has been around a week since finishing the intermediate HTML and CSS portion of The Odin Project and it has been very enjoyable, to say the least. From learning about frameworks and preprocessors and when to use them to form validation and form basics (styling forms making them easier to read and digest.) This section/course was very fun, I am seemingly enjoying front-end web development a lot more than back-end for now! If you're wondering if I haven't posted about the Sign-up Form was mainly due to not being worthy of posting. The project did not turn out the way I wanted it to, the structure of the page was not up to par along with the readability being lackluster so decided not to post it.

(Here is the form if you're really interested. https://datamoshing.github.io/sign-up-form/)

Onto the last project of the intermediate HTML and CSS portion of the course, Admin Dashboard. This project was a fun one, you really feel like you're getting those CSS reps in with mainly CSS Grid and a bit of flexbox. The grid system was difficult at first figuring out how to structure a webpage so the layout defines the content but after a few videos from the front-end wizard @kevinpowell paired with a few amazing articles from css-tricks specifically https://css-tricks.com/snippets/css/complete-guide-grid/ it made me feel like I've leveled up on CSS.

Admin Dashboard

Were off to the JavaScript portion of the Nodejs path! 🏁

TOP foundations completed

DataMoshing — Mon, 13 Jun 2022 05:38:00 +0000

The Odin Project foundations are completed! It's been a long 7 months since my first commit starting TOP, I am not necessarily the fastest learner and do fall into programming rabbit holes quite often along with having to reread material multiple times but eventually with persistence and grit little by little we made it! Now onto the final project in the foundations, it was very difficult for me. The first steps were manageable, creating functions for basic math functions such as add, subtract, multiply, etc. Create a barebones calculator with some CSS and buttons for the numbers along with an operate function that calls from the function you created add(), subtract(), and so on. The next step is doing a bit of DOM manipulation and EventListeners display numbers/operators on the calculator and then to the most difficult part of the project storing the values along with calling the operate function to well... Make the calculator work as intended! This is where I had the most trouble as my problem-solving skills are not the best which is crucial to becoming a great programmer. Luckily the TOP community was there to guide me through this uphill battle specifically one member who helped break down the problem into smaller problems.

Have a current number that is being inputted.
Save that current number into a variable (currentNumber = firstNumber)
Get the operator that was inputted and save that to a variable as well (savedOperator = operator.value)
Now that we have the operator and first number saved now check if there is an operand plus an operator now move onto the second number.
Since we now have a first operand + operator + second number update the display with result!

Pretty simple right ? 🙈

Improvements that could be made

Make the calculator be able to operate decimal point numbers
Display overflows when number exceeds a certain point.
Delete button is finicky, can delete number only after it is replaced with another number. Cannot delete number and operate right after, returns old number.

Ruby on Rails here I come! (Edited decided to go with the Nodejs path, although the Ruby path is amazing and more "fleshed out" personally I needed my CSS and designing.)

2nd project finished

DataMoshing — Wed, 27 Apr 2022 03:26:15 +0000

As you can see from the title I have finished the 2nd project using JavaScript! The folks from The Odin Project were serious about each project increasing in difficulty after each one. This project was heavily focused on DOM manipulation and events you would need to create an Etch-a-sketch toy project that takes user input and creates a grid based on the users' input (for example 4x4 grid= 16 sized grid with rows and columns using divs). For this project there were a few different methods that could be utilized that created a grid (float/clear, inline-block, flexbox, CSS Grid) I went with CSS Grid and it was challenging to say the least. I have not yet learned CSS Grid at the time so it just made it a lot more difficult for me but with persistence and a little grit, I somehow managed to make it work! With the help from The Odin Project community of course.

What I've learned doing this project.

CSS Grid.
Need to learn how to efficiently plan projects and not just attack them (Finding a balance between not planning at all and over planning).
For loops.
Getting a good grasp on DOM manipulation.

Finished first JavaScript project

DataMoshing — Sun, 10 Apr 2022 07:47:43 +0000

Hello, people of dev! As of today just finished Rock, Paper, Scissors my first JavaScript toy project. It may not seem like much but this is the first project that mostly utilizes JavaScript and was done mostly by me and with help from the TOP discord community (no YouTube tutorials or other forms of handholding!). Although I finished this project there are some improvements to be made. Firstly I would like to implement more ways to not repeat myself as much, such as forEach method on my buttons which were created by individual event listeners. As you can probably tell I am not the best blogger so I will keep this short and sweet. Thank you for taking the time to read my first blog post!

A few things I learned while doing this project.

Using breakpoints in Chrome DevTools for debugging.
DOM (Document Object Model) Manipulating along with events.
Learning more about the call stack as I had functions within functions.
Callback functions.
More practice with CSS using flexbox.