Creating buttons that will copy a message - Some button will lead to other page with other buttons

user_14721792 0
Viewed 81

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.

button user-interface
1 Answers

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>
user_2602290
Related