This is a playground to test JavaScript. It runs a completely standard copy of Node.js on a virtual server created just for you. Every one of npm’s 300,000+ packages are pre-installed, so try it out:
// Let's show where the Internation Space Station currently is.
console.log("Let's see where the ISS is with Node " + process.version);
// We can use any package from NPM since they are all built in.
var getJSON = require("async-get-json");
// And we can use ES7 async/await to pull the ISS's position from the open API.
var result = await getJSON("http://api.open-notify.org/iss-now.json");
// RunKit will automatically display the last statement and try to find its best representation:
result.iss_position;
<!DOCTYPE html>
<html>
<head>
<title>Chat</title>
<style>
.chat-container {
width: 300px;
height: 400px;
border: 1px solid #ccc;
overflow-y: scroll;
}
.message {
margin: 10px;
padding: 5px;
background-color: #f1f1f1;
border-radius: 5px;
}
.input-container {
margin-top: 10px;
}
.input-container input[type="text"] {
width: 200px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 5px;
}
.input-container input[type="submit"] {
padding: 5px 10px;
border: none;
background-color: #4CAF50;
color: white;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="chat-container" id="chatContainer">
</div>
<div class="input-container">
<input type="text" id="messageInput" placeholder="Type a message">
<input type="submit" value="Send" onclick="sendMessage()">
</div>
<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io();
socket.on('chat message', (message) => {
appendMessage(message);
});
function sendMessage() {
var message = document.getElementById("messageInput").value;
socket.emit('chat message', message);
document.getElementById("messageInput").value = "";
}
function appendMessage(message) {
var chatContainer = document.getElementById("chatContainer");
var newMessage = document.createElement("div");
newMessage.className = "message";
newMessage.textContent = message;
chatContainer.appendChild(newMessage);
}
</script>
</body>
</html>
``
no comments
sign in to comment