Unable to solve error

asawarilad2105 · June 20, 2023, 4:53pm

Not getting output for movie finder project .Can’t find error in javascript file.

JAVSCRIPT CODE
const API_URL = " http://www.omdbapi.com/?i=tt3896198&apikey=3cac5015";
const API_URL_SEARCH= “http://www.omdbapi.com/apikey.aspx?VERIFYKEY=61dac201-3227-4015-94f6-f196702edf65”;

var search_input=document.getElementById(“search_input”);
var card = document.getElementsByClassName(“movie-card”)[0];

document.getElementsByClassName(“search”)[0].addEventListener(“click”,function(){
console.log(search_input.value);
const query = search_input.value;
if(query){
getMovies(API_URL+query);
}
});

async function getMovies(url){
const resp = await fetch(url);
const respData = await resp.json();
console.log(respData);
showMovies(respData.Search);
}

function showMovies(movies){
card.innerHTML="";
movies.forEach(async function (movies){
const movieData =await fetch (API_URL_SEARCH+movie.imdbID);
const movieDataobj=await movieData.json();
movie_display(movieDataobj);
});
}

function movie_display(imovie){
const movieElm =document.createElement(“div”);
movieElm.classList.add(“movie-card”);
movieElm.innerHTML= `

Title${imovie.Title}
Rating${imovie.imdbRating}
Director${imovie.Director}
Released${imovie.Released}
Genre${imovie.Genre}

`; card.appendChild(movieElm); }

CSS CODE
body{
box-sizing: border-box;
margin: 0;
padding: 0;
font-size: 18px;
font-family: ‘Lucida Sans’, ‘Lucida Sans Regular’, ‘Lucida Grande’, ‘Lucida Sans Unicode’, Geneva, Verdana, sans-serif;
background-color: rgb(233, 233, 233);
}
.title{
font-size: 30px;
font-weight: 600;
color: white;
background-color: rgb(19, 19, 56);
width: 100%;
padding: 20px;
text-align: center;
}
.full_body{
display: flex;
justify-content: center;
align-items:center ;
flex-direction: column ;
}
.form-input{
border: none;
outline: none;
background-color: white;
padding: 10px 20px;
border: 1px solid grey;
margin-right: 20px;
}
.form-input:focus{
background-color: white;
}
.search{
border: none;
outline: none;
background-color: rgb(19, 19, 56);
font-family: ‘Lucida Sans’, ‘Lucida Sans Regular’, ‘Lucida Grande’, ‘Lucida Sans Unicode’, Geneva, Verdana, sans-serif;
padding: 10px 20px;
color: white;
justify-content: center;
}

