### Installing Node.js Dependencies for Appwrite Web Playground (sh)

Source: https://github.com/appwrite/playground-for-web/blob/master/README.md

This command installs all required Node.js modules and dependencies listed in the project's `package.json` file. It's crucial for setting up the development environment and ensuring all necessary libraries are available for the playground to run correctly.

```sh
$ npm install
```

--------------------------------

### Starting Appwrite Web Playground Development Server (sh)

Source: https://github.com/appwrite/playground-for-web/blob/master/README.md

This command initiates a local web server, typically at `http://localhost:8000`, to serve the Appwrite Web Playground. After running this, you can access the playground in your web browser to explore the Appwrite API and SDK features.

```sh
$ npm start
```

--------------------------------

### Navigating into Appwrite Web Playground Directory (sh)

Source: https://github.com/appwrite/playground-for-web/blob/master/README.md

This command changes the current directory to the newly cloned `playground-for-web` folder. It's a necessary step before installing dependencies or starting the server, ensuring subsequent commands operate within the correct project context.

```sh
$ cd playground-for-web
```

--------------------------------

### Cloning Appwrite Web Playground Repository (sh)

Source: https://github.com/appwrite/playground-for-web/blob/master/README.md

This command clones the Appwrite Web Playground repository from GitHub to your local machine. Replace `Your_Username` with your actual GitHub username after forking the repository. This is the first step to get the project files locally.

```sh
$ git clone https://github.com/Your_Username/playground-for-web.git
```

--------------------------------

### Getting User IP Address with Appwrite Locale in JavaScript

Source: https://github.com/appwrite/playground-for-web/blob/master/public/index.html

This function fetches the user's IP address using the Appwrite Locale service. It displays the IP address in an alert box or an error message if the locale data cannot be retrieved.

```JavaScript
function getIP() {
    let promise = locale.get();
    promise.then(
        function (response) {
            alert("User IP is: " + response.ip);
        },
        function (error) {
            alert("Failed to get user locale.");
        }
    );
    event.preventDefault();
}
```

--------------------------------

### Getting User Location with Appwrite Locale in JavaScript

Source: https://github.com/appwrite/playground-for-web/blob/master/public/index.html

This function retrieves the user's country and country code using the Appwrite Locale service. It displays this information in an alert box or an error message if the locale data cannot be fetched.

```JavaScript
function getLocation() {
    let promise = locale.get();
    promise.then(
        function (response) {
            alert(
                "User is from " + response.country + ", country code is: " + response.countryCode
            );
        },
        function (error) {
            alert("No User is Logged!");
        }
    );
    event.preventDefault();
}
```

--------------------------------

### Initializing Appwrite Service Instances in JavaScript

Source: https://github.com/appwrite/playground-for-web/blob/master/public/index.html

This snippet initializes instances of various Appwrite services (Account, Storage, Teams, Locale, Functions) using the previously configured Appwrite client. These service instances are then used to perform specific operations related to each service.

```JavaScript
const account = new Appwrite.Account(client);
const storage = new Appwrite.Storage(client);
const teams = new Appwrite.Teams(client);
const locale = new Appwrite.Locale(client);
const functions = new Appwrite.Functions(client);
```

--------------------------------

### Initializing Appwrite Web SDK Client in JavaScript

Source: https://github.com/appwrite/playground-for-web/blob/master/public/index.html

This code initializes the Appwrite Web SDK client, setting the endpoint to the Appwrite cloud instance and specifying the project UID. This is a prerequisite for all subsequent interactions with Appwrite services.

```JavaScript
const client = new Appwrite.Client();
client
    .setEndpoint("https://cloud.appwrite.io/v1") // Set your own appwrite server endpoint here, if not sure, you can get this value from your project settings page.
    .setProject("test"); // Your Appwrite Project UID, you can get it from your project settings page.
```

--------------------------------

### Registering a New User with Appwrite Account in JavaScript

Source: https://github.com/appwrite/playground-for-web/blob/master/public/index.html

This function handles user registration by creating a new account with a unique ID, email, password, and a default name. It provides an alert indicating the success or failure of the account creation process.

```JavaScript
function register(event) {
    account
        .create(
            "unique()",
            event.target.elements["register-email"].value, // Email
            event.target.elements["register-password"].value, // Password
            "User Name"
        )
        .then(
            function (response) {
                alert("Account created succefully!");
            },
            function (error) {
                alert("Failed to create account");
            }
        );
    event.preventDefault();
}
```

--------------------------------

### Logging In with Email and Password using Appwrite Account in JavaScript

