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!

PacMan Game

For this MITxPro challenge, we were tasked with making a game that factory produced PacMen. Then we had to make the PacMen bounce off the walls continuously. To challenge myself, I made the PacMen chomp as the moved across the screen. Then I made them face the direction of their movement while chomping.

What I Found Challenging

My program isn’t perfect by far. The chomping toggle doesn’t work perfectly. I wasn’t sure what the best method was to loop through the images, but I was able to make it work pretty well with the `imageChange` function and a `setInterval` function. I will come back to this program and see if I can make it work smoother in the future.

If you have any suggestions or advice to make my program better, I’d love to hear your thoughts. Check out my GitHub Repository for this challenge.

# PacMenGame

Portfolio Website Challenge

Codecademy Challenge: Build a Portfolio Website.

Background Image of Portfolio Website

What I Built

For this challenge, I had to build a Portfolio Website that showcased some of my previous projects. I created a home page with a nav bar, three featured projects, links to my LinkedIn, GitHub, and email, and an additional About Me page. In the nav bar, I included my resume and a link to my blog. My goal was to combine my current skills in HTML, CSS, and Javascript and create a responsive website.

What I Found Challenging

The HTML portion of this assignment was a breeze. Most of the CSS was not very difficult either. What I struggled with was incorporating Javascript. It’s easier to create CSS elements than to use Javascript. For example, my social media icons “shake” when the user hovers over them. This could be done with Javascript, but CSS makes it much easier. Instead, I used a `click` element and a `setTimeout()` function to make my project divs disappear for a couple of seconds after being clicked on.

Another issue I came across was including my footer. I saved that section for last and struggled to get it to cooperate. It didn’t want to sit at the bottom of my page and it would act strangely when the screen was resized. After a couple of hours, I decided to make it “disappear” when the screen got to a certain size. This wouldn’t be a permanent fix if my site were a live webpage, but as this isn’t my official Portfolio Website, I’m going to leave it as is.

What I Would Do Differently Next Time

One thing I would change is using Grid instead of Flex Box. Using a Grid makes it easier to rearrange divs and adjust as necessary. I think that would’ve made my footer issue much easier to deal with. Another thing I would do differently is add my footer sooner. I had a blast with this challenge and I’m definitely getting more comfortable with front end development.

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

Order Drink Callback Function

For this coding challenge, I had to write a callback function that ordered a beverage at a cafe. I am currently in the processes of learning Javascript in both my MIT/Emeritus Coding Bootcamp and my Codecademy Full Stack course. This challenge helped me better understand callback functions and how they work. You can check out my orderDrink callback function on my GitHub.

I also wrote a callback function that sent directions in steps to my friends house every 1 second using setInterval. This used an anonymous function to iterate through an array and provide the step-by-step instructions. This was a simpler function but I struggled with making it work. I always make my code unnecessarily complicated so Rich helped me simplify it.

const directions = [‘Take a left on South St.’, ‘Go North for 1.5 miles’, ‘Slight right on Bernard Rd.’, ‘Right on Harper St.’, ‘Its the second house on the left’]

var i = 0;

setInterval(function(){

if(i < directions.length){

console.log(directions[i])

i++

};

}, 1000)

TeaCozy

What I Made!

In this project, Codecademy challenged me to recreate the HTML and CSS of a design spec and include flexbox in my code. I was provided an example page of a Tea shop with some parameters.

How I Did It!

First, I recreated the HTML text for the entire page. I began working my way down the page adding the CSS elements. I began with the *body* tag, then the *header*. Each portion of the page, I created *div* within *div*. I had to create several classes to make my code work.

What I Found Challenging

I found using flexbox threw a wrench in my plans, but it made the webpage flow smoother. I had to use Google and ask for help several times to get the CSS code just right. I had a great time doing this project and I look forward to the next challenge.

Check out the code HERE.

moveBall

What I Made!

I have been participating in MIT/Emeritus’ Coding Bootcamp. In Module 2, we were challenged to create a program that made a ball move. First, we made the ball move in one dimension, on the x-axis. Then, we were asked to make the ball move in two dimension, the x-axis and y-axis. After about half a day of trying different things, I managed to get my ball to move diagonally.

What I Tried

At one point, I tried to make a container for the ball to bounce around in. I finally got it to work in one dimension, but I struggled to make it work in two dimensions. I took out the container div and instead added the Xmin, Xmax, Ymin, and Ymax variables instead. I originally had the variable direction, but changed that to reverse due to part of the challenge requirements. To make the ball move on the y-axis, I copied the same if statement and changed the X to Y.

What I Would Do Differently

At this point, my code is pretty cluttered. With time, I’m hoping to learn how to accomplish the same task with less code. Overall, I enjoyed this task. It was challenging, but it felt great when I finally got the ball to do what I wanted.

Check out my GitHub and try out my moveBall program.

Tinabear’s HTML Cheatsheet

picture of cactus
color palette

Why I Made This Cheatsheet

I’m currently working through the Codecademy Full Stack learning path. In the last few modules, I learned how to use HTML and CSS. I have learned how to use a stylesheet to improve the look of my webpage and why a stylesheet is better than using inline styling.

For this project, my course prompted me to make a personal HTML Cheatsheet using tables. I had a great time finding a color palette to add to my webpage. I really enjoyed learning how to adjust the colors and other attributes to make it look the way I like.

If I Had More Time

I would prefer to spend more time on this activity and include some links to other references I could use while working on my webpages. This obviously is not an extensive list of HTML tags, but I wanted to focus on the ones I am currently using. I would also like to include some additional details to make the page look more aesthetically pleasing.

Here is a link to my cheatsheet. Let me know what you think.

https://github.com/tinabear817/Tinabears_HTML_Cheatsheet

My Book Library Database using PostgreSQL

I completed the Codecademy course on SQL Databases. At the end of the course, it prompted me to create my own database. I chose to create a database of some of the books in my personal library using the client Postbird.

The database includes three tables. The main table lists 40 books from my personal collection. The other tables identify the authors and publishers. I created a Primary Key using the book id and two foreign keys using the author_id and publisher_id.

I really enjoyed creating this database and practicing querying it. It was a bit tedious putting the information for each row in by hand, but my son helped me look up the information for each book.

Here is the GitHub link if you’re interested in seeing my repository: https://github.com/tinabear817/my_book_library

Boston Adventure Routing Program

Subway ASCII

Boston_Adventure

This is my routing program to help a Boston visitor plan their route along the Red Line to get to various landmarks.

How To Play

  1. Start the game with python3 Boston_Adventure.py
  2. Choose your starting point by typing the letter that represents your current landmark.
  3. Choose your ending point by typing the letter of your next landmark destination. The program will give you every station stop on the way to your destination.
  4. Decide if you would like to go to another landmark. Type y for yes and n for no.
  5. If you choose yes, the program will ask if you would like to see the list of landmarks again. Choose yes or no.
  6. Choose if you would like to change your origin o, destination d, or both b.
  7. Repeat steps 2 through 6.

Why This Program?

I wanted to showcase my ability to create a graph and use both breadth first and depth first searches. I included three dictionaries along with the graph search functions and imported these into my routing program. I really enjoyed our visit to Boston last month and I wanted to memorialize our trip using my program.

Take a look at my routing program and let me know what you think.

https://github.com/tinabear817/Boston_Adventure