.serch-box{
display: flex;
justify-content: center;
align-items: center;
margin: 100px;
}
.movie-cards{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.card{
display: flex;
justify-content: space-between;
align-items: center;
color: white;
background-color: rgb(24, 51, 59);
margin: 20px;
padding: 30px;
width: 700px;
}
.movie-title{
display: flex;
justify-content: space-between;
align-items: center;
width: 300px;
margin: 0px 200px;
}
.value{
font-size: 15px;
width: 200px;
}

himanshu.arya · June 21, 2023, 2:03pm

Hi @asawarilad2105 share me the screenshot of console page also.

asawarilad2105 · June 21, 2023, 4:01pm

himanshu.arya · June 21, 2023, 5:32pm

Hi ,do make changes in first two lines of js code `const API_URL = " http://www.omdbapi.com/?i=tt3896198&apikey=3cac5015&s=";
const API_URL_SEARCH= “http://www.omdbapi.com/apikey=3cac5015&i=”;
Do let me know if it works.

asawarilad2105 · June 22, 2023, 1:54pm

Api key still not working.

web · June 24, 2023, 11:14am

The value seems to be null.
Try getting the raw fetch result and log it to console first.
If that works, the problem is somewhere in the Identifiers in the code.
Maybe here: console.log(search_input.value);
const query = search_input.value;

If you still cant find the problem, check if the code works on raw dummy data and check if every async has necessary await, and if it works synchronously instead.

asawarilad2105 · June 24, 2023, 3:33pm

Still it is not working.

asawarilad2105 · June 24, 2023, 3:38pm

this is also not working. pls help…

asawarilad2105 · June 24, 2023, 3:40pm

asawarilad2105 · June 24, 2023, 3:42pm

html code :

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Tangerine">

<title>EXPENSE TRACKER</title>

<link rel="stylesheet" href="../css/expense_tracker.css">

!! EXPENSE TRACKER !!

Add Expense

        <br>

        <div class="available-expenses">
          <div class="sub-title">Expenses</div>

          <table
            class="expense-table"
            cellspacing="10px"
            cellpadding="8px 20px">

            <tr style="border-bottom: 1px solid white;">
              <th>Amount</th>

              <th>Category</th>

              <th>Date</th>

              <th>Note</th>
            </tr>
          </table>
        </div>

        <form action="#" class="add-new-expense">
          <span>
            <label for="amount">Amount:</label>

            <input
              type="text"
              class="form-input"
              name="amount"
              placeholder="How much?"
            />
          </span>

          <span>
            <label for="category">Category :</label>

            <select name="category" id="category">
              <option value="Food">Food</option>

              <option value="Travel">Travel</option>

              <option value="Groceries">Groceries</option>

              <option value="Entertainment">Entertainment</option>

              <option value="Others">Others</option>
            </select>
          </span>

          <span>
            <label for="date"> Date:</label>

            <input
              type="date"
              class="form-input"
              name="date"
              placeholder="dd-mm-yyyy?"
            >
          </span>

          <span>
            <label for="note"> Note: </label>

            <input
              type="text"
              class="form-input"
              name="note"
              placeholder="What did you spend on?">
          </span>

          <span >
            <a href="#" class="buttons" style = "font-size: 15px;padding: 8px 10px;" onclick="add_expense()">Submit</a>
          </span>
        </form>
      </div>

      <div class="category">
        <a href="#" class="buttons" onclick="add_category_page()"> Add Category</a>

        <br>

        <div class="sub-title">CATEGORIES</div>

        <div class="available-categories">
          <span> FOOD :: <span class="sum"></span></span>

          <span> TRAVEL :: <span class="sum"></span></span>

          <span> GROCERIES :: <span class="sum"></span></span>

          <span> ENTERTAINMENT :: <span class="sum"></span></span>

          <span> OTHERS :: <span class="sum"></span></span>
        </div>

        <form action="#" class="add-category">
          <span>
            <label for="category">CATEGORY NAME : </label>

            <input
              type="text"
              class="form-input"
              name="new-category"
              placeholder="ENTER CATGORY NAME:: ">
          </span>

          <span>
            <a href="#" class="buttons" onclick="add_category()">
              SUBMIT
            </a>
          </span>
        </form>
      </div>
    </div>
  </div>
</div>

asawarilad2105 · June 24, 2023, 3:42pm

css code:

.full_body{

font-size: 18px;

height: 800px;

background-image: linear-gradient(to right top, #1b92ac,#00aeb2,#00c7a3,#6fdd83,#c1ec5f);
}

.body{

box-sizing: border-box;

margin: 0;

padding: 0;

font-family: 'Open sans', sans-serif;
}

.title{

color: white;

display: flex;

align-items: center;

justify-content: center;

font-size:30px;

padding: 30px;

font-family: Georgia, 'Times New Roman', Times, serif;
}

.container{

display: flex;

justify-content: space-between;

margin:100px;
}

.buttons{

outline:none;

border: none;

color:white;

background-color:rgb(233,60,60);

padding:10px 20px;

text-decoration: none;

font-size:18px;

font-family: Georgia, 'Times New Roman', Times, serif;

border-radius: 4px;
}

table{

background-color: rgba(0,0,0,0.164);

color: white;

border : 10px solid white;

margin-top:30px;

font-family: Georgia, 'Times New Roman', Times, serif;

border-radius: 4px;
}

td{

font-size: 15px;
}

.add-new-expense,.add-category{

margin-top: 10px;

background-color: rgb(175,224,41);

padding:10px;

border-radius: 4px;

border:1px solid grey;

display:none;
}

.add-new-expense span, .add-category span{

display: flex;

align-items: center;

justify-content: space-between;

font-size: 15px;

margin:5px 0px;
}

.form-input{

background-color: rgba(0,0,0,0.164);

padding: 8px 10px;

border-radius: 4px;

font-family: Georgia, 'Times New Roman', Times, serif;

color:white;

border : 1px solid white;
}

.form-input:focus{

background-color: rgba(0,0,0,0.164);

border: 1px solid white;

outline: none;

font-family: Georgia, 'Times New Roman', Times, serif;
}

.available-categories{

display:flex;

justify-content: center;

align-items: center;

flex-direction: column;

padding:15px;

border-radius: 4px;

border:1px solid white;

background-color: rgba(0,0,0,0.164);

color:white;

font-size: 18px;
}

.available-categories > span{

display: flex;

justify-content: space-between;

align-items: center;

padding: 8px 10px;

border-bottom:1px solid white ;
}

.sub-title{

color:white;

font-size: 23px;

margin-top:30px;
}

asawarilad2105 · June 24, 2023, 3:43pm

javascript code:

let expense_per_category = [0,0,0,0,0];
var count = 4;

update_sum();

function update_sum() {
var sum =document.querySelectorAll(".sum");
for (var i=0;i<sum.length;i++){
sum[i].innerHTML=" - "+expense_per_category[i]+“Rs. spent”;
}
}

function add_expense() {
var amount = document.getElementsByClassName(“form-input”)[0].value;
var date = document.getElementsByClassName(“form-input”)[2].value;
var note = document.getElementsByClassName(“form-input”)[3].value;
var category = document.getElementsByClassName(“form-input”)[1].selectedIndex;
var selected = document.getElementsByTagName(“option”)[category].value;

if (amount && date && note && selected){
alert("SUCCESSFULLY ADDED EXPENSE !! ");

var table = document.getElementsByTagName("table")[0];

var new_row = document.createElement("tr");

new_row.innerHTML = `<tr style=border-bottom:1px solid white;>
<td>${amount}</td>
<td>${selected}</td>
<td>${date}</td>
<td>${note}</td>
</tr>
`;

table.appendChild(new_row);

expense_per_category[category] = parseInt(expense_per_category[category]) + parseInt(amount);
update_sum(); 
console.log(count);

document.getElementsByClassName("add-new-expense")[0].getElementsByClassName.display =
  "none";

} else {
alert(" Please enter all the details !! ");
}
}

function add_category() {
var new_category_value = document.getElementsByName(“new-category”)[0].value;
if (new_category_value) {
var dropdown = document.getElementsByName(“category”)[0];

var available_categories = document.getElementsByClassName(
  "available-categories")[0];

var new_category_option = document.createElement("option");

new_category_option.innerHTML = `<option>${new_category_value}</option>`;

count++;

expense_per_category[count] = 0;

var new_category_span = document.createElement("span");

new_category_span.innerHTML = `<span>${new_category_value}<span class = "sum"> - ${expense_per_category[count]}Rs Spent</span></span>`;

dropdown.appendChild(new_category_option);

available_categories.appendChild(new_category_span);

document.getElementsByClassName("add-category")[0].style.display = "none";

}
}

function add_category_page() {
if (
document.getElementsByClassName(“add-category”)[0].style.display == “block”
) {
document.getElementsByClassName(“add-category”)[0].style.display = “none”;
} else {
document.getElementsByClassName(“add-category”)[0].style.display = “block”;
}
}

function add_expense_page() {
if (
document.getElementsByClassName(“add-new-expense”)[0].style.display ==
“block”
) {
document.getElementsByClassName(“add-new-expense”)[0].style.display =
“none”;
} else {
document.getElementsByClassName(“add-new-expense”)[0].style.display =
“block”;
}
}

himanshu.arya · June 27, 2023, 5:42pm

Hi @asawarilad2105 I have attach the corrected code link . Do check and let me know if it helps you. link - GitHub - Himanshu87699/Expense_Tracker

asawarilad2105 · June 28, 2023, 6:49am

The code is not working.
I dont understand what is error exactly.

himanshu.arya · June 28, 2023, 9:06am

As i can see in your console page , correct tha name of js and css file in your Html code. Make sure the path for css and js file should be correct.

asawarilad2105 · June 28, 2023, 1:39pm

I have already changed the file names.

himanshu.arya · June 29, 2023, 12:12pm

Hi @asawarilad2105 Did you make changes in Html code.

asawarilad2105 · June 29, 2023, 1:48pm

yess

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css?family=Tangerine"
/>

<title>EXPENSE TRACKER</title>

<link rel="stylesheet" href="ExpenseTracker.css.css" />

!! EXPENSE TRACKER !!

    <div class="container">
      <div class="expenses">
        <a href="#" class="buttons" onclick="add_expense_page()"
          >Add Expense</a
        >

        <br />

        <div class="available-expenses">
          <div class="sub-title">Expenses</div>

          <table
            class="expense-table"
            cellspacing="10px"
            cellpadding="8px 20px"
          >
            <tr style="border-bottom: 1px solid white">
              <th>Amount</th>

              <th>Category</th>

              <th>Date</th>

              <th>Note</th>
            </tr>
          </table>
        </div>

        <form action="#" class="add-new-expense">
          <span>
            <label for="amount">Amount:</label>

            <input
              type="text"
              class="form-input"
              name="amount"
              placeholder="How much?"
            />
          </span>

          <span>
            <label for="category">Category :</label>

            <select name="category" id="category">
              <option value="Food">Food</option>

              <option value="Travel">Travel</option>

              <option value="Groceries">Groceries</option>

              <option value="Entertainment">Entertainment</option>

              <option value="Others">Others</option>
            </select>
          </span>

          <span>
            <label for="date">Date:</label>

            <input
              type="date"
              class="form-input"
              name="date"
              placeholder="dd-mm-yyyy?"
            />
          </span>

          <span>
            <label for="note">Note:</label>

            <input
              type="text"
              class="form-input"
              name="note"
              placeholder="What did you spend on?"
            />
          </span>

          <span class="some">
            <a href="#" class="buttons" onclick="add_expense()">Submit</a>
          </span>
        </form>
      </div>

      <div class="category">
        <a href="#" class="buttons" onclick="add_category_page()"
          >Add Category</a
        >

        <br />

        <div class="sub-title">CATEGORIES</div>

        <div class="available-categories">
          <span> FOOD :: <span id="food">0</span></span>

          <span> TRAVEL :: <span id="travel">0</span></span>

          <span> GROCERIES :: <span id="groceries">0</span></span>

          <span> ENTERTAINMENT :: <span id="entertainment">0</span></span>

          <span> OTHERS :: <span id="others">0</span></span>
        </div>

        <form action="#" class="add-category">
          <span>
            <label for="category">CATEGORY NAME : </label>

            <input
              type="text"
              class="form-input"
              name="new-category"
              placeholder="ENTER CATGORY NAME:: "
            />
          </span>

          <span>
            <a href="#" class="buttons" onclick="add_category()">
              SUBMIT
            </a>
          </span>
        </form>
      </div>
    </div>
  </div>
</div>