A Pen by Kevin

Developer
Kevin
Size
3,135 Kb
Views
26,312
  1. A Pen by Kevin Previews
  2. A Pen by Kevin HTML Codes
  3. A Pen by Kevin CSS Codes
  4. A Pen by Kevin JS Codes

How do I make an a pen by kevin?

What is a a pen by kevin? How do you make a a pen by kevin? This script and codes were developed by Kevin on 27 August 2022, Saturday.

A Pen by Kevin Previews
IQ Test

A Pen by Kevin - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Kevin</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <h4 id="instructions" style="color: white;" class="text-center">Click the magnifying glass to search</h4> <div class="titleBox2 center-block text-center"> <span id="handle" class="center-block"></span></div> <div id="results"></div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

A Pen by Kevin - Script Codes CSS Codes

body { background-image: url("http://res.cloudinary.com/dlwlrqajz/image/upload/v1464079487/footer_lodyas_lfja08.png");
}
#randomPage a { color: black; text-decoration: none;
}
.titleBox { width: 50%; padding: 20px; margin-top: 60px; margin-bottom: 40px; border-radius: 20px; background-color: #ffffff; overflow: hidden;
}
.secret { opacity: 0;
}
#instructions { margin-top: 40px;
}
.titleBox2 { height: 50px; width: 50px; border-radius: 50%; margin-top: 60px; margin-bottom: 0px; background: rgba(255, 255, 255, 0); border: 4px solid white;
}
.title { font-size: 36px; font-weight: 600; padding-bottom: 10px;
}
#handle { background-color: white; height: 30px; width: 4px; -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); margin-top: 35px; margin-left: 45px;
}
#searchBar { font-size: 24px; margin-bottom: 20px;
}
#searchButton { font-size: 24px;
}
.wikiPageTitle { font-size: 20px; padding-bottom: 10px;
}
.wikiPageIntro { font-size: 16px;
}
.resultsBox { padding: 30px; border-left: 2px solid black; border-right: 2px solid black; border-bottom: 2px solid black;
}
.resultsBox:first-child { border-top: 2px solid black; border-top-left-radius: 20px; border-top-right-radius: 20px;
}
.resultsBox:last-child { border-top: 2px solid black; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; margin-bottom: 50px;
}
.resultsBox:nth-child(odd) { background-color: #ffffff;
}
.resultsBox:nth-child(even) { background-color: #ffffff;
}

A Pen by Kevin - Script Codes JS Codes

$(document).ready(function() { var titleInsert = function() { }; /*This is the animation for transforming the magnifying glass into the search box*/ $('.titleBox2').one('click', function() { $('#handle').animate({ 'height': 0, 'margin-top': 40, 'margin-left': 40 }, 400, function() { $('#instructions').animate({ opacity: 0 }, 1000); $('.titleBox2').html('<h1 class="title secret">Wikipedia Search</h1><input id="searchBar" class="secret"></input><button id="searchButton" class="secret">Search</button><div id="randomPage" class="secret"><button><a href= "https://en.wikipedia.org/wiki/Special:Random" target="_blank">Random Page</button></a></div>'); $('.titleBox2').switchClass('titleBox2', 'titleBox', 750, 'easeInQuart', function() { $('.secret').animate({ opacity: 1 }, 1000); }); }); }); $('body').on('click', '#searchButton', function() { var searchItem = $('#searchBar').val(); $('#results').empty(); $.ajax({ url: "https://en.wikipedia.org/w/api.php?action=query&format=json&prop=extracts&exintro&exlimit=max&generator=search&exsentences=1&explaintext=1&gsrlimit=10&gsrsearch=" + searchItem, dataType: "jsonp", success: function(wikiSearchObject) { var resultsArray = []; if (wikiSearchObject.hasOwnProperty('query')) { var pagesArray = wikiSearchObject['query']['pages']; for (var key in pagesArray) { resultsArray.push(pagesArray[key]); } for (x = 0; x < resultsArray.length; x++) { $('#results').append('<div class="resultsBox" id="result"' + x + '><div class="wikiPageTitle"><a href="https://en.wikipedia.org/?curid=' + resultsArray[x]['pageid'] + '" target="_blank">' + resultsArray[x]['title'] + '</a></div><div class="wikiPageIntro">' + resultsArray[x]['extract'] + '</div></div>'); } } else { console.log("test2"); $('#results').append('<div class="resultsBox wikiPageTitle text-center">Sorry, no results found for <strong>' + searchItem + '</strong><div>') } } }); });
});
A Pen by Kevin - Script Codes
A Pen by Kevin - Script Codes
Home Page Home
Developer Kevin
Username KevinBruland
Uploaded August 27, 2022
Rating 3
Size 3,135 Kb
Views 26,312
Do you need developer help for A Pen by Kevin?

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!

Kevin (KevinBruland) Script Codes
Name
Calculator
Pomodoro Clock
Simon
Pixel Painter Current
Canvas Circle Illusion
A Pen by Kevin
Glossy Buttons
Twitch
CSS Zen Garden Template
Canvas Mouse Position Radial Gradient
Create amazing art & images 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!