first iteration
This commit is contained in:
Nato Boram
parent
36f12d4ea6
commit
1692d789dd
8
.editorconfig
Normal file
8
.editorconfig
Normal file
@ -0,0 +1,8 @@
|
||||
root = true
|
||||
|
||||
[*]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
charset = utf-8
|
||||
trim_trailing_whitespace = true
|
||||
insert_final_newline = true
|
||||
20
.eslintrc.json
Normal file
20
.eslintrc.json
Normal file
@ -0,0 +1,20 @@
|
||||
{
|
||||
"env": {
|
||||
"browser": true,
|
||||
"es2021": true
|
||||
},
|
||||
"extends": [
|
||||
"eslint:recommended",
|
||||
"prettier",
|
||||
"plugin:prettier/recommended"
|
||||
],
|
||||
"parserOptions": {
|
||||
"ecmaVersion": "latest",
|
||||
"sourceType": "module"
|
||||
},
|
||||
"rules": {
|
||||
"eqeqeq": "error",
|
||||
"semi": "off",
|
||||
"prettier/prettier": "off"
|
||||
}
|
||||
}
|
||||
4
.prettierrc.json
Normal file
4
.prettierrc.json
Normal file
@ -0,0 +1,4 @@
|
||||
{
|
||||
"arrowParens": "avoid",
|
||||
"semi": false
|
||||
}
|
||||
8
.vscode/extensions.json
vendored
Normal file
8
.vscode/extensions.json
vendored
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"recommendations": [
|
||||
"dbaeumer.vscode-eslint",
|
||||
"esbenp.prettier-vscode",
|
||||
"ms-vscode.live-server",
|
||||
"davidanson.vscode-markdownlint"
|
||||
]
|
||||
}
|
||||
20
.vscode/settings.json
vendored
Normal file
20
.vscode/settings.json
vendored
Normal file
@ -0,0 +1,20 @@
|
||||
{
|
||||
"[html]": {
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||
},
|
||||
"[javascript]": {
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||
},
|
||||
"[json]": {
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||
},
|
||||
"[markdown]": {
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||
},
|
||||
"[yaml]": {
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||
},
|
||||
"editor.rulers": [
|
||||
80
|
||||
]
|
||||
}
|
||||
10
index.css
Normal file
10
index.css
Normal file
@ -0,0 +1,10 @@
|
||||
#cursor {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#message {
|
||||
transition-property: opacity;
|
||||
transition-duration: 0.3s;
|
||||
}
|
||||
106
index.html
Normal file
106
index.html
Normal file
@ -0,0 +1,106 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
<link
|
||||
rel="icon"
|
||||
href="https://icons.getbootstrap.com/assets/icons/google.svg"
|
||||
/>
|
||||
|
||||
<!-- Bootstrap -->
|
||||
<link
|
||||
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
|
||||
rel="stylesheet"
|
||||
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
<script
|
||||
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"
|
||||
integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
|
||||
crossorigin="anonymous"
|
||||
></script>
|
||||
<script
|
||||
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"
|
||||
integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
|
||||
crossorigin="anonymous"
|
||||
></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.6.1/font/bootstrap-icons.css"
|
||||
/>
|
||||
|
||||
<link rel="stylesheet" href="index.css" />
|
||||
<script src="index.js"></script>
|
||||
|
||||
<title>Let me Google that for you</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<form class="row g-3 text-center mt-5">
|
||||
<!-- Google -->
|
||||
<label class="display-1 form-label fw-normal" for="input">
|
||||
<span class="text-primary">G</span><span class="text-danger">o</span
|
||||
><span class="text-warning">o</span><span class="text-primary">g</span
|
||||
><span class="text-success">l</span><span class="text-danger">e</span>
|
||||
</label>
|
||||
|
||||
<!-- Input -->
|
||||
<div
|
||||
class="
|
||||
bg-body
|
||||
border border-1 border-light
|
||||
input-group
|
||||
rounded-pill
|
||||
shadow-sm
|
||||
"
|
||||
>
|
||||
<label
|
||||
class="input-group-text bi-search bg-body border-0"
|
||||
for="input"
|
||||
id="searchicon"
|
||||
></label>
|
||||
<input
|
||||
class="form-control border-0 bg-body"
|
||||
id="input"
|
||||
maxlength="2048"
|
||||
name="search"
|
||||
placeholder="Search"
|
||||
required
|
||||
title="Search"
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div>
|
||||
<button
|
||||
id="search"
|
||||
class="btn btn-light"
|
||||
type="submit"
|
||||
onclick="onClickSearch()"
|
||||
>
|
||||
Google Search
|
||||
</button>
|
||||
<button
|
||||
id="lucky"
|
||||
class="btn btn-light"
|
||||
title="Open the first search result"
|
||||
type="submit"
|
||||
onclick="onClickLucky()"
|
||||
>
|
||||
I'm feeling lucky
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Alert -->
|
||||
<div id="message" class="alert text-start opacity-0">
|
||||
<h5 id="message-heading" class="alert-heading"></h5>
|
||||
<div id="message-content"></div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
128
index.js
Normal file
128
index.js
Normal file
@ -0,0 +1,128 @@
|
||||
"use strict"
|
||||
|
||||
/** @type {{search?: string; lucky?: boolean;}} */
|
||||
// @ts-ignore
|
||||
const query = window.location.search
|
||||
.substr(1)
|
||||
.split("&")
|
||||
.map(keyValue => keyValue.split("="))
|
||||
.map(([key, value]) => ({
|
||||
[decodeURIComponent(key)]: decodeURIComponent(value?.replace("+", "%20")),
|
||||
}))
|
||||
.reduce((previous, current) => ({ ...previous, ...current }), {})
|
||||
|
||||
/** @type {HTMLInputElement} */
|
||||
let input
|
||||
|
||||
window.addEventListener("load", async () => {
|
||||
// @ts-ignore
|
||||
input = document.getElementById("input")
|
||||
input.value = ""
|
||||
|
||||
if (!query.search) return
|
||||
|
||||
await setMessage("Step 1", "Type in your search")
|
||||
const cursor = makeCursor()
|
||||
await move(cursor, input)
|
||||
input.focus()
|
||||
await write()
|
||||
await new Promise(resolve => setTimeout(resolve, 1000))
|
||||
input.blur()
|
||||
|
||||
await setMessage("Step 2", "Click on the search button")
|
||||
const button = query.lucky
|
||||
? document.getElementById("lucky")
|
||||
: document.getElementById("search")
|
||||
await move(cursor, button)
|
||||
button.focus()
|
||||
await new Promise(resolve => setTimeout(resolve, 1000))
|
||||
|
||||
await setMessage("Come on", "Was it that hard?", "alert-success")
|
||||
await new Promise(resolve => setTimeout(resolve, 3000))
|
||||
|
||||
window.location.href = encodeURI(
|
||||
`https://www.google.com/search?q=${query.search}${
|
||||
query.lucky ? "&btnI" : ""
|
||||
}`
|
||||
)
|
||||
})
|
||||
|
||||
function makeCursor() {
|
||||
const cursor = document.createElement("span")
|
||||
cursor.className = "bi-cursor-fill"
|
||||
cursor.id = "cursor"
|
||||
document.body.appendChild(cursor)
|
||||
return cursor
|
||||
}
|
||||
|
||||
async function move(cursor, target) {
|
||||
return new Promise(resolve => {
|
||||
const diffX =
|
||||
target.getBoundingClientRect().left +
|
||||
target.clientWidth / 2 -
|
||||
cursor.getBoundingClientRect().left
|
||||
const diffY =
|
||||
target.getBoundingClientRect().top +
|
||||
target.clientHeight / 2 -
|
||||
cursor.getBoundingClientRect().top
|
||||
|
||||
const steps = 60
|
||||
const stepX = diffX / steps
|
||||
const stepY = diffY / steps
|
||||
|
||||
let step = 0
|
||||
const interval = setInterval(frame, 1000 / 60)
|
||||
|
||||
function frame() {
|
||||
if (step >= steps) {
|
||||
clearInterval(interval)
|
||||
resolve()
|
||||
} else {
|
||||
step++
|
||||
cursor.style.top = (parseFloat(cursor.style.top) || 0) + stepY + "px"
|
||||
cursor.style.left = (parseFloat(cursor.style.left) || 0) + stepX + "px"
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
async function write() {
|
||||
for (const letter of query.search) {
|
||||
await new Promise(resolve => setTimeout(resolve, Math.random() * 200 + 100))
|
||||
input.value += letter
|
||||
}
|
||||
}
|
||||
|
||||
async function setMessage(heading, content, type = "alert-primary") {
|
||||
const message = document.getElementById("message")
|
||||
|
||||
message.classList.add("opacity-0")
|
||||
await new Promise(resolve => setTimeout(resolve, 300))
|
||||
|
||||
message.classList.remove("alert-primary")
|
||||
message.classList.remove("alert-success")
|
||||
message.classList.add(type)
|
||||
document.getElementById("message-heading").innerText = heading
|
||||
document.getElementById("message-content").innerText = content
|
||||
|
||||
message.classList.remove("opacity-0")
|
||||
await new Promise(resolve => setTimeout(resolve, 300))
|
||||
}
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
function onClickSearch() {
|
||||
onClickButton(false)
|
||||
}
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
function onClickLucky() {
|
||||
onClickButton(true)
|
||||
}
|
||||
|
||||
function onClickButton(lucky = false) {
|
||||
if (!input.validity.valid) return
|
||||
const url = new URL(window.location.href)
|
||||
url.searchParams.set("search", input.value.trim())
|
||||
if (lucky) url.searchParams.set("lucky", "true")
|
||||
window.location.href = url.href
|
||||
}
|
||||
27
package.json
Normal file
27
package.json
Normal file
@ -0,0 +1,27 @@
|
||||
{
|
||||
"name": "lmgtfy",
|
||||
"description": "Let me Google that for you",
|
||||
"version": "0.0.1",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/NatoBoram/lmgtfy.git"
|
||||
},
|
||||
"keywords": [
|
||||
"Google",
|
||||
"LMGTFY"
|
||||
],
|
||||
"author": "Nato Boram",
|
||||
"license": "GPL-3.0-or-later",
|
||||
"bugs": {
|
||||
"url": "https://github.com/NatoBoram/lmgtfy/issues"
|
||||
},
|
||||
"homepage": "https://github.com/NatoBoram/lmgtfy#readme",
|
||||
"devDependencies": {
|
||||
"@types/bootstrap": "^5.1.6",
|
||||
"eslint": "^8.1.0",
|
||||
"eslint-config-prettier": "^8.3.0",
|
||||
"eslint-plugin-prettier": "^4.0.0",
|
||||
"prettier": "^2.4.1",
|
||||
"prettier-eslint": "^13.0.0"
|
||||
}
|
||||
}
|
||||
1190
pnpm-lock.yaml
Normal file
1190
pnpm-lock.yaml
Normal file
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user