The word meaning application

 

Word Meaning In Java Script

Hello Coder! Welcome To The Codewaksh Blog. In This Blog, We Learn How To Write A Program Of word meaning  By Using Html and Css, Javascript. We Make Meme Generator for web site.

I Hope You Enjoy Our Blog So Let’s Start With A  Html , css and javscruipt For word meaning .

OverView of Project

Compatible Browers: Chrome, Edge, Firefox, Opera, Safari, etc
Responsive: Yes

How to make word meaning  using HTML, CSS?

HTML

 <section class="box">
    <div class="content-box">
      <h2 class="title">Dictionary Application</h2>
      <input type="text" id="word" placeholder="Type Here You'r Word">
      <button id="btn">Submit It</button>
        <span class="result-header">Word Explanation</span>
        <p id="result">The definition of word will appear here</p>
    </div>
  </section>

Explanation of Above Code <3,

• The code starts with a tag.
• This is the start of a new section in the HTML document.
• The box will be used to display content, so it has an id called "content-box".
• Next comes a div element that contains all of the code for this section.
• It also has an id called "title" and an input type="text" with placeholder text set to "Type Here You'r Word".
• This is where users can enter their word into the application.
• Next comes a button element which has an id called btn and on click event listener attached to it.
• When clicked, it submits whatever was typed into the input field as well as displaying what was typed in its place on screen (the result-header).
• After that there's another span element which contains some text about what happens when you submit your word: The definition of word will appear here
• The code will display the word "Dictionary" with an explanation of what it means.

CSS

*{
  margin: 0%;
  padding: 0%;
  box-sizing: border-box;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
/* width */
::-webkit-scrollbar {
  width: 0px;
}
.nav-credit{
  position: absolute;
  right: 10px;
}
.box{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-image: url('https://parade.com/.image/t_share/MTkwNTgx
                            NDY5Mzk2NjczNjYx/earth-facts-jpg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}
.box .content-box{
  margin: 50px;
  padding: 15px;
  border-radius: 4px;
  background-color: #fff;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 10px;
  transition: .5s ease-in;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
  width: 100%;
  max-width: 800px;
}
.box .content-box:hover{
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
.box .content-box .title{
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: .5px;
}
.box .content-box #word{
  width: 90%;
  height: 45px;
  padding: 0px 20px;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
  border: none;
  outline: none;
  font-size: 1.3rem;
}
.box .content-box #btn{
  width: 60%;
  height: 30px;
  border: none;
  outline: none;
  background-color: #07315b;
  color: #fff;
  font-weight: 800;
  letter-spacing: .5px;
  border-radius: 4px;
}
.box .content-box .result-header{
  font-size: 2rem;
  font-weight: 800;
}
.box .content-box #result{
  padding: 0px 10px;
  font-size: 1.2rem;
}
.box .content-box .para-first-letter{
  font-size: 2rem;
  color: #07315b;
}

Explanation of Above Code <3,

In this CSS we give style all the elements and give proper padding, color, margin and better looks. Also we have import the google font in CSS.

copy all the CSS code and paste all these into your CSS file.

Css is All is you'r mind.   make sure do you'r best in css file <3

Java Script

let Button = document.getElementById('btn')
const find = () =>{
  let resultHeader = document.querySelector(".result-header")
  let Result = document.getElementById('result')
  let userInput = document.getElementById('word').value
  const url = `https://dictionary-by-api-ninjas.p.rapidapi.com/v1/dictionary?word=${userInput}`;
const options = {
  method: 'GET',
  headers: {
    'X-RapidAPI-Key': '86c3cc801dmshec4946e961dd937p10706djsnacdc79b9286a',
    'X-RapidAPI-Host': 'dictionary-by-api-ninjas.p.rapidapi.com'
  }
};
fetch(url, options).then(response => response.json()).then((data)=>{
  Result.innerHTML = `<span class="para-first-letter">Definition</span> :- ${data.definition}`
  console.table(data)
}).catch((err)=>{
  console.log(`something went wrong`)
})
}
Button.addEventListener('click', find)

Explanation of Above Code <3,

• The code starts by creating a button with an id of "btn".
• The function find() is then created.
• This function will be called when the user clicks on the button.
• Inside this function, we first get a reference to the header element that has class="result-header" and set it as resultHeader.
• Then we get a reference to our div with id of "result" and set it as Result.
• Finally, we grab the value from our input field with id word and use that value in url which points to dictionary-by-api-ninjas.p.rapidapi.com/v1/dictionary?word=hello The next step is setting up some options for fetching data from RapidAPI using headers X-RapidAPI-Key: 86c3cc801dmshec4946e961dd937p10706djsnacdc79b9286a and X-RapidAPI-Host: dictionary-by-api-ninjas.p.rapidapi.com
• The code will take the word that is typed in by the user and then it will fetch the definition of that word from a dictionary website.

You can also add your mind java script as per your sure.

Thank You!

Learn how to create a word meaning application using HTML, CSS, Javascript. in this article. Please leave a comment if we made a mistake or there was any confusion so we can respond or make learning easier for you.