Tip jar

If you like CaB and wish to support it, you can use PayPal or KoFi. Thank you, and I hope you continue to enjoy the site - Neil.

Buy Me a Coffee at ko-fi.com

Support CaB

Recent

Welcome to Cook'd and Bomb'd. Please login or sign up.

March 28, 2024, 12:11:17 PM

Login with username, password and session length

Help with making a website

Started by BeardFaceMan, January 26, 2018, 08:54:04 PM

Previous topic - Next topic

BeardFaceMan

All I want to do is something simple, a blank webpage with a button you click with the mouse and an empty box underneath. When you click the button, a line of text appears in the box. Press it again and a different line of text appears. And thats it. Do I need some kind of database with all the lines of text in it? And then a bit of code that randomly selects a line of text from the database each time the button is clicked? Is this simple to do? Bear in mind I'm a bit of an idiot.

Zetetic

How many different lines did you have in mind? (Do you have any requirements about having to update them?)

Does it matter if a determined person can read all of the lines?

Twed


BeardFaceMan

Around a hundred different lines of text, not really essential though, it could be less. Would be nice if I could add to the database as I go, but again, not essential. Same with people being able to read all the lines, it would be nice if they couldn't but it wouldnt really spoil things if they could.

BeardFaceMan

Quote from: Twed on January 26, 2018, 09:23:54 PM
https://jsfiddle.net/hpjyjxg6/2/

Thats basically it, thanks you.  But like I said, I'm a bit of an idiot. So at the moment that would randomly display either "one" "two" "three" or "four"? And I could put sentences inside the quotes instead and that would work? And I could just carry on adding them, as many as I like?

Twed

Yep. Go ahead and change the code above and press "run" and then try it!

BeardFaceMan


BeardFaceMan

Fucking hell I'm bad at this. I had a decent stab at doing a proper website a few years ago but I just can't seem to wrap my head around it now. I've tried a few website building programs but they generally don't allow you to edit the code, it's all drag and drop, so I can put a button on a page easy enough but don't know how to link it to pick randomly from a database. So there's no way to do that with the html code, I need to use JavaScript?

QDRPHNC

For the site, give WordPress a go. I've been using a great. WordPress backend called Tatsu lately.

The randomization thing sounds simple, I'd be surprised if there isn't some WP plugin that could do it.

Sebastian Cobb

I wouldn't bother with wordpress these days. There's a few cms type things that just use flat files written in markup now, much easier.

EG:
http://picocms.org/

biggytitbo

Jekyll and github pages is a popular and free option for static sites. I use the latter for mine with a custom markdown to generate the static pages, thus sidestepping the need for a database at all, and making it super fast.

Sebastian Cobb

Yeah we use github wikis to document how our stuff works, although we try and keep things light, diagrams if possible. Although I find it is a bit fiddly if you want to put pictures in.

My last place was a big IT services company that still did waterfall style projects and generating reams of documentation (both during requirements and delivery) that nobody ever read (or even find in Sharepoint [shitpoint, more like!!]) was part of the parcel and a profitable way of charging extra time to customers.

BeardFaceMan

Thanks for the help chaps but I just cant wrap my head around any of this any more. Fuck, I used to be a Speccy poke-r back in the day but programming now just confuses the shit out of me. I was just hoping to do a few lines of html in notepad, save as index.html and upload it somewhere, that's about the extent of my abilities at the moment.

Consignia

Twed's given you the bones of a website, it shouldn't need much more than that. You should be able to put it in a single html file and stick it on a webserver somewhere, if all you want to do is a random text from a button.

I mean here's an example I knocked in a few seconds using Twed's stuff and some random Bootstrap template I knicked:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Easy as Pie for BeardFaceMan</title>

    <!-- Bootstrap core CSS -->

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>


  </head>

  <body>

      <script>
        var messages = ["one", "two", "three", "four"]

        function putMessageInBox(boxId) {
            var message = getRandomMessage();
            document.getElementById(boxId).innerText = message;
        } 

        function getRandomMessage() {
        return messages[Math.floor(Math.random() * messages.length)];
        }
      </script>


      <div class="container">
        <div class="jumbotron">
            <h1 id="messageBox" class="display-3">zero</h1>
            <p><button class="btn btn-lg btn-success" onclick="putMessageInBox('messageBox')">Click Me Mofo</button></p>
        </div>
      </div>


  </body>
</html>


Stick that in a HTML file and bob instanceof Uncle.

BeardFaceMan

Hehe like I said, I'm having a complete brainfart with this stuff, even though its stuff I've learned before and forgotten. The thing with Tweds example was it was split into 2 bits and I must have been putting the javascript in the wrong place when copying it to notepad, I couldn't get it to work, it was just displaying the code. Thanks for your patience, I'll try what you posted.

Consignia

I think the real thing is just to tinker with these things. I was trying to just quickly knock together something to show you how simple this stuff can be. Hope it didn't come across as condescending, I wanted help inspire.

BeardFaceMan

Quote from: Consignia on February 08, 2018, 09:57:24 PM
I think the real thing is just to tinker with these things. I was trying to just quickly knock together something to show you how simple this stuff can be. Hope it didn't come across as condescending, I wanted help inspire.

