Ask coding questions

← Back to all posts
Repl Spotlight Run Button
RYANTADIPARTHI (6019)

Hi,

Could someone tell me how to make the spotlight run button you see on someone's repl. The huge green button with a white play button. If someone could show me the code for it, i would appreciate it.

Also it should be the exact colors, and should also do the action it does when i hover on the button. Thanks!

Also this is another question but could someone give a chatroom? that chatroom should save the messages put in it. So if I went back to it after closing, the messages should be there. It can be in any language, but i would prefer node.js. So you can make it in a repl, and give the link.

Thanks!

Comments
hotnewtop
InvisibleOne (2931)

Here's the code for a little chat room I built a while ago

NODE.JS FILE:

// --- CREATED BY INVISIBLEONE AND JANKYCODER --- \\

const express = require('express');
const app = express()
const http = require('http').Server(app);
const io = require('socket.io')(http);

var Filter = require('bad-words'),
filter = new Filter();
 

users = 0;

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html')
});

io.on('connection', (socket)=> {
	console.log("User Connected!");
	users += 1
	
	socket.broadcast.emit('users', (users));
	socket.emit('users', (users)); 

	socket.on('chat', (chat)=> {
		console.log("Recieved Chat: " + chat);
		socket.broadcast.emit('update', filter.clean(chat));
	});
	socket.on('welcome', (username)=>{
		socket.broadcast.emit('update', "<span>Please welcome " + username + " to the chat!</span>");
	});
	socket.on('disconnect', ()=> {
		users -= 1;
		socket.broadcast.emit('users', (users));
		socket.emit('users', (users));
	});
});


http.listen(3000, () => {
  console.log('server started');
});

HTML FILE

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Chats</title>
    <script src="https://cdn.socket.io/socket.io-3.0.0.js"></script>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  </head>
  <body>
		<style>
			@import url('https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&display=swap');
			@import url('https://fonts.googleapis.com/css2?family=Roboto:[email protected]&display=swap');
			body {
				text-align: center;
			}
			ul {
				text-align: justify;
				font-family: Trebuchet MS, sans-serif;
			}
			span {
				font-weight: bold;
				color: green;
				font-family: 'ZCOOL KuaiLe', cursive;
			}
			h1 {
				font-family: 'ZCOOL KuaiLe', cursive;
			}
			p {
				font-family: 'Roboto', sans-serif;
			}
			input {
				font-family: 'Roboto', sans-serif;
				height: 40px;
				font-size: 15px;
			}
			textarea {
				font-family: 'Roboto', sans-serif;
				border: 3px solid green;
				border-radius: 5px;
			}
			button {
				color: white;
				font-family: 'ZCOOL KuaiLe', cursive;
				height: 40px;
				background-color: green;
				border: 2px solid grey;
				border-radius: 5px;
				font-size: 15px;
			}
			.chats {
				text-align: center;
				margin: 0px 50px;
			}
			.mine {
				text-align: right;
				padding: 5px;
				background-color: rgba(0, 255, 50, .2);
				border-radius: 5px;
				margin: 2px;
			}
			.others {
				text-align: left;
				padding: 5px;
				background-color: rgb(240, 240, 240);
				border-radius: 5px;
				margin: 2px;
			}
			.underline {
				text-decoration: underline;
			}
			.popup {
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, .3);
				position: fixed;
				z-index: 1;
				left: 0;
				top: 0;
				text-align: center;
			}
			.popup-content {
				width: 50%;
				height: 50%;
				min-width: 300px;
				min-height: 300px;
				background-color: white;
				border-radius: 30px;
				margin: 50px auto;
			}
		</style>
  	<h1>Chat</h1>
  	<br/>
		<div class='chats'>
			<ul id='displayChats'>
			</ul>
		</div>
  	<br/>
  	<p>Username: <span id='username' class='underline' onclick="document.getElementById('annoying-popup').style.display = 'block';"></span></p>
		<textarea id='text' rows='3' cols='50'></textarea>
		<br>
		<button onclick='sendChat()'>Send, or hit enter</button>
		<div class='popup' id='annoying-popup'>
			<div class='popup-content'>
				<h1>Hi there!</h1>
				<p>What should your username be?</p>
				<input type='text' id='userName'/>
				<button onclick='doneUser()'>Done</button>
			</div>
		</div>
		<br>
		<br>
		<br>
		<br>
		<br>
		<button onclick='clearScreen()'>Clear Chats</button>
		<br>
		<p>Connected Users: <span id='userCount'>0</span></p>
		<script>

			/*
			var messageCount = 0;
			var maxMessages = 10;
			*/

			const socket = io()


			var username = ''

			function doneUser() {
				username = document.getElementById('userName').value;
				document.getElementById('annoying-popup').style.display = 'none';
				document.getElementById('username').innerHTML = username;
				socket.emit('welcome', username);
			}

			function clearScreen() {
				$(document.querySelector('#displayChats')).empty();
			}

			document.getElementById('username').innerHTML = username;

			function sendChat() {
				if (document.getElementById('text').value) {
					var text = "<span>" + username + "</span>" + ": " + document.getElementById('text').value;
					socket.emit('chat', text);
					document.getElementById('text').value = '';
					var chats = document.getElementById("displayChats");
					var li = document.createElement("li");
					li.innerHTML = text;
					li.classList.add('mine')
					chats.appendChild(li);
				} else {
				}
			}

			socket.on('update', (latestChat)=> {
				var chats = document.getElementById("displayChats");
				var li = document.createElement("li");
				li.innerHTML = latestChat;
				li.classList.add('others');
				chats.appendChild(li);
			})
			socket.on('users', (users)=> {
				document.getElementById('userCount').innerHTML = users;
			})

			document.addEventListener('keypress', (e)=> {
				if (e.keyCode == 13) {
					sendChat();
				}
			})
			
		</script>
  </body>
