akirap3

# User enter a number to mark as 'O'
def EnterMove(board):
    
    boardList = listOfBoard(board)
    userMove = input("Enter your move: ")
    indexOfFreeFields = MakeListOfFreeFields(board)
    
    while (userMove not in indexOfFreeFields.keys()):
 userMove = input("Enter your move again or enter 'exit' to exit: ")

akirap3

# make a dictionary that contain numbers with its indexes
def MakeListOfFreeFields(board):
    
    boardList = listOfBoard(board)   
    numberString = '12346789'
    indexOfFreeFields = {}
    
    for i in numberString:
 if i in boardList:

akirap3

def DisplayBoard(board):
    
    print(board)

akirap3

# initial board format
board = """
+-------+-------+-------+
|       |       |       |
|   1   |   2   |   3   |
|       |       |       |
+-------+-------+-------+
|       |       |       |
| 4 | X | 6 |

akirap3

Introduction to the JSON APIs and AJAX Challenges

• Similar to how User Interfaces help people use programs, Application Programming Interfaces (APIs) help programs interact with other programs. APIs are tools that computers use to communicate with one another, in part to send and receive data. You can use API functionality in your page once you understand how to make requests and process data from it. Programmers often use AJAX technologies when working with APIs.

• The term AJAX originated as an acronym for Asynchronous JavaScript And XML. It refers to a group of technologies that make asynchronous requests to a server to transfer data, then load any returned data into the page. An asynchronous process has a couple key properties. The browser does not stop loading a page to wait for the server's response. Also, the browser inserts updated data into part of the page without having to refresh the entire page.

• User experience benefits from asynchronous processes in several ways. Pages load faster si

akirap3

Introduction to the Data Visualization with D3

• D3.js, or D3, stands for Data Driven Documents. D3 is a JavaScript library to create dynamic and interactive data visualizations in the browser. It's built to work with common web standards, namely HTML, CSS, and Scalable Vector Graphics (SVG).

• D3 takes input data and maps it into a visual representation of that data. It supports many different data formats. D3 lets you bind (or attach) the data to the Document Object Model (DOM). You use HTML or SVG elements with D3's built-in methods to transform the data into a visualization.

---

---

Add Document Elements with D3

akirap3

Introduction to the React and Redux Challenges

• In a React Redux app, you create a single Redux store that manages the state of your entire app. Your React components subscribe to only the pieces of data in the store that are relevant to their role. Then, you dispatch actions directly from React components, which then trigger store updates.

React and Redux: Getting Started with React Redux

• This series of challenges introduces how to use Redux with React. First, here's a review of some of the key principles of each technology. React is a view library that you provide with data, then it renders the view in an efficient, predictable way. Redux is a state management framework that you can use to simplify the management of your application's state. Typically, in a React Redux app, you create a single Redux store that manages the state of your entire app. Your React components subscribe to only the pieces of data in the store that are relevant to their role. Then, you dispatch actions directly fro

akirap3

Introduction to the Redux Challenges

• Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. While you can use Redux with any view library, it's introduced here before being combined with React.

---

---

Redux: Create a Redux Store

• Redux is a state management framework that can be used with a number of different web technologies, including React.

akirap3

Introduction to the React Challenges

• React, created by Facebook, is an open-source JavaScript library for building user interfaces. It is used to create components, handle state and props, utilize event listeners and certain life cycle methods to update data as it changes.
  
  
  
  
• React combines HTML with JavaScript functionality to create its own markup language, JSX.

---

---

akirap3

Introduction to the Sass Challenges

• Sass, or "Syntactically Awesome StyleSheets", is a language extension of CSS. It adds features that aren't available using basic CSS syntax. Sass makes it easier for developers to simplify and maintain the style sheets for their projects.

• Sass can extend the CSS language because it is a preprocessor. It takes code written using Sass syntax, and converts it into basic CSS. This allows you to create variables, nest CSS rules into others, and import other Sass files, among other things. The result is more compact, easier to read code.

• There are two syntaxes available for Sass. The first, known as SCSS (Sassy CSS) and used throughout these challenges, is an extension of the syntax of CSS. This means that every valid CSS stylesheet is a valid SCSS file with the same meaning. Files using this syntax have the .scss extension.

• The second and older syntax, known as the indented syntax (or sometimes just "Sass"), uses indentation rather than brackets to indicate nes