index.html

<html>
    <head>
        <meta charset="UTF-8">
        <style>

::-webkit-scrollbar {
    display: none;
}


          body {
            height: 100px;
            width: 280px;
            outline: none;
        
            
          }

          #wordlist li:hover{
              background-color:darkgoldenrod;
              color: aliceblue;
              
              
          }
          #wordlist{
              height: 140px;
            overflow-y:auto;
          }
     
          
   
   
        .paddingleft{
            padding-left: 10px;
        }
          
          input {
              width:200px;
              height:30px;
              font-size: large;
               
          }
          .mainbody {
                height:450px;
                /*border: solid #eee;*/
                /*border-width:1px 0;*/
            }

          .header {
                /*height: 60px;*/
                padding: 5px;
            }

            a:link{
                color:blueviolet;
            }
            a:visited{
                color:blueviolet;
            }
            #resultDiv {
                height: 180px;
                overflow-y:auto;
            }

            #bigtitle {
                font-size: xx-large;
                color:blueviolet;
                font-family: cursive;
            }



        </style>
      </head>

    <body>
    <div class="container">
        <div class="header">
            <span id="bigtitle">Translated</span>
            
            <span><a href="help.html">help</a></span><br>
            
            
            
            
            
            
        </div>

        <div class="mainbody">
            <br>
            <span style="color:blueviolet;">- Type a word and press ENTER</span>
            
            <div class="paddingleft"><br><input id="searchinput" type="text" ><a id="MP3Play" href="#"><img src="sound.png" alt="play">
            <audio id="wordMP3" src="https://dictionary.blob.core.chinacloudapi.cn/media/audio/tom/b5/a7/B5A79061B96D65F36C2B250AC8A448AD.mp3" ></audio>
            </a></div>
            
            

                <div id="resultDiv">

                </div>
                <br>
                <span style="color:blueviolet;">- History of query:</span><a id="clearall" style="float:right;" href="#">remove all</a>
                <ul id="wordlist">
                </ul>
                <br>
        </div>
        

        <div class="footer">
            <br>
            <hr>
        
            <span style="font-family: cursive;" id="thequote">Impossibilities are merely things which we have not yet learned.</span><br>
            <span style="float:right;font-family: cursive;" id="theauthor"> --Maya Angelou</span>
        </div>
    </div>
   
      <script src="index.js"></script>
    </body>
  </html>