Пошук Створіть власний фронтенд для пошуку Google, пошуку зображень Google і розширеного пошуку Google.
Вашим завданням у цьому проєкті є створення власного фронтенду для пошуку Google, досліджуючи інтерфейс Google, щоб визначити, які параметри GET він очікує, та додавання необхідних HTML та CSS на ваш вебсайт.
З чого почати? Завантажте код дистрибутива з https://cdn.cs50.net/web/2020/spring/projects/0/search.zip та розпакуйте його. Умови завдання Ваш вебсайт повинен відповідати таким вимогам.
Сторінки. Ваш вебсайт повинен мати принаймні три сторінки: одну для пошуку Google, одну для пошуку зображень Google і одну для розширеного пошуку Google. На сторінці пошуку Google у верхньому правому куті сторінки повинні бути посилання для переходу до пошуку зображень або розширеного пошуку. На кожній з двох інших сторінок у верхньому правому куті має бути посилання для повернення до пошуку Google. Текст запиту. На сторінці пошуку Google користувач повинен мати можливість ввести запит, натиснути кнопку «Пошук Google» і перейти до результатів пошуку Google для цієї сторінки. Як і в Google, ваш рядок пошуку повинен бути відцентрований із закругленими кутами. Кнопка пошуку також повинна бути відцентрована та розташована під рядком пошуку. Пошук зображень. На сторінці пошуку зображень Google користувач повинен мати можливість ввести запит, натиснути кнопку пошуку та перейти до результатів пошуку зображень Google для цієї сторінки. Розширений пошук. На сторінці розширеного пошуку Google користувач повинен мати можливість вводити дані для наведених чотирьох полів (взято з власних параметрів розширеного пошуку Google) Знайти сторінки із… «усіма цими словами»:” Знайти сторінки з… «саме цим словом або фразою»:” Знайти сторінки з… «будь-яким із цих слів»: Знайти сторінки з… «жодне з цих слів»: Зовнішній вигляд. Як і власна сторінка розширеного пошуку Google, чотири варіанти слід складати вертикально, а всі текстові поля слід вирівнювати за лівим краєм. Відповідно до власного CSS Google, кнопка «Розширений пошук» повинна бути синьою з білим текстом. Після натискання кнопки «Розширений пошук» користувач повинен перейти на сторінку результатів пошуку для заданого запиту. Пощастило. Додайте кнопку «Мені пощастить» на головну сторінку пошуку Google. Відповідно до власної поведінки Google, натискання цього посилання має перевести користувачів безпосередньо до першого результату пошуку Google для запиту, минаючи звичайну сторінку результатів. Естетика. CSS, який ви пишете, повинен якнайкраще відповідати власній естетиці Google. Підказки Щоб визначити, якими мають бути назви параметрів, ви можете експериментувати з пошуком у Google та переглядати отриману URL-адресу. Також може бути корисно переглянути інспектор «Мережа» (доступний у Google Chrome, вибравши Перегляд -> Розробник -> Інструменти розробника), щоб переглянути деталі щодо запитів, які ваш браузер надсилає до Google. Будь-який елемент (його type – text, submit, number, або щось інше) може мати атрибути name та value, які стануть параметрами GET при поданні форми. Вам також може бути корисно переглянути власний HTML Google, щоб відповісти на ці запитання. У більшості браузерів ви можете натиснути Ctrl та клікнути мишкою або клацнути правою кнопкою миші на сторінці та вибрати «Переглянути джерело сторінки», щоб переглянути вихідний HTML-код сторінки. Щоб включити поле введення до форми, яке користувачі не можуть побачити чи змінити, ви можете використовувати «приховане» поле введення.