FreeCodeCamp - Wikipedia Viewer

Developer
Veronika
Size
3,722 Kb
Views
16,192
  1. FreeCodeCamp - Wikipedia Viewer Previews
  2. FreeCodeCamp - Wikipedia Viewer HTML Codes
  3. FreeCodeCamp - Wikipedia Viewer CSS Codes
  4. FreeCodeCamp - Wikipedia Viewer JS Codes

How do I make an freecodecamp - wikipedia viewer?

Challenge at Free Code Camp to build a page where it is possible to search for or get a random Wikipedia article. . What is a freecodecamp - wikipedia viewer? How do you make a freecodecamp - wikipedia viewer? This script and codes were developed by Veronika on 30 November 2022, Wednesday.

FreeCodeCamp - Wikipedia Viewer Previews
IQ Test

FreeCodeCamp - Wikipedia Viewer - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>FreeCodeCamp - Wikipedia Viewer</title> <link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body> <div class="main-wrapper"> <div class="btn btn-centered dotted-square upper-element centered-element" id="searchBtn">Search</div> <a href="https://en.wikipedia.org/wiki/Special:Random" target="_blank" class="random-link"> <div class="btn dotted-square lower-element centered-element" id="randomBtn">Random</div> </a> <div class="btn dotted-square upper-element hidden-element" id="returnBtn">Go back</div> <input type="search" class="dotted-square lower-element hidden-element" id="userInput" placeholder="Search article"> <div id="result-container"> </div> <!-- result-container --> </div> <!-- main-wrapper --> <!-- Handlebars --> <script id="entry-template" type="text/x-handlebars-template"> <a href="https://en.wikipedia.org/?curid={{pageid}}" target="_blank" class="entry-wrapper hidden-element"> <div class="entry"> <h1>{{title}}</h1> <div class="extract"> {{extract}} </div> <!-- extract --> </div> <!-- entry --> </a> </script>
</body> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js'></script>
<script src='https://use.fontawesome.com/d0c3a87dba.js'></script> <script src="js/index.js"></script>
</body>
</html>

FreeCodeCamp - Wikipedia Viewer - Script Codes CSS Codes

*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
.main-wrapper { overflow-x: hidden; position: relative; height: 100vh;
}
.centered-element { left: 50%; margin-left: -150px;
}
.hidden-element { left: -100vw;
}
.upper-element { top: 50px;
}
.lower-element { top: 100px;
}
.dotted-square { position: absolute; width: 300px; height: 40px; line-height: 40px; padding: 0 8px; border: 1px dotted; color: rgb(0,0,0); font-family: 'Poiret One', cursive;
}
.btn { text-align: center; font-size: 24px; text-transform: uppercase; cursor: pointer;
}
a { text-decoration: none; color: rgb(0,0,0);
}
input { font-size: 20px;
}
input::-webkit-search-cancel-button { cursor: pointer; padding: 3px;
}
#result-container { position: absolute; top: 70px; left: 15%; right: 15%;
}
@media (max-width: 750px) { #result-container { left: 0; right: 0; }
}
.entry-wrapper { position: relative;
}
.entry { border: 1px dotted; margin: 10px; padding: 10px;
}
.entry h1 { font-family: 'Poiret One', cursive; font-size: 24px; margin: 0 0 10px 0;
}
.extract { font-family: 'PT Sans', sans-serif; font-size: 14px; color: rgb(50,50,50);
}

FreeCodeCamp - Wikipedia Viewer - Script Codes JS Codes

(function() { var currentPage = 1; // global variable to keep track of which "page" the user is on //Compile handlebars template var source = $("#entry-template").html(); var template = Handlebars.compile(source); function displayArticles(articles) { var entry; $('#result-container').html(''); //empty container if (articles.query) { //Append articles to result container for (var key in articles.query.pages) { if (articles.query.pages.hasOwnProperty(key)) { entry = template(articles.query.pages[key]); $('#result-container').append(entry); } } //Show entries one by one var delay = 0; $('.entry-wrapper').each(function(entry) { $(this).delay(delay).animate({ 'left': '0' }, 500); delay += 100; }); } else { $('#result-container').append('No articles found...'); } } function getArticles(userInput) { const url = `https://en.wikipedia.org/w/api.php?action=query&format=json&prop=extracts&continue=&generator=search&callback=?&exsentences=2&exlimit=10&exintro=1&explaintext=1&gsrsearch=${userInput}`; $.getJSON(url).then(displayArticles); } function moveElementToRight(buttonId, delayTime) { return $(`${buttonId}`).delay(delayTime).animate({ 'left': '150vw' }, 1000).promise(); } function moveElementToMiddle(buttonId, delayTime) { return $(`${buttonId}`).delay(delayTime).animate({ 'left': '50%', 'margin-left': -$(`${buttonId}`).outerWidth() / 2 }, 1000).promise(); } function moveElementToLeft(buttonId, delayTime) { return $(`${buttonId}`).delay(delayTime).animate({ 'left': '-100vw' }, 1000).promise(); } function moveElementUp(elementId, delayTime) { return $(`${elementId}`).delay(delayTime).animate({ 'top': 20 }, 1000).promise(); } function moveElementDown(elementId, delayTime) { return $(`${elementId}`).delay(delayTime).animate({ 'top': 50 }, 1000).promise(); } //Event listener for input field $('#userInput').keypress(function(e) { if (e.which === 13) { var input = $(this).val(); $(this).blur(); currentPage = 3; $.when( moveElementToRight('#userInput', 0), moveElementUp('#returnBtn', 200) ) .then( function() { getArticles(input); } ); } }); //Event listener for search button $('#searchBtn').click(function() { currentPage = 2; $.when( moveElementToRight('#searchBtn', 0), moveElementToMiddle('#returnBtn', 0), moveElementToRight('#randomBtn', 200), moveElementToMiddle('#userInput', 200) ) .then( function() { $('#userInput').focus(); } ); }); //Event listener for return button $('#returnBtn').click(function() { if (currentPage == 2) { $.when( moveElementToMiddle('#searchBtn', 0), moveElementToLeft('#returnBtn', 0), moveElementToMiddle('#randomBtn', 200), moveElementToLeft('#userInput', 200) ) .then( function() { $('#userInput').val(''); $('#userInput').blur(); } ); } else { //Hide entries one by one var delay = 0; $('.entry-wrapper').each(function(entry) { $(this).delay(delay).animate({ 'left': '-100vw' }, 500); delay += 100; }).promise() .then(function() { $('#result-container').html(''); //empty container when entries are hidden }); $.when( moveElementToMiddle('#userInput', 0), moveElementDown('#returnBtn', 200) ) .then(function() { $('#userInput').focus(); }); } currentPage--; });
})();
FreeCodeCamp - Wikipedia Viewer - Script Codes
FreeCodeCamp - Wikipedia Viewer - Script Codes
Home Page Home
Developer Veronika
Username ivhed
Uploaded November 30, 2022
Rating 3
Size 3,722 Kb
Views 16,192
Do you need developer help for FreeCodeCamp - Wikipedia Viewer?

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!

Veronika (ivhed) Script Codes
Name
FreeCodeCamp - Local Weather
FreeCodeCamp - Pomodoro Clock
CSS Baby
FreeCodeCamp - Twitch.tv
FreeCodeCamp - Tic Tac Toe Game
FreeCodeCamp - Javascript Calculator
FreeCodeCamp - Tribute Page
Space Game Button
Background blend mode
CSS Filter Blur
Create amazing Facebook ads with AI!

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!