HK420
September 13, 2020, 4:57pm
1
I want to make a expressjs webpage with how many users(bot.users.cache.size) and guilds(bot.guilds.cache.size) my bot is in.
app.get("/info", function (req, res) {
try {
res.status(200);
res.json({
content: {
users: bot.users.cache.size,
servers: bot.guilds.cache.size
}
});
} catch (err) {
res.json({
Error: "Something went wrong",
});
}
});
Right now, this code gives the users and servers the bot is in, in a json format. I want to put it in html with innerHTML.
you could use ejs and render the variables
HK420
September 13, 2020, 5:29pm
5
How can I add a line break (br) in between each name?
You can add line breaks like this: <br>
HK420
September 13, 2020, 7:17pm
7
That didn’t work, I’ve already tried it.
Try this: <br/>
and/or \n
HK420
September 13, 2020, 8:50pm
9
Already did, any other way?
@HK420
You’ll need to use a forEach loop, like I did here for @anon43649539 :
@anon43649539 This is the assuming you have performed a mongoose find and save the result as a variable called documents and then sent it through to the ejs file when rendering
<select>
<% documents.forEach(document =>{%>
<option value="<%=document.name%>"><%= document.name %></option>
<%})%>
</select>
But instead of using the select use a <p>
Hes asking how to do a line break
Well, I imagine they have used ejs to render the variable/array of people’s names and then it would show as
Name 1, Name 2, Name 3, etc.
E. G.
<%=myarray%>
To get a line break between each name in the array, you’ll have to use a forEach to have a line break for each one.
@HK420 Can we see your code?
HK420
September 14, 2020, 4:12pm
14
<html>
<!DOCTYPE html>
<head>
<title>Twintails🎀 Bot - Info</title>
<link rel="shortcut icon" href="https://i.imgur.com/NgV0KSf.png">
<style>
*,
html {
margin: 0;
padding: 0;
border: 0;
}
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
position: relative;
background-color: rgb(236, 152, 42);
}
.center {
width: 100%;
height: 50%;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-family: "Trebuchet MS", Helvetica, sans-serif;
text-align: center;
}
ul {
font-size: 100px;
margin-top: 200px;
}
p {
font-size: 64px;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
</style>
<style>
@import url('https://fonts.googleapis.com/css?family=Amatic+SC');
body {
margin: 0;
height: 100%;
background-image: linear-gradient(to top,#df43ab 0%, rgb(17, 194, 218) 100%);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.button_container {
position: absolute;
left: 0;
right: 0;
top: 30%;
}
.description, .link {
font-family: 'Amatic SC', cursive;
text-align: center;
}
.description {
font-size: 35px;
}
.btn {
border: none;
display: block;
text-align: center;
cursor: pointer;
text-transform: uppercase;
outline: none;
overflow: hidden;
position: relative;
color: #fff;
font-weight: 700;
font-size: 15px;
background-color: #222;
padding: 17px 60px;
margin: 0 auto;
box-shadow: 0 5px 15px rgba(0,0,0,0.20);
}
.btn span {
position: relative;
z-index: 1;
}
.btn:after {
content: "";
position: absolute;
left: 0;
top: 0;
height: 490%;
width: 140%;
background: #78c7d2;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
-webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg);
transform: translateX(-98%) translateY(-25%) rotate(45deg);
}
.btn:hover:after {
-webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg);
transform: translateX(-9%) translateY(-25%) rotate(45deg);
}
.link {
font-size: 20px;
margin-top: 30px;
}
.link a {
color: #000;
font-size: 25px;
}
</style>
</head>
<script>
function goBack() {
window.history.back();
}
</script>
<body>
<div class="center">
<ul>
<% users.forEach(function(user){ %>
<%= user.name %>
<% })%>
</ul>
</div>
<div class="button_container">
<a onclick="goBack()"><button class="btn"><span>Go Back</span></button></a>
</p>
</div>
</body>
</html>
</html>
app.set('view engine', 'ejs');
app.get('/info', function(req, res){
res.render('index',{users : [
{ name: bot.users.cache.size + " Users | " },
{ name: bot.guilds.cache.size + " Guilds | " },
{ name: "Prefix: " + prefix },
]});
});
Their all on the same line…
wh0
September 14, 2020, 5:54pm
15
Hi HK420,
Good work on what you’ve done so far. I’m sure it’s frustrating to feel like you’re in the home stretch and find out that the layout has been completely wrong. Getting that last bit right is a whole 'nother obstacle in your way. But I hope you have the energy to power through this hurdle as well. Let’s get started on it!
I see you’re using a <ul>
element to make a bulleted list. Take a look at this documentation on that: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul . Especially look at “permitted content” in that blue box. See if you can get a feel for how a working list should look in HTML even without the ejs templating stuff.
Then go back to the ejs. It looks like you have a handle on how to have it output snippets of HTML, with some of those snippets repeated for each item in an array. See if you can figure out how to get that to output something like the HTML you manually created in the step above.
And of course, let us know if you get stuck.
1 Like
HK420:
<%= user.name %>
Your project seems to be coming along pretty fast! I haven’t coded too much recently
You can try this:
<p><%= user.name %></p>
That should split each object key into a separate paragraph elem.
Good luck!
Note: I was very exited when I first saw this thread because I thought you were trying to make HTML files and store them server side and was ready for some fs action heh
1 Like
HK420
September 14, 2020, 7:31pm
17
xD, that’s gonna come later hehe, be ready.