Wikipedia Search Application
In this assignment, let's build a Wikipedia Search Application by applying the concepts we learned till now.
In this assignment, let's build a Wikipedia Search Application.
Copy Prefilled Code from Below
Copy Required HTML Code from below.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</head>
<body>
<div class="main-container">
<div class="wiki-search-header text-center">
<img class="wiki-logo" src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-dynamic-webapps/wiki-logo-img.png" />
<br />
<input id="searchInput" placeholder="Type a keyword and press Enter to search" type="search" class="search-input w-100" />
</div>
<div class="d-none" id="spinner">
<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
</div>
</div>
</div>
<div id="searchResults" class="search-results"></div>
</div>
</body>
</html>Copy Required CSS Code from below.
@import url("https://fonts.googleapis.com/css2?family=Bree+Serif&family=Caveat:wght@400;700&family=Lobster&family=Monoton&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display+SC:ital,wght@0,400;0,700;1,700&family=Playfair+Display:ital,wght@0,400;0,700;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Source+Sans+Pro:ital,wght@0,400;0,700;1,700&family=Work+Sans:ital,wght@0,400;0,700;1,700&display=swap");
.main-container {
font-family: "Roboto";
}
.wiki-search-header {
border-style: solid;
border-width: 1px;
border-color: #d5cdcd;
padding-top: 30px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 20px;
margin-bottom: 40px;
}
.wiki-logo {
width: 150px;
margin-bottom: 30px;
}
.search-input {
font-size: 18px;
border-style: solid;
border-width: 1px;
border-color: #d5cdcd;
border-radius: 3px;
padding: 10px;
}
.search-results {
width: 100%;
padding-left: 20px;
}
.result-item {
margin-bottom: 20px;
}
.result-title {
font-size: 22px;
}
.link-description {
color: #444444;
font-size: 15px;
}
.result-url {
color: #006621;
text-decoration: none;
}Instructions:
- Add the id searchInputto the HTMLinputelement.
- Add the id searchResultsto the HTML container element with the class namesearch-results
By following the above instructions, achieve the given functionality.
- Practice adding type searchto the HTML input element.
- Practice adding loadingstatus with Bootstrap componentspinnerwhile making an HTTP request.
- When we enter text in HTML inputelement with the idsearchInputand pressEnter,
- Get link, title, description (HTTP response with key search_results) by making HTTP request usingfetchwith URLhttps://apis.ccbp.in/wiki-search?search=
- Set title, link in the HTML aelement and set description in the HTML paragraph element.
- Get link, title, description (HTTP response with key
Tags:
JavaScript Practice