changed title

README.md

@@ -1,144 +1,38 @@
-# ![GA Logo](https://ga-dash.s3.amazonaws.com/production/assets/logo-9f88ae6c9c3871690e33280fcf557f33.png) Project #1: The Game
+# **Tic Tac Toe**</br>
 
-## Overview:
+- Screenshot of the game
+![alt text](Screen-Shot.png)
 
-Let's start out with something fun - **a game!**
 
-You have two options:
+# Try it out.. [click me!](https://anfaljay.github.io/Project-1-Prompt/index1) </br>
 
-**Option A:  make Tic Tac Toe (XO)**
 
-**Option B:  make any game you want!**
+## - What features did you include?</br>
+JavaScript.</br>
+HTML.</br>
+CSS.</br>
+JQuery.</br>
 
 
-**You will be working individually for this project**, but we'll be guiding you along the process and helping as you go. Show us what you've got!
+## - What was the most difficult part of the project?</br>
+That I had fever the entire week...
 
----
+## - What was your favourite part to work on?</br> 
+Trying out different styles with CSS.
 
-## What You've Learned
+## - What would you like to add next?</br>  
+Pop-up's.</br>
+Audio.</br>
+Turns.</br>
+Scores.</br>
+AI.</br>
 
-By the time you submit this project, you will have covered new ground in, and reviewed, many of the big themes of the course so far:
+## - Unsolved problems </br>
+Silver background of boxes won't stop when game finishes.
 
-- **Command Line**: Practice interacting with the computer and navigating the filesystem from the command line.
-- **Source Control**: Manage and interact with a git repository to store changes to code.
-- **Programming Fundamentals**: Work with objects, constructors, events, while learning how to strategically solve problems and resolve errors.
-- **Web Fundamentals**: Learn how communication happens over the internet, and how to structure, style, and animate documents within a browser. Also learn how to respond to actions your users take and the data they input into the browser.
-- **Browser Applications**: Dive into CSS, and figure out how to use libraries and frameworks to get lots of style and functionality for free.
-- **Deployment**: Host a static web site in a managed hosting environment.
-- **Products and Teams**: Document your code and your code repository so others understand what you've built.
 
