Dictionary Application

Dictionary Application

DICTIONARY WEB APPLICATION THAT CAN BE IMPLEMENTED WITH ONE MONTH'S KNOWLEDGE OF JAVASCRIPT ONLY.

I have been coding for less than a month, and yes, I have finally completed my first ever project. I am so excited to guide you through my experience.

To begin with, my project revolves around the ability to create a web application using CSS, HTML, and javascript that is able to fetch data in JSON format from an API. It actually blew my mind that I could sit down and stare down at my computer and complete a successful working up, but definitely, I will still work on making it more efficient as I gain more knowledge in my software development conquest.

Let us kick it off with why I decided to take up this challenge and then my solution;

problem statement:

In English, there are many words we come across that we cannot quite figure out what the word means and we get stuck. If one does not have a physical dictionary what is one to do? How can one save time if he/she is working on something?

Solution statement: With a dictionary application, one is able to save time by efficiently searching out the meaning of words with a click of a button. With this, I began to put my recently gained knowledge to practice. During my study of javascript, I learned the fetch keyword that can be used to request to the server and load the information on the webpages.

As you guessed, my dictionary uses the fetch keyword to fetch the meaning of a word from a dictionary API. When a user inputs a word and presses enter the fetch keyword request data from the dictionary server and loads the data transported in JSON format to the webpage.

When the keyword is used it is followed by the URL of the sever and .then keyword that catches the promised response with an argument of turning the data from JSON to readable text using .json keyword then manipulated to display to the HTML.

During the coding of the project I did play around with some knowledge that I found fun, one is event listeners that I find so used when manipulating DOM elements on an interactive web application. I added three separate event listeners like click. I used it to trigger the fetching of data from the input of the user when a button for searching is clicked. I also made use of DOMContentLoaded. That triggers manipulation of the webpage once all DOM content has loaded.

Some of the challenges I faced was writing so much code without testing that it became hard to debug. but now I have learned to spend ten minutes writing code and then ten minutes debugging before googling.

I actually love how easy it is to create a fun web application with less than a month of learning, and have a lot of fun all the while. I cannot wait to work on even more projects. The link to my project on GitHub is down below with the source code.

Below is an image of my web application design. Dictionary .png

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dictionary</title>
    <link rel="stylesheet" href="./main.css">

</head>
<body>
    <div class="wrapper">
        <div class="content">
            <h2>English Dictionary</h2>
            <div class="form">
                <div class="input">
                    <input type="text" id="input" placeholder="Type a word" autofocus>
                    <button id="search_btn">Search</button>
                </div>
            </div>
            <div class="data-section">
                <div id="not_found">

                </div>
            <div> <button id='liker'>clickMeToLike</button></div>
            </div>

        </div>
        <div class="qtquote" >
            <h3>Advice of the day.</h3>
            <h4 class="quote"></h4>
        </div>

    </div>





 <script src="./index.js"></script>
</body>
</html>

JAVASCRIPT

const input = document.getElementById('input')
const search_btn = document.getElementById('search_btn')
const not_found=document.getElementById('not_found')
const apiKey = '48d3b1d2-f6ec-41e4-81c8-ce914ebe2e72'
const audio= document.querySelector('audio')
const theHearts = document.getElementById("liker")

const FULL_HEART = '♥'
const quote= document.querySelector('.quote')



search_btn.addEventListener('click',e=>{ 
    e.preventDefault()//prevent page reload

    const word = input.value ;
    if(word===''){
        alert('Please type a word')
        return;

    }
    getTheData(word) //function that fetches data from dictionary API.
})


function getTheData(word){
    fetch(`https://www.dictionaryapi.com/api/v3/references/learners/json/${word}?key=${apiKey}`)//fetch keyword used to make a request to API
        .then(res=>res.json())//.this keyword gets the response from server
                              // the .json converts the response from json format


        .then(res=>{ 

            if(!res.length){
                not_found.innerText='no results'
            return;
         }

            let definition =res[0].shortdef[0]         
            not_found.innerText=definition
            //above is how the translated json respose is displayed using DOM manipulation 

 })}


theHearts.addEventListener('click',function likerFunc(e){
    e.preventDefault
    const newLike = document.createElement('li')
    newLike.innerText=FULL_HEART
    theHearts.appendChild(newLike)
    e.reset()
    //liker event listener 

}

);
document.addEventListener('DOMContentLoaded',function (){
    fetch("https://type.fit/api/quotes")
    .then( res=> res.json() )
    .then(res=>{
        quote.innerText=res[1].text
        //this my second request from another API that manipulates the DOM to display on screen



}

)}     )
;

CSS

@import url('https://fonts.googleapis.com/css2?family=Fascinate&family=Rubik+Moonrocks&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Times New Roman', Times, serif;
}
body{
    display :flex;
    background-color: #cccccc; 
    align-items: center;
    justify-content: center;
    min-height: 100vh;

    background-image: url('https://source.unsplash.com/1600x900/?landscape');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

}
.wrapper{
    width: 600px;



}
.content{
    background-image: linear-gradient(to right, #c6ffdd, #fbd786, #f7797d);
    padding: 50px;
    border-style: inset;
    border-radius: 10px;
    height: 450px;

}
.content h2{
    color: black;
    text-align: center;
    font-size: 30px;
    border-bottom: 1px,solid#cccccc;
    margin-bottom: 15px;
    font-family: 'Rubik Moonrocks', cursive;
}
.input{
    display: flex;
    flex-direction: column;
    padding: 20px;
}
.input input{
    padding: 30px;
    border: none;
    outline: none;
    font-size: 17px;
    border-radius: 4px;
    margin-bottom: 10px;

}
.input button {
    width: 30%;
    height: 30px;
    font-size: 14px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.input button:hover{
    background: green;
}

#liker{
    background-color :red;

}
.qtquote{
    background-image: linear-gradient(to right, #c6ffdd, #fbd786, #f7797d);
    border-style: inset;



}
.quote{
    color: rgb(0, 2, 128);
    font-size: larger;
    font-family: 'Rubik Moonrocks', cursive;


}

For dictionary web application repository click here