Wikipedia viewer project, JS code not work, I need help

Wikipedia viewer project, JS code not work, I need help
0

#1

I don’t know why the code not work, kindly i need help


HTML5 code
<!DOCTYPE html>

<html>

	<head>
        <title> Wikipedia viewer </title>
        <meta charset="utf-8">
        <meta name="description" content="Ali Mosaad Local Weather Machine" > 
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="icon" href="http://www.iconsdb.com/icons/preview/orange/wikipedia-xxl.png">
        <!-- Bootstrap library -->
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
            
        <!-- My CSS style sheet -->
        <link rel="stylesheet" type="text/css" href="WikipediaViewer.css">
        
        <!-- My JS code sheet -->
        <link rel="stylesheet" type="text/js" href="WikipediaViewer.js">
		
        <!-- Font awesome library -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        
        <!-- google library font -->
        <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" type="text/css">
        <link href="https://fonts.googleapis.com/css?family=Acme" rel="stylesheet" type="text/css">
        <link href="https://fonts.googleapis.com/css?family=Fugaz One" rel="stylesheet" type="text/css">
        <link href="https://fonts.googleapis.com/css?family=Lateef" rel="stylesheet" type="text/css">
        <link href="https://fonts.googleapis.com/css?family=Kaushan Script" rel="stylesheet" type="text/css">
        <link href="https://fonts.googleapis.com/css?family=Yanone Kaffeesatz" rel="stylesheet" type="text/css">
        <link href="https://fonts.googleapis.com/css?family=Poiret One" rel="stylesheet" type="text/css">
		<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet" type="text/css">
		<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css">
		<link href="https://fonts.googleapis.com/icon?family=Dancing Script" rel="stylesheet" type="text/css">
    
        <!-- Other libraries -->
        <link href="https://tympanus.net/codrops/adpacks/demoadpacks.css?1499966047708" rel="stylesheet" type="text/css">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
		<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
	
	</head>
	
	
	<body>
		<!--Title-->
		<header>
			<div class="container header">
				<p class="text-center" data-toggle="tooltip" title="Intermediate front end challenge">Wikipedia viewer</p>
			</div>			
		</header>
		<br>
		<br>
		<br>
		<!--Search bar-->
		<!--Note: "search" mean user search
				  "search-btn" mean the button of search
				  "header" mean header of each article
				  "output" mean data of article
		-->
		<section id="search-section">
				<div class="container search_section">
					<div class="container-fluid row">
						<div class="col-md-12">
							<form action="" class="form-horizontal" id="search-form">
								<div class="form-group">
									<label for="search" class="col-md-2 control-label" style="font-family: Fugaz One; font-size: 25px; margin-top: 5px">Search</label>
									<div class="col-md-8"><input id="search" type="text" class="form-control" placeholder="Enter your search here?" style="font-family: Fugaz One; margin-top: 10px;"></div>
									<div class="col-md-2"><button type="submit" id="search-btn" class="btn btn-primary btn-block" style="margin-top: 10px"><i class="fa fa-search" aria-hidden="true"></i></button></div>
								</div>
							</form>
						</div>
					</div>
					<div class="container-fluid row">
						<div class="col-md-2 col-md-offset-10">
							<a href="https://en.wikipedia.org/wiki/Special:Random" target="_blank"><button class="random btn btn-default btn-block btn-md">Random article!	</button></a>
						</div>
					</div>
				</div>	
		</section>
		
		<!--Result getting from search bar-->
		<br>
		<br>
		<h4 class="title" id="title"></h4>
		<div class="container search_result" id="result">
			<p id="header"></p>
			<ul id="output">
								
					
			</ul>	
		</div>
		
		<!--About me-->
		<footer style="background-color: lightcyan; margin-top: 25%">
            <ul class="list-inline text-center">
                <li><a href="https://www.youtube.com/channel/UCTdw8pb-SE2cJ_DL73BnBHg" target="_blank"><i class="fa fa-youtube-square fa-3x" aria-hidden="true" style="color: rgb(30,144,255)"></i></a></li>
                <li><a href="https://www.pinterest.com/ali_mosaad/" target="_blank"><i class="fa fa-pinterest-square fa-3x" aria-hidden="true" style="color: rgb(30,144,255)"></i></a></li>
				<li><a href="https://www.linkedin.com/in/alimosaad/" target="_blank"><i class="fa fa-linkedin-square fa-3x" arial-hidden="true" style="color: rgb(30,144,255)"></i></a></li>
                <li><a href="https://github.com/ali-admin" target="_blank"><i class="fa fa-github-square fa-3x" aria-hidden="true" style="color: rgb(30,144,255)"></i></a></li>
                <li><a href="https://codepen.io/ali-admin/" target="_blank"><i class="fa fa-codepen fa-3x" aria-hidden="true" style="color: rgb(30,144,255)"></i></a></li>
            </ul>
			<p class="text-center" style="font-size:22px; font-family: Inconsolata">Copyright &copy; <span id="currentYear"></span></p>
            <p class="text-center" style="font-size:24px; font-family: Inconsolata">Written and codded by <a href="https://www.linkedin.com/in/alimosaad/" target="_blank" style="font-family: Inconsolata">Ali Mosaad Mohamed</a></p>
		</footer>
        
        
        <!--------------------------------------------------------------Declaration-------------------------------------------------------------->
		<!-----------------------------------------------------This is used for fast loading----------------------------------------------------->
            <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
			<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
			<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
			<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
			<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js"></script>
			<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js"></script>
			<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
            <!-- Latest compiled and minified JavaScript from Bootstrap library -->
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
            <script src="WikipediaViewer.js"></script>
			
			
	
	</body>
	