Source: https://github.com/appwrite/playground-for-web/blob/master/public/index.html

This function authenticates a user using their email and password to create a new session. Upon successful login, it also subscribes to 'account' realtime events to monitor user-related activities.

```JavaScript
function login(event) {
    account
        .createEmailPasswordSession(
            event.target.elements["login-email"].value, // Email
            event.target.elements["login-password"].value // Password
        )
        .then(
            function (response) {
                alert("Session created succefully!");
                client.subscribe("account", function(response) {
                    console.log('Received Account event', response);
                });
            },
            function (error) {
                alert("Failed to create session");
            }
        );
    event.preventDefault();
}
```

--------------------------------

### Subscribing to Appwrite Realtime File Events in JavaScript

Source: https://github.com/appwrite/playground-for-web/blob/master/public/index.html

This code demonstrates how to subscribe to realtime events for file changes in Appwrite Storage. It listens for 'files' events, and upon receiving a response, dynamically adds a new list item to display file details, including a preview image and a link to the file view.

```JavaScript
const realtimeElement = document.getElementById("realtime");
client.subscribe("files", function(response) {
    const entry = document.createElement("li");
    const image = storage.getFilePreview('testbucket', response.payload.$id, 250);
    const url = storage.getFileView('testbucket', response.payload.$id, 250);
    entry.classList.add('list-group-item');
    entry.innerHTML = `<a href="${url}" target=\_blank><b>Events</b>: ${response.events}<br><img src="${image}" /></a>`;
    realtimeElement.prepend(entry);
});
```

--------------------------------

### Logging In with Github OAuth2 using Appwrite Account in JavaScript

Source: https://github.com/appwrite/playground-for-web/blob/master/public/index.html

This function initiates an OAuth2 login flow with GitHub. It requires success and failure callback URLs for browser-based sessions. The promise handles the authentication result, logging success or failure to the console.

```JavaScript
function loginWithGithub(event) {
    /**
     * Callback URLs are required for creating a browser
     * session cookie due to some browsers 3rd party cookie policy limitations,
     * this is not required for other client based platforms
     */
    let promise = account.createOAuth2Session(
        "github",
        "http://localhost:8000/?success", // Callback URL for success
        "http://localhost:8000/?failure", // Callback URL for failure
        []
    );
    promise.then(
        function (response) {
            console.log(response); // Success
        },
        function (error) {
            console.log(error); // Failure
        }
    );
    event.preventDefault();
}
```

--------------------------------

### Logging Appwrite Document Creation Status (JavaScript)

Source: https://github.com/appwrite/playground-for-web/blob/master/public/index.html

This simple snippet logs an informational message to the console, indicating that a 'Todo' item is being added. It serves as a preliminary log before the actual document creation process begins.

```JavaScript
console.log('[INFO] Adding Todo');
```

--------------------------------

### Logging In with Apple OAuth2 using Appwrite Account in JavaScript

Source: https://github.com/appwrite/playground-for-web/blob/master/public/index.html

This function initiates an OAuth2 login flow with Apple. It requires success and failure callback URLs for browser-based sessions. The promise handles the authentication result, logging success or failure to the console.

```JavaScript
function loginWithApple(event) {
    /**
     * Callback URLs are required for creating a browser
     * session cookie due to some browsers 3rd party cookie policy limitations,
     * this is not required for other client based platforms
     */
    let promise = account.createOAuth2Session(
        "apple",
        "http://localhost:8000/?success", // Callback URL for success
        "http://localhost:8000/?failure" // Callback URL for failure
    );
    promise.then(
        function (response) {
            console.log(response); // Success
        },
        function (error) {
            console.log(error); // Failure
        }
    );
    event.preventDefault();
}
```

--------------------------------

### Subscribing to Multiple Appwrite Realtime Events in JavaScript

Source: https://github.com/appwrite/playground-for-web/blob/master/public/index.html

This snippet shows how to subscribe to multiple Appwrite realtime channels simultaneously, specifically 'teams', 'memberships', and 'accounts'. It logs the received response to the console, allowing developers to monitor events across these services.

```JavaScript
client.subscribe(['teams', 'memberships', 'accounts'], function(response) {
    console.log(response)
});
```

--------------------------------

### Listing User Logs with Appwrite Account in JavaScript

Source: https://github.com/appwrite/playground-for-web/blob/master/public/index.html

This function fetches and displays the activity logs for the current user. It outputs the detailed logs to the developer console and provides an alert indicating the number of logs found.

