Skip to content
Permalink
Browse files

Remove onfocus and onblur attributes and use addEventListener method …

…instead to change the search field shadow
  • Loading branch information...
victor-lf committed Sep 19, 2018
1 parent ceae067 commit 2504ef6fec2504cfddc6320e1984b705290149e8
Showing with 11 additions and 8 deletions.
  1. +2 −2 index.html
  2. +9 −6 script.js
@@ -13,8 +13,8 @@
<header>
<div>
<a href="https://victor-lf.github.io/google-homepage/"><img src="images/google_logo.png" alt="Google" width="120" height="44" /></a>
<form id="search" action="#" method="GET">
<input type="search" name="query" title="Search" value="build this webpage" onfocus="myFunction()" onblur="myFunction2()" autocomplete="off" />
<form action="#" method="GET">
<input type="search" name="query" title="Search" value="build this webpage" autocomplete="off" />
<button type="submit">
<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59
@@ -1,7 +1,10 @@
function myFunction() {
document.getElementById("search").setAttribute("style", "box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.08);");
}
var form = document.getElementsByTagName("form")[0];
var input = document.getElementsByTagName("input")[0];

function myFunction2() {
document.getElementById("search").setAttribute("style", "box-shadow: 0 2px 2px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);");
}
input.addEventListener("focus", function() {
form.setAttribute("style", "box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.08);");
});

input.addEventListener("blur", function() {
form.setAttribute("style", "box-shadow: 0 2px 2px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);");
})

0 comments on commit 2504ef6

Please sign in to comment.
You can’t perform that action at this time.