1

I'm completely amateur to programming but i want to create a weird program. The program - gui or i don't know how to call it, will be like this. The first page will have some clickable buttons, like this [1]: https://i.stack.imgur.com/pqAXN.png Each button will lead to a page with other buttons. These button will copy page a random message when i click them. They will copy the message to a selected place, a text file, on browser and anything that can accept text and it's currently selected.

What programming languange do i need to use for a program like this? Is there any program that can make programming button with "one click"? I'm completely amateur so any help will be really appriciated.

mikegreek
  • 13
  • 2

1 Answers1

0

I recommend you start with HTML + Javascript. You can get something up and running very quickly. W3schools might be a good starting point.

The following code snippet has the 3 buttons you mentioned and displays a different message when you click on each one of them. Run this code snippet to interact with it: 

<!DOCTYPE html>
<html>

<body>

  <h1>Categories</h1>

  <button type="button" onclick="alert('I love cars!')">Cars</button>
  <button type="button" onclick="alert('I love food!')">Food</button>
  <button type="button" onclick="alert('I love music!')">Music</button>

</body>

</html>

Update 1

Write the following snippet in a new file page.html then open it with your browser to interact with:

<html>

<body>

  <h1>Categories</h1>

  <button type="button" onclick="alert('I love cars!')">Cars</button>
  <button type="button" onclick="alert('I love food!')">Food</button>
  <button type="button" onclick="alert('I love music!')">Music</button>


  <h1>Download</h1>

  <button type="button" onclick="download('cars.txt', 'I love cars!')">Cars</button>
  <button type="button" onclick="download('food.txt','I love food!')">Food</button>
  <button type="button" onclick="download('music.txt','I love music!')">Music</button>

  <h1>Paste Message</h1>

  <button type="button" onclick="document.querySelector('#q').value = 'I love cars!'">Cars</button>
  <button type="button" onclick="document.querySelector('#q').value = 'I love food!'">Food</button>
  <button type="button" onclick="document.querySelector('#q').value = 'I love music!'">Music</button>

  <h1>Search</h1>
  <form action="https://google.com/search">
    <input type="text" id="q" name="q" />
    <button type="submit">Search Google</button>
  </form>

</body>

<script>
  // https://stackoverflow.com/a/55784352/260229
  function download(filename, data) {
    let a = document.createElement('a');
    a.href = "data:application/octet-stream," + encodeURIComponent(data);
    a.download = filename;
    a.click();
  }
</script>

</html>

Update 2

<html>

<body>

  <h1>Categories</h1>

  <button type="button" onclick="alert('I love cars!')">Cars</button>
  <button type="button" onclick="alert('I love food!')">Food</button>
  <button type="button" onclick="alert('I love music!')">Music</button>


  <h1>Download</h1>

  <button type="button" onclick="download('cars.txt', 'I love cars!')">Cars</button>
  <button type="button" onclick="download('food.txt','I love food!')">Food</button>
  <button type="button" onclick="download('music.txt','I love music!')">Music</button>

  <h1>Paste</h1>

  <button type="button" onclick="document.querySelector('#q').value = 'I love cars!'">Cars</button>
  <button type="button" onclick="document.querySelector('#q').value = 'I love food!'">Food</button>
  <button type="button" onclick="document.querySelector('#q').value = 'I love music!'">Music</button>

  <h1>Search</h1>
  <form action="https://google.com/search">
    <input type="text" id="q" name="q" />
    <button type="submit">Search Google</button>
  </form>


  <h1>Clipboard</h1>
  <button type="button" onclick="cp('I love cars!')">Cars</button>
  <button type="button" onclick="cp('I love food!')">Food</button>
  <button type="button" onclick="cp('I love music!')">Music</button>
  <button type="button" onclick="cls()">Clear History</button>

</body>

<script>
  // https://stackoverflow.com/a/55784352/260229
  function download(filename, data) {
    let a = document.createElement('a');
    a.href = "data:application/octet-stream," + encodeURIComponent(data);
    a.download = filename;
    a.click();
    document.body.removeChild(a);
  }

  let mem = []
  function cp(text) {
    mem.push(text)
    let history = mem.join('\n'); // each entry is separated with a new line
    navigator.clipboard.writeText(history);
    alert(history);
  }
  function cls() {
    mem = []
  }
</script>

</html>
Mahmoud
  • 9,729
  • 1
  • 36
  • 47
  • This w3schools website is what i needed to practice my skills but about the code i want something different. I want each button to paste a specific message. For example when i click the button "Cars" i want to paste the message "I Love Cars" in the selected place (text file or browser search or anything or something else than can accept text). Instead of alerting the message, is there any way to paste this message onClick? – mikegreek Nov 28 '20 at 09:51
  • @mikegreek I have updated my answer, is that what you are looking for? – Mahmoud Nov 28 '20 at 11:08
  • It's exactly what i was looking for. Thank you so much for the help. Lastly, i wonder if there is any way to paste the message outside of the website. For example, in an already open word or excel file. Also is there any way that the messaged will copied next to each other, instead of deleting the previews ones? Like this "I love car I love music" Sorry for my bad English and again thanks for your help – mikegreek Nov 28 '20 at 11:54
  • @mikegreek Updated my answer with a copy to clipboard example. – Mahmoud Nov 28 '20 at 12:57
  • Thank you! If you also know any html visual website offline builder (allow me to costumize and move the buttons in few clicks) it will be perfect to start my project – mikegreek Nov 28 '20 at 15:22
  • I recommend not using a visual editor, but if you insist: https://bootstrapstudio.io/ – Mahmoud Nov 28 '20 at 15:46