A Pen by Joel

Developer
Joel
Size
5,031 Kb
Views
10,120
  1. A Pen by Joel Previews
  2. A Pen by Joel HTML Codes
  3. A Pen by Joel CSS Codes
  4. A Pen by Joel JS Codes

How do I make an a pen by joel?

What is a a pen by joel? How do you make a a pen by joel? This script and codes were developed by Joel on 26 November 2022, Saturday.

A Pen by Joel Previews
IQ Test

A Pen by Joel - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Joel</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
<main id="main"> <div id="search-wrapper"> <div class="wiki-container"> <h1 id="header">The World Is At Your Fingertips</h1> <div id="search-bar-container"> <form id="search" action="post"> <div id="search-form"> <input id="search-bar" type="text" required> <div id="search-button-icon-container" type="submit"> <div id="circle"></div> <div id="handle"></div> </div> </div> </form> </div> <div id="random-button-container"> <strong><a href="https://en.wikipedia.org/wiki/Special:Random" id="random-submit">Random</a></strong> </div> </div> </div> <div id="results"></div>
</main> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

A Pen by Joel - Script Codes CSS Codes

html { background-color: #AA63B1; color: #1B1F1E; font-family: "Muli", sans-serif;
}
#search-wrapper { position: relative; height: 600px;
}
.wiki-container { width: 500px; height: 200px; position: absolute; top: 50%; left: 50%; margin-top: -200px; margin-left: -250px;
}
h1 { margin: 0 0 40px 0; text-align: center;
}
#search-bar-container { margin-bottom: 40px;
}
#search-bar-container form { border: 3px solid #0F0610;
}
#search-bar-container form #search-bar { width: 400px; border: none; background-color: #FFFCDC; text-align: center; border-right: 1px solid #1B1F1E; color: #1B1F1E; padding: 20px 0;
}
#search-bar-container form input:enabled { outline: none;
}
#search-button-icon-container { position: relative; width: 92px; height: 60px; background-color: #AA63B1; text-align: center; color: #1B1F1E; float: right;
}
#search-button-icon-container #circle { position: absolute; height: 20px; width: 20px; background-color: #AA63B1; border: 2px solid #1B1F1E; border-radius: 25px; top: 20%; left: 30%;
}
#search-button-icon-container #handle { position: absolute; top: 54%; left: 55%; backgound-color: #000; height: 12px; width: 0; border: 1px solid #1B1F1E; transform: rotate(-45deg);
}
input::-webkit-input-placeholder { color: #1B1F1E;
}
#random-button-container { text-align: center;
}
#random-button-container input { background-color: #AA63B1; border: 3px solid #0F0610; color: #1B1F1E; padding: 10px 20px;
}
#random-submit { text-transform: uppercase; background-color: #AA63B1; padding: 15px 20px; border: 1px solid #1B1F1E; color: #1B1F1E;
}
#random-submit:hover { color: #0F0610;
}
.search-bar-transition { height: 300px !important; -webkit-transition: height 2.5s ease-in-out; -moz-transition: height 2.5s ease-in-out; -ms-transition: height 2.5s ease-in-out; -o-transition: height 2.5s ease-in-out; transition: height 2.5s ease-in-out;
}
.h1-transition { opacity: 0; -webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -ms-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; transition: all 2s ease-in-out;
}
a { text-decoration: none;
}
.info { opacity: 1; width: 80%; margin: 5px auto; padding: 20px; background-color: rgba(0, 0, 0, 0.1); color: black; border-left: 5px solid #AA63B1;
}
.info:hover { border-left: 5px solid black;
}
@media (max-width: 750px) { #search-wrapper { width: 100%; } .info { width: 95%; } .wiki-container { width: 400px; margin-left: -200px; } #search-bar { width: 300px !important; }
}

A Pen by Joel - Script Codes JS Codes

