PHP ? “Enjoy the Game” : “Try PHP!”

I’m trying to find as much time to practice PHP as I can in between holiday festivities. I had a chance to write a short word-based game in PHP for one of my Codecademy assignments. I liked it so much, I decided to create a repository to remember it!

What Is This?

For this Codecademy challenge, I was tasked with writing a word-based game using conditional statements. This was a great way to practice nested conditionals and using ternary operators.

How To Play

The player has 25 turns to complete the game. There is a set of instructions at the start of the game that list the available commands. The player inputs those commands (exactly as presented) and tries to beat the game in 25 turns or less.

What I Enjoyed

I’m very familiar with conditional statements as I’ve used them often in programming, but it was fun to practice them nonetheless. I enjoyed the plot of this game and it was very simple to create.

Check out the repository and try out the game. You can run the program by inputting php index.php and follow along with the directions in the console. Enjoy!

Welcome to PHP!

During my job search, I had the opportunity to interview for a backend engineering position that uses PHP. Most of my experience with backend languages is in Python and NodeJS, so I decided to sign up for the Codecademy PHP course to learn the basics of PHP. I have been learning this language for the last few days and I’m about halfway through the course.

I created a Magic 8 Ball program written in PHP which prompts the user to input a yes or no question and gives the user an answer. I’m new to PHP and this was a fun activity from Codecademy to practice conditional statements. I added a bit of my own flare to the program, but for the most part, it is a classic Magic 8 Ball program.

I enjoyed this activity and decided to save it as a reminder of my first week learning PHP. I hope to return to this repository in the future when I am more experienced with PHP to remind myself how far I’ve come. As for now, I’m enjoying learning this new language and looking forward to growing my skills in backend engineering.

Check out my GitHub repository for this program!

Black billiard eight ball isolated on white background. Vector realistic pool or snooker ball with number 8 in front and side view

Starting a New App: CounTic

As a teacher, I often had to track student behavior for a variety of reasons. Most of the tracking was logged on paper and, occasionally, an Excel spreadsheet. I hated these antiquated methods because they usually involved carrying a clipboard or laptop from lesson to lesson or room to room. I wished there was an easier method that I could access via my phone or tablet.

I decided to build a tracking app myself. I’m using React and Bootstrap to build the frontend. So far I’ve added a Types component where the user can log the category of the event being counted. For example, Behavior, Symptom, or Positive Response. I’ve added an Add Card component that allows the user to enter the name and description of event being counted and allows it to be assigned a category. The user decides what color to assign each category and the card changes colors based on this category.

Next, I’m going to build the cards that will hold each event and the counter to keep track of the events. These cards will be color coded according to the category, or Type, assigned to them. The card will include the name, description, and counter. The card will also allow the user to click on a link to a modal that lists all of the tics and the date and time they were selected. This is important as much of the tracking teachers do is to record the number of incidents and date/time for the specific events.

On another page, I will have a table that lists all of the events and their types, along with dates they were created. I plan allowing users to create accounts and manage their tracking so that they can come back and revisit their counts as needed. All of this data will be stored in a MySQL database that I plan to build myself. I haven’t decided how I want to build the backend yet, as I’m thinking about trying something other than NodeJS and ExpressJS.

Below is a screenshot of the current status of my build. I’m loving the colors and how well the components are exchanging data so far. This app is easier in many regards than the banking app, but is challenging as I have no reference for how it should be built. I’m enjoying this task I’ve set for myself and I can’t wait to continue building on this idea. Check out my GitHub Repo for this application!

Firebase Practice

This week, MITxPro introduced us to serverless services with Firebase. This platform was developed by Google and provides developers the ability to create mobile and web applications with services. It gives developers tools that they often would have to build themselves like fire storage, databases, authentication, and many more.

For example, in today’s challenge, I was tasked to add Google Authentication to a login form. The template code was provided for me but I had to add a popup that provided the user an option to create and account and login using their Google account. If you’ve ever set up authentication for an application, you know how difficult this task can be.

Well, Firebase made this so easy! I had to troubleshoot a few things and learned a bunch about how to work with Firebase’s interface. Once I got it set up, it worked like a charm.

I really enjoyed this activity and I look forward to using Firebase in the future. If you would like to see my code, visit my GitHub repository here!

Numbers App

## What It Is

This is a Codecademy project in which I used React, Bootstrap, and a couple of APIs to create an app that provides the user with math facts, trivia, and practice. The purpose of the project was to utilize APIs and provide the user with ‘messages’.

## How It Works

When the app is opened, the user is provided a welcome message and three options: Math Facts, Math Trivia, and Math Practice. The user can select one of the paths, which redirects them using Routing to a new page.

For Math Facts, the user can choose to input a number or select `Random`. They will be provided a ‘fact’ about that number using the Numbers API.

For Math Trivia, the user selects `Generate` and is given a trivia question about a random, unknown number. The user can input a guess as to what the number is, select `Submit`, and then select `Result` to check their answer. If needed, they are provided a calculator which is hidden unless the user selects `Show Calculator`. Depending on the result, the user will receive a message letting them know whether they were correct or incorrect in their guess. This also uses the Numbers API.