No, condescension is good, I need this shown and explained to me like I'm a drooling, shit-slinging idiot. Last time I did this was about 10 years ago using Dreamweaver,  but it was a site with multiple pages, multiple images making up backgrounds and headers, contact forms, tables, all sorts of shit and I'm just blanking on everything, can't even do the basics right anymore. I reckon I could make a clickable link if I had to and thats the sum total of my current knowledge. Are there any good online resources for learning the basics? If I start googling I'll just get confused again, I think im going senile early.

Sebastian Cobb

Quote from: Consignia on February 08, 2018, 09:57:24 PM
I think the real thing is just to tinker with these things. I was trying to just quickly knock together something to show you how simple this stuff can be. Hope it didn't come across as condescending, I wanted help inspire.

Are the js imports necessary in that? It works without them.

BeardFaceMan

Quote from: Consignia on February 08, 2018, 09:57:24 PM
I think the real thing is just to tinker with these things. I was trying to just quickly knock together something to show you how simple this stuff can be. Hope it didn't come across as condescending, I wanted help inspire.

Yeah that's basically all i want, cheers. I can just mess around with formatting to center it and put the button above the text and it'll be done. Only one question, when I tried it with some text of my own I included '£' but it displays as a question mark inside a black diamond, is that easily fixed? Ooh and also, when i load the page up for the first time it still displays 'zero' as text even though I replaced zero with some other text. Hehe sorry, that's what's putting me off with all this, even the simplest things need endless fucking about and tinkering. Time to file 'programming' along with 'Adult Swim' and 'people who don't like music' under 'things I just don't get and are not for me'.

Twed

Quote from: BeardFaceMan on February 09, 2018, 11:28:15 AMwhen I tried it with some text of my own I included '£' but it displays as a question mark inside a black diamond, is that easily fixed?
Set your text editor to use UTF-8 as a character encoding and save the file again.

Pseudopath

Quote from: BeardFaceMan on February 09, 2018, 11:28:15 AM
Ooh and also, when i load the page up for the first time it still displays 'zero' as text even though I replaced zero with some other text.

Hmm...doesn't do that for me. Did you definitely change the text on line 39?

<h1 id="messageBox" class="display-3">This is the bit you need to change</h1>

If you've definitely done that, it sounds like a browser caching issue. Try pressing Ctrl + F5 to force a full refresh.

biggytitbo


BeardFaceMan

Hehe shit, going to have to abandon this, thanks for trying though fellas. Thought I'd have a mess around with it and I wanted to have the button above the text so cut out the div bit and put it above the script bit but the button is still below the text. How the fuck does that not work?

Twed

The script bit isn't a visual element, it's just a block of logical instructions that are invoked when the button is clicked. In terms of layout it doesn't matter where it appears.

You need to move the <h1> bit below the <p><button> bit in Consignia's example. The message appears in the <h1>

BeardFaceMan

By jove I think I may have cracked it, I even worked out how to center it all. Be proud of me! Also, thank you lots.

BeardFaceMan

So if I wanted to change the size or style of the text, I'd need to make my own CSS sheet and upload it to the directory my index file is in? Or can I just modify my index file?

Pseudopath

Quote from: BeardFaceMan on February 17, 2018, 10:29:36 AM
So if I wanted to change the size or style of the text, I'd need to make my own CSS sheet and upload it to the directory my index file is in? Or can I just modify my index file?

You could do that, but if you're using Consignia's template (which uses Bootstrap), you'd be better off using its built-in typography classes to modify the text. For example, changing the <h1 id="messageBox" class="display-3"> to <h1 id="messageBox" class="display-1"> will make the text huge. Using <h1 id="messageBox" class="display-4"> will make it slightly smaller.

If you find that too arduous, you could use inline CSS to give the element the exact font size you need (for example, <h1 id="messageBox" style="font-size: 15px;">, but mixing inline styles with a framework certainly isn't best practice.

BeardFaceMan

Quote from: Pseudopath on February 17, 2018, 02:05:56 PM
You could do that, but if you're using Consignia's template (which uses Bootstrap), you'd be better off using its built-in typography classes to modify the text. For example, changing the <h1 id="messageBox" class="display-3"> to <h1 id="messageBox" class="display-1"> will make the text huge. Using <h1 id="messageBox" class="display-4"> will make it slightly smaller.

If you find that too arduous, you could use inline CSS to give the element the exact font size you need (for example, <h1 id="messageBox" style="font-size: 15px;">, but mixing inline styles with a framework certainly isn't best practice.

That'll do me, cheers.

BeardFaceMan

https://sadhappysad.000webhostapp.com/

Thanks for the help chaps, all that fucking around for that. I was just looking for a little distraction project really, I should try and pick apart that code, see if I can understand what the fuck is going on. Or just stop being so dense and learn stuff that they teach children.

BeardFaceMan

#29
Is there any way I can replace the lines of text with links to images so every time you press the button you get a different random image?

ETA I'm having a look at some of these online webpage builders, they all look and function pretty much the same and are absolute dogshit. Like I said, the last time I fucked around with this was on Dreamweaver, are there any good webpage building programs out there, can't get on with these online ones at all, some of them won't even let you use a blank page as a template.