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!
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.
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!
It has been a busy few weeks at my house with Thanksgiving and traveling to Virginia to be with family. I haven’t posted in a while and a lot has been happening in my coding journey.
Before Thanksgiving Break, I did a quick TypeScript course on Codecademy, which helped me better understand how TypeScript complies JavaScript and ensures an added level of safety to projects. I took a break to spend some time with family and play as much Pokemon Aucer as I possibly could.
As many new (and old) developers can attest to, the tech world took a big dive and some companies have begun laying off thousands of workers. This makes the job search significantly more difficult and has been heavy on my mind. I have applied for many, many, many jobs and I’m becoming burned out on the job hunt process.
In between applying for jobs, spending time with my family, and playing video games, I began learning about React Native. React Native is a software framework used to develop applications for mobile devices. It uses the same JavaScript most frontend developers are familiar with to build Native apps.
I am currently through the first module of the Codecademy’s React Native course. I was tasked with building a simple create account form for a dog social media app using <Text>, <TextInput>, <View>, and <ScrollView>. I elaborated on several aspects for this project, such as adding a header with an icon, adding a dropdown for breeds, and styling the page to my liking. It was an enjoyable experience and I am looking forward to learning more applicable skills in this course.
This course is an intermediate level course and has very little added support, like some of the other courses Codecademy offers. The modules have no solution files or videos, which challenges me to use my existing skills and experience with JavaScript and React. If you would like to see my code for this project, you can visit my repository on GitHub.
Now that I’ve completed the MITxPRO Coding Bootcamp, I’m going back to Codecademy to bolster some gaps in my knowledge. Currently, I am learning about Redux and how to manage state and actions using this JavaScript library.
For my first assignment, I was tasked with building a Redux reducer function for a Wagon Train game. I had to add an initial state with supplies, distance, and days. Then, I had to add actions such as gather, travel, and tippedWagon. As a bonus, I added the property of cash, then added the actions of sell, buy, and theft. Check out the repository here.
I’m excited get back to learning new things after working on my capstone for several weeks. Redux is an extremely popular library so it’ll be a great skill to develop.
After many months and many long days, my capstone for the MITxPro Coding Bootcamp is finally finished!
I used my frontend Bad Bank website and added a backend and database to it. Specifically, I created the backend using ExpressJS and NodeJS, and incorporated a MongoDB database. I deployed my frontend and backend on Heroku and my database as a serverless MongoDB instance on Mongo Atlas. This sounds so much easier than it felt at the time!
For the backend, the ExpressJS web framework worked great and I used NodeJS to build my APIs. I used POST to create accounts by sending information through the body. Rich explained that using a POST request would also make querying for users safer, so I used that to return user information as well. When updating information I used the HTTP PUT verb and for getting all accounts, I used the GET verb.
To help abstract the data from the logic, I wrote functions for the Data Access Layer, or DAL. This was by far the most difficult part. I used MongoClient to connect to my MongoDB serverless instance where my database was deployed. I had several connection issues, but finally figured out that Heroku needed the MongoDB environmental variables to facilitate the connection. This made it so that I only had to call the process.env when making the connection to the database URL. The next issue I faced was that the database return took longer than the API calls and this was interfering with my results. I had to make the DAL function async and await each and every part of the connection. This took a really long time to figure out and I ran out of time to add extra authentication and roles to the database like I wanted.
My first full stack application is now complete! Its a fully deployed and functional website which you can check out here! I had a great time making this application and I look forward to improving it in the future.
You can check out my GitHub repository for the code that created this beautiful application.
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!
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.
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!
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.
Tina Collier 