Lastly, the Math Practice page utilizes the xMath API to generate addition, subtraction, multiplication, or division questions. The calculator component is provided on this page as well. The user can input a number, click `Submit`, then check if their answer is correct using the `Result` button. They will be given a message stating if they got the answer correct or incorrect. Unfortunately, this API was not functioning the last time I checked, so I may need to remove this page if it isn’t fixed.

## What I Found Difficult

The most difficult part of this build was refactoring the code. I didn’t want the API calls to be made directly from the components, so I had to create a util folder and create individual files for each API. Once this was done, the code worked great.

## What I Would Improve

I would really love to add more pages and activities to this app. I could include a page that has math videos directly pulled from the YouTube API. I could add links to other Math learning resources or embed games into the app itself.

Check out my GitHub Repository for this App. You can pull it and see if you can improve my code or add some fun pages. Let me know what you think in the comments.

Bad Bank Application

I am currently working on a Bad Bank Front End Application for the MITxPro coding bootcamp. I built it using Create-React-App and Reactstrap. This project is the second portfolio project for this bootcamp and will be the basis for our capstone project at the end of the cohort.

Building this app has been challenging, but I’ve really enjoyed it thus far. I struggled with making the Routing work, but eventually figured it out on my third build. I wanted to use Reactstrap instead of the course-suggested Bootstrap because it is friendly for building React applications. This also took me until the third project to “master.”

I’m still in the process of finishing up some rubric specification and I need to figure out how to host my site using AWS. That will be my task for this week.

I like the way my app looks and its responsive, but there are some small issues with it. For one, I used useContext to establish a global user variable but I’m not using it in the best way. I also wanted to make the Deposit and Withdraw options unavailable until the user is signed in, but I haven’t figured out how to re-render the NavBar once the user account is created so that the dropdown options can be enabled.

If you want to see the current state of my Bad Bank App, check out my GitHub Repository for the project or my AWS S3 bucket to see the progress on the live site. See you around!

ATM Machine App

This week we are focusing on React and simple components. We were tasked with creating a ATM machine app. The user is able to deposit money or take out a “cash” withdrawal. The app keeps track of the account balance and utilizes a drop-down menu that allows the user to choose “Deposit” or “Cash Back.” The submit button is disabled until the user puts in a valid value.

For our next portfolio project, we are building a Bad Bank that uses React to manage several pages. I’m a little intimidated by this project because React and JSX are still challenging to me. I’m looking forward to using what I learned during this project to prepare for the Bad Bank App. I’ve found some MITxPro alumni projects on YouTube and plan on watching those to prepare.

Check out my GitHub repository for this project.

To Do List App

Hi, Friends! It’s been a while. I spent a few weeks traveling with the family and had a Break Week from MITxPro. I continued to work on my Full Stack Codecademy Path during the break, but I didn’t add any new projects to my GitHub since my portfolio.

We are currently learning React in both my MITxPro Bootcamp and Codecademy. This has taken up most of my time as React can be challenging to learn. Here is my first React App: A To Do List.

It’s a simple app with just a few bells and whistles. The goal was to learn the basics of building a React app, styling it, and refactoring the code. I struggled with this longer than I would like to admit. If this were a functional app, I would add a DatePicker instead of a dropdown menu, a place to add notes, and an option to include attachments.

Screenshot of the To Do List App

Check out my GitHub Repository and let me know what you think.

MITxPro Portfolio Website

Part 1 of my coding bootcamp ended with a portfolio project where we had to create a functional website. I hosted my website on GitHub and you can check it out here!

I’m glad I had a chance to create a portfolio website for my Codecademy course, because this prepared me for this current project. I already had a good idea of what the challenging parts would be and how I wanted my website to look and work.

In the previous project, I used FlexBox which was great, but made it difficult to position elements. For this project, I used Grid and this allowed me more movement and placement. Later, I learned that Bootstrap has a great Grid format and I plan on using that in the future.

I was able to manipulate the look of the website with CSS with more control the second time as I had a much better understanding of the scope and attributes. I included some JS elements as well, such as making my icons blink and making my PacMan chomp.

This was a wonderful experience and I look forward to learning more about the backend in the future.

Here is my GitHub repository for this portfolio website!

Real Time Boston Bus Tracker

What Does It Do?

This program identifies the locations of every bus in Boston using the Massachusetts Bay Transportation Authority website and uses markers to identify them on a Boston map. Every 15 seconds, the program updates the location of each bus by pulling the longitude and latitude from the MBTA data.

Originally, the program only identified the location of one point on the map with a given longitude and latitude. I updated this program to pull data from the MBTA website to provide real-time locations of their city bus locations.

Try It Out!

Load the index.html file in your browser. Every 15 seconds, the markers will update based on the current location of MBTA buses.

What I Could Improve

This program would be even better if the map could predict the next stop for each bus along with tracking the data. The MBTA provides the schedules for the busses and this change would make the map more useful for a traveler in Boston.

Check out this repository and try it out!