Library help for Javascript

Code Help HTML/CSS/JS
21

Use the nodejs template instead of the HTML, CSS, JS, as nodejs is only backend, and HTML, JS, CSS is only frontend.

22

So after so many tears, I’ve decided to instead just embed it. Few problems now.
First: Because it’s blocked-based, it has a green flag and a stop sign. But when I change the “type” of block-based code to its more advanced version, it adds things the user doesn’t need to see.

Second: It’s supposed to have you download a TXT file, but that doesn’t work. I understand why, so instead now I want it to add to the user’s clipboard. How would I go about that?

23

Hey, could you share the link to the repl?

24

I’ll share what I changed it to because I changed it a few times. I also added a “clipboard” library.
[ Replit ] [ Snap! Berkeley ]
Another thing is that I need “JavaScript Extensions” enabled automatically which I need to figure out too.

Note: I’m having trouble replying because I’m doing it too much.

25

To sum this up, either I have it try to download a txt file (no JS issues) or copy to clipboard (no downloading issues)

Use HTML, CSS, JS or Node.js
Ive been deleating and creating a lot of repls and this has been going for awhile.

EDIT: I also need to know the right libraries to get with Node.js

26

Note: Node js is for backend ( servers and logins and stuff like that)

1 Like
27

Will it help to load things faster? If not then I need HTML, CSS, and JS. I’ll learn how to enable JS Extensions, allowing it to add text to the clipboard. If it does then I might stick with it, due to most times while loading the project (~1.5 MB XML¹) google won’t respond², I just press wait and it does load.

¹: “Snap! Berkeley” uses XML to save, load, import/export just about everything

²: Im guessing it loads all of it at once which takes a lot of computing power, instead of loading it bit by bit.

28

Welcome to the community!

So I looked at both of these to see if I could help.

First, the project is private, so you need to make it public somehow before this will work.

image
image560×552 61 KB

Second, you need to put stuff in index.js on your Repl or it won’t work (because it’s a NodeJS Repl, it needs NodeJS to work).

Third, unless I missed something, all you need to do is copy the iframe embed from the Snap! Berkely page and put that into an HTML file (which you did but it doesn’t work because the NodeJS is not set up). Therefore, you should be able to just use a normal static HTML/CSS/JS Repl, copy that iframe code into the body section, and have an embedded website.

Code copied straight from Snap! Berkeley 
<iframe width="480" height="390" frameBorder=0 allowfullscreen allow="geolocation; microphone;camera" src="https://snap.berkeley.edu/embed?projectname=Better%20Password%20Gen&username=burnt%2dbutter%2dtoast&showTitle=true&showAuthor=true&editButton=true&pauseButton=true"></iframe>

I don’t think that we can fully test this until your project becomes public otherwise you’ll be the only one to know if it works.

29

First: Sorry about that, once this message is sent, it should be up. Please note that you do have to go in and edit it¹

Second: What would you recommend to put to show the HTML embed?

Third: Does that mean deleting the Node.js repel and making an HTML, CSS, JS repel instead?

¹:
1: Edit it (near the bottom left)
2: After it all loads, (you can tell because it won’t say opening project) press the thing with a white square in a bigger gray square
3: Press the cog at the top left beside the (should be for you) empty cloud and title.
4: Go down to the first checkbox below “microphone resolution” and click “JavaScript Extensions” to enable it.
5: Press the green flag to “play”

EDIT: You need JS Extensions enabled for the copy-to-clipboard function (above the “stop all” block) although maybe, this is just an idea, I can make it call to something (like a site) to run JS code to add the text to the clipboard

EDIT2: Should now be published

EDIT3: Sorry for the many edits, but to see everything, click the green flag then stop it with the stop sign. This will enable SciSnap

30
  1. Works now
  2. There are many ways to use NodeJS. This is one of them:
Summary 
const express = require("express");
const app = express();
// This should work
app.get("/", (req, res) => {
    res.sendFile(__dirname + "/index.html");
});

app.listen(3000);
  1. https://replit.com/@CoderElijah/ChessToast#index.html | Literally just pasted the iframe code into a blank Repl. The HTML code would work on your NodeJS project as well. You can change the iframe dimensions and make it full page if you want. EDIT: I have not used Snap! Berkely before and I didn’t get the program to run, but it is properly embedded in the page.
31

Okay I got the project to run but it’s tiny so you’ll want to tweak the iframe settings. It also needs JS extensions for Snap! installed.
image

32

Okay so what I did was make a new HTML, CSS, JS repel, copied the code from “index.html” ¹ then pasted it in the new HCJ² repel ³ then pasted the code you provided in your summary in “script.js”

1: Edit it (near the bottom left)
2: After it all loads, (you can tell because it won’t say opening project) press the thing with a white square in a bigger gray square
3: Press the cog at the top left beside the (should be for you) empty cloud and title.
4: Go down to the first checkbox below “microphone resolution” and click “JavaScript Extensions” to enable it.
5: Press the green flag to “play”

[ Snap! ]

Don’t fullscreen it.

¹: [ Repel ]
²: HCJ is a shorter version of HTPS, CCS, JS
³: [ My Repl ]

33

Since you are now using a static HCJ Repl, you don’t need the NodeJS code and it probably hurts your website somehow.

34

All code in script.js removed

I’m also changing some math
before it would switch a character spot [length of list]³
That means if it was 50 characters long, it would switch spots 50³
aka the standard exponential slope

But now I’m changing it to 5x¹ᐟ⁴ or something alike

I’ll try to also figure out how to enable JavaScript Extensions automatically. I’ll say when I do.

EDIT: I’m going to refine the Math to make it better

35

There is something different that I can do which is downloading a txt file, which does work! But only in Snap! so unless there’s a way for Snap! to talk to replit, I’m unsure of what to do.
Another thing is that I doubt there is or will be a way¹

Look, most of our users are wonderful people, and I’m sure you’re one of them. But we are dealing with a threat from a vanishingly small number of non-wonderful users, and with such people, we don’t want to encourage anyone to enable JS in their project because the project displays what it claims is their code. They should click “see code” and read the actual code!

I wish we were living in a different world, like the world I grew up in, where most sites on the (then) Arpanet had guest accounts with no password required. Partly that’s because not everyone could get on the net back then, but also there weren’t any banks or stores on the net, so there was no profit to be had from breaking into someone’s account.

¹: [ Source ] By ‘bh’

36

A reply to me changing the math, I just made it twice the length of the list.