Avatar

Elvis Grover Cristobal Garrido

@ElvisGroverCristobalGarrido

Me llamo Elvis Cristobal, soy soltero natural de Lima, soy una persona cristiana y en mis ratos libres me gusta escuchar música cristiana, leer, compartir, estudiar, etc. Estudie la carrera de Informática en un Instituto de la capital durante 3 años, soy titulado en Informática y aunque aún no ejerzo la carrera, tengo fe en Dios que lo lograré, porque sigo preparándome con mucho esfuerzo para lograr mis objetivos y crecer profesionalmente en la empresa que Dios ponga en mi camino.

Comas, Peru
Publicaciones
Certificados
Me gusta
Avatar

¿ Amigos, por que me brinca el efecto del header con el evento Scroll ?

Avatar

Hola amigos, disculpen estoy practicando un efecto con el Scroll en mi header, pero cuando el div superior aparece, éste aparece muy brusco y también brinca.

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <link rel="stylesheet" href="styles.css">
     <title>Document</title>
</head>
<body style="padding-bottom: 120em;">
     <header>
          <div class="logo">
               GROVER CRISTOBAL
          </div>
          <nav>
               <ul>
                    <li><a href="">Item 1</a></li>
                    <li><a href="">Item 2</a></li>
                    <li><a href="">Item 3</a></li>
                    <li><a href="">Item 4</a></li>
                    <li><a href="">Item 5</a></li>
                    <li><a href="">Item 6</a></li>
               </ul>
          </nav>
     </header>
     
     <script src="myScript.js"></script>
</body>
</html>
*,*::before,*::after{
     box-sizing: border-box;
     margin: 0;
     padding: 0;
}
header div{
     background: rgb(50, 179, 148);
     color: aliceblue;
     padding: 1em;
     font: 600 1.5em sans-serif;
     text-align: center;
     text-shadow: 0 3px 3px rgba(0,0,0,.5);
}
nav{
     background: linear-gradient(120deg, rgb(52, 126, 196) 20px,rgb(82, 159, 196), rgb(103, 192, 233));
     height: 3rem;
         
}
ul{
     display: flex;
     justify-content: space-around;
     list-style: none;
     line-height: 3;
}
ul a{
     text-decoration: none;
     color: aliceblue;
     text-shadow: 0 3px 3px rgba(0,0,0,.5);
}
const div = document.querySelector('div')
const nav = document.querySelector('nav')

addEventListener('scroll' , (e) => {
     if(scrollY >= 78){
          div.style.display = 'none'
          nav.style.position = 'fixed'
          nav.style.width = '100%'
     }else{
          div.style.display = 'block'
     }
})
Avatar

Cómo ocultar los bordes por defecto de un input al seleccionarlo, en Bootstrap ?

Avatar

holaaaa buenas tardes amigos, bueno estoy seleccionando mis inputs y aparece el borde azul por defecto y deseo con el :focus quitar los bordes, pero no lo he logrado, estoy usando Bootstrap.

<form class="contactenos contenedor" id="contactanos" method="POST" role="form">
   <legend class="weight-600">
     <i class="fas fa-user-circle" aria-hidden="true"></i>CONTÁCTENOS</legend>
   <div class="form-row align-input">
       <div class="col-md-12">
           <p class="paragraph">Déjanos tu información de envío para que tu pedido llegue seguro.</p>
         </div>
     <div class="form-group col-md-12">
       <input type="text" class="form-control line vld draw" id="name" value="" placeholder="Nombres :">
       <label class="error" for="name">* Campo obligatorio</label>
     </div>
     <div class="form-group col-md-12">
       <input type="text" class="form-control line vld draw" id="lastname" placeholder="Apellidos :">
       <label class="error" for="lastname">* Campo obligatorio</label>
     </div>
     <div class="form-group col-md-12">
       <select id="document" class="form-control line vld draw">
         <option value="opt">Tipo de Documento :</option>
         <option value="dni">DNI</option>
         <option value="pasaporte">PASAPORTE</option>
         <option value="dni">RUC</option>
       </select> 
       <label class="error" for="document"></label>
     </div>
     <div class="form-group col-md-12">
       <input type="text" class="form-control line vld draw" id="nrodoc" placeholder="Número de Documento:">
       <label class="error" for="nrodoc">* Campo obligatorio</label>
     </div>
     <div class="form-group col-md-12">
       <input type="text" class="form-control line vld draw" id="address" placeholder="Dirección :">
       <label class="error" for="address">* Campo obligatorio</label>
     </div>
     <div class="form-group col-md-12">
       <input type="text" class="form-control line vld draw" id="celphone" placeholder="Teléfono :">
       <label class="error" for="celphone">* Campo obligatorio</label>
     </div>
     <div class="form-group col-md-12">
       <input type="email" class="form-control line vld draw" id="email" placeholder="E-mail :">
       <label class="error" for="email">* Campo obligatorio</label>
     </div>
   </div>
   <br>
   <div class="form-group col-md-12">
     <textarea class="form-control line" rows="5" id="description" placeholder="Descripción :"></textarea>
   </div>
   <button id="submit" type="submit" class="btn btn-danger center-block">Enviar</button>

 </form>