```JavaScript
function listLogs() {
    let promise = account.listLogs();
    promise.then(
        function (response) {
            console.log("User Logs:", response);
            alert(
                "User has " + response.logs.length + " logs. Check developer console for more info"
            );
        },
        function (error) {
            alert("No User is Logged!");
        }
    );
    event.preventDefault();
}
```

--------------------------------

### Listing Files from Appwrite Storage in JavaScript

Source: https://github.com/appwrite/playground-for-web/blob/master/public/index.html

This function retrieves a list of files from a specified Appwrite storage bucket. It dynamically populates an unordered list (UL) with file names and sets up click handlers to view individual file details.

```JavaScript
function listFiles() {
    let promise = storage.listFiles('testbucket');
    promise.then(function (response) {
        var ul = document.getElementById("list");
        ul.innerHTML = '';
        for(let i=1; i<=response.total; i++){
            var li = document.createElement("li");
            li.innerHTML = response.files[i-1].name;
            console.log(response.files[i-1].$id);
            li.onclick = function () {
                getFile(response.files[i-1].$id);
            };
            ul.appendChild(li);
        }
        console.log(response); // Success
    }, function (error) {
        console.log(error); // Failure
    });
    event.preventDefault();
}
```

--------------------------------

### Logging In with Google OAuth2 using Appwrite Account in JavaScript

Source: https://github.com/appwrite/playground-for-web/blob/master/public/index.html

This function initiates an OAuth2 login flow with Google. It requires success and failure callback URLs for browser-based sessions due to third-party cookie policies. The promise resolves or rejects based on the authentication outcome.

```JavaScript
function loginWithGoogle(event) {
    /**
     * Callback URLs are required for creating a browser
     * session cookie due to some browsers 3rd party cookie policy limitations,
     * this is not required for other client based platforms
     */
    let promise = account.createOAuth2Session(
        "google",
        "http://localhost:8000/?success", // Callback URL for success
        "http://localhost:8000/?failure" // Callback URL for failure
    );
    promise.then(
        function (response) {
            console.log(response); // Success
        },
        function (error) {
            console.log(error); // Failure
        }
    );
    event.preventDefault();
}
```

--------------------------------

### Creating a New Team with Appwrite Teams in JavaScript

Source: https://github.com/appwrite/playground-for-web/blob/master/public/index.html

This function creates a new team in Appwrite with a unique ID and a specified name. It alerts the user about the success or failure of the team creation.

```JavaScript
function createTeam() {
    let promise = teams.create('test', 'Test Team');
    promise.then(
        function (response) {
            alert("Team created."); // Success
        },
        function (error) {
            alert(error); // Failure
        }
    );
    event.preventDefault();
}
```

--------------------------------

### Creating Appwrite Document with Default Permissions (JavaScript)

Source: https://github.com/appwrite/playground-for-web/blob/master/public/index.html

This snippet shows how to create a new document in an Appwrite database collection without explicitly specifying read and write permissions. Appwrite will apply default permissions based on the collection's settings. The document includes 'completed' and 'text' fields.

```JavaScript
let promise = appwrite.database.createDocument('5dac4fc8d9f0c', { 'completed': true, 'text': 'a new task' });
```

--------------------------------

### Listing User Sessions with Appwrite Account in JavaScript

Source: https://github.com/appwrite/playground-for-web/blob/master/public/index.html

This function retrieves and displays a list of all active sessions for the current user. It logs the session details to the console and provides an alert summarizing the total number of active sessions.

```JavaScript
function listSessions() {
    let promise = account.listSessions();
    promise.then(
        function (response) {
            console.log("User Devices:", response);
            alert(
                "User has " + response.total + " active sessions. Check developer console for more info"
            );
        },
        function (error) {
            alert("No User is Logged!");
        }
    );
    event.preventDefault();
}
```

--------------------------------

### Logging In with Facebook OAuth2 using Appwrite Account in JavaScript

Source: https://github.com/appwrite/playground-for-web/blob/master/public/index.html

This function initiates an OAuth2 login flow with Facebook, requesting the 'user_location' scope. It requires success and failure callback URLs for browser-based sessions. The promise handles the authentication result.

```JavaScript
function loginWithFacebook(event) {
    /**
     * Callback URLs are required for creating a browser
     * session cookie due to some browsers 3rd party cookie policy limitations,
     * this is not required for other client based platforms
     */
    let promise = account.createOAuth2Session(
        "facebook",
        "http://localhost:8000/?success", // Callback URL for success
        "http://localhost:8000/?failure", // Callback URL for failure
        ["user_location"]
    );
    promise.then(
        function (response) {
            console.log(response); // Success
        },
        function (error) {
            console.log(error); // Failure
        }
    );
    event.preventDefault();
}
```