----
-
-## Big Goals
-
-- **Build a web application from scratch**, without a starter codebase
-- Use your programming skills to **work out the game logic for a simple game like Tic Tac Toe**
-- **Separate HTML, CSS, and JavaScript files** in your application
-- Build an application **to a specification that someone else gives you**
-- **Build a dynamic game that allows two players to compete**
-- **Craft a `README.md` file that explains your app** to the world
-
----
-
-## Technical Requirements
-
-## Option A:  Tic Tac Toe:
-
-Your Tic Tac Toe app must:
-- **Render a game board in the browser**
-- **Switch turns** between X and O (or whichever markers you select)
-- **Visually display which side won** if a player gets three in a row, or show a draw if neither player wins
-- **Include separate HTML / CSS / JavaScript files**
-- Stick with **KISS (Keep It Simple Stupid)** and **DRY (Don't Repeat Yourself)** principles
-- Use **JavaScript and jQuery** for **DOM manipulation**
-- **Deploy your game online**, where the rest of the world can access it
-  - We will be walking you through this process!
-- Use **semantic markup** for HTML and CSS (adhere to best practices)
-- Have well-formatted, and well-commented code (e.g. Use [Prettier](https://prettier.io/) and follow these [HTML & CSS Guidelines](https://google.github.io/styleguide/htmlcssguide.html))
-- Some unique features that distinguish your game from the "normal" solution listed above.  Here are some ideas:
-#### Potential Extra Tic Tac Toe Features
-
-- Keep track of **multiple game rounds** with a win counter
-- Allow players to **customize their tokens** (X, O, name, picture, etc)
-- **Get inventive with your styling**, e.g. use hover effects or animations
-- **Use LocalStorage** to persist data locally to allow games to continue after page refresh or loss of internet connectivity
-- **Support custom board sizes**: default is 3x3 but you could allow users to choose a larger board
-- **Support networked multiplayer**: [Firebase](https://www.firebase.com/) has a nice quickstart guide
-- Involve **Audio** in your game
-- **TRICKIEST**: Create an AI opponent: teach JavaScript to play an unbeatable game against you
-
-
-## Option B:  Any game you want!
-If you are feeling creative and want to try something new, then go for it!  In order to go this route you must run your idea by Usman or Michael first.
-- your proposal must include: a summary of your idea, a wire frame ([this](https://wireframe.cc/) is a good site to make wireframnes), what you think the biggest challenges will be.
-- Proposals should be created as "issues" in this repository.
-- Proposals are flexible! You are welcome to update and adjust these as the project continues.
-
-
-Need some ideas?  Keep reading!
-
-### Other Game Ideas
-
-### Beginner
-
-- Simon
-- War - Two Player
-- Self-scoring Trivia
-- Memory
-
-### Medium
-
-- Text Adventure
-- Connect 4 - Two Player
-- Sorry! - Multiple Players
-- Checkers - Two Players
-- Yahtzee - Two Players
-
-### Advanced
-
-- Battleship - Two Player
-- Black Jack - with Computer AI
-- Missile Command - Level Progression
-
----
-
-## Necessary Deliverables
-* Projects are due Wednesday, 23/1 at midnight!  Submissions should be made as a pull request to THIS REPO. * 
-
-- A **working game, built by you**, hosted somewhere on the internet
-- A **landing page** with the name of your game, instructions and a start button
-- A **link to your hosted working game** in the URL section of your Github repository
-- A **git repository hosted on Github**, with a link to your hosted game, and frequent commits dating back to the _very beginning of the project_
-- **A `README.md` file** with explanations of the technologies used, the approach taken, installation instructions, unsolved problems, any other useful information etc.
-- A **5 minute presentation** in which you answer the following questions:
-  - What is the game about?
-  - Is there any information you think might help us understand what you built?
-  - What features did you include?
-    - Make sure to explain anything "new" (things that we didn't cover in class)
-  - What was the most difficult part of the project?
-  - What was your favourite part to work on?
-  - What would you like to add next?
-- A **2 minute demo of your game**:
-  - Show us the functionality!
-
----
-
-## Suggested Ways to Get Started
-
-- **Break the project down into different components** (data, presentation, views, style, DOM manipulation) and brainstorm each component individually. Use whiteboards!
-- **Use your Developer Tools** (`console.log`, inspector, `alert` statements, etc) to debug and solve problems
-  - Some great tutorials for the Developer Tools can be found [here](https://developers.google.com/web/tools/chrome-devtools/)
-- Work through the lessons in class, **ask questions and come to office hours** when you need to. Think about adding relevant code to your Tic Tac Toe game each day, instead of, you know... _procrastinating_.
-- **Commit early, commit often.** Don’t be afraid to break something because you can always go back in time to a previous version.
-- **Check out Tutorial and Documentation resources** at home to better understand what you’ll be getting into.
-- **Don’t be afraid to write code that you know you will have to remove later.** Create temporary elements (buttons, links, etc) that trigger events if real data is not available. For example, if you’re trying to figure out how to change some text when the game is over but you haven’t solved the win/lose game logic, you can create a button to simulate that until then.
-
----
-
-## Useful Resources
-
-- **[MDN JavaScript Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript)** _(a great reference for all things Vanilla JavaScript)_
-- **[DevDocs](https://devdocs.io/)**
-- **[jQuery Docs](http://api.jquery.com)**
-- **[GitHub Pages](https://pages.github.com)** _(for hosting your game)_
-- **[GitHub Markdown Tutorial](https://guides.github.com/features/mastering-markdown/)** _(for working with Markdown)_
+## - Acknowledgements/Thanks
+A huge appreciation and great thanks to such supportive instructors!
+ [@Micheal](https://github.com/micfin)
+ [@Usman](https://github.com/usmanbashir)
+ [@moath](https://github.com/mfalthaw)

index1.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Instructions</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
+    <script src="main.js"></script>
+</head>
+<body>
+    <h1 class="topTitle">Tic Tac Toe!</h1>
+
+
+<a href="index2.html">
+<button >
+Start Playing!
+</button>
+</a>
+
+
+
+  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
+  <script src="main.js"></script>
+</body>
+<footer class="footer"> Anfal Aljaferi </footer>
+</html>

index2.html

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Tic Tac Toe!</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
+
+
+</head>
+<body>
+
+<div class="top"></div>
+<h1 class="topTitle">Tic Tac Toe!</h1>
+
+
+<table align = "center">
+    <tr>
+        <td class='cell'  id='0'></td>
+        <td class='cell'  id='1'></td>
+        <td class='cell'  id='2'></td>
+    </tr>
+
+    <tr>
+        <td class='cell'  id='3'></td>
+        <td class='cell'  id='4'></td>
+        <td class='cell'  id='5'></td>
+    </tr>
+
+    <tr>
+        <td class='cell'  id='6'></td>
+        <td class='cell'  id='7'></td>
+        <td class='cell'  id='8'></td>
+    </tr>
+
+</table>
+
+<div class = "bottom">
+    <p id='message'></p>
+    <button>Reset Game</button>
+</div>
+
+
+
+  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
+  <script src="main.js"></script>
+</body>
+</html>

main.js

@@ -0,0 +1,116 @@
+var player1 = "X";
+var gameOver = false;
+
+function cellClicked() {
+    if (!gameOver) {
+        // $(event.target).css("background-color", "silver");
+        // $(event.target).off("mouseenter");
+        // $(event.target).off("mouseleave"); 
+
+        if (player1 === "X") {
+            player1 = "O";
+            $(event.target).text("X");
+        } else {
+            player1 = "X";
+            $(event.target).text("O");
+        }
+        winner()
+    }
+}
+$("td").on("click", cellClicked);
+
+
+function silver (event) {
+    $(event.target).css("background-color", "silver");
+}
+function white (event) {
+    $(event.target).css("background-color", "white");
+}
+function trans (event) {
+   // $(event.target).css("background-color", "silver");
+    $(event.target).off("mouseenter");
+    $(event.target).off("mouseleave"); 
+    $(event.target).off("click");
+
+}
+
+$(".cell").on("mouseenter", silver);
+$(".cell").on("mouseleave", white);
+$(".cell").on("click", trans);
+
+
+function winner() {
+
+    var cell0 = $('#0').text()
+    var cell1 = $('#1').text()
+    var cell2 = $('#2').text()
+    var cell3 = $('#3').text()
+    var cell4 = $('#4').text()
+    var cell5 = $('#5').text()
+    var cell6 = $('#6').text()
+    var cell7 = $('#7').text()
+    var cell8 = $('#8').text()
+
+
+    if (cell0 === cell1 && cell0 === cell2 && cell0 !== '') {
+        $('#message').text('Winner is ' + cell0);
+        gameOver = true;
+        // trans();
+
+
+    } else if (cell3 === cell4 && cell3 === cell5 && cell3 !== '') {
+        $('#message').text('Winner is ' + cell3);
+        gameOver = true;
+        // trans();
+
+
+    } else if (cell6 === cell7 && cell6 === cell8 && cell6 !== '') {
+        $('#message').text('Winner is ' + cell6);
+        gameOver = true;
+        // trans();
+
+
+    } else if (cell0 === cell3 && cell0 === cell6 && cell0 !== '') {
+        $('#message').text('Winner is ' + cell0);
+        gameOver = true;
+        // trans();
+
+
+    } else if (cell1 === cell4 && cell1 === cell7 && cell1 !== '') {
+        $('#message').text('Winner is ' + cell1);
+        gameOver = true;
+        // trans();
+
+
+    } else if (cell2 === cell5 && cell2 === cell8 && cell2 !== '') {
+        $('#message').text('Winner is ' + cell2);
+        gameOver = true;
+        // trans();
+
+    } else if (cell0 === cell4 && cell0 === cell8 && cell0 !== '') {
+        $('#message').text('Winner is ' + cell0);
+        gameOver = true;
+        // trans();
+
+    } else if (cell2 === cell4 && cell2 === cell6 && cell2 !== '') {
+        $('#message').text('Winner is ' + cell2);
+        gameOver = true;
+        // trans();
+    } else if (
+        cell0 !== "" &&
+        cell1 !== "" &&
+        cell2 !== "" &&
+        cell3 !== "" &&
+        cell4 !== "" &&
+        cell5 !== "" &&
+        cell6 !== "" &&
+        cell7 !== "" &&
+        cell8 !== "") {
+        $('#message').text("It's a tie");
+        gameOver = true;
+    //    trans();
+    }
+}
+$('button').click(function () {
+    location.reload();
+});