More Javascript!!

https://vimeo.com/363217217

I took a slightly different approach this week and wanted to keep working on my coding skills. Instead of just examining a few sites, I worked on two of my own.

Recently, I’ve been trying to learn React, and decided to use this opportunity to actually build an app. I worked off the official tutorial to build a tic-tac-toe game, and while most of the code can’t be considered “mine”, it really helped me understand how all the elements work together.

  • The app was initially composed of three major components: Game, Board, Square
  • It used props to pass data to components
  • It uses a robust handle click function to add interactivity and allow play
  • Data was moved from the squares to the parent component through Lifting State Up
  • A helper function helped determine the winner
  • Slice array.slice was used to create an immutable duplicate array, and allow us to keep a running history

I did all of the development locally, installing react with NPM and using Create-react-app. I then pushed everything to Github, where I hooked it into heroku which I used to host the app.

I still have so much to learn in react, but I’m really starting to get the basics of components, props, and rendering… More to come.

I also wanted to keep exploring the p5.js library, so decided to redo my home page. The sketch does the following:

  • Loads an outside font
  • Renders my name
  • Rotates the text on the X & Y axis
  • Moves the text around the screen based on mouse position (cool interaction when the font is rotated)
  • Changes font fill from black to white and back

Github repo is here.
Check it live on my homepage: claytonk.com

Here is my repo for the DOM basic exercises. My syntax was a little rusty, but overall this went pretty smoothly. I particularly liked the below answer because using Object.values + arrow function I was able to make this a little cleaner than a for loop.

//Make an event listener for any h2 element that triggers an alert() when you click it. Set the alert message to "Hey Hey Hey!".

const listen = document.getElementsByTagName('h2');
let values = Object.values(listen)
for (const value of values) {
    value.addEventListener("click", () => alert("Hey Hey Hey!"))}