Question

Please Use JavaScript and P5

1) Greeter

Create an page with an input, and a button. When the button is clicked, output the phrase "Hello {Name}" to the developer console, with {Name} being the value the user put into the input field.

Use a function that takes the name as an argument, and returns the full phrase as its output.

Answer 1

Code:

let input, button, greeting;

function setup() {
  // create canvas
  createCanvas(710, 400);

  input = createInput();
  input.position(20, 65);

  button = createButton('submit');
  button.position(input.x + input.width, 65);
  button.mousePressed(() => {greet(input.value())});

  greeting = createElement('h2', 'what is your name?');
  greeting.position(20, 5);

  textAlign(CENTER);
  textSize(50);
}

function greet(name) {
  greeting.html('Hello ' + name);
  input.value('');
  console.log("Hello " + name);
}

Code screenshot:

Output Preview before giving input:

Output Preview after giving input:

Developer console output: