Build a Wikipedia Viewer - FCC
How do I make an build a wikipedia viewer - fcc?
What is a build a wikipedia viewer - fcc? How do you make a build a wikipedia viewer - fcc? This script and codes were developed by Roksana on 22 November 2022, Tuesday.
Build a Wikipedia Viewer - FCC - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Build a Wikipedia Viewer - FCC</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!DOCTYPE HTML>
<html lang="en">
<head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>Exercise - Build a Wikipedia Viewer</title> <link rel="stylesheet" href="main.css" type="text/css" /> <script src="https://use.fontawesome.com/f9a688749b.js"></script> <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body> <header class="page-header"> <h1>Wikipedia Viewer</h1> </header> <div class="wikipedia-box"> <a href="https://en.wikipedia.org/wiki/Special:Random" target="_blank"><div class="random-text">Click to see a random Wikipedia entry</div></a> <div class="searcher "> <i class="fa fa-search"></i> </div> <input class="wiki-searcher" id="search" type="text" placeholder="Search"> <div class="supportive-text">Click icon to search</div> </div> <article class="article"> <!-- <a href="#"></a> <div class="article-text"></div> --> </article> <footer> <p>by <a href="#">Roksana</a></p> </footer> <script src="main.js"></script>
</body> <script src="js/index.js"></script>
</body>
</html>
Build a Wikipedia Viewer - FCC - Script Codes CSS Codes
html { font-size: 62.5%; margin: 0; padding: 0;
}
body { margin: 0; padding: 0; font-family: 'Raleway', sans-serif; font-size: 2.5rem; color: #FF4365; background: #272D2D;
}
.page-header { width: 100%; text-align: center;
}
.wikipedia-box { width: 60%; padding: 20px; margin: 0; margin: auto; text-align: center; color: #23CE6B; font-size: 2rem;
}
.random-text { width: 50%; padding: 10px; margin: 10px auto 40px auto; text-align: center; border: 3px solid #FFFFFF; border-radius: 25px;
}
.wikipedia-box a { text-decoration: none; color: #23CE6B;
}
.wikipedia-box a:hover { color: #FF4365; cursor: pointer;
}
.fa-search { padding: 10px 15px; margin: 5px; text-align: center; border: 3px solid #FFFFFF; border-radius: 25px;
}
#search { width: 10%; padding: 10px; margin: 5px auto; background: none; border: 3px solid #FFFFFF; border-radius: 25px; color: #23CE6B; font-size: 2rem;
}
input[type="text"]::-webkit-input-placeholder { color: #23CE6B;
}
.supportive-text { width: 70%; padding: 10px; margin: 5px auto; text-align: center;
}
.article { margin: auto; padding: 10px; width:90%;
}
.article a { text-decoration: none; color: #FF4365;
}
.article a:hover { text-decoration: none; color: #23CE6B;
}
.article .article-text { color: #FFFFFF; font-size: 1.8rem; margin-bottom: 20px;
}
footer { position: fixed; right: 10px; bottom: 5px; text-align: center; color: #FF4365; font-size: 1.8rem;
}
footer p { margin: 0; padding: 0;
}
footer a { text-decoration: none; color: #FF4365;
}
Build a Wikipedia Viewer - FCC - Script Codes JS Codes
$(document).ready(function () { $(".wiki-searcher").hide(); $(".searcher").click(function() { $(".wiki-searcher").animate( { left: '50px', height: '20px', width: '50%' }, "slow"); $(".wiki-searcher").show(); $(".searcher").hide(); }); $("#search").keypress(function (e) { if (e.which == 13) { var searchVal = $("#search").val(); var url = "http://en.wikipedia.org/w/api.php?action=opensearch&search=" + searchVal + "&format=json&callback=?"; $.ajax ({ url: url, async: false, dataType: 'json', type: 'POST', headers: { 'Api-User-Agent': 'Example/1.0' }, success: function(data) { $(".article").html(""); for (var i = (data[1].length - 1); i >= 0; i--) { $(".article").prepend("<a href='" + data[3][i] + "' target='_blank'>" + data[1][i] + "</a> <div class='article-text'>" + data[2][i] + "</div>"); } } }); } });
});
Developer | Roksana |
Username | roksanaop |
Uploaded | November 22, 2022 |
Rating | 3 |
Size | 2,910 Kb |
Views | 12,144 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Weather App | 2,957 Kb |
Use the Twitchtv JSON API | 3,561 Kb |
Image Processing | 3,788 Kb |
Build a Simon Game | 4,017 Kb |
Built a Tribute Page | 3,726 Kb |
Build a Tic Tac Toe Game | 3,883 Kb |
Build a JavaScript Calculator | 2,903 Kb |
Exercise - Build a Tribute Page | 5,463 Kb |
Exercise - Build a Random Quote Machine | 4,604 Kb |
Build a Pomodoro Clock | 3,419 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Pure CSS Torch Light | Juliendargelos | 2,727 Kb |
Jquery 2d character movement | Drewtadams | 4,291 Kb |
NT Tribute | Skybutterfly | 2,850 Kb |
Awesome textarea | Ayoungh | 1,977 Kb |
Gulpfile | Aimhigherwebdesign-amy | 1,765 Kb |
Force Counter | Kenlauguico | 2,732 Kb |
Test | Dviate | 2,668 Kb |
Slider css only | Armandobau | 2,161 Kb |
Improve | Gavra | 1,652 Kb |
Simple star rating using js and data-uri | TheEnd | 5,795 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!