DEV Community: C. Pure

Coding on the Go - Free Mobile Coding Apps

C. Pure — Mon, 07 Sep 2020 15:35:19 +0000

This year I am doing a second round of #100DaysOfCode and I want to squeeze in as many practice lessons as possible. I’m mainly focusing on JavaScript this time around but still review HTML and CSS. This lead me to dive into the world of mobile coding apps. Below are two free apps that can help you in your coding journey today!

1. Grasshopper by Google

Grasshopper is an app created by Google that focuses on JavaScript fundamentals but the app is code agnostic as these concepts can be applied to a number of languages.
This is the first app I tried as it allowed for me to do lesson after lesson with no daily limit. Like most apps you can set a goal of how long you want to learn for. I chose 15 mins a day.

At first I thought it was going to pretty simple given its deceivingly playful aesthetic. There is a grasshopper named Grace, which pays homage to Grace Hopper, that guides you along your journey. There is a lot of great bits of symbolism in the design, like how you start on the ground and reach for the stars and beyond.

The puzzles can be solved in about five minutes and there are 7 courses total. After each course you receive a digital certificate you can save. I completed all 7 in about two weeks but I will revisit Intro to Interviewing. This section started to dive into computer science and at the end of the course you had to complete a challenging Google Interview question. This by far was the hardest section in my opinion.

Final Thoughts

What drew me to the app was their commitment to keeping it free. In their FAQ they state “We firmly believe that everyone should have the opportunity to learn to code, regardless of their means. We’re committed to keep Grasshopper free to use.” The programming community is great because of projects like this. Also the team Lead and founder of Grasshopper is a woman and that is also pretty rad!

Here are my certificates 🤗

2. m1m0

m1m0 is the second app I have dived into after I finished Grasshopper. Unlike Grasshopper which has a set path, with m1m0 you choose a track. You can choose from a number of categories ranging from web development to cyber security and AI. I chose the web development path.

Limited Access

This app has a limit or health line of ‘3 hearts’ ❤️. When you get a question wrong you loose a heart. If you loose all your life you will have to wait 4 hours before continuing on with lessons and challenges. This is a cool feature so that you don’t overload your brain and rush through lessons. It also helps to make sure you are understanding the lessons. When you lose your final heart in the middle of a lesson you have to cancel and start that lesson over.

In-App Purchase

This app is not 100% free. For $9.99 / month or $79.99 a year you can get m1m0 Pro which opens up all of the tracks, courses, and challenges. You also have unlimited hearts when you sign up for the pro account but for now I am using the free version which is pretty robust and satisfying my educational needs.

Leaderboard & Leagues

m1m0 has different leagues that you are automatically entered into. You gain ⚡️Sparks by completing lessons and challenges. At the end of your sessions your points are added up and there is a leaderboard of the top 50 leading members.

You start off with the Wooden League and all the other ones are locked for a certain period of time. At the time of writing this it says there is 15h and 21 min left. I’m not sure what happens after that but I’m excited to find out!

Conclusion

And there you have it! Two free apps you can use on the go to round out your coding journey. Each one with a different flavor language but each equally as effective. Do you use coding apps in your learning? If so let me know down below in the comments some other great apps!

Breaking Down Ania Kabow’s Candy Crush Tutorial Part 4- Move Candies Down, Generate New Candies, and Add a Scoreboard

C. Pure — Thu, 27 Aug 2020 14:58:17 +0000

Continuing on from part 3 of this technical breakdown, the next and final tasks in creating this game is generate candies moving down, creating new candies, and creating a scoreboard!

Move Candies Down

We begin by creating a function which we named moveDown and add a for loop to check all the squares up to square 55. In this function we want to check each of the squares below the selected indexes for an empty square. You take the index number plus the width which is 8. For example if you are at index 7 we want to check if the square below it, index 15, is an empty square.

Inside the for loop, we check the .style.backgroundColor property to see if the squares background color is empty by using an if statement and set it to an empty string using strict equality.

