[SOLVED] Recreating I am feeling lucky button

Recreating I am feeling lucky button

My goal is that when the I am feeling lucky button is pressed the user is sent to the first page of the search

How can I do that? I was thinking of using some function when the button is pressed or is there any easier way?

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Search</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body >
        <form class="bar" action="https://www.google.com/search">
            <input class="search" type="text" name="q">
            <input id ="search" type="submit" value="Google Search">
            <input id ="luck" type="button" value="I am feeling lucky">
        </form>
        <ul id="links">
            <li><a href="imagesearch.html">Image Search </a></li>
            <br>
            <li><a href="advancedsearch.html">Advanced Search </a></li>
        </ul>
    </body>
</html>

Solution

u could use a js to do that:

function feelingLucky() {
   var query = document.querySelector('.search').value;
   window.location.href = 'https://www.google.com/search?q=' + encodeURIComponent(query) + '&btnI';
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Search</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body >
        <form class="bar" action="https://www.google.com/search">
            <input class="search" type="text" name="q">
            <input id ="search" type="submit" value="Google Search">
            <input id ="luck" type="button" value="I am feeling lucky" onclick="feelingLucky()">
        </form>
        <ul id="links">
            <li><a href="imagesearch.html">Image Search </a></li>
            <br>
            <li><a href="advancedsearch.html">Advanced Search </a></li>
        </ul>
    </body>
</html>