I am currently developing a web search engine that utilizes the Giphy API... However, I've encountered difficulties with the button function. I have created buttons to modify the page format and adjust the number of search results displayed.... The Web interface functions properly, but the buttons refuse to work. I've attempted using inline code and linking external files without success. This project is due on Monday, and I've been dedicating all week to it... Please assist! I'm at a loss here...
Here's an excerpt of the code...
enter code here
/* JavaScript Code Snippet */
function () {
function giphySearchEngine(keyword, limit) {
return fetch(`http://api.giphy.com/v1/gifs/search?q=${keyword}&api_key=h5nEbFf0nz3FmKUhFMFajDQpM6ew66XF&limit=${limit}`)
.then(response => response.json());
}
// Remaining JavaScript functions...
}/* CSS Stylesheet */
/* Font */
body{
font-family:
'Bangers', cursive;
color:#393e46;
}
/* color layout */
.background{
color:#f7f7f7;
}
/* Responsive Layout */
@media screen and (max-width: 800px) {
.col {
flex: 50%;
max-width: 50%;
}
}
/* Additional CSS styles ... */ <!DOCTYPE html>
<!-- HTML Structure -->
<!-- Head Section -->
<!-- Meta tags
Bootstrap CSS
-->
<!-- Theme-related links -->
<!-- Opening Body Tag -->
<!-- Header Section -->
<h1>Giphy Image Changer</h1>
<!-- Form for Search Input -->
<form id="searchForm">
<!-- Buttons to change the view -->
<button class="btn" onclick="one()">1</button>
<button class="btn" onclick="two()">2</button>
<button class="btn active" onclick="four()">4</button>
<!-- Container for displaying results -->
<div class="container">
<!-- Show section with gif results -->
<div id ="show" class="row"></div>
<!-- Button Group for Result Limit -->
<div class="btn-group mr-3 mx-md-3" role="group" aria-label="Second group">
<button type="button" id ='btn6' class="btn">6</button>
<button type="button" id ='btn12' class="btn">12</button>
<button type="button" id ='btn18' class="btn">18</button>
</div>
<!-- Closing Tags -->
<footer>
<!-- Footer Section -->
</footer>
<!-- Scripts declaration -->
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
<script type = "text/javascript" src="js/demo.js"></script>
</body>
</html>