So many questions from a newb- Converting to express? Hiding text under a 3rd party div/form/script? AND SECRET PAGES

Coding Help
1

Hi all, I’m using glitch to build/host an art portfolio. I have an OK understanding of HTML and CSS and I know how to copy and paste things into .js, but not what the different .js files even do (such as server.js or anything to do with .json)
I enjoy the problem solving aspect of coding but have some specific questions.

  1. First of all, I started with a copy of a hello-world project but noticed a couple things I might want to do (so far I’ve found workarounds - like hiding the .html in the URL) might require express. Can I just copy the layout of express into my existing website if needed or will I need to copy the html and css files into a new express project for whatever sneaky reason? I didn’t even know this was a thing hosted on Glitch until I tried to make an example site for this post. I’m asking because the existing project is connected to a custom domain which was just slightly annoying to do, but I might still want to use some of the node functions?

  2. I used typeform to create an interactive contact me form that lives inside a div. Sometimes it takes a few seconds to load, and I would like it do display plain text UNTIL it loads providing some info for the page incase the script fails or takes too long and the user gets bored and leaves. I tried using alt text at different points in the code or changing the position of it to absolute or fixed, but the text either displayed all the time above the element, or not at all ever. Basically it looks like this right now in the .html:

<div class="cui-embed" style="top:1px;height: 100vh; width: 100%;" data-cui-uid="sxccqQy8" data-cui-avatar="https://images.typeform.com/images/75skBFrJQsuF" data-cui-mode="widget" data-cui-pill-button-color="#0000FF" ></div><script src="https://public-assets.typeform.com/confab/embed.js" async></script>

  1. I want to create a secure, password-protected entire page that features 8 images and a couple pdf download links… or possibly a flipbook (see #4) Basically as a pay-to-see situation. A log in name is not necessary but a way to record IP address’s when visited would be fancy. (I have looked at this post: Share secrets on Glitch and understand it about 20%, but will be using it as a reference)

  2. (bonus:) How to hand-code an interactive flipbook that does the page flippy animation? Crazy I know. I’m not actually worried about this yet but thought I’d throw it out there with the rest of my goals. Something like this: https://fliphtml5.com/examples/set-up/index.html

edit to add regarding #2: Fixed using z-index:-1 and position properties

1 Like
2

This is NOT a good way to learn to code. You absolutely must understand, at the very least, what the server.js file does. Look up “Express Node.js Server Tutorial” to get a basic grasp of backend apps. Please don’t just copy and paste code!

Here’s a nice, clear tutorial: How To Get Started with Node.js and Express | DigitalOcean

If you want this to happen (along with the IP logger) you would probably need a backend structure/authentication system. You could potentially hide the page underneath a full-width div that doesn’t become display: none unless the password typed is correct, but people could very easily inspect element and manually change the visibility so they can see the stuff underneath.

For what you’re trying to do, you should probably work with Node and Express for a little, and then come back to this project.

Hope this helps!

3 Likes
3

Yes I agree, I mostly put this here so that anyone answering would understand what level I’m at. Thanks for the link, I do intend to keep learning about these things! The copy/paste is mostly just for testing functions and fiddling with them to see what they do.

This is very fair advice. Thanks for your quick reply!

1 Like
4

Great to hear! Good luck with the project, and if you want a collaborator I’m always around :+1:

1 Like