</html>
CSS code
.header{
  	margin-top: 10px;
  	background-color: DarkOrange;
  	font-family: Pacifico;
	font-size: 30px;
	-webkit-animation-name: header-frame;
	-webkit-animation-duration: 4s;
	-webkit-animation-iteration-count: 3;
	animation-name: header-frame;
	animation-duration: 2s;
	animation-iteration-count: 3;
	color: white;
}

.header:hover{
	color: crimson;
	-webkit-animation-name: header-frame;
	-webkit-animation-duration: 4s;
	-webkit-animation-iteration-count: infinite;
	animation-name: header-frame;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}

.search_section{
	background-color: aliceblue;
	border-style: solid;
	border-radius: 25px;
	border-color: black;
	border-width: thin;
}

.search_result{
	font-family: Inconsolata;
	font-size: 20px;
	color: white;
	background-color: black;
	border-style: solid;
	border-width: thin;
	border-radius: 5px;
	border-color: black;
}

.random{
	font-family: Inconsolata;
	font-size: 14px;
	font-weight: 500;
	color: dodgerblue;
	background-color: burlywood;
	border-radius: 10px;
	margin-bottom: 5px;
}

.list-group-item{
  background-color:#F3EFE0;
  margin-bottom:15px;
}

.title{
  font-size:25px !important;
  font-family: 'Muli', sans-serif;
  color:#778899;
}

/**********************************************************************/
.title,p{
    font-weight: bold;
}
.title{
  font-family: 'Roboto Slab', serif; 
  color:white;
}

/*This is used for animation >>> note that webkit used for safari browser 4.0 to 8.0*/
@keyframes header-frame{
	from{color: white;}
	to{color: crimson;}
}
@-webkit-keyframes header-frame{
	from{color: white;}
	to{color: crimson;}
}
JavaScript code
$(document).ready(function(){
  $("#form").submit(function(event){
    event.preventDefault();
    
    $(".output").html("");
    $("#header").html("");
    var searchText = $("#search").val().trim();
    
    if(searchText !== ""){
      
      $.getJSON("https://en.wikipedia.org/w/api.php?action=opensearch&datatype=json&limit=5&search=" + searchText + "&callback=?",function(json){
        
        if(json[1].length < 1){
          
          $("#header").html('Could not find "' +  json[0] + '"'); 
        }
        else{
          
          for(var i = 0; i < json[1].length; i++){
            var result = '<li class="list-group-item"><a href="' + json[3][i] + '" target=_blank><p class="title">' + json[1][i] + '</p></a><p>' + json[2][i] + '</p></li>';
          
            $(".output").append(result); 
          }
        }  
      });
    }
  });
});

// to set the current year for copyright
function setCurrentYear() {
    document.getElementById("currentYear").innerHTML = new Date().getFullYear();
}

setCurrentYear();


Please help me to solve issue.


#2

I’ve edited your post for readability. When you enter a code block into the forum, remember to precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard.

For future posts, it would be easier for others to assist you if you posted a JSFiddle or Codepen link of your project. Posting your entire code html, css, js for a project of this size is a lot to read through.


#3

Change this line:

$("#form").submit(function(event){ 

to

$("#search-btn").on("click",function(event) {

because submitting via the form is putting extra stuff into the request to the API.

You can validate this works, by putting console.log(json) in the first line of the anonymous callback function of the getJSON call. You will then see the data you are working with and adjust your code appropriately to get the data to display as you want.


#4

@rmdawson71
Thank you very much :grinning::+1:


#5

@rmdawson71

Thank you very much :grinning::+1: