Gmail inbox application code

Here is an example of how to create a Gmail inbox application using HTML, CSS, and JavaScript:

HTML:

<!DOCTYPE html>
<html>
<head>
  <title>Gmail Inbox</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div id="inbox-container">
    <h1>Gmail Inbox</h1>
    <ul id="inbox-list"></ul>
  </div>

  <script src="script.js"></script>
</body>
</html>

CSS (in styles.css file):

#inbox-container {
  width: 80%;
  margin: 40px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#inbox-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

#inbox-list li {
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

#inbox-list li:last-child {
  border-bottom: none;
}

.email {
  font-size: 16px;
  font-weight: bold;
  color: #337ab7;
}

.subject {
  font-size: 14px;
  color: #666;
}

.date {
  font-size: 12px;
  color: #999;
}

JavaScript (in script.js file):

// Set up the Gmail API
const API_KEY = 'YOUR_API_KEY';
const API_URL = 'https://www.googleapis.com/gmail/v1/users/me/messages';

// Get the inbox list element
const inboxList = document.getElementById('inbox-list');

// Function to fetch the inbox messages
async function getInboxMessages() {
  const response = await fetch(API_URL, {
    method: 'GET',
    headers: {
      'Authorization': `Bearer ${API_KEY}`,
      'Content-Type': 'application/json'
    }
  });

  const data = await response.json();
  const messages = data.messages;

  // Loop through the messages and create list items
  messages.forEach((message) => {
    const listItem = document.createElement('li');
    const email = document.createElement('span');
    const subject = document.createElement('span');
    const date = document.createElement('span');

    email.textContent = message.payload.headers.find((header) => header.name === 'From').value;
    subject.textContent = message.payload.headers.find((header) => header.name === 'Subject').value;
    date.textContent = message.payload.headers.find((header) => header.name === 'Date').value;

    listItem.appendChild(email);
    listItem.appendChild(subject);
    listItem.appendChild(date);

    inboxList.appendChild(listItem);
  });
}

// Call the function to fetch the inbox messages
getInboxMessages();

Note: You need to replace YOUR_API_KEY with your actual Gmail API key. You can obtain an API key by creating a project in the Google Cloud Console and enabling the Gmail API.

This code creates a simple HTML page with a list element to display the inbox messages. The JavaScript code uses the Gmail API to fetch the inbox messages and creates list items for each message. The list items contain the sender's email, subject, and date of each message.

Please note that this is a basic example and you may want to add more functionality to your application, such as handling pagination, sorting, and filtering of messages. Additionally, you should ensure that your API key is secure and not exposed to unauthorized access.

Mail Knowledge

Gmail inbox application code