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!"))}