This repository has been archived by the owner on Jun 27, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 934
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
0 parents
commit 104f507
Showing
8 changed files
with
263 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| # Set the default behavior, in case people don't have core.autocrlf set. | ||
| # https://help.github.com/articles/dealing-with-line-endings/ | ||
| * text=auto |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| .DS_Store | ||
| .htmlhintrc | ||
| .stylelintrc | ||
| .eslintrc.json |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| # How to contribute | ||
|
|
||
| The files in this repository are used as the starting point for all students. Because we want students to write the majority of the code themselves, pull requests (most likely) will _not_ be merged into the project. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| # Memory Game Project | ||
|
|
||
| ## Table of Contents | ||
|
|
||
| * [Instructions](#instructions) | ||
| * [Contributing](#contributing) | ||
|
|
||
| ## Instructions | ||
|
|
||
| The starter project has some HTML and CSS styling to display a static version of the Memory Game project. You'll need to convert this project from a static project to an interactive one. This will require modifying the HTML and CSS files, but primarily the JavaScript file. | ||
|
|
||
| To get started, open `js/app.js` and start building out the app's functionality | ||
|
|
||
| For specific, detailed instructions, look at the project instructions in the [Udacity Classroom](https://classroom.udacity.com/me). | ||
|
|
||
| ## Contributing | ||
|
|
||
| This repository is the starter code for _all_ Udacity students. Therefore, we most likely will not accept pull requests. | ||
|
|
||
| For details, check out [CONTRIBUTING.md](CONTRIBUTING.md). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,109 @@ | ||
| html { | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| *, | ||
| *::before, | ||
| *::after { | ||
| box-sizing: inherit; | ||
| } | ||
|
|
||
| html, | ||
| body { | ||
| width: 100%; | ||
| height: 100%; | ||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
|
|
||
| body { | ||
| background: #ffffff url('../img/geometry2.png'); /* Background pattern from Subtle Patterns */ | ||
| font-family: 'Coda', cursive; | ||
| } | ||
|
|
||
| .container { | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| flex-direction: column; | ||
| } | ||
|
|
||
| h1 { | ||
| font-family: 'Open Sans', sans-serif; | ||
| font-weight: 300; | ||
| } | ||
|
|
||
| /* | ||
| * Styles for the deck of cards | ||
| */ | ||
|
|
||
| .deck { | ||
| width: 660px; | ||
| min-height: 680px; | ||
| background: linear-gradient(160deg, #02ccba 0%, #aa7ecd 100%); | ||
| padding: 32px; | ||
| border-radius: 10px; | ||
| box-shadow: 12px 15px 20px 0 rgba(46, 61, 73, 0.5); | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| margin: 0 0 3em; | ||
| } | ||
|
|
||
| .deck .card { | ||
| height: 125px; | ||
| width: 125px; | ||
| background: #2e3d49; | ||
| font-size: 0; | ||
| color: #ffffff; | ||
| border-radius: 8px; | ||
| cursor: pointer; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| box-shadow: 5px 2px 20px 0 rgba(46, 61, 73, 0.5); | ||
| } | ||
|
|
||
| .deck .card.open { | ||
| transform: rotateY(0); | ||
| background: #02b3e4; | ||
| cursor: default; | ||
| } | ||
|
|
||
| .deck .card.show { | ||
| font-size: 33px; | ||
| } | ||
|
|
||
| .deck .card.match { | ||
| cursor: default; | ||
| background: #02ccba; | ||
| font-size: 33px; | ||
| } | ||
|
|
||
| /* | ||
| * Styles for the Score Panel | ||
| */ | ||
|
|
||
| .score-panel { | ||
| text-align: left; | ||
| width: 345px; | ||
| margin-bottom: 10px; | ||
| } | ||
|
|
||
| .score-panel .stars { | ||
| margin: 0; | ||
| padding: 0; | ||
| display: inline-block; | ||
| margin: 0 5px 0 0; | ||
| } | ||
|
|
||
| .score-panel .stars li { | ||
| list-style: none; | ||
| display: inline-block; | ||
| } | ||
|
|
||
| .score-panel .restart { | ||
| float: right; | ||
| cursor: pointer; | ||
| } |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,86 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>Matching Game</title> | ||
| <meta name="description" content=""> | ||
| <link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css"> | ||
| <link rel="stylesheet prefetch" href="https://fonts.googleapis.com/css?family=Coda"> | ||
| <link rel="stylesheet" href="css/app.css"> | ||
| </head> | ||
| <body> | ||
|
|
||
| <div class="container"> | ||
| <header> | ||
| <h1>Matching Game</h1> | ||
| </header> | ||
|
|
||
| <section class="score-panel"> | ||
| <ul class="stars"> | ||
| <li><i class="fa fa-star"></i></li> | ||
| <li><i class="fa fa-star"></i></li> | ||
| <li><i class="fa fa-star"></i></li> | ||
| </ul> | ||
|
|
||
| <span class="moves">3</span> Moves | ||
|
|
||
| <div class="restart"> | ||
| <i class="fa fa-repeat"></i> | ||
| </div> | ||
| </section> | ||
|
|
||
| <ul class="deck"> | ||
| <li class="card"> | ||
| <i class="fa fa-diamond"></i> | ||
| </li> | ||
| <li class="card"> | ||
| <i class="fa fa-paper-plane-o"></i> | ||
| </li> | ||
| <li class="card match"> | ||
| <i class="fa fa-anchor"></i> | ||
| </li> | ||
| <li class="card"> | ||
| <i class="fa fa-bolt"></i> | ||
| </li> | ||
| <li class="card"> | ||
| <i class="fa fa-cube"></i> | ||
| </li> | ||
| <li class="card match"> | ||
| <i class="fa fa-anchor"></i> | ||
| </li> | ||
| <li class="card"> | ||
| <i class="fa fa-leaf"></i> | ||
| </li> | ||
| <li class="card"> | ||
| <i class="fa fa-bicycle"></i> | ||
| </li> | ||
| <li class="card"> | ||
| <i class="fa fa-diamond"></i> | ||
| </li> | ||
| <li class="card"> | ||
| <i class="fa fa-bomb"></i> | ||
| </li> | ||
| <li class="card"> | ||
| <i class="fa fa-leaf"></i> | ||
| </li> | ||
| <li class="card"> | ||
| <i class="fa fa-bomb"></i> | ||
| </li> | ||
| <li class="card open show"> | ||
| <i class="fa fa-bolt"></i> | ||
| </li> | ||
| <li class="card"> | ||
| <i class="fa fa-bicycle"></i> | ||
| </li> | ||
| <li class="card"> | ||
| <i class="fa fa-paper-plane-o"></i> | ||
| </li> | ||
| <li class="card"> | ||
| <i class="fa fa-cube"></i> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
|
|
||
| <script src="js/app.js"></script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| /* | ||
| * Create a list that holds all of your cards | ||
| */ | ||
|
|
||
|
|
||
| /* | ||
| * Display the cards on the page | ||
| * - shuffle the list of cards using the provided "shuffle" method below | ||
| * - loop through each card and create its HTML | ||
| * - add each card's HTML to the page | ||
| */ | ||
|
|
||
| // Shuffle function from http://stackoverflow.com/a/2450976 | ||
| function shuffle(array) { | ||
| var currentIndex = array.length, temporaryValue, randomIndex; | ||
|
|
||
| while (currentIndex !== 0) { | ||
| randomIndex = Math.floor(Math.random() * currentIndex); | ||
| currentIndex -= 1; | ||
| temporaryValue = array[currentIndex]; | ||
| array[currentIndex] = array[randomIndex]; | ||
| array[randomIndex] = temporaryValue; | ||
| } | ||
|
|
||
| return array; | ||
| } | ||
|
|
||
|
|
||
| /* | ||
| * set up the event listener for a card. If a card is clicked: | ||
| * - display the card's symbol (put this functionality in another function that you call from this one) | ||
| * - add the card to a *list* of "open" cards (put this functionality in another function that you call from this one) | ||
| * - if the list already has another card, check to see if the two cards match | ||
| * + if the cards do match, lock the cards in the open position (put this functionality in another function that you call from this one) | ||
| * + if the cards do not match, remove the cards from the list and hide the card's symbol (put this functionality in another function that you call from this one) | ||
| * + increment the move counter and display it on the page (put this functionality in another function that you call from this one) | ||
| * + if all cards have matched, display a message with the final score (put this functionality in another function that you call from this one) | ||
| */ |