function moveDown () {
    for(let i = 0; i < 55; i++){
        if (squares[i + width].style.backgroundColor === ‘’){

        }

Next we want to move the candy square down if it is empty. If we are using the same example from above of square 7 and square 15, we essential want square 15 to be equal to square 7. This is creating the down movement where now since square 15 is empty square 7 is now moving in that spot.

squares[i + width].style.backgroundColor = squares [i].style.backgroundColor

Lastly we set the square to an empty string. So now square 7 is empty and this loop would repeat to make sure empty spaces are filled with the appropriate squares.

squares[i].style.backgroundColor = ‘’

function moveDown () {
    for(let i = 0; i < 55; i++){
        if (squares[i + width].style.backgroundColor === ‘’){
        squares[i + width].style.backgroundColor = squares [i].style.backgroundColor
        squares[i].style.backgroundColor = ‘’
        }
    }
}

To make sure that this executes throughout the game we add it to our setInterval function. Again this function will execute every 100 milliseconds.

window.setInterval(function(){
        moveDown()
        checkRowForFour()
        checkColumnForFour()
        checkRowForThree()
        checkColumnForThree()
    }, 100)

Generate New Candies

Still within the moveDown function we will first define the first row as a const variable.

const firstRow = [0, 1, 2, 3, 4, 5, 6, 7]

Then we will check if the first row includes any of the above array items. If so it will come back as a boolean value of true.

const isFirstRow = firstRow.includes(i)

By creating an if statement we check if both conditions of the square being in the first row and if the square is empty. If so, then we need to fill it with a random color. As Ania states in the video, the “random color” is actually a random number we can use to access the candy colors in the candyColor array.

if (isFirstRow && squares[i].style.backgroundColor === ‘’){
    let randomColor = Math.floor(Math.random() * candyColors.length)
}

Lastly we take that square and set it equal to candyColors array. We are using the randomColor variable we created in the statement to get a number within the candyColors array.

if (isFirstRow && squares[i].style.backgroundColor === ‘’){
    let randomColor = Math.floor(Math.random() * candyColors.length)
    squares[i].style.backgroundColor = candyColors[randomColor]
}

The final code should look like this:

function moveDown () {
    for(let i = 0; i < 55; i++){
        if (squares[i + width].style.backgroundColor === ‘’){
        squares[i + width].style.backgroundColor = squares [i].style.backgroundColor
squares[i].style.backgroundColor = ‘’
        if (isFirstRow && squares[i].style.backgroundColor === ‘’){
        let randomColor = Math.floor(Math.random() * candyColors.length)
        squares[i].style.backgroundColor = candyColors[randomColor]
            }
        }
    }
}

Scoreboard

Create a const called scoreDisplay and set it equal to the score id within your HTML file. You do this by using the getElementById() method.

document.addEventListener('DOMContentLoaded', () =>
    const grid = document.querySlector('.grid')
    const scoreDisplay = document.getElementbyId('.score')
    const width = 8
    const squares = []
    let score = 0
)

Next we will add the scoreDisplay to the 'check for matches' functions we created in part 3 of this series. Using the innerHTML property we set the score markup onto our page.

// Check column for a match of 4
function checkColumnForFour() {
    for(i = 0; i < 39; i++){
        let columnOfFour = [i, i+width, i+width*2, i+width*3]
        let decidedColor = squares[i].style.backgroundColor
        const isBlank = squares[i].style.backgroundColor === ‘ ’
        if (columnOfFour.every(index => squares[index].style.backgroundColor === decidedColor && !isBlank){
            score += 4
            scoreDisplay.innerHTML = score
            columnOfFour.forEach(index => {
            squares[index].style.backgroundColor = ‘’
        })
      }
    }
}

In the HTML file we add a div with a class of Score-Board. This is where we are injecting the scoreboard. Then we added two heading tags. One has the word Score and the other will have an id of score will hold the actual score. This is where we assigned our cont scoreDisplay in JavaScript.

<!DOCTYPE html>

<html>
    <head>
      <meta charset=“utf-8”>
      <title>Candy Crush</title>
      <link rel=“stylesheet” href=“css/style.css”>
      <script src=“js/app.js” charset=“utf-8”></script>
    </head>
    <body>

      <img class=“logo” src= “images/candycrush.png” alt=“Candy Crush Logo”>

      <div class=“gameboard”>
      <div class=“Score-Board”>
        <h3>Score</h3>
        <h3 id=“score”></h3>
      </div>

      <br>
      <div class=“grid”></div>
    </div>
    </body>
</html>

And there you have it a super simple rendition of Candy Crush! If you want to see my version of the game you can check out my GitHub repository.

Mine is themed around Animal Crossing which I, and pretty much most of the world, are currently obsessed. At the end of the video Ania shows how you can add images in your candyColors array so I created fruits to represent the candy colors. The rest of the styling - background, candy icons, and logo I created in Adobe Photoshop and Illustrator.

Thanks for following along as I broke down this code! Thanks to Ania Kubow for an awesome tutorial and I hope you have a better understanding of javascript.

MDN web docs

Topics Includes:

Each function and method above is linked to their respective MDN web doc pages. This concludes the series of Breaking Down Ania Kabow’s Candy Crush video.

If there are any errors in my syntax or grammar please shoot me a comment or message to let me know! This is my first technical blog post so I want to make sure I'm sharing the best information possible.

Breaking Down Ania Kabow’s Candy Crush Tutorial Part 3 - Valid Moves & Checking for Matches

C. Pure — Fri, 14 Aug 2020 17:24:45 +0000

Continuing on from part 2 of this technical breakdown, the next task in the game is to check for valid moves and matches.

Valid Moves

First we create an array of all the valid moves.

let validMoves = [ ]

Inside the array we add the following

squareIdBeingDragged - 1

squareIdBeingDragged + 1

This as Ania explains will make the move to the left or right of the dragged square valid. For example if I drag a square with an id of 67 it can move one over and switch with a square with an id of 66 or 68.

squareIdBeingDragged - width

squareIdBeingDragged + width

This item will make moving one up or down valid. This takes the ID and will subtracts or add the width which is 8. Below is a visual representation of this array and the valid moves we are creating.

Final Array

let validMoves = [
    squareIdBeingDragged - 1,
    squareIdBeingDragged - width,
    squareIdBeingDragged + 1,
    squareIdBeingDragged + width

]

Defining a valid move

We used the ‘includes() method’ to validate these moves in the array. The includes method determines whether a string contains the specified characters in another string. This will return a boolean value of true or false when assessed.

let validMove = validMoves.includes(squareIdBeingReplaced)

This statement reads if the ID value of the replaced square is in our validMoves array the statement is true, making it a valid move.

Next, we will create an if statement to check that the ID of the squareIdBeingReplaced exists and that the move is valid. If both statements return back “truthy” we clear the value of the square being replaced. To do that we use the null value which is an intentional absence of an object value.

If it is not a valid move we will return squareIdBeingReplaced and squareIdBeingDragged. We do this by setting both to its original color. And finally if a square just has no where to go, like it’s on the edge of the board, it will just return to its original space.

if (squareIdBeingReplaced && validMove) {
    squareIdBeingReplaced = null
} else if (squareIdBeingReplaced && !validMove) {
    squares [squareIdBeingReplaced].style.backgroundColor = colorBeingReplaced
    squares [squareIdBeingDragged].style.backgroundColor = colorBeingDragged
} else squares [squareIdBeingDragged].style.backgroundColor = colorBeingDragged

}

The final code should be within the dragEnd function as so:

function dragEnd() {
console.log(this.id, ‘dragend’)

let validMoves = [
    squareIdBeingDragged - 1,
    squareIdBeingDragged - width,
    squareIdBeingDragged + 1,
    squareIdBeingDragged + width
]

let validMove = validMoves.includes(squareIdBeingReplaced)

if (squareIdBeingReplaced && validMove) {
    squareIdBeingReplaced = null
} else if (squareIdBeingReplaced && !validMove) {
    squares [squareIdBeingReplaced].style.backgroundColor = colorBeingReplaced
    squares [squareIdBeingDragged].style.backgroundColor = colorBeingDragged
} else squares [squareIdBeingDragged].style.backgroundColor = colorBeingDragged

}

Checking For a Match

In Candy Crush you can get matches of 3, 4, and 5. We create a function called checkRowForThree and will use that logic for matches of four and five.

function checkRowForThree() {
}

Using a for loop we will loop through the possible three-square match up to index 61. The last possible square we could loop over in order to not break the game is 61. This loop will check 61, 62, and 63 match three colors.

function checkRowForThree() {
    for(i = 0; i < 61; i++){

    }
}

Inside of the for loop code block we define a row of three in a variable which is written as so:

let rowOfThree = [i, i+1, i+2]

Each time we loop through this we want to grab the color of the first square and define it in a variable we titled decidedColor.

let decidedColor = squares[i].style.backgroundColor

And we will also define a blank space. A blank space is defined when the square background color is an empty string. We use a constant to declare the isBlank variable since we don’t want to update this later. We want this to always stay constant. Here is a link again to the post by Wes Bos - let VS const

const isBlank = squares[i].style.backgroundColor === ‘ ’

Still inside of the for loop we will define the logic using an if statement. We attach the every method to our rowOfThree array to check that every index in our array equals the color of our first square and also that it is not a blank square. If so we execute the code.

if (rowOfThree.every(index => squares[index].style.backgroundColor === decidedColor && !isBlank){

}

Inside this code block, for each match we want to set the background color to an empty string. We also made this match a score of plus three points.

Note: We had to make sure we added the score variable as a global variable at the top of our code. You can add it just underneath the const squares empty array.

document.addEventListener('DOMContentLoaded'), () => {
    const grid = document.querySelector('.grid')
    const width = 8
    const squares = []
    let score = 0

if (rowOfThree.every(index => squares[index].style.backgroundColor === decidedColor && !isBlank){
    score += 3
    rowOfThree.forEach(index => {
        squares[index].style.backgroundColor = ''
    })
}

We test the checkRowForThree code by invoking it. We see that it works but we would like it to execute constantly while playing and to do that we add a set interval function to the window.

The setInterval function takes four parameters a function to execute, code, delay, and any additional arguments. In this case we want to invoke the checkRowForThree function every 100 milliseconds.

One last thing to add to our checkRowForThree function is where a move is not valid. Since we did not tell the program that matches can not wrap the board to the next line and be considered a valid match of three.

We will create another const named notValid and make an array of all the IDs we don’t want the row to start at. Then we will use an if statement to say if an ID is one of the numbers in the notValid array that we continue on and not count those as possible options for a valid start to a row of three.

function checkRowForThree() {
    for(i = 0; i < 61; i++){
        let rowOfThree = [i, i+1, i+2]
        let decidedColor = squares[i].style.backgroundColor
        const isBlank = squares[i].style.backgroundColor === ‘ ’

        const notValid = [6, 7, 14, 15, 22, 23, 30, 31, 38, 39, 46, 47, 54, 55 ]

        if(notValid.includes(i)) continue

        if (rowOfThree.every(index => squares[index].style.backgroundColor === decidedColor && !isBlank){
    score += 3
    rowOfThree.forEach(index => {
        squares[index].style.backgroundColor = ''
        })
      }
    }
}

//This will only invoke the function once when we start the game.
checkRowForThree();

//Set Interval will repeatedly check for matches
window.setInterval(function(){
        checkRowForThree()
    }, 100)
)

Now that we have that set we will created another function but this time to check for a column of three. Since we are now looking for a column match, our loop will stop at 47 and indexes in our array will add the width and width*2.

Note that we changed all of the code to say checkColumn or columnOf so that it represents what this function is doing.

function checkColumnForThree() {
    for(i = 0; i < 47; i++){
        let columnOfThree = [i, i+width, i+width*2]
        let decidedColor = squares[i].style.backgroundColor
        const isBlank = squares[i].style.backgroundColor === ‘ ’
        if (columnOfThree.every(index => squares[index].style.backgroundColor === decidedColor && !isBlank){
    score += 3
    columnOfThree.forEach(index => {
        squares[index].style.backgroundColor = ''
        })
      }
    }
}

//This will only invoke the function once when we start the game.
checkColumnForThree();

//Set Interval will repeatedly check for matches
window.setInterval(function(){
        checkRowForThree()
        checkColumnForThree()
    }, 100)
)

Now that we have a check for row and column we can use these same functions for checking for valid matches of 4 and valid matches of 5.

In each function we will have to update each name to reflect what it is doing for example checkRowForFour. We also updated the following

for loop to stop at 60
added i+3 to the rowOfFour variable.
Updated the score to score += 4
Lastly the notValid const needs to be updated by checking the indexes one square earlier as shown below. Again this is only for the rows.

const notValid = [5, 6, 7, 13, 14, 15, 21, 22, 23, 29, 30, 31, 37, 38, 39, 45, 46, 47, 53, 54, 55 ]

In the setInterval function we will add the new function calls to the list as so. We added the checkRow/Column For Four

window.setInterval(function(){
        checkRowForFour()
        checkColumnForFour()
        checkRowForThree()
        checkColumnForThree()
    }, 100)

The final code for this section is below. In the video Ania covered how to do three and four and suggested to write match of 5 on our own since it uses the same principles. The next and last part of this series will be breaking down how to “Move Candies Down & Generate New Candies.”


function dragEnd() {
console.log(this.id, ‘dragend’)

let validMoves = [
    squareIdBeingDragged - 1,
    squareIdBeingDragged - width,
    squareIdBeingDragged + 1,
    squareIdBeingDragged + width
]

let validMove = validMoves.includes(squareIdBeingReplaced)

if (squareIdBeingReplaced && validMove) {
    squareIdBeingReplaced = null
} else if (squareIdBeingReplaced && !validMove) {
    squares [squareIdBeingReplaced].style.backgroundColor = colorBeingReplaced
    squares [squareIdBeingDragged].style.backgroundColor = colorBeingDragged
} else squares [squareIdBeingDragged].style.backgroundColor = colorBeingDragged

}

// Check row for a match of 3
function checkRowForThree() {
    for(i = 0; i < 61; i++){
        let rowOfThree = [i, i+1, i+2]
        let decidedColor = squares[i].style.backgroundColor
        const isBlank = squares[i].style.backgroundColor === ‘ ’

        const notValid = [6, 7, 14, 15, 22, 23, 30, 31, 38, 39, 46, 47, 54, 55 ]

        if(notValid.includes(i)) continue

        if (rowOfThree.every(index => squares[index].style.backgroundColor === decidedColor && !isBlank){
    score += 3
    rowOfThree.forEach(index => {
        squares[index].style.backgroundColor = ''
        })
      }
    }
}

// Check column for a match of 3
function checkColumnForThree() {
    for(i = 0; i < 47; i++){
        let columnOfThree = [i, i+width, i+width*2]
        let decidedColor = squares[i].style.backgroundColor
        const isBlank = squares[i].style.backgroundColor === ‘ ’
        if (columnOfThree.every(index => squares[index].style.backgroundColor === decidedColor && !isBlank){
    score += 3
    columnOfThree.forEach(index => {
        squares[index].style.backgroundColor = ''
        })
      }
    }
}


// Check row for a match of 4
function checkRowForFour() {
    for(i = 0; i < 60; i++){
        let rowOfFour = [i, i+1, i+2, i+3]
        let decidedColor = squares[i].style.backgroundColor
        const isBlank = squares[i].style.backgroundColor === ‘ ’

        const notValid = [5, 6, 7, 13, 14, 15, 21, 22, 23, 29, 30, 31, 37, 38, 39, 45, 46, 47, 53, 54, 55]

        if(notValid.includes(i)) continue

        if (rowOfFour.every(index => squares[index].style.backgroundColor === decidedColor && !isBlank){
    score += 4
    rowOfFour.forEach(index => {
        squares[index].style.backgroundColor = ''
        })
      }
    }
}

// Check column for a match of 4
function checkColumnForFour() {
    for(i = 0; i < 39; i++){
        let columnOfFour = [i, i+width, i+width*2, i+width*3]
        let decidedColor = squares[i].style.backgroundColor
        const isBlank = squares[i].style.backgroundColor === ‘ ’
        if (columnOfFour.every(index => squares[index].style.backgroundColor === decidedColor && !isBlank){
    score += 4
    columnOfFour.forEach(index => {
        squares[index].style.backgroundColor = ''
        })
      }
    }
}


window.setInterval(function(){
        checkRowForFour()
        checkColumnForFour()
        checkRowForThree()
        checkColumnForThree()
    }, 100)

MDN web docs

Topics Includes:

Each function and method above is linked to their respective MDN web doc pages. This concludes the third part in this series of Breaking Down Ania Kabow’s Candy Crush video.

Breaking Down Ania Kabow’s Candy Crush Tutorial Part 2- Swap Candies and Drag & Drop

C. Pure — Mon, 03 Aug 2020 18:39:04 +0000

How to Swap Candies & Drag and Drop Candies

This is the second post in the series

setAttribute Method

Continuing on with the createBoard function we start off by giving the square a setAttribute input. The two parameters we give in a setAttribute method is a name and value. In this case we are using the draggable attribute and setting it to true. You can set the value of draggable to ‘true’, ‘false’, or ‘auto’.

Note: Links and photos by default are automatically draggable.

square.setAttribute(‘draggable’, true);

Next we set another attribute to the square, by giving it a string of id. This is important to note that we are not using the id element but setting it as a string and as we loop over this we will get a number value. We give the id a value of ‘i’ of i so that when it cycles through the board, it will give each square a value from 0-63. Remember javascript is a zero based index so the zero counts as a number.

square.setAttribute(‘id’, i)

The final createBoard function should look like this:

function createBoard() {
    for (let i = 0; i < width*width; i++){
    const square = document.createElement(‘div’)
    square.setAttribute(‘draggable’, true)
    square.setAttribute(‘id’, i)
    let randomColor = Math.floor(Math.random() * candyColors.length)
    square.style.backgroundColor = candyColors[randomColor]
    grid.appendChild(square)
    square.push(square)
    }
}

Creating Events to Drag Candies

We start by creating a forEach() function on the squares array and then inside the forEach() function we add an addEventListener to the object with the parameters; (event, function). Each EventListener has a different event handle it is listening for; drag start, drag end, drag over, drag enter, drag leave, and drop. When you give a node a handler through the attribute, it can only have one. Since we have six events we want to happen, we use the addEventListener which lets us add any number of handlers.

square.forEach(square => square.addEventListener(‘dragstart’ , dragStart))
square.forEach(square => square.addEventListener(‘dragend’ , dragEnd))
square.forEach(square => square.addEventListener(‘dragover’ , dragOver))
square.forEach(square => square.addEventListener(‘dragenter’ , dragEnter))
square.forEach(square => square.addEventListener(‘dragleave’ , dragLeave))
square.forEach(square => square.addEventListener(‘drop’ , dragDrop))

Then we write the functions for each of those events once they are triggered.

function dragStart() {
    console.log(this.id, ‘dragstart’);
}

function dragOver() {
    console.log(this.id, ‘dragover’);
}

function dragEnter() {
    console.log(this.id, ‘dragenter’);
}

function dragLeave() {
    console.log(this.id, ‘dragleave’);
}

function dragEnd() {
    console.log(this.id, ‘dragend’);
}

function dragDrop() {
    console.log(this.id, ‘dragdrop’);
}

Create a variable called colorBeingDragged and place it above the EventListeners.

let colorBeingDragged

Then we add it to the function dragStart and set it equal to this.style.backgroundColor.

function dragStart() {
    colorBeingDragged = this.style.backgroundColor
    console.log(colorBeingDragged)
    console.log(this.id, ‘dragstart’);
}

Since we want to reuse colorsBeingDragged on different events we have stored it in a variable. When we add colorBeingDragged variable we can see which color is being dragged. You can check this by writing a console.log(colorBeingDragged) to the function code block.
Stop review here for the night….
We created another variable called colorBeingReplaced.

let colorBeingReplaced;

And we attached that variable to the dragDrop function and set it to this.style.backgroundColor.

function dragDrop() {
    console.log(this.id, ‘dragDrop’)
    colorBeingReplaced = this.style.backgroundColor
}

To replace them in the correct squares, this is where the IDs come into play. Here we used the parseInt() function (parse- meaning to analyze a string or text), which takes a string argument and returns an integer. Earlier we set the squares attribute and attached a number from 0 - 63 to it. We use the ‘this’ keyword because we want it to refer to the object it belongs to which is the square being dragged. First we create two variables:

let squareIdBeingDragged;
let squareIdBeingReplaced;

Note: Since the function is not written in strict mode, we are referring to the global variables.

function dragStart() {
    colorBeingDragged = this.style.backgroundColor
    squareIdBeingDragged = parseInt(this.id)
    console.log(colorBeingDragged)
    console.log(this.id, ‘dragstart’);
}

In the dragDrop function is where we assign the id and set its background color. The squaresBeingReplaced is equal to the assigned number of that id.

function dragDrop() {
    console.log(this.id, ‘dragDrop’)
    colorBeingReplaced = this.style.backgroundColor
    squareIdBeingReplaced = parseInt(this.id)
    squares[squareIdBeingDragged].style.backgroundColor = colorBeingReplaced
}

With the dragEnter and dragOver function we pass in e parameter which stands for event. This will allow us to prevent the default behavior.

An example of e.preventDefault() is when you create a registration form and the user has not completed the form. You would want to prevent the user from submitting the form and give an error message as to what is wrong.

In the tutorial she mentions you could add animations to the square while you are dragging it but in the case of the tutorial we do not.

function dragOver(e){
    e.preventDefault()
    console.log(this.id, ‘dragover’)
}

function dragEnter(e){
    e.preventDefault()
    console.log(this.id, ‘dragenter’)
}

After we enter in this code, the square being dragged (original square) is swapped with the a square it is replacing replaced. But the square we are dropping into stays the same color. To fix this we added

this.style.backgroundColor = colorBeingDragged

to the dragDrop function. This changes the color of the square into the color being dragged. Basically this will make sure that when you drag and drop a color it switches places with that color square.

function dragDrop() {
    console.log(this.id, ‘dragDrop’)
    colorBeingReplaced = this.style.backgroundColor
    squareIdBeingReplaced = parseInt(this.id)
    this.style.backgroundColor = colorBeingDragged
    squares[squareIdBeingDragged].style.backgroundColor = colorBeingReplaced
}

And this concludes the breakdown of How to Drag & Drop Candies. The next post in the series will focus on finding valid matches in the game.

MDN web docs

Functions Used:

Each function and method above is linked to their respective MDN web doc pages. This concludes the first part in this series of Breaking Down Ania Kabow’s Candy Crush video.

Breaking Down and Understanding Ania Kabow’s Build Your Own Candy Crush using Javascript Part 1 - Create the Game Board

C. Pure — Tue, 28 Jul 2020 05:34:30 +0000

For my second run of #100DaysofCode I wanted to learn vanilla javascript with a focusing on building games and I stumbled upon a great youtube channel by Ania Kubow #JavaScriptGames.

Here I am going to break down the methods and functions used for each step of Ania’s 30 minute video. She does an excellent job of explaining as she goes along so, but I wanted to dig a bit deeper to understand why we were using what we were using.

Being new to the JavaScript language, my goal is to start to form connections on how to use each method and function in order to build the games and apps I want. I will be breaking down the posts as follows:

Create Board and Randomly Create Candies
Swap Candies, Drag and Drop Candies
Check for Valid Matches
Move Candies Down, Generate New Candies, Adding A Scoreboard

In this first post of this series, I will break down each part of the code that we use to create the game board. We worked with three files: index.html, style.css, and app.js. The IDE that I used for this project was Visual Studio Code but Ania uses Atom in the video. Both are free and great to use and perfectly fine, Visual Studio has more extensions you can add on.

Methods Used:

querySelector
for loop iteration statement
createElement
appendChild
push

Functions Used:

Math.random()
Math.floor()

Let's jump in!

Creating a Grid in HTML and CSS

We start off pretty simply by creating a div tag in the index.html document and give it a class of “grid.”

Then moving on to the stylesheet, we want to create a square 8 x 8 grid. With each square being 70px high and 70px wide, we created a board size of 560px(8 * 70px).

Initially grids will appear stacked, so to fix that we use flex grid and flex wrap.

 .grid {
 height: 560px;
 width: 560px;
 display: flex;
 flex-wrap: wrap;
}

Next we create the squares for the “candies” on the board by making the height and width 70px by 70px.

 .grid div {
 height: 70px;
 width: 70px;
 }

Adding an EventListener

Switching over to the JS file, Ania starts off using a boiler plate set up.

 document.addEventListener(‘DOMContentLoaded’), () => {

 })

From here all the code is written inside the EventListener code block.

First Argument - ’DOMContentLoaded’

The ‘DOMContentLoaded’ event is the first argument and fires when the initial HTML page has loaded and DOM tree is built. We use the DOMContentLoaded versus the load event because the load event is used to detect a fully loaded page which includes images and stylesheets.

Second Argument - Anonymous Arrow Function

The event is then followed by an anonymous arrow function. We have to use the anonymous function as the second argument in the EventListener because we want it to wait until the event, in this case the HTML file and DOM tree, is loaded and triggers the function. We "wrap" the named functions inside an anonymous function because we want to make sure that the function is not invoked until the DOM content is loaded. If the interpreter was to see the parenthesis after a named function, it would fire right away. Ania mentions, "this is also a foolproof way to make sure events happen in order.”

NOTE: EventListeners are not supported with IE8 or earlier versions. In this case you would use .attachEvent for earlier versions.

Creating the Square Spaces for the Candies

Next we create a constant with the name of grid and use a querySelector method to grab the grid class from the HTML page. Then we add another constant with a width of 8.

 const grid = document.querySelector(‘.grid’);
 const width = 8;

We are using a constant in this case because we don’t want these to be reassigned later as compared to var or let where you can swap values. If you want to learn more Wes Bos has a great article on let vs const.

for Loop

Create a function called createBoard and inside the code block we added a for loop to create a 64 square board (8x8). Inside the for loop code block, we use the createElement method to create a div for the squares. Then we use the appendChild, append meaning simply to add, to add each 70px square to the board. This for loop will continue until 'i' hits 64 since 'i' is NOT less than 64.

function createBoard () {

for (let i = 0;  i < width*width;  i++) {

const square = document.createElement(‘div’);
grid.appendChild(square);
    }
}

Next we created another const called squares and make it an empty array so we can actual work and manipulate it.

const squares = []

In the for loop, we pass each square into the empty array we created called squares. We did this by using the array push method on squares which adds a new item to the array.

const grid = document.querySelector(‘.grid’)
const width = 8
const squares = []

function createBoard () {
for (let i = 0; i < width*width; i++) {

const square = document.createElement(‘div’);
grid.appendChild(square);
squares.push(square);
    }
}

Finally call (or invoke) the function. To make sure it works, inspect the page and see all 64, 70px-squares that will represent the candy pieces.

createBoard()
})

Creating the Candy Colors

To create the individual candy colors we create a constant array we called candyColors. In the case of building my Animal Crossing themed candy crush game, I change the color entries by writing the location of each image I created. You can see my code on my github for further reference.

const candyColors = [
‘red’,
‘yellow’,
‘orange’,
‘purple’,
‘green’,
‘blue’
]

To make the colors random we create a variable using let. The Math.random function is used to get a random color, and the Math.floor is used to get the nearest whole number. Math.random creates a number between 0 to 1. When we multiply that with the candyColors length, which is 5, we will get a whole number using Math.floor. Since javascript starts at zero we will get a number from 0 - 5. For example candyColors[2] will give us orange, candyColors[0] will give us red and so on.

const grid = document.querySelector(‘.grid’)
const width = 8
const squares = []

const candyColors = [
‘red’,
‘yellow’,
‘orange’,
‘purple’,
‘green’,
‘blue’
]

function createBoard () {
for (let i = 0; i < width*width; i++) {

const square = document.createElement(‘div’);
let randomColor = Math.floor(Math.random() * candyColors.length)
grid.appendChild(square);
squares.push(square);
    }
}

Lastly we passed the random color to the square with square.style.backgroundColor object and set it equal to candyColors[randomColor]; The style object will assign a square to a random color from the array of colors we stated above. Note that backgroundColor is camelcase as compared to the CSS which is styled, background-color.

The final script for this part should look like this

const grid = document.querySelector(‘.grid’)
const width = 8
const squares = []

const candyColors = [
‘red’,
‘yellow’,
‘orange’,
‘purple’,
‘green’,
‘blue’
]

function createBoard () {
for (let i = 0; i < width*width; i++) {

const square = document.createElement(‘div’);
let randomColor = Math.floor(Math.random() * candyColors.length);
square.style.backgroundColor = candyColors[randomColor];
grid.appendChild(square);
squares.push(square);
    }
}

And with this final step we have completed the board and generated randomized candies! This section is the first 8-9 minutes of the 30 minute video and it covers a lot. Hence why I wanted to dive deeper and break it down.

To recap in this exercise we learned:

Each function and method above is linked to their respective MDN web doc pages. This concludes the first part in this series of Breaking Down Ania Kabow’s Candy Crush video.

FIRST IMPRESSIONS - Maya - Hard Shapes Modeling

C. Pure — Thu, 02 Jul 2020 15:39:38 +0000

This past Sunday I started learning Maya! I was very excited to dive in and have successfully finished my first project; a ghostbusters trap!

The course I’m taking is called Maya for Beginners: Guide to 3D Animation in Maya | Udemy

User Interface

The interface is without a doubt the most intimidating one I have worked with. There are so many toolbars and options packed into this one program it is overwhelming to take it all in. One thing that I liked is that the instructor of this course, Lucas Ridley, explained most tools just have several ways of accessing them. The tools that we focused on mostly were the modeling components - obviously - but we also “hacked” some tools in the animation toolbar to help us with some of our modeling elements.

3 Click Mouse

I have not used a 3 click mouse, like an old school one, since maybe grade school so it did take some getting use to. At first I was very clumsy but after the first day it became a lot easier to navigate! I owe all of the credit to playing computer games and video games. It feels like a first person shooter quite honestly!

Modeling

I was never into sculpture as an artist medium but I REALLY enjoy 3D modeling! The course opens up with us learning how to create ‘hard surfaces.’ It is exactly what you think; very geometric shape builds with very little organic shapes that you would see in say creating a character build.

As mentioned before we built a ghostbusters trap. The hardest part of the build was definitely the cord for me. I really struggled with getting the vertices to create a smooth enough curve to not have random edges that would create kinks in the cord. I must have rewatched that part of the lesson at least ten times. It took me a whole day to get something I actually liked.

The problem solving aspect comes in when we started to manipulate and bevel these objects. Main issues we ran into were inconsistent shadowing and broken vertices. Again Ridley did explain some of the ways to attack and correct these issues but the main focus was just getting use to the program and learning to build using the poly modeling tools.

The Class

So far I really like the instruction of the class. There is a lot of problem solving and learning how to use the tools most efficiently and most importantly to our advantage. The videos are not entirely going to “hand hold” you through every step of the process. This allows you as the student to play around and solve ways to create the other parts of the model.

At first I was annoyed that when I started the next video that there was more features added to the model but I began to love the freedom of being able to create and practice what I had learned in previous lessons.

Completing this model took 15 lessons. In total, there are 136 so I am barely breaking the surface into this powerhouse. The course includes pretty much everything - modeling, rigging, animation, lighting, visual effects etc.

I have recently learned that there is a position called assistant technical director in animation. I was an assistant technical director in theater but it seems it’s a bit different for each field. In this position you are liaison between programmers and animators. As many of you know my goal is to merge my passions of code and animation and felt this is a great goal to strive towards. Since the language used is python, this will also be on my list of things to learn and most importantly enjoy!

Over the next few weeks, month, you will see my portfolio as well as my blog posts start to change into more specifics of animation and code. I hope you will find these posts helpful and enjoyable!

Below are wip screenshots of my build.

freecodecamp Portfolio Project - Katherine Goble Johnson Page

C. Pure — Mon, 10 Feb 2020 20:54:29 +0000

This post was originally published on my blog, Courtney Makes Things Move on February 2, 2020.

To review my skills in responsive web design I've created a profile using freecodecamp. freecodecamp is a nonprofit organization that offers six certificates with thousands of free tutorials on how to code and how to prep for an interview! If you have read my previous post on developing my self-taught curriculum you know for a while I was primarily using Treehouse. The decision to switch platforms was due to the fact that I felt my learning was developing into a linear progression of "next lesson." I would finish a lesson and move on, going with the motions trying to complete course after course but never really looking back to make sure I fully understood the concepts. This is when I felt it was time to switch it up and test myself. Just like with our own code, it is imperative to periodically test ourselves and freecodecamp not only provided me with that review but I learned a few new tips and tricks!

OBJECTIVE

As mentioned above I am currently working on the Responsive Web Design Certificate. The first project is to create a tribute page. Since I've been obsessed with Hidden Figures (I read the book and watched the movie recently) I decided to make a page on mathematician Katherine Goble Johnson. Perfect timing as we begin Black History Month! Katherine Johnson is the first African American woman to work as a NASA scientist.

The objective for the project was to use plain HTML and CSS to create a simple, responsive web page. freecodecamp prompts you with 7 requirements ranging from adding element tags to making corresponding id attributes to those elements.

RESULTS

Below is my sandbox page for this project.

WHAT I LEARNED

I had a great review on the basics of how to construct a simple webpage. When I was first developing my personal portfolio website I used floats and then switched over to the wonderful world of flexbox, which is what I used for this freecodecamp project. This course gave me a great review on both and I also learned about CSS grid.

For this project I focused on accessibility, especially on how to properly structure links for screen readers. I admit, I am guilty of making links that just read "click here." People who use screen readers and tab through will essentially hear a series of "click here, and click there!" with little to no context of where the link is pointing. This was a simple correction but a huge eye opener into how I can make experiences better for all users.

After looking at my own personal website I have some links to correct. I have since gone back and reviewed a client's website of all the links and have started thorough revisions to improve readability.

As far as tools, I found this awesome website called BrandColors, that have hex color codes for official brands. In the spirit of NASA, I was able to quickly grab the hex values from this website and use it to design the webpage. Definitely something I will be using in the future.

My 10 Favorite CodeNewbie Podcast Episodes

C. Pure — Mon, 30 Dec 2019 19:48:43 +0000

With 10 seasons worth of content, I decided to gather my 10 favorite CodeNewbie podcast episodes that have helped me along in my journey. It was not easy to narrow it down but these episodes I think cover the most important aspects of what you need to know when you're transitioning into code. For 2019, I decided to really focus on transitioning from my administrative role as an assistant to a more creative role in technology. If you read my previous post on developing a self-taught cirriculum you will know that I love to use podcasts as my 'college lecture courses.'

Topics include accessibility, web animation, UI & design, burnout, freelancing and much more. If you are a Spotify user I also have a playlist there as well!

S1:EP1 – Intro to Accessibility (Stephanie Slattery)