Calculator Tools Calculator Tools
Create

Chat JunyTony

Sep 18, 2023

About this app

Chat app to talk to Juny and Tony

Chat JunyTony Send

Related apps

Put this on your site

Source

                    <html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">

<title>Chat JunyTony</title>
<meta name="description" content="Chat app to talk to Juny and Tony">
<meta name="keywords" content="chat, Juny, Tony, conversation">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<script type="text/javascript">
try {
// App Javascript Goes Here. Place your entire script content inside the try block for error handling.
document.addEventListener("DOMContentLoaded", function() {
// Chat App Functionality
const chatContainer = document.querySelector('#chat-container');
const messageInput = document.querySelector('#message-input');
const sendMessageButton = document.querySelector('#send-message-button');
const chatMessages = document.querySelector('#chat-messages');

sendMessageButton.addEventListener('click', function() {
const messageText = messageInput.value;

if (messageText.trim() !== '') {
const messageElement = document.createElement('div');
messageElement.classList.add('message');
messageElement.textContent = messageText;

chatMessages.appendChild(messageElement);

messageInput.value = '';
}
});
});

} catch (error) {
// This will throw the error to the parent window.
throw error;
}
</script>

<style>
/* App CSS Goes Here */
body {
background: linear-gradient(to right, #ff9a9e, #fad0c4);
font-family: 'Arial', sans-serif;
}

.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}

.chat-box {
width: 400px;
background-color: #fff;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
border-radius: 10px;
padding: 20px;
}

.message {
margin-bottom: 10px;
padding: 10px;
background-color: #f4f4f4;
border-radius: 5px;
}

.message:last-child {
margin-bottom: 0;
}

.input-group {
margin-top: 20px;
}

.input-group input {
border-radius: 5px;
border: none;
padding: 10px;
width: 100%;
font-size: 16px;
}

.input-group button {
background-color: #ff6f6f;
color: #fff;
border: none;
border-radius: 5px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<div class="chat-box">
<div id="chat-messages"></div>
<div class="input-group">
<input type="text" id="message-input" placeholder="Type a message...">
<button id="send-message-button">Send</button>
</div>
</div>
</div>
</body>
</html>