Issue Encountered in Browser Console:
https://static.food2fork.com/pastaallavodkaa870.jpg.jpg 404
While attempting to display the image on the browser, I am uncertain if the problem lies within my code or with food2fork.
Code from index.js:
// Always ensure correct directory
// Import necessary fields
import Search from './models/Search';
// Import all functions from the view
import * as searchView from './views/searchView'
import {elements} from './views/base';
/* Global state of the application
- Search object
- Current recipe object
- Shopping list object
- Liked recipes
*/
// Empty state each time the app is reloaded
const state = {}
const controlSearch = async () =>{
// 1) Retrieve query from the view
const query = searchView.getInput();
if(query){
// 2) Create new search object and add it to state
state.search = new Search(query); // New instance of the search class
// 3) Prepare UI for results
// 4) Search for recipes
await state.search.getResults(); // Await this promise then render the result
// 5) Render result in the UI, remember to hit the search button
searchView.renderResult(state.search.result);
}
}
elements.searchForm.addEventListener('submit', e => {
e.preventDefault();
controlSearch();
});
Content from Search.js:
// This comes from an external source, simply call its name
import axios from 'axios';
// Query followed by search result
// Class declaration in ES6
export default class Search {
constructor(query){
this.query = query;
}
async getResults(){
// Fetch will only work with modern browsers
// HTTP request using axios
// If invalid key entered, it will not work
// Key has been blurred out for privacy reasons
const key = '------------------------';
// Return JSON
// Use a CORS proxy if unable to access directly
// Proxy can be found through Google search
try{
const res = await axios(`https://www.food2fork.com/api/search?key=${key}&q=${this.query}`);
this.result = res.data.recipes;
// console.log(this.result);
} catch(error){
alert(error);
}
}
}
For searchView.js:
// When in current folder, it's just base
import {elements} from './base';
// Return input value from field
// Implicit search returns automatically
export const getInput = () => elements.searchInput.value;
const renderRecipe = recipe =>{
const markup = `
<li>
<a class="results__link" href="#${recipe.recipe_id}">
<figure class="results__fig">
<img src="${recipe.image_url}.jpg" alt=${recipe.title}>
</figure>
<div class="results__data">
<h4 class="results__name">${recipe.title}</h4>
<p class="results__author">${recipe.publisher}</p>
</div>
</a>
</li>
`;
// Insert HTML
elements.searchResList.insertAdjacentHTML('beforeend',markup);
}
export const renderResult = recipes => {
recipes.forEach(renderRecipe);
}
From base.js:
// All DOM elements stored here as objects
export const elements = {
searchForm: document.querySelector('.search'),
searchInput: document.querySelector('.search__field'),
searchResList: document.querySelector('.results__list')
}
I am relatively new to web development and self-learning. Hopefully this is not considered a poor question. Seeking assistance from experienced individuals to pinpoint any errors, as it appears to not be related to syntax or logic. Thank you very much and have a wonderful day.