WDI Fundamentals Unit 7
Now that we've covered variables and data types, we can write code that simulates the cards in our memory game.
You have already written the required HTML and CSS in previous units; you'll want to use that code moving forward for each unit's assignment.
jsfolder, create a file called
You'll also want to link your
index.html file to the
Place this in your
index.html file, right before your closing
... <!-- Copy the below line --> <script src="js/main.js"></script> <!-- Place it right before the closing body tag --> </body> </html>
Where To Add Script Tags: Unlike using a
linktag for linking CSS files, you should add your
scripttags right before the closing HTML
</body>). This ensures that all of the elements and styles on your page have been loaded and are available to the browser before the
scripttags are read.
Add the line of code below to the
main.js file in Sublime Text:
console.log("Up and running!");
index.html, right-click anywhere in the file, and select "Open in Browser." You'll want to use Chrome to test things out.
View > Developer > Developer Tools.
We'll be using the console to check our results as we work. The steps will be the same each time you need to open the console. If you'd like to make Chrome your default browser, you can follow instructions here.
Now you'll be working to create the cards that will make up your memory game. Each card will have a value of
"king", and there should be a total of four cards. You'll also push your code up to your repository.
Navigate to the
main.js file in Sublime.
Create four variables that simulate the cards in your game.
"queen", and the other two should have a value of
Here's an example of one card:
var cardOne = "queen";
Now we'll use
console.log() to display the value of two cards, which will represent the cards that the user has flipped over.
console.log()to display the values of two cards (you can pick which two cards you'd like to display).
Here's what this should look like:
console.log("User flipped " + cardOne);
+) to add the human-readable text
"User flipped "with the value of a variable.
After saving any changes to
main.js, open your
index.html file in Sublime Text, and then open the file in Chrome. After the web page loads, you can go to
Developer Tools and click on the console panel. You should see two messages displayed in the console!
main.js, which is connected to your
index.htmlfile, you can open the
index.htmlin the browser and run this code directly in the console to see the results of your executed JS.
In order to back up your code and track your work, you'll want to commit the changes you've made to the project's repository. You'll have to open up the terminal and
cd into the correct folder that holds the cloned repository for this assignment. Once you're there, complete these three steps:
Stage your code.
git add -A
Create a version of your staged code.
git commit -m 'created game logic'
Push your code to the GitHub repository.
git push origin master
Think you've got it? Get a start on the next unit.