.contenedor{
       padding: 1.5rem 1em;
       max-width: 500px;
       margin-left: auto;
       margin-right: auto;
       background: rgb(247, 247, 247);
   }
     legend::after{
       content: '';
       display: block;
       width: 100%;
       height: .1em;
       margin-top: 1.5rem;
       margin-bottom: .5em;
       background: rgb(250,17,0);
   }
     .form-group input.line , select.line , textarea.line{
       border-bottom: 1px solid #888 !important;
       background: transparent !important;
       border: 0;
     }
     input.line:focus,
     select.line:focus,
     textarea.line:focus{
       outline:none !important;
       outline-offset: 0;
     }
     input.line:active{
       outline:none !important;
       outline-offset: 0 !important;
     }
     .form-group .error{
       display: none;
     }
     input.form-control , select.form-control,
     textarea.form-control{
       border-radius: 0 !important;
     }
Avatar

No obtengo el resultado en javascript para calcular el pago de estacionamiento por horas, les agradecería mucho su ayuda amigos!

Avatar

Hola amigos estoy trabajando con un ejercicio para calcular el pago de estacionamiento por horas, y sólo estoy trabajando con la primera condición pero no me da el resultado, no deseo trabajar con onclick en los inputs , y por eso estoy usando el evento DOMContentLoaded y llamando otra función como parámetro para ahi capturar mi botón Calcular y lo asocio con el addEventListener, pero algo esta mal que no me da el resultado, estaré muy agradecido con su ayuda amigos, gracias.

<!--
       El dueño de un estacionamiento requiere un programa que le permita determinar cuánto debe cobrar por el uso del estacionamiento a sus clientes. Las tarifas que se tienen son las siguientes:
       Las dos primeras horas a $5.00 c/u. Las siguientes tres a $4.00 c/u. Las cinco siguientes a $3.00 c/u. Después de diez horas el costo por cada una es de dos pesos.
   -->
   <form action="" class="frm">
       <fieldset class="fieldset">
           <legend class="legend">Tarifa Estacionamiento</legend>
           <br>
           <label for="name">Nombres: </label><input class="inputText" type="text" name="name" id="name"><br><br>
           <label for="lastname">Apellidos: </label><input class="inputText" type="text" name="lastname" id="lastname"><br><br>
           <label for="cant-hours">Cantidad horas: </label><input class="inputText" type="text" name="cant-hours" id="cant-hours"><br><br>
           <label for="pago-hour">Pago hora: </label><input class="inputText" type="text" name="pago-hour" id="pago-hour" ><br><br>
           <div>
               <button class="btn" id="btnCalcular" type="button">CALCULAR</button>
               <button class="btn" id="btnLimpiar" type="reset">LIMPIAR</button>
           </div>
       </fieldset>
       <br>
       <hr>   
   </form>

   <div class="results" id="results">
       <label class="etiqueta" id="">Sr(a)</label> <label class="answer" id="nombres-completos"></label>
       <label class="etiqueta" id="">Cantidad de horas:</label> <label class="answer" id="hrs-trabajadas"></label>
       <label class="etiqueta" id="">Pago por hora:</label> <label class="answer" id="hrs-extras"></label>
       <label class="etiqueta" id="">Pago total:</label> <label class="answer" id="pagoTotal"></label>
   </div>
  *,
*::before,
*::after{
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}
body{
   font-family: sans-serif;
}
.frm{
   margin: 2rem 2rem 0;
}
.fieldset{
   width: 30%;
}
.fieldset div{
   display: flex;
   justify-content: space-evenly;
   width: 30%;
   margin-left: auto;
   margin-right: auto;
}
.inputText{
   width: 60%;
   padding: .3em;
   font: 400 1rem sans-serif; 
}
label{
  display: inline-block;
  width: 150px;
  text-align: right;
  margin-right: 1em;
}
.btn{
   display: block;
   padding: .5em;
   margin: 0 auto 1rem;
   box-shadow: 0 2px 2px rgba(0,0,0,.6);
}
.results{
   width: 23%;
   margin-top: 2rem;
   margin-left: 2rem;
   display: none;
}
.results .etiqueta{
   width: 190px;
   text-align: left;
}
.results .answer, .etiqueta{
   display: inline-block;
}
.results .answer{
   width: 48%;
   text-align: left;
}
document.addEventListener('DOMContentLoaded', inicializar)

const inicializar = () => {
   let btnCalc = document.getElementById('btnCalcular')
   btnCalc.addEventListener('click', calcular)
}

const calcular = () => {
   let name = document.getElementById('name')
   let apel = document.getElementById('lastname')
   let ch = document.getElementById('cant-hours')
   let ph = document.getElementById('pago-hour')
   let results = document.getElementById('results')
   var tp

   if(ch < 3){
       ph = 5
       tp = `${ch.value * ph.value}`
   }
   
   let stp = document.getElementById('pagoTotal')
   stp.textContent = tp
   results.style.display = 'block'

} 
Avatar

Sería correcto seguir todas las clases de un curso básico y luego empezar a practicar ??

Avatar

Hola amigos, disculpen, quería saber su opinión sobre como uds avanzan un curso de EDteam. Por mi parte yo estoy avanzando el curso gratuito de JS 2018 y estoy siguiendo los vídeos y a la vez anotando las bases y escribiendo los códigos de ejemplos, y después de terminar el curso recién empezare a practicar.
En el caso de uds como han hecho, como han avanzado?? Gracias de antemano!

Avatar

Obtuve un nuevo puesto de trabajo para mí, muchas gracias!

Avatar

Gracias a Dios en primer lugar por darme fuerzas y ánimos para seguir luchando y por poner a EDteam en mi camino y gracias también por las enseñanzas del profesor Álvaro y de todo el equipo de EDteam con sus buenas practicas. Muchas veces caí y me desanime por la falta de tiempo, así estuve un par de años, pero Dios me dio fuerzas y me levanto, ahora puedo decir que soy Diseñador Web, y esto recién empieza para mí, de verdad muchas gracias!