Is there a way I can make an html file with discord.js data?

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

https://ejs.co/ https://www.codementor.io/@naeemshaikh27/node-with-express-and-ejs-du107lnk6

2 Likes

How can I add a line break (br) in between each name?

You can add line breaks like this: <br>

That didn’t work, I’ve already tried it.

Try this: <br/> and/or \n

Already did, any other way?

Not sure…

@HK420
You’ll need to use a forEach loop, like I did here for @anon43649539:


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?

<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…

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

Your project seems to be coming along pretty fast! I haven’t coded too much recently :sweat_smile:
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

xD, that’s gonna come later hehe, be ready.