Assalam u alaikum friends hope you will be fine!
Today in this tutorial we will create a small project which is Definition Generator i called it as Definator.
Idea: It is a small project where user will type any meaningful english word in input and as a user click on Generate Definition button then we will run a function that will add our word in api and then it will show the response in textbox we have created for Definition Holder.
There is video tutorial you can watch it here make sure to Subscribe Channel and like video
Let' Start
Write HTML
First create a folder with the name Definator and then right click and open it with Vs Code.
Create a new file index.html and add following HTML in it.
Html code will be added here
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Definator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<h3>Welcome to Definator</h3>
<p>Here you can easily get definition of any English Language word!</p>
<div class="form">
<label for="word">Enter any English word</label>
<input type="text" id="word" placeholder="e.g, Science">
<button onclick="writeDefinition()">Write Definition</button>
</div>
<div id="result">
<h1>Word <span id="showword"></span>'s definition</h1>
<textarea id="definition" rows="10" placeholder="Definition is coming soon..."></textarea>
</div>
</section>
</body>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="script.js"></script>
</html> Description: In this html first of all i have added basic html code and linked with css then in body tag a section where we will display all our elements in which first i have added <h3> and <p> tag. And then create a div with class form in which i have added a label and input tag with Generate Definition Button and after that there is a result container where i have added a heading that show the user's searched word and below that there is a textarea where user will see the definition which readonly.
Add CSS
After that create a new file and add following css in it make sure you are connected with internet because it will load Rubik font from Google if you wants to continue default fonts then you can use it without Internet.
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@500&display=swap');
*{
margin: 0%;
padding: 0%;
background-color: rgb(227, 227, 227);
}
section{
width: 100%;
padding: 10px;
}
section > h3 {
color: blueviolet;
font-family: Rubik;
font-size: 45px;
text-align: center;
padding: 50px 0px 0px 0px;
}
section > p {
color: rgb(60, 60, 60);
font-family: ebrima;
text-align: center;
padding: 2px 0px;
}
#showword{
color: white;
background-color: transparent;
font-family: ebrima;
text-align: center;
padding: 2px 0px;
}
section > .form {
margin: 30px auto;
padding: 20px;
width: 40%;
background-color: rgb(54, 54, 181);
border: 0;
border-radius: 5px;
}
section > .form > label{
color: white;
background-color: transparent;
font-family: ebrima;
font-size: 14px;
padding: 2px 5px;
display: block;
}
section > .form > input{
margin: 3px 0px;
width: 60%;
padding: 10px;
font-size: 15px;
outline: none;
border: 1px solid gray;
border-radius: 5px;
caret-color: blue;
color: rgb(54, 54, 181);
}
section > .form > input:hover{
border: 1px solid white;
}
section > .form > button{
margin: 3px 0px;
width: 30%;
font-size: ebrima;
color: white;
background-color: transparent;
padding: 10px 5px;
font-size: 15px;
border: 2px solid rgb(255, 255, 255);
border-radius: 5px;
transition: all 0.4s;
}
section > .form > button:hover{
background-color: white;
border: 2px solid transparent;
color: blue;
}
section > #result {
margin: 30px auto;
padding: 10px 5px;
width: 60%;
background-color: rgb(54, 54, 181);
border: 0;
border-radius: 5px;
}
section > #result > h1{
color: white;
background-color: transparent;
font-family: ebrima;
font-size: 20px;
text-align: center;
padding: 10px 0px;
}
section > #result > textarea {
width: 90%;
font-family: ebrima;
padding: 5px;
margin: 2px;
margin-left: 20px;
outline: none;
color: black;
border: 1px solid whitesmoke;
border-radius: 5px;
resize: none;
}
section > #result > textarea::placeholder{
font-family: ebrima;
}Add JavaScript
After adding CSS now create a new file script.js where paste this javascript code and then other code we will add it soon.
function writeDefinition(){
let definitionholder = document.getElementById('definition');
let showword = document.getElementById('showword')
let word = document.getElementById('word').value;
showword.innerText = word;
definitionholder.innerText = 'Loading...' }In above code we have get the value of word that we will show on showword span and then we will add this word in our api link.
Work with API
After adding this open chrome and go to Ninja API website and in API directory find Dictionary API and then scroll to Code Example Section then click JavaScript tab and copy the code.
Visit:
This is the code of Dictionary API
now add this code in our JavaScript File.
But this link will not work because you have not added API key here and here we will modify our response. We will get definition from response and add them in textarea.
Here we have added condition which will appear when user searches invalid word.
Get API Key
Now Go to Ninja website and then create account if you have not or login and click on My Account and then click on Show API button and copy your api key and then paste it in your Script File.
Project is Ready!
Now open your index.html file and connect it with internet. There is limit on API from Ninja so make sure control your usage.
So here it looks like this
Thanks For Reading! Make sure to Subscribe Channel and Follow on Facebook and on Whatsapp Channel and allow notifications from our blog.
0 Comments