Front-End Final Project

While I’m not super keen on superheroes or comics, I have to admit that this project was super duper fun. I definitely feel like my lack of general interest in the subject matter kept me from being even more creative with it, simply because I’m not acquainted enough with it to know what cool things are out there. Our instructions for our final front-end weekend project were simple:

I wonder how long it took them to write this….

The project got released midday on Friday, I think due to some (expected at this point) Newline issues. The team was all relatively quiet about what the issue actually was but our original project was deemed ‘broken’ in some way. It’s always nice to get the project Thursday afternoon so that my workload over the weekend when I have to tend to house chores, like cleaning and meal prep, isn’t so heavy. That didn’t happen this week which was additionally stressful because the crash course that I’m leading with Bruin is this coming Wednesday as well and we definitely still need some time to prepare. The point of all this is that I literally did not get started on this project until after lunch on Friday and was, for all intents and purposes, done yesterday afternoon  in time for date night! Coincidentally we saw Wonder Woman (which I thought was Marvel but was quickly corrected). Great movie by the way. Another unique thing about this project was that most of the development of it was done in a room by myself when normally I am working with everyone else in the class and can bounce ideas around/ask questions if need be. I ran into several issues with what I was trying to accomplish but ultimately was able to find solutions to all of them online! Stuff like this is starting to make me feel like a real developer!

So anyway the project requires that I pull in some characters from an api and display them in a way that a user can select one. Here’s a shot of that:

Choose your character

The api itself has a limit of 100 characters you can call at once but the js can handle any amount of characters that it receives and all of them will come out like this! Pretty neat! Another thing I’d like to point out is that I would like to change the layout of the hero ‘card’ slightly. It does have cursor pointer on but as of right now you have to click in the info area and not on the picture. I did it this way because I was getting the info for the character from a click event and at the time the click was activated on the img itself and that did not allow me to access the character stats. I would love to make the name standout a little more (give it its own line) and add something obvious that selects the character. Hopefully I’ll have some more time this week to add the stylistic changes I’d like to, but I am relatively happy with it.

I decided I wanted to make the battle screen a new html file entirely which required quite a bit of research and unfamiliar implementation on my end. I had no idea that the secondary html wouldn’t have access to the js file’s variables even though both htmls were connected to the js file. Crazy stuff! So I ended up declaring some local storage and was able to access it relatively easy – just some data type conversions. Along with that also came figuring out how to actually get the page to relocate itself – extremely easy but I had never seen it done before through js.

I also knew I wanted to have random ‘battlefields’ aka backgrounds assigned to each battle. I kept seeing old flashes of mortal combat and streetfighter when I was imagining how this project would turn out. I found several super fun gif backgrounds that literally take you back to the arcade days. Of course I have one with some cats walking around off to the side as well.

Another thing I really wanted to page to have was animation. The character icons from Marvel’s API aren’t really the kind of photos that would look good dancing but still I wanted them to do a little something! After a TON of research and playing around with transitions and I came up with something like this:

fun animation stuff!

There is a swing and a reverse swing – because each character actually needs to ‘swing’ in opposite directions as they attack, otherwise the character on the right side of the screen would be attacking something behind it – not the character it is battling. Grow is what happens when the player wins! It swings around a bit and then grows rather large for emphasis. I set several timeouts in this battle as well. One of them is for the computer’s attack move – so it’s not attacking simultaneously with the user’s character. Another is the delay to reset the battlefield after either the computer or the player wins. There are a few more, but those are the more obvious and the others are really more for functionality – removing the swing class but only after swing has finished executing for example.

I realized I needed a way for the character’s health to be displayed as well! So I did a little research and came across the progress bar! Also super nifty. The bar isn’t styled ideally for me, but it will do for now. I would love to figure out how to get it to just stay that color and not reevaluate it’s own proportions. I wanted it to be red to green and as life was taken away only the red/orange segments would be displayed, but that’s not how it came out. I’m sure there’s a way and I know I can find it! Here’s what the battle page looks like :

Time for Battle!

Overall I am extremely happy with the game minus some stylistic things that I ran out of time on this weekend. Definitely wanting to throw this one in the portfolio! Of course I will tighten it way way up before then! Now that I know how it will all come out in the end I know I could rewrite it much more efficiently. Also it is not yet responsive – but could be one day!

On to back-end this week!

Algorithms & Polishing

It’s late and today was a lot, so I’ve got to keep this short. We went pretty heavy into algorithms today and what’s known as The Big O (a way to describe the complexity of an algorithm). We had several algo’s to build out including a (extremely inefficient) bubble sort function. If you get a chance and don’t already know you should look it up. Basically you would never want to use it for anything, but wrapping your mind around it and getting it to work is a big step to grasping these things. Here it is:

bubble sort!

I had a couple mental hold-ups today, but the more I practiced making algo’s the easier it became, so that’s a good sign! I felt a little behind today, but I’m remaining confident that it will all fall in place for me. I also have some great buddies that help me when I’m not fully grasping something right off the cuff.