--------------------------------

### Creating a Team Membership with Appwrite Teams in JavaScript

Source: https://github.com/appwrite/playground-for-web/blob/master/public/index.html

This function adds a new member to an existing team with specified roles and a redirect URL. It generates a random email for demonstration purposes and alerts the user about the success or failure of the membership creation.

```JavaScript
function createTeamMembership() {
    let random = Math.floor(1000 + Math.random() * 9000);
    let email = "test+" + random + "@test.com";
    let promise = teams.createMembership('test', email, ['admin'], 'http://localhost');
    promise.then(
        function (response) {
            alert("Membership created."); // Success
        },
        function (error) {
            alert(error); // Failure
        }
    );
    event.preventDefault();
}
```

--------------------------------

### Creating Appwrite Document with User-Specific Permissions (JavaScript)

Source: https://github.com/appwrite/playground-for-web/blob/master/public/index.html

This snippet illustrates creating a new document in an Appwrite database collection where read and write permissions are restricted to the current authenticated user (`['user:{self}']`). This ensures only the document creator can access and modify it. The document contains 'completed' and 'text' fields.

```JavaScript
let promise = appwrite.database.createDocument('5dac4fc8d9f0c', { 'completed': true, 'text': 'a new task' }, ['user:{self}'], ['user:{self}']);
```

--------------------------------

### Retrieving a Specific File from Appwrite Storage in JavaScript

Source: https://github.com/appwrite/playground-for-web/blob/master/public/index.html

This function fetches details for a specific file from an Appwrite storage bucket using its ID. It displays the file's JSON response in an alert box and logs it to the console.

```JavaScript
function getFile(file_id) {
    let promise = storage.getFile('testbucket', file_id);
    promise.then(function (response) {
        alert(JSON.stringify(response, undefined, 2));
        console.log(response); // Success
    }, function (error) {
        console.log(error); // Failure
    });
    event.preventDefault();
}
```

--------------------------------

### Creating Appwrite Document with Public Permissions (JavaScript)

Source: https://github.com/appwrite/playground-for-web/blob/master/public/index.html

This snippet demonstrates how to create a new document in an Appwrite database collection with a specific ID. It sets the document's read and write permissions to public (`['*']`), making it accessible to all users. The document contains 'completed' and 'text' fields.

```JavaScript
let promise = appwrite.database.createDocument('5dac4fc8d9f0c', { 'completed': true, 'text': 'a new task' }, ['*'], ['*']);
```

--------------------------------

### Handling Appwrite Promise Resolution (JavaScript)

Source: https://github.com/appwrite/playground-for-web/blob/master/public/index.html

This snippet demonstrates how to handle the asynchronous response from an Appwrite SDK call using a promise. It logs the successful response object if the operation completes, or logs the error object if the promise is rejected, providing feedback on the API call's outcome.

```JavaScript
promise.then(function(response) {
  console.log(response);
}, function(error) {
  console.log(error);
});
```

--------------------------------

### Logging In Anonymously with Appwrite Account in JavaScript

Source: https://github.com/appwrite/playground-for-web/blob/master/public/index.html

This function creates an anonymous user session, allowing users to interact with Appwrite services without providing personal credentials. It alerts the user about the success or failure of the anonymous session creation.

```JavaScript
function loginAnonymously() {
    account.createAnonymousSession().then(
        function (response) {
            alert("anonymous session created successfully!");
        },
        function (error) {
            alert("failed to create session");
        }
    );
    event.preventDefault();
}
```

--------------------------------

### Creating a JWT with Appwrite Account in JavaScript

Source: https://github.com/appwrite/playground-for-web/blob/master/public/index.html

This function generates a JSON Web Token (JWT) for the currently authenticated user. The JWT can be used for secure authentication in other services or for server-side operations. It logs the JWT to the console and alerts the user.

```JavaScript
function createJWT() {
    account.createJWT().then(
        function (response) {
            console.log("JWT: ", response);
            alert("JWT created.");
        },
        function (error) {
            alert("failed to create session");
        }
    );
    event.preventDefault();
}
```

--------------------------------

### Uploading a File to Appwrite Storage in JavaScript

Source: https://github.com/appwrite/playground-for-web/blob/master/public/index.html

This function handles the upload of a selected file to a specified Appwrite storage bucket. It uses a unique ID for the file and provides alerts for successful upload or any errors encountered.

```JavaScript
function createFile() {
    let promise = storage.createFile('testbucket', 'unique()', document.getElementById('uploader').files[0]);
    promise.then(function (response) {
        console.log(response); // Success
        alert("File uploaded successfully");
    }, function (error) {
        console.log(error); // Failure
    });
    event.preventDefault();
}
```

