From 9431937c5c507b881855c1b269a612253d0454e2 Mon Sep 17 00:00:00 2001 From: nemo0 Date: Sat, 1 Oct 2022 11:29:44 +0530 Subject: [PATCH] Feature: Added Tic Tac Toe game --- Projects/1-Beginner/Tic-Tac-Toe.md | 43 ++++++++++++++++++++++++++++++ README.md | 5 ++-- 2 files changed, 46 insertions(+), 2 deletions(-) create mode 100644 Projects/1-Beginner/Tic-Tac-Toe.md diff --git a/Projects/1-Beginner/Tic-Tac-Toe.md b/Projects/1-Beginner/Tic-Tac-Toe.md new file mode 100644 index 00000000..377ab460 --- /dev/null +++ b/Projects/1-Beginner/Tic-Tac-Toe.md @@ -0,0 +1,43 @@ +# Tic Tac Toe + +**Tier:** 1-Beginner + +We all have played Tic Tac Toe at some point in our life. If you search on Google with `tic tac toe`, Google will open the game for you. It is typically played with a 3x3 grid with O and X. Any player who succeeds in placing three of their marks in a horizontal, vertical, or diagonal row wins the game. + +The primary purpose of this project is, + +- To make the builder understand how `forEach` loops can be used in real life to style elements. +- To help the builder get familiar with ternary operators and template literals + +The possible combinations of winning are shown below. + +![Tic Tac Toe Winning Combinations 1](https://lh3.googleusercontent.com/-XQv1jxz8JZNe93ae_vuk3B2DPP-YkyL2lCoPSbCekthMChMcAYxyr7A0HE1_45gt5z0V-EmvMHHww_bCMEc4KV9LQprcX2H1xflqcYdG5t06vzithH2BIXYIJbVkWxxmBmvb6VE) +_Tic Tac Toe Winning Combinations 1_ + +![Tic Tac Toe Winning Combinations 2](https://lh3.googleusercontent.com/NI6f-Zp5h-YM4BWk4jkjQ7g62OubUcmcSFitsZHF9diC2Cuf72SHbwdrdyNFNI6DD_ItlFL78IzCaHTm4HLnGjUZ7DxpT-6q9wY2gMSj0a01dSA6n_8UTfSkx9Lsigr5YJrCOlSZ) +_Tic Tac Toe Winning Combinations 2_ + +![Tic Tac Toe Winning Combinations 2](https://lh3.googleusercontent.com/QNgko_hH9aKpLgPQVy58eeiBemA8BnrRLhBSd-HKVKzx0Qcpql5VnnygVQh8MSPIe4QKDZFfrvRfCp8WDZ4NsrINGxM0KZ8xneVBMqAegjf1KyYxvVYMIKB0pleYYGjxK4mMyMR8) +_Tic Tac Toe Winning Combinations 3_ + +## User Stories + +- [ ] User can see a 3x3 grid of squares +- [ ] User can click on a square to mark it as X +- [ ] User can click on a square to mark it as O +- [ ] User can see a message telling them if they won, lost or tied +- [ ] User can see a button to restart the game + +## Bonus features + +- [ ] User can play the game with another person + +## Useful links and resources + +- [Tic Tac Toe On Google](https://www.google.com/search?q=tic+tac+toe) +- [Tic Tac Toe Wiki](https://en.wikipedia.org/wiki/Tic-tac-toe) + +## Example projects + +- [Tic Tac Toe CodePen](https://codepen.io/nemo011/pen/vYmmKjg) +- [Tic Tac Toe Tutorial Article](https://blog.nemotivity.dev/build-a-tic-tac-toe-game-with-javascript-ckr6gvg6d01byths1dwea3of9) diff --git a/README.md b/README.md index f6557617..9d283d21 100644 --- a/README.md +++ b/README.md @@ -74,6 +74,7 @@ required to complete them. | [Slider Design](./Projects/1-Beginner/Slider-Design.md) | Display images using a slider control | 1-Beginner | | [Stopwatch App](./Projects/1-Beginner/Stopwatch-App.md) | Count time spent on activities | 1-Beginner | | [TrueOrFalse](./Projects/1-Beginner/True-or-False-App.md) | Identify the result of a conditional comparison | 1-Beginner | +| [Tic Tac Toe](./Projects/1-Beginner/Tic-Tac-Toe.md) | Play a game of Tic Tac Toe | 1-Beginner | | [Vigenere Cipher](./Projects/1-Beginner/Vigenere-Cipher.md) | Encrypt text using the Vigenere Cypher | 1-Beginner | | [Wind Chill](./Projects/1-Beginner/Windchill-App.md) | Calculate the windchill factor from an actual temperature | 1-Beginner | | [Word Frequency](./Projects/1-Beginner/Word-Frequency-App.md) | Calculate word frequency in a block of text | 1-Beginner | @@ -85,11 +86,11 @@ required to complete them. | --------------------------------------------------------------------------------- | -------------------------------------------------- | -------------- | | [Bit Masks](./Projects/2-Intermediate/Bit-Masks-App.md) | Using Bit Masks for Conditions | 2-Intermediate | | [Book Finder App](./Projects/2-Intermediate/Book-Finder-App.md) | Search for books by multiple criteria | 2-Intermediate | -| [Calculator CLI](./Projects/2-Intermediate/Calculator-CLI.md) | Create a basic calculator cli. | 2-Intermediate | +| [Calculator CLI](./Projects/2-Intermediate/Calculator-CLI.md) | Create a basic calculator cli. | 2-Intermediate | | [Card Memory Game](./Projects/2-Intermediate/Card-Memory-Game.md) | Memorize and match hidden images | 2-Intermediate | | [Charity Finder App](./Projects/2-Intermediate/Charity-Finder-App.md) | Find a Global Charity to donate to | 2-Intermediate | | [Chrome Theme Extension](./Projects/2-Intermediate/Chrome-Theme-Extension.md) | Build your own chrome theme extention. | 2-Intermediate | -| [Currency Converter](./Projects/2-Intermediate/Currency-Converter.md) | Convert one currency to another. | 2-Intermediate | +| [Currency Converter](./Projects/2-Intermediate/Currency-Converter.md) | Convert one currency to another. | 2-Intermediate | | [Drawing App](./Projects/2-Intermediate/Drawing-App.md) | Create digital artwork on the web | 2-Intermediate | | [Emoji Translator App](./Projects/2-Intermediate/Emoji-Translator-App.md) | Translate sentences into Emoji | 2-Intermediate | | [Flashcards App](./Projects/2-Intermediate/FlashCards-App.md) | Review and test your knowledge through Flash Cards | 2-Intermediate |