</html>
RYANTADIPARTHI (6019)

@InvisibleOne thanks, but could you tell me the correct files to put the code in, cause it says Error: ENOENT: no such file or directory, stat '/home/runner/CaringConsiderateCurrencies/index.html'. Or an easier way is to make a reply on your own, and just give me the link. Your choice.

Thanks!

RYANTADIPARTHI (6019)

@InvisibleOne thanks, this is good, but could you do my last requirement? The saving? So it should save whatever messages I put in there. until I click clear chat. So if I come back to it after any time, the chat messages I put in there should still be there. Saving. Could you do thaT? Thanks!

InvisibleOne (2931)

Yeah sure, that will just be writing and reading from a text file using 'fs' @RYANTADIPARTHI

RYANTADIPARTHI (6019)

@InvisibleOne could you do that? I don't know node.js. Thanks!

InvisibleOne (2931)

Ok, it's finally done, took me way longer than it should of because I realized I wasn't filtering my chats for any new lines, which causes issues in the file reading and writing. @RYANTADIPARTHI

RYANTADIPARTHI (6019)

@InvisibleOne ok thanks. Sorry for the troubles. So is it the same link?

RYANTADIPARTHI (6019)

@InvisibleOne ok thanks! It works, also do you know the answer to my first question? IF you don't it's ok. Also I noticed when I type in really long chat messages, it breaks off, and goes somewhere. Can you make it so that it breaks onto different lines, and stays in the green box? Like a paragraph? Thanks! I'll mark your answer once you do that. Thanks!

InvisibleOne (2931)

Oh, sorry, I haven't got around to that yet, I might work on it again on Monday. @RYANTADIPARTHI

InvisibleOne (2931)

Chat room in python: while 1:import os;z=os.getenv("REPL_OWNER")+": ";print("\x1B[2J"+str(open('c','a').write(z+input(z)+'\n'))+" ".join([l for l in open('c')]))
As for the run button, you should be able to inspect the page and see what the code for it is. I'm guessing it's an svg or image.

RYANTADIPARTHI (6019)

@InvisibleOne sorry by chatroom, i don't mean a console one. I meant an actual web chatroom.

InvisibleOne (2931)

I know, I was joking around, I'm gonna grab the code for a little one I built a while ago. @RYANTADIPARTHI

LAMAQDAHODWALA (61)

I'm not a CSS pro, but i would imagine that you would have a button with an svg inside it. Or, you could make the whole button svg and with no CSS required. Then, just make an onclick element in your javascript.

LAMAQDAHODWALA (61)

Uh, so you could probably use something like Figma to make the SVG, then you can add it to the HTML, and add an onclick element.

index.html
<svg id='run-button'></svg>

script.js:

document.getElementById("run-button").onclick = function(){
   // do whatever
}

@RYANTADIPARTHI

RYANTADIPARTHI (6019)

@LAMAQDAHODWALA thanks, but i said i want the exact thing, this doesn't really fulfill that. Could you give the exact button with colors and hover? Also if you could do my second question too.

RoBlockHead (520)

@RYANTADIPARTHI spoon feeding ain’t cool. Don’t ask for exact answers if you aren’t putting in work to get them. Try to make it yourself first or use inspect element or somethin.

RYANTADIPARTHI (6019)

@RoBlockHead inspect is blocked for me. And I don't really know css, so there's nothing I can do.

RYANTADIPARTHI (6019)

@LAMAQDAHODWALA hi are you done with the button? Please let me know when you are. Thanks!