I spent the latter half of my day working on making the word-game project from the other day into an actual hang man game! I’m excited to use it in my portfolio as something I built just 3 weeks into the cohort! I have been working on it all night and now it’s late so I must go to sleep, but here’s what it looks like so far! A couple of key things I still need to do such as getting the backgrounds to cycle in as incorrect guesses are made, but I’ll write a whole post about it once it’s done!

I’m proud of my baby! p.s. I drew out the hangman figure and I suck at drawing!

I’ve got my eye to the future and my head held high! Ready for tomorrow!

Scope, Hoisting and IIFE’s

It’s the start of the fourth week of my time at TIY! I have gained so much in that time, yet there is still so much ahead. As we enter our second and final week of JavaScript I am feeling like slowly I am gathering all the pieces I need to build amazing things! I can’t help but wish that I was able to put them all together now, and that I had all the pieces to start building a professional portfolio in my spare time, but I will have to accept where I am for now. I find myself wanting to practice more JavaScript in the way of HTML manipulation. I feel that is my biggest area for growth right  now as we only focussed on that for one day last week. I’m hoping I’ll have time to build our hangman game into an actual webpage! I’d love to have it on my portfolio. While I am an extremely efficient and hard working individual, sometimes I am lacking in creativity. I’m hoping that while I finish the course and build my case for a job, that I’ll be able to pull some creative genius from somewhere. I know employers will look for that and I know I can build whatever is set in front of me, it’s just a matter of deciding what to build!

Our lesson for today was heavy on scope and protecting the global scope from repeated variable names. They always say your job as a developer will be 90% coming up with names for things. Our activities today were pretty straight forward. We were given lots of functions with improper use of scope and hoisting and had to restructure them so that they worked in the way they were intended.

IIFE’s are used to compartmentalize all the variable names inside a function that will be “immediately invoked” so that you never have to worry about those variable names interfering with your global variables. These kinds of logic rules just make sense to me. If you have two children you wouldn’t name them both the same thing, ever. So don’t do with with your computer babies aka variables.

I’m still waiting on some info on the crash course Bruin and I are leading next week. I’m really hoping the details come along soon. I HATE being unprepared, but I am very excited about the opportunity!

I had a short meeting with the front-end guy and our campus director and was told that I am exceeding expectations and am not a concern for either of them when it comes to finding a job after the cohort. I hope what they say is true! It’s funny how you can never see yourself the way other see you…

Until tomorrow!

Calculators are Useful

This weekend we were tasked with creating a functioning calculator from scratch using what is commonly referred to as “vanilla javascript”. Basically all that means is not loading in a library such as jQuery, which makes selecting elements, both of the HTML and CSS variety, extremely straightforward. As much as I wish we were using jQuery I feel I ultimately will be very happy that I learned it the long and somewhat more difficult way. From what I understand, jQuery is on its way out due to some browser support issues so learning this vanilla will serve extremely beneficial to understanding libraries to come (or maybe even one day building one).

That was a sidestep, but back to the calculator! I wrote it a couple different ways. Thursday night I played around with the HTML skeleton for what would be the better part of an evening. I originally went with a div table created by some table creator, then realized upon styling that the display: table attributes were really screwing with my idea of how the project would go. I couldn’t get the “display” cell to widen and also be in line (height-wise) with its neighboring cells.  I ended up spending some extra time reorganizing and it took me about 2.5 minutes to get the layout perfect using just flex properties and width %’s. I was very happy I chose to go that route at the end of the day but I wish I had done that from the beginning.

Friday during lab I was able to get two different JavaScript versions of the calculator running. The first one was long and required splitting the input and performing one calculation at a time. It also required the order of operations to be done somewhat manually using conditional statements. Here’s a look at that code:

tedious, but it works

While I was writing that beastly conditional, I came across a built-in called eval which does exactly that: evaluates a string as a mathematical function. The problem was this: the way I had to organize my input to get it to split left and right of the mathematical operator made it impossible to run eval on.

Which is where I decided to rewrite the function! With (only a little) help from Bubba I had this bad boy up and running in no time:

❤

Not only does it work more effectively, it is a beautiful piece of code. The hard mode for this project was to add in a square root and modulo button, which as you can see has been done. Eval works for modulo but not for square root, as the nature of square root is a little different. I threw in a quick conditional case for that button and was done! I finished all parts of this project by Friday evening, which I was extremely proud of after how intense this past week had been. I can only hope the rest of the course treats me as kindly as the first three weeks! I’ve spent the last couple days taking care of personal things and spending a few hours a day working on supplemental exercises which I am grateful for as I feel they are solidifying the knowledge of the past weeks.

We also had a review Friday. It was brief and basic. I was told I was not a concern for the instructor since my pace was on par with the expectation and asked if I had any questions. I was hoping to get something a little more in depth than that, but for now I’ll take it. I’m meeting with the campus director tomorrow so I’ll be able to express any lingering concerns then.

Let’s see what this week has in store!

Loop Madness

