Desafío: Google en una semana

desafio-google-en-una-semana.markdown

Desafío: Google en una semana

A Pen by Joel Alejandro Villarreal Bertoldi on CodePen.

License.

index.html

<header class="menu-container">
  <nav>
    <div class="column-left">
      <i class="fas fa-bars"></i>
      <a class="active" href="#">TODOS</a>
      <a href="#">IMÁGENES</a>
    </div>
    <ul class="column-right"> 
      <a class="menu-button" href="#"><i class="fas fa-th"></i></a>
      <nav class="menu-apps">
        <ul>
          <li><a href="#"><span class="google-icon gi-search"></span> Búsqueda</a></li>
          <li><a href="#"><span class="google-icon x-search"></span> YouTube</a></li>
          <li><a href="#"><span class="google-icon gi-search"></span> Play</a></li>
          <li><a href="#"><span class="google-icon x-search"></span> Noticias</a></li>
          <li><a href="#"><span class="google-icon gi-search"></span> Gmail</a></li>
          <li><a href="#"><span class="google-icon x-search"></span> Drive</a></li>
          <li><a href="#"><span class="google-icon gi-search"></span> Calendario</a></li>
          <li><a href="#"><span class="google-icon x-search"></span> Mi Negocio</a></li>
          <li><a href="#"><span class="google-icon gi-search"></span> Maps</a></li>
          <li><a href="#"><span class="google-icon x-search"></span> Fotos</a></li>
          <li><a href="#"><span class="google-icon gi-search"></span> Chrome</a></li>
          <li><a href="#"><span class="google-icon x-search"></span> Duo</a></li>
        </ul>
        <ul>
          <li><a href="#"><span class="google-icon gi-search"></span>Traductor</a></li>
          <li><a href="#"><span class="google-icon x-search"></span>Libros</a></li>
          <li><a href="#"><span class="google-icon x-search"></span>Blogger</a></li>
          <li><a href="#"><span class="google-icon gi-search"></span>Cuenta</a></li>
          <li><a href="#"><span class="google-icon x-search"></span>Documentos</a></li>
          <li><a href="#"><span class="google-icon x-search"></span>Contactos</a></li>
        </ul>
      </nav>  
      <div class="profile-container">
        <img class="profile" src="https://lh3.googleusercontent.com/a-/AAuE7mCsjj_I74nsB16lRADE6VAVA4fqAOxQHqNdmibJ=s100">
      </div>
    </div>
  </nav>
</header>
  
<main class="google-main">
   <div class="image"><img src="https://www.google.com.ar/logos/doodles/2020/thank-you-farmworkers-and-farmers-6753651837108757.2-law.gif">
  <i class="fas fa-share-alt"></i></div>
  <div class="search-google">
    <input type="text" name="Search" placeholder="">
    <button class="button-search"><i class="fas fa-search"></i></button>
  </div> 
  <div class="message">
  <a href="#">Gracias a todos los profesionales de la salud</a>
    <p>Ofrecido por Google en: <a href="#">English</a></p></div>
  </div>

</main>

<footer class="footer-content">
  <p>Argentina</p>
  <div class="location">
    Desconocido - <a href="">Usar la ubicación precisa</a>
  </div>
  <nav class="list-about-google">
    <a href="">Preferencia</a>
    <a href="">Privacidad</a>
    <a href="">Condiciones</a>
    <a href="">Publicidad</a>
    <a href="">Negocios</a>
    <a href="">Sobre Google</a> 
  </nav> 
</footer>

script.js

// Ejercicio:
//
// 1. Leer el valor del cuadro de texto de búsqueda y guardarlo en una variable
//    llamada terminosDeBusqueda.
// 2. Comparar si la longitud del valor es menor a 3. Si la condición se cumple,
//    mostrar un mensaje de alerta al usuario.

let botonDeBusqueda = document.querySelector(".button-search");

botonDeBusqueda.onclick = function () {
  let terminosDeBusqueda = document.querySelector(".search-google input").value;
  
  if(terminosDeBusqueda.length <= 3){
    console.log("escribi mas carateres");
  } else if(terminosDeBusqueda.length >= 10){
    console.log("escribí menos caracteres");
  }
  
  alert(terminosDeBusqueda);
}

style.css

@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

body {
  font-family: Roboto, sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.menu-container > nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding:0.5rem;
}

.column-left a {
  text-decoration: none;
  padding: 10px;
  color: #757575;
  display: inline-block;
  font-weight: 600;
  font-size: 12px;
  margin-left: 15px;
}
.column-left .fa-bars{
  color: #757575;
}
.column-right .fa-th{
  color: #757575;
}
.column-left .active {
  color: #4285f4;
  border-bottom: 2px solid #4285f4;
}
.column-right {
  display: flex;
  align-items: center;
}

.menu-container .profile {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

.menu-container .profile-container {
  display: flex;
  border: 3px solid;
  border-radius: 50%;
  padding: 2px;
  border-top-color: #DB4437;
  border-right-color: #4285F4;
  border-bottom-color: #0F9D58;
  border-left-color: #F4B400;
  margin-left: 1rem;
}
.google-main{
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}
.image{
  color: #4285F4; 
}
.image img {
  width: 325px;
}
.button-search{
  background-color:#3b78e7;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  border: none;
  padding: 9px 12px;
  color: white;
  font-size: 1.2rem;
  border: 1px solid #3367d6;
  outline: 0;  
}
.search-google input{
  width: 350px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border: 1px solid #DFE1E5;
  border-right: none;
  padding-left: 15px;
  padding-right: 15px;
  font-family: Roboto, sans-serif;
  font-size: 1rem;
}

.search-google input:focus {
  outline: 0;
}

.search-google{
  display: flex;
  padding: 25px 0px;
}
.message{
  text-align: center;
}
.message a, .message a:visited {
  color: #3b78e7;
}
.footer-content {
  background-color: #f2f2f2;
  display: flex;
  flex-direction: column;
}
.location {
  text-align: center;
}

.list-about-google{
  display: flex;
  flex-wrap: wrap;
  padding: 5px;
  justify-content: center;
}

.list-about-google a {
  padding: 10px;
}

.google-icon {
  background: url(https://ssl.gstatic.com/gb/images/p2_3a0632af.png); 
  width: 64px; 
  height: 64px; 
  background-size: 64px 2824px;
  display: inline-block;
}

.gi-search {
  background-position-y: -128px; 
}
.x-search {
  background-position-y: -266px; 
}
.menu-button:focus + .menu-apps{
  display: flex;
}
.menu-apps {
  background: white;
  border: 1px solid #00000033; 
  border-radius:6px;
  position: absolute;
  top: 50px; right: 27px;
  flex-direction: column;
  width: 250px;
  justify-content: center;
  align-items: center;
  display: none;
}
.menu-apps ul{
  list-style: none;
  margin: 0;
  padding: 5px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  text-align: center;
  
  
}
.menu-apps ul li{
  display: inline-block;
  padding: 5px;
  font-size: 0.8rem;
  width: 75px;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media screen and (min-width:480px){
  .column-left{
    display: none;
  }
  .column-right{
    flex: 1;
    justify-content: flex-end;
  }
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet" />