window.onload = function(){
/*******************************************************
SEARCH Response
*******************************************************/ var searchCriteria = function(search){ var criteriaElement = document.getElementById('search-bar'); var criteria = criteriaElement.value; var getJson = function(url, callback){ moveSearchBar();
/************************************************
*
Check if data has already been searched for and if so get rid of old data for new search
*
***************************************************/
$.getJSON(url + criteria, function(data){ //get the objects oriented in and ordered array to cycle through var pages = data.query.pages var allPropertyNames = Object.keys(pages); //loop through object and get all information for (var i = 0; i < allPropertyNames.length; i++){ var title = data.query.pages[allPropertyNames[i]].title; var extract = data.query.pages[allPropertyNames[i]].extract; var pageId = data.query.pages[allPropertyNames[i]].pageid; showInfo(title, extract, pageId, i); }
//put information onto page })
function moveSearchBar(){ var pageHeading = document.getElementById("header"); var searchBarContainer = document.getElementById("search-wrapper"); if (!searchBarContainer.classList.contains('search-bar-transition')){ searchBarContainer.classList.add('search-bar-transition'); pageHeading.classList.add('h1-transition'); } }
function slidePagesFromRight(){
}
function showInfo(title, extract, pageId, count){
//create Elements var wikiPagesContainer = document.createElement("div"); //Add class to div in order to create smooth transition countString = ["one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten"]; wikiPagesContainer.classList.add("info"); wikiPagesContainer.classList.add(countString[count] + "-count"); var titleContainer = document.createElement("h2"); var extractContainer = document.createElement("p"); var linkContainer = document.createElement("a"); //create link linkContainer.href = "https://en.wikipedia.org/?curid=" + pageId;
//create text nodes var extractInfo = document.createTextNode(extract); var title = document.createTextNode(title);
//Put text in elements linkContainer.appendChild(wikiPagesContainer); extractContainer.appendChild(extractInfo); titleContainer.appendChild(title); wikiPagesContainer.appendChild(titleContainer); extractContainer.appendChild(extractInfo);
//Make Link
//Find position for information var position = document.getElementById("results");
//Put onto page wikiPagesContainer.appendChild(titleContainer); wikiPagesContainer.appendChild(extractContainer); position.appendChild(linkContainer); position.style.padding = document.getElementsByClassName("wiki-container").clientHeight + "px"; } };
getJson("https://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=10&prop=pageimages|extracts&pilimit=max&exintro&explaintext&exsentences=1&exlimit=max&callback=?&gsrsearch=");
}
/*******************************************************
RANDOM SEARCH
*******************************************************/
function randomSearch(){ var getRandom = function(url){ var xhr = new XMLHttpRequest(); xhr.open("get", url); xhr.send; console.log(xhr.responseText); } getRandom("https://en.wikipedia.org/w/api.php?action=query&format=json&list=random&callback=?&rnnamespace=0");
}
/********************************************************
PROGRAM STARTS HERE
*********************************************************/
var searchButton = document.getElementById("search-button-icon-container");
var random = document.getElementById("random-submit");
var inputBox = document.getElementById("search-bar");
//SEARCH BUTTON CLICKED
searchButton.addEventListener("click", function(){ if(document.getElementById("search-bar").value == ""){ document.getElementById("search-bar").placeholder = "Your search returned emptiness. Try Again"; } else{ searchCriteria(); }
});
//Press Enter inputBox.addEventListener("keypress", function(e){ console.log(e.keyCode); if(e.keyCode == 13){ e.preventDefault(); if(document.getElementById("search-bar").value == ""){ document.getElementById("search-bar").placeholder = "Your search returned emptiness. Try Again"; } else{ searchCriteria(); } }
});
//RANDOM BUTTON CLICKED
random.addEventListener("click", function(){ randomSearch();
});
};
A Pen by Joel - Script Codes
A Pen by Joel - Script Codes
Home Page Home
Developer Joel
Username HuffmanJ25
Uploaded November 26, 2022
Rating 3
Size 5,031 Kb
Views 10,120
Do you need developer help for A Pen by Joel?

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!

Joel (HuffmanJ25) Script Codes
Name
Portfolio Page
Tribute Page - No CSS
Quote Machine
Weather Data
Create amazing captions 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!