--------------------------------

### Executing an Appwrite Function in JavaScript

Source: https://github.com/appwrite/playground-for-web/blob/master/public/index.html

This function triggers the execution of a serverless function deployed on Appwrite. It requires a pre-existing function ID. It alerts the user about the success or failure of the function execution.

```JavaScript
function executeFunction() {
    // You need to create function and deployment using server SDK or Appwrite Console before executing it. You can use pre-built appwrite function templates from Appwrite Console. Copy functionId and paste it in createExecution function.
    let promise = functions.createExecution('functionId');
    promise.then(
        function (response) {
            alert("Function executed successfully!");
        },
        function (error) {
            alert("Failed to execute function.");
        }
    );
}
```

--------------------------------

### Checking User Login Status with Appwrite Account in JavaScript

Source: https://github.com/appwrite/playground-for-web/blob/master/public/index.html

This function checks if a user is currently logged in by attempting to retrieve the account details. It displays an alert indicating whether a user is logged in or not, based on the success or failure of the `account.get()` promise.

```JavaScript
function isLogged() {
    let promise = account.get();
    promise.then(
        function (response) {
            alert("User is Logged!");
        },
        function (error) {
            alert("No User is Logged!");
        }
    );
    event.preventDefault();
}
```

--------------------------------

### Retrieving User Name with Appwrite Account in JavaScript

Source: https://github.com/appwrite/playground-for-web/blob/master/public/index.html

This function fetches the currently logged-in user's name using the Appwrite Account service. It displays the user's name in an alert box upon success, or an error message if no user is logged in.

```JavaScript
function getUserName() {
    let promise = account.get();
    promise.then(
        function (response) {
            alert(response.name);
        },
        function (error) {
            alert("No User is Logged!");
        }
    );
    event.preventDefault();
}
```

--------------------------------

### Retrieving User Email with Appwrite Account in JavaScript

Source: https://github.com/appwrite/playground-for-web/blob/master/public/index.html

This function retrieves the email address of the currently authenticated user via the Appwrite Account service. It presents the email in an alert box if successful, or notifies if no user is logged in.

```JavaScript
function getUserEmail() {
    let promise = account.get();
    promise.then(
        function (response) {
            alert(response.email);
        },
        function (error) {
            alert("No User is Logged!");
        }
    );
    event.preventDefault();
}
```

--------------------------------

### Updating File Uploader Label in JavaScript

Source: https://github.com/appwrite/playground-for-web/blob/master/public/index.html

This snippet updates the text of a label element to display the name of the selected file when a file is chosen using an input element with the ID 'uploader'. It provides immediate visual feedback to the user about their file selection.

```JavaScript
document.getElementById('uploader').onchange = function () { document.getElementById('uploader-label').innerHTML = this.files[0].name; };
```

--------------------------------

### Checking if User is in EU with Appwrite Locale in JavaScript

Source: https://github.com/appwrite/playground-for-web/blob/master/public/index.html

This function determines if the user's location is within the European Union using the Appwrite Locale service. It displays a corresponding message in an alert box or an error if the locale data cannot be fetched.

```JavaScript
function isEU() {
    let promise = locale.get();
    promise.then(
        function (response) {
            alert(
                response.eu ? "User is a member of the EU" : "User is not a member of the EU"
            );
        },
        function (error) {
            alert("Failed to get user locale.");
        }
    );
    event.preventDefault();
}
```

--------------------------------

### Deleting All User Sessions with Appwrite Account in JavaScript

Source: https://github.com/appwrite/playground-for-web/blob/master/public/index.html

This function invalidates and deletes all active sessions for the current user. It logs a success message to the console upon completion or an error if the operation fails.

```JavaScript
function deleteSessions() {
    let promise = account.deleteSessions();
    promise.then(
        function (response) {
            console.log("All session deleted."); // Success
        },
        function (error) {
            console.log(error); // Failure
        }
    );
    event.preventDefault();
}
```

--------------------------------

### Deleting Current User Session with Appwrite Account in JavaScript

Source: https://github.com/appwrite/playground-for-web/blob/master/public/index.html

This function invalidates and deletes only the current active session for the user. It logs a success message to the console upon completion or an error if the operation fails.

```JavaScript
function deleteCurrentSession() {
    let promise = account.deleteSession('current');
    promise.then(
        function (response) {
            console.log("Current session deleted."); // Success
        },
        function (error) {
            console.log(error); // Failure
        }
    );
    event.preventDefault();
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.