Tag: JavaScript

  • UPDATE – Space Invaders

    Quick presentational update to the Space Invaders project. Keep Shields Centered On Hit Shields will now automatically maintain a centered position when hit my an alien missile. I initially thought this was going to involve some math to determine whether the missile hit on the right or left side. I even put together a formula […]

    Read More
  • NEW PROJECT – Space Invaders

    Space Invaders is a bare-bones facsimile of the classic arcade game of the same name. Objective I wanted to take what I learned from the Asteroids Tutorial in my last project and iterate without the training wheels this time. Space Invaders has more lateral movement from the player and hostiles than in Asteroids, and has […]

    Read More
  • Space Invaders

    This is a simple Space Invaders game implemented in JavaScript using the HTML5 Canvas API. Installation Clone the repository to your local machine: https://github.com/K8215/space-invaders.git Navigate to the project directory: cd space-invaders Open index.html in your web browser to start the game. Usage The game starts automatically when you open index.html in your browser. The player […]

    Read More
  • NEW PROJECT – Asteroids

    Asteroids is a bare-bones facsimile of the classic arcade game of the same name. Objective I want to focus on more creative projects this year in order to break up the grind of work skill development. I’ve always been passionate about game design, and there are a lot of free tools to chose from. My […]

    Read More
  • Asteroids

    This is a simple Asteroids game implemented in JavaScript using the HTML5 Canvas API. Installation Clone the repository to your local machine: git clone https://github.com/yourusername/asteroids-js.git Navigate to the project directory: cd asteroids-js Open index.html in your web browser to start the game. Usage The game starts automatically when you open index.html in your browser. The […]

    Read More
  • NEW PROJECT – Catholic Liturgical Date Checker

    The Liturgical Date Checker project uses the Liturgical Calendar API to display information about Catholic Holy days. On page load it fetches info for today, tomorrow, and yesterday. It also has a search field that will return celebration info about a specific date. Objective This is just more basic API practice. I started this in […]

    Read More
  • Liturgical Date Checker

    A simple tool for checking Holy days. Uses the Liturgical Calendar API Installation Clone the repository git clone https://github.com/K8215/catholic-liturgical-date-checker.git Navigate to the project directory cd catholic-liturgical-date-checker Install dependencies npm install Usage Run the development server npm run dev Known Bugs This project does not work on the server due to content mixed content error. The […]

    Read More
  • Logo Finder

    App that retrieves a logo image from a web domain using the Logo API by Clearbit. Installation Clone the repository git clone https://github.com/K8215/logo-finder.git Navigate to the project directory cd logo-finder Install dependencies npm install Usage Run the development server npm run dev Updates 3/7/2024 – Added enter key functionality.

    Read More
  • NEW PROJECT – Open Library Search

    Added another API fetching project, Open Library Search. The app pings the Internet Archive‘s Open Library Search API to retrieve author, publication, purchase, and topic data for a user-provided book title. Objective My goal is to continue cranking out simple fetch projects until I can do them without relying on a crutch. I used my […]

    Read More
  • NEW REACT PROJECT – Obligatory To-Do App

    The Obligatory To-Do App is a simple React project that I whipped up to test out Vite. Objectives The most popular React scaffold, create-react-app, is no longer being maintained, so work needed to find an alternative for spinning up smaller SEO-agnostic React builds. The to-do app is one of the most basic coding projects so […]

    Read More
  • Obligatory To-Do App

    The Obligatory To-Do App is exactly what it is. It’s a foundational project for testing new languages and frameworks. This one uses local browser storage only. Installation Run: npm install Then: npm run dev Usage Type a thing to do in the text area, then click the Add Item button to place the item in […]

    Read More
  • NEW NEXT.JS PROJECT – Game Picker Next

    I re-built my Game Picker 9000 project in Next.js 13. The new routing system is very appealing, but as of right now the deployment documentation leaves something to be desired. Will need to investigate that further if I’m going to dip into headless WordPress. Features: Split original markup into components Converted vanilla JavaScript listeners to […]

    Read More
  • Game Picker Next

    The Game Picker Next is a re-build of my original Game Picker 9000, this time using Next.js. With create-react-app being depreciated, I made the recommended switch to create-next-app, and jumped right into the new app router that was just added in Next.js 13. Usage Just like the Game Picker 9000, Game Picker Next takes in […]

    Read More
  • NEW REACT PROJECT – Responsive React Portfolio

    I re-built my Responsive Web Portfolio project in react for practice. It went pretty smoothly and provided a good opportunity to practice some essential react concepts. React Features Employed: Split project out into nested components Converted vanilla JS event listeners to state Used effect hook to listen for user scrolling action Discovered react-router-hash-link package that […]

    Read More
  • Responsive React Portfolio

    This is a re-branded copy of my Responsive Web Portfolio project built in React. I thought it would make good practice just to take a simple web page I was already familiar with and convert it. Turned out to be a perfect introductory-scale project. Routing and React Router Hash Link Even though there’s only one […]

    Read More
  • NEW REACT PROJECT – Lightbox Gallery

    I added a React Lightbox Gallery to the projects archive. It is my first attempt at an independent React project. Lightbox Gallery Features Landing page with welcome text. Presentation page with image gallery and categorized navigation. Images expand to a detail view when clicked. The initial setup for this React project is minimally featured due to a […]

    Read More
  • React Lightbox Gallery

    The React Lightbox Gallery is a simple lightbox app for displaying multiple images. It’s my first foray into the React JavaScript framework. React Lightbox Gallery Concept I needed to come up with a fun PowerPoint presentation for happy hour at work but decided to build an app instead. I’d recently built a marketing tool for […]

    Read More
  • BUG FIX – Game Picker Filtered Listing

    Before the holiday I noticed that the game listing in the Game Picker 9000 didn’t clear on submission. If the user performed a submission with the box unchecked, then checked the box and submitted again, the result would have both played and unplayed games in the listing. In order for the filter to work properly, […]

    Read More
  • UPDATE – Game Picker UX Enhancement

    I’ve furthered the UX enhancement to the Game Picker 9000. First I centered the loader and positioned it below the title output container. Previously it was jammed on top with no padding. If you searched more than once, the loader popped in awkwardly. The new alignment is more pleasing. I also added the player’s username […]

    Read More
  • UPDATE – Game Picker Playtime Filter

    Pursuant to my co-workers’ feedback, I added a playtime filter to the Game Picker 9000. Now the Game Picker can ignore games you’ve played already. Additionally, the Game Picker now prints the total playtime of each game in the main listing. Playtime Filter Implementation The Game Picker 9000 uses the GetOwnedGames method within the Steam […]

    Read More
  • Game Picker 9000

    The Game Picker 9000 is a Node.js app with Express that queries the Steam Web API. It was designed to solve two problems: It’s hard to pick a new game to play when your backlog is over 100 games deep. I don’t get to do a lot of server-side fetching and routing in my day […]

    Read More