jQuery

<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style type="text/css">
<!-- Your CSS code goes here -->
<!-- ``` -->

<!-- CSS: -->

<!-- ``` -->


#virtualKeyboard {
  display: none;
  width: 100px;
  height: 100px;
}

#keyboardInput{
  width: 850px;
  height: 100px;
          font-family: arial;
           font-size: 72px;
}

.key {
  width: 120px;
  height: 120px;
  margin: 5px;
           font-family: arial;
           font-size: 96px;
}

.letter {
  text-transform: lowercase;
}

#my-button{
           font-family: Courier New;
           font-size: 56px;
           background-color: #F5DEB3;
}

#my-paragraph{
           font-family: Courier New;
           font-size: 72px;
}
<!-- ``` -->

</style>

</head>
<body>

<!-- Your HTML code here -->
<p id="my-paragraph">Hello, Ronnie!</p>
<p><input type="text" id="keyboardInput"></p>
<div id="virtualKeyboard">
  <div class="row">
    <button class="key">1</button>
    <button class="key">2</button>
    <button class="key">3</button>
    <button class="key">4</button>
    <button class="key">5</button>
</div>
<div class="row">
    <button class="key">6</button>
    <button class="key">7</button>
    <button class="key">8</button>
    <button class="key">9</button>
    <button class="key">0</button>
  </div>
  <div class="row">
    <button class="key letter">a</button>
    <button class="key letter">b</button>
    <button class="key letter">c</button>
    <button class="key letter">d</button>
    <button class="key letter">e</button>
    <button class="key letter">f</button>
 </div>
          <div class="row">
    <button class="key letter">g</button>
    <button class="key letter">h</button>
    <button class="key letter">i</button>
    <button class="key letter">j</button>
    <button class="key letter">k</button>
    <button class="key letter">l</button>
 </div>
<div class="row">
    <button class="key letter">m</button>
    <button class="key letter">n</button>
    <button class="key letter">o</button>
    <button class="key letter">p</button>
    <button class="key letter">q</button>
    <button class="key letter">r</button>
 </div>

  <div class="row">
    <button class="key letter">s</button>
    <button class="key letter">t</button>
    <button class="key letter">u</button>
    <button class="key letter">v</button>
    <button class="key letter">w</button>
    <button class="key letter">x</button>
  </div>
<div class="row">
    <button class="key letter">y</button>
    <button class="key letter">z</button>
<button id="my-button">Best Day Ever!</button>
 </div>


  <!-- add special keys like backspace, enter, shift, etc. -->

</div>
<Br/>

<script>
     <!-- // Your jQuery code here -->
<!-- jQuery: -->

<!-- ``` -->
<!-- This code creates a virtual keyboard that appears when the user clicks on an input field. When a key is clicked, its value is added to the input field. This is just a basic example and can be customized further to add more functionality and features. -->
$(document).ready(function() {

  $('#keyboardInput').click(function() {
    $('#virtualKeyboard').toggle();
  });

  $('.key').click(function() {
    var value = $(this).text();
    var currentValue = $('#keyboardInput').val();
    $('#keyboardInput').val(currentValue + value);
  });

  $('#my-button').click(function() {
    $('#my-paragraph').text("The text Ronnie typed is: " + $('#keyboardInput').val());
$('#keyboardInput').val("");
  });

});
<!-- ``` -->
</script>

</body>
</html>