Untitled

<!DOCTYPE html>
<html>
<head>
  <title>My Twitter</title>
  <style>
    /* CSS styles for the website */
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }

    header {
      background-color: #1da1f2;
      padding: 20px;
      text-align: center;
      color: #fff;
    }

    .container {
      max-width: 600px;
      margin: 0 auto;
      padding: 20px;
    }

    .tweet-form {
      margin-bottom: 20px;
    }

    .tweet-form textarea {
      width: 100%;
      height: 80px;
      padding: 10px;
      resize: vertical;
    }

    .tweet-list {
      list-style-type: none;
      padding: 0;
    }

    .tweet-item {
      background-color: #f2f2f2;
      padding: 10px;
      margin-bottom: 10px;
    }

    .chat-form textarea {
      width: 100%;
      height: 60px;
      padding: 10px;
      resize: vertical;
    }

    .chat-list {
      list-style-type: none;
      padding: 0;
    }

    .chat-item {
      background-color: #f2f2f2;
      padding: 10px;
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <header>
    <h1>My Twitter</h1>
  </header>

  <div class="container">
    <div class="tweet-form">
      <textarea id="tweet-input" placeholder="Write a tweet"></textarea>
      <button onclick="postTweet()">Tweet</button>
    </div>

    <ul class="tweet-list" id="tweet-list">
      <!-- Tweet items will be dynamically added here -->
    </ul>

    <div class="chat-form">
      <textarea id="chat-input" placeholder="Send a message"></textarea>
      <button onclick="sendMessage()">Send</button>
    </div>

    <ul class="chat-list" id="chat-list">
      <!-- Chat items will be dynamically added here -->
    </ul>
  </div>

  <script>
    // JavaScript code for handling interactions

    // Array to store tweets
    let tweets = [];

    // Function to post a new tweet
    function postTweet() {
      const tweetInput = document.getElementById('tweet-input');
      const tweetContent = tweetInput.value;

      if (tweetContent.trim() !== '') {
        const tweet = {
          content: tweetContent,
          timestamp: new Date().toLocaleString()
        };

        tweets.unshift(tweet);
        tweetInput.value = '';

        displayTweets();
      }
    }

    // Function to display tweets
    function displayTweets() {
      const tweetList = document.getElementById('tweet-list');
      tweetList.innerHTML = '';

      tweets.forEach(tweet => {
        const tweetItem = document.createElement('li');
        tweetItem.classList.add('tweet-item');
        tweetItem.innerText = `${tweet.content} - ${tweet.timestamp}`;

        tweetList.appendChild(tweetItem);
      });
    }

    // Array to store chat messages
    let chatMessages = [];

    // Function to send a new chat message
    function sendMessage() {
      const chatInput = document.getElementById('chat-input');
      const messageContent = chatInput.value;

      if (messageContent.trim() !== '') {
        const message = {
          content: messageContent,
          timestamp: new Date().toLocaleString()
        };

        chatMessages.unshift(message);
        chatInput.value = '';

        displayChatMessages();
      }
    }

    // Function to display chat messages
    function displayChatMessages() {
      const chatList = document.getElementById('chat-list');
      chatList.innerHTML = '';

      chatMessages.forEach(message => {
        const chatItem = document.createElement('li');
        chatItem.classList.add('chat-item');
        chatItem.innerText = `${message.content} - ${message.timestamp}`;

        chatList.appendChild(chatItem);
      });
    }
  </script>
</body>
</html>
Editor is loading...