Giter VIP home page Giter VIP logo

Tic Tac Toe

This tic tac toe game project focuses on the following topics which were covered in Unit 1: Web fundamentals topics such as

  • Unix, Git, Javascript
  • HTML, CSS, jQuery, Ajax,
  • Authentication, Sass, Bootstrap

    Wireframe

    Screen Shot 2021-10-08 at 10 37 31 AM

    User Stories Covered

    • As a user, I want to be able to Signup, sign in and sign out
    • As a user, I want to be able to start a new game
    • As a user, I want to be able to play the game with two players
    • As a user, I want to know if player 1 or player 2 won
    • As a user, I want to the users to play a game again

    How to use this repository

    Please fork this repo and run the following commands to get started

    • npm install
    • grunt serve

    Deployed Website

    Tic Tac Toe by Ian Matos

    Deployed Application

    Screen Shot 2021-10-20 at 8 24 53 PM Screen Shot 2021-10-20 at 8 26 58 PM Screen Shot 2021-10-20 at 8 27 10 PM

    Project Requirements Met

    • Hosted and deployed on GitHub Pages, not Github Enterprise.
    • Sharing your work through a git repository hosted on Github.
    • Making frequent, cohesive commits dating back to the first day of the project week.

    Application Requirements

    • User must be able to sign up
    • User must be able to sign in
    • Signed in user must be able to sign out
    • Signed in user user must be able to start a tic tac toe game
    • When playing game, user must start as X and then rotate between X and O
    • When playing game, user must only select available spaces on the board
    • When playing game, user must be notified of win or tie
    • Once a game is over, user must not be able to add to that board
    • Once a game is over, user must be able to play again
    • Sign up POST /sign-up
    • Sign in POST /sign-in
    • Sign out DELETE /sign-out
    • New game POST /games
    • Display a message to the user after sign in, sign up, and sign out success or failure.
    • Sign in and sign up forms must clear after submit success

    Other Requirements

    • Do not delete your repository at any time or start over.
    • Do not rely on refreshing the page for any functionality.
    • Do not have any user-facing bugs. - Display non-functional buttons, nor buttons that do not successfully complete a task. - Show actions at inappropriate times (example: sign out button when not signed in).

    Future Improvements

    • UI improvements - Responsive for all screen sizes
    • Add Features:
      • Track Game id
      • Creating a scoreboard for how many wins each player has won
      • Do not display console logs, errors or warnings in the console.

    • Ian Matos's Projects

    a-la-carte icon a-la-carte

    À La Carte is an e-commerce application that features a fully functional and user-friendly cart, designed to provide a seamless shopping experience on both large and small screens. this project showcases a cart with extensive functionality, allowing users to view, modify, and adjust their selected items before proceeding to the checkout process.

    backroads-app icon backroads-app

    A travel app powered by React.js for tours and services for users that enjoy broadening their horizons.

    birthday-buddy icon birthday-buddy

    An application designed to provide birthday reminders to the one's closest to you.

    captains-place icon captains-place

    a dynamic menu application designed to allow users to easily navigate through various menu items and filter them based on specific categories such as breakfast, lunch, and shakes.

    colleague-reviews icon colleague-reviews

    This web app, built using React.js, CSS, and HTML is designed to facilitate the process of colleague reviews by shuffling and randomizing the review assignments.

    color-generator icon color-generator

    Color Generator is a web application that allows users to explore and generate a wide range of colors based on their preferred hex code. Built using Vite and React.js, this application provides a user-friendly interface to interact with the color generation functionality.

    dummy-ipsum icon dummy-ipsum

    This project involves developing a Lorem Ipsum generator using React, HTML, and CSS. Users can input the desired number of paragraphs, up to a maximum of eight, and the generator will dynamically display the styled Lorem Ipsum text on the page.

    ever-ours-api icon ever-ours-api

    Ever Ours is an Events Website where you will be able to CRUD your very own wedding events and can also RSVP when you have made a decision on that status.

    ever-ours-client icon ever-ours-client

    Ever Ours is an Events Website where you will be able to CRUD your very own wedding events and can also RSVP when you have made a decision on that status.

    faq-questions icon faq-questions

    This react.js project is designed to create a dynamic FAQ page where users can view a list of questions and toggle the corresponding answers.

    grocery-pal icon grocery-pal

    Grocery Pal is a feature-rich CRUD application built using Vite and React.js. It offers users a convenient and reliable solution to manage their grocery or errand items. Users can seamlessly add, read, update, and delete items while ensuring that their information is persistently stored even after refreshing the application.

    job-tabs icon job-tabs

    The Job Tabs project is a dynamic web application designed to showcase an individual's career journey by allowing users to navigate through their previous and current job experiences using tab functionality.

    navbar icon navbar

    Navbar is a responsive React application that features a functional and stylish navigation bar. It provides a seamless user experience with smooth transitions and adaptability for both large and small screens.

    our-tours icon our-tours

    An Application designed for a tour company with user-friendly UI to view and read more information within the description provided on the landing page.

    react-todo-app icon react-todo-app

    A Complete To-Do Application with all features and using CRUD operations. React.js was used to manage our states along with Redux. Also learned to make simple animations using Framer Motion.

    sidebar-modal icon sidebar-modal

    Sidebar-Modal is a responsive React application that features a functional and stylish sidebar and modal. It provides a seamless user experience with smooth transitions and adaptability for both large and small screens.

    slider-carousel icon slider-carousel

    The Slider Carousel app is a visually appealing and interactive web application developed using React and Slick React. It showcases a carousel component that seamlessly transitions between different employees of a company, presenting their quotes. With the help of CSS, the app's design is enhanced to create a polished and engaging user interface, i

    strapi icon strapi

    Strapi is a React application that features a fully functional and responsive navbar with submenus, ensuring an intuitive user experience for both large and small screens. Built using Vite, React.js, React Icons, HTML, CSS, and the Nanoid Library, this application closely emulates the smooth navigation and transitions of the actual Strapi site.

    unsplashed-images icon unsplashed-images

    Unsplashed Images is an engaging React.js project that harnesses the power of the Unsplash API to deliver an immersive photo discovery experience. This innovative web application enables users to effortlessly explore a vast array of captivating photos by performing custom searches.

    Recommend Projects

    • React photo React

      A declarative, efficient, and flexible JavaScript library for building user interfaces.

    • Vue.js photo Vue.js

      🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

    • Typescript photo Typescript

      TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

    • TensorFlow photo TensorFlow

      An Open Source Machine Learning Framework for Everyone

    • Django photo Django

      The Web framework for perfectionists with deadlines.

    • D3 photo D3

      Bring data to life with SVG, Canvas and HTML. 📊📈🎉

    Recommend Topics

    • javascript

      JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

    • web

      Some thing interesting about web. New door for the world.

    • server

      A server is a program made to process requests and deliver data to clients.

    • Machine learning

      Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

    • Game

      Some thing interesting about game, make everyone happy.

    Recommend Org

    • Facebook photo Facebook

      We are working to build community through open source technology. NB: members must have two-factor auth.

    • Microsoft photo Microsoft

      Open source projects and samples from Microsoft.

    • Google photo Google

      Google ❤️ Open Source for everyone.

    • D3 photo D3

      Data-Driven Documents codes.