More JavaScript! We dove into for loops today and while(pun intended) we mostly used the for variety, we got lots of practice! We came across some big challenges, mostly when trying to build out a hangman type game. The biggest challenge was when I thought my game was complete and working 100% I discovered that I was checking to see if the player had won the game by checking the length of the correctly guessed character array against the length of the correct word. Which again in theory works fine, but leaves a player able to guess the same letter x amount of times and get it right as long as the correct word is also x amount of characters long. So i created a sliced version of the correct word that removed the letter of the word that was correctly guessed and then had my check if the game was won conditional check whether or not the correct word had anything left in it!

Hangman!

 

Our afternoon was spent practicing different types of for loops until we were blue in the face! It sounds tedious, and parts of it were, but extremely helpful in solidifying the concept. My post is going to be pretty short today because my brain is mush! Our lesson tonight was on using “vanilla” JS to edit an html file so I’m sure tomorrow will bring with it more mushy brain! I did level up on CodeWars today! I’ve been using it to practice JS and as my own form of supplemental work. It’s extraordinarily satisfying to start a kata not knowing at all how to tackle it, and within a couple hours of researching and attempting anything you can think of, it works! I had several of those moments today and it’s what keeps me motivated to get it done, day in and day out. Until tomorrow!

 

Array of Light

Today our lesson was an introduction to functions and complex expressions although I wouldn’t exactly use the term complex to describe the expressions we were working with. The material we went over helped to reinforce some of the basics for me, however I spent the majority of the day working on multiple supplemental assignments.

Bubba gave out a more “meta” supplemental on callbacks which is basically calling a function inside a function. The point of the exercise was to get your brain wrapped around where arguments will be returned depending on where they are passed when the function(including the callback function) is called. Here’s what I mean:

callbacks = function inception!

As you can see in the factory function: it is calling something within itself at the same time as it is calling itself so when you define the function you must have it return another function that will return the actual value you are looking for. That helps factory2 make sense, hopefully. The only difference is that factory2’s output depends on arguments passed- not set return values within the function. It gets a little tricky down at factory3 – this is where what will be returned is specified when the function is called, however factory and factory2 both have the inner function returning that argument. In factory3 we want the outer function to return the argument. We still need to actually place our return in the inner function but we need to pass the parameter into the outer function. I know that was a bit of rabbit hole-ness but if you were able to follow along props to you!

I was also able to work through the rest of the X marks the spot challenge from yesterday! It took getting a lot of help from the instructors(more than I’m used to anyway) and a lot of talking it out with a classmate, but we did it!

we got stuck forever on how to get the second positionof xyPosition array

 

We also received a supplemental that we, admittedly, used a solution from our Googling to solve. We did try to make sure that we fully understood what the solution was doing, but it required using some built-in methods we just couldn’t know about just yet. Good thing is we are resourceful! Someone told me today – “Never commit to memory something you can look up.” Maybe not always sound advice but it’s a nice excuse for how we solved this one!

this function does a lot, for being so small

 

Unfortunately still having some problems with Newline content and organization. I’m definitely seeing an improvement in the classroom but the material online is a general mess. I’m really hoping it shapes up and continuing to keep my head up. I love what I’m learning and what I’m doing and I hate that I have to even consider for one second that I might be getting ripped off in any way. Newline, which is the platform we receive all our new content on, is literally in beta right now as we are using it. I hope if it doesn’t get better soon that The Iron Yard will do the ethical thing and reimburse students who have been “capped” so to speak by the material. Time will tell!

 

Oh! I almost forgot to mention this! Heather and Ashe asked me and Bruin to lead the next crash course on campus! It will be June 21 in the evening after class! I was honored to be asked and I am thrilled to get this experience! I’ll stay up to date on any developments there!

JavaScript – Day One

Today we got a new front-end instructor and a new stand-in campus director! Both of them were super optimistic but also firm which I think we all needed. It felt so nice to have a leader in the building. We stuck to the material completely which was also nice especially since we dove head first into JavaScript today! If I didn’t have any familiarity with programming languages I would be up sh*t’s creek right now! We definitely did not start out slow with introducing concepts. I figured today would be about declaring variables, variable types and a lot of console.log but our first activity for the day was to write a rock, paper, scissors program. I didn’t struggle much with it but I wasn’t happy with how the code looked, even though it worked, so I spent some time trying a couple different ways to write it. I do feel for some of the other folks who haven’t been exposed to any of this – they seem a little lost right now.

rock, paper, scissors

Gray, the new front-end guru, gave me and a couple others a supplemental to work on; building an x marks the spot program! I partnered up with one of my buddies in the cohort and we plugged away for a couple hours. We almost got it working, but didn’t have quite enough time to finish. Hopefully we will have some extra lab time and some more knowledge over the next couple of days to slam it out. We were getting so excited when we got parts of it to work. That’s what I love about programming – there’s always a problem to solve, always a sense of satisfaction right around the corner.

x marks the spot – so far

I’m both excited and nervous about this week and next as we dive further into JavaScript. If this is day one of it who knows what our weekend project will look like! Exciting and also intimidating! I will be JavaScript Jedi after this.

Today was a lot more than previous days and in a way I am grateful for that. I hope this new vibe around campus stays – even though we were all a little overwhelmed at points it beats sitting around wishing you were challenged.