Banner de perfil
0

Grover Cristobal

@grovercristobal

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.

Lima, Peru

Object.prototype genera propiedades heredadas , pero nombre_objeto.propiedad = valor también genera eso??

Grover Cristobal@grovercristobal

1let perro = {
2    nombre: 'Grunt',
3    edad: 3,
4    color: 'negro',
5    sexo: 'macho',
6    vacunas: true,
7    ladrar() {
8        console.log(`${this.nombre} ladra fuerte`)
9    }
10}
11
12for(let propiedad in perro){
13    console.log(propiedad)
14
15// esto genera una propiedad heredada
16Object.prototype.patas = 4
17
18// y esto también ??
19perro.patas = 4
20

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

Grover Cristobal@grovercristobal

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.

1<!DOCTYPE html>
2<html lang="en">
3<head>
4     <meta charset="UTF-8">
5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
7     <link rel="stylesheet" href="styles.css">
8     <title>Document</title>
9</head>
10<body style="padding-bottom: 120em;">
11     <header>
12          <div class="logo">
13               GROVER CRISTOBAL
14          </div>
15          <nav>
16               <ul>
17                    <li><a href="">Item 1</a></li>
18                    <li><a href="">Item 2</a></li>
19                    <li><a href="">Item 3</a></li>
20                    <li><a href="">Item 4</a></li>
21                    <li><a href="">Item 5</a></li>
22                    <li><a href="">Item 6</a></li>
23               </ul>
24          </nav>
25     </header>
26     
27     <script src="myScript.js"></script>
28</body>
29</html>
1*,*::before,*::after{
2     box-sizing: border-box;
3     margin: 0;
4     padding: 0;
5}
6header div{
7     background: rgb(50, 179, 148);
8     color: aliceblue;
9     padding: 1em;
10     font: 600 1.5em sans-serif;
11     text-align: center;
12     text-shadow: 0 3px 3px rgba(0,0,0,.5);
13}
14nav{
15     background: linear-gradient(120deg, rgb(52, 126, 196) 20px,rgb(82, 159, 196), rgb(103, 192, 233));
16     height: 3rem;
17         
18}
19ul{
20     display: flex;
21     justify-content: space-around;
22     list-style: none;
23     line-height: 3;
24}
25ul a{
26     text-decoration: none;
27     color: aliceblue;
28     text-shadow: 0 3px 3px rgba(0,0,0,.5);
29}
1const div = document.querySelector('div')
2const nav = document.querySelector('nav')
3
4addEventListener('scroll' , (e) => {
5     if(scrollY >= 78){
6          div.style.display = 'none'
7          nav.style.position = 'fixed'
8          nav.style.width = '100%'
9     }else{
10          div.style.display = 'block'
11     }
12})

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

Grover Cristobal@grovercristobal

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.

1<form class="contactenos contenedor" id="contactanos" method="POST" role="form">
2   <legend class="weight-600">
3     <i class="fas fa-user-circle" aria-hidden="true"></i>CONTÁCTENOS</legend>
4   <div class="form-row align-input">
5       <div class="col-md-12">
6           <p class="paragraph">Déjanos tu información de envío para que tu pedido llegue seguro.</p>
7         </div>
8     <div class="form-group col-md-12">
9       <input type="text" class="form-control line vld draw" id="name" value="" placeholder="Nombres :">
10       <label class="error" for="name">* Campo obligatorio</label>
11     </div>
12     <div class="form-group col-md-12">
13       <input type="text" class="form-control line vld draw" id="lastname" placeholder="Apellidos :">
14       <label class="error" for="lastname">* Campo obligatorio</label>
15     </div>
16     <div class="form-group col-md-12">
17       <select id="document" class="form-control line vld draw">
18         <option value="opt">Tipo de Documento :</option>
19         <option value="dni">DNI</option>
20         <option value="pasaporte">PASAPORTE</option>
21         <option value="dni">RUC</option>
22       </select> 
23       <label class="error" for="document"></label>
24     </div>
25     <div class="form-group col-md-12">
26       <input type="text" class="form-control line vld draw" id="nrodoc" placeholder="Número de Documento:">
27       <label class="error" for="nrodoc">* Campo obligatorio</label>
28     </div>
29     <div class="form-group col-md-12">
30       <input type="text" class="form-control line vld draw" id="address" placeholder="Dirección :">
31       <label class="error" for="address">* Campo obligatorio</label>
32     </div>
33     <div class="form-group col-md-12">
34       <input type="text" class="form-control line vld draw" id="celphone" placeholder="Teléfono :">
35       <label class="error" for="celphone">* Campo obligatorio</label>
36     </div>
37     <div class="form-group col-md-12">
38       <input type="email" class="form-control line vld draw" id="email" placeholder="E-mail :">
39       <label class="error" for="email">* Campo obligatorio</label>
40     </div>
41   </div>
42   <br>
43   <div class="form-group col-md-12">
44     <textarea class="form-control line" rows="5" id="description" placeholder="Descripción :"></textarea>
45   </div>
46   <button id="submit" type="submit" class="btn btn-danger center-block">Enviar</button>
47
48 </form>
1.contenedor{
2       padding: 1.5rem 1em;
3       max-width: 500px;
4       margin-left: auto;
5       margin-right: auto;
6       background: rgb(247, 247, 247);
7   }
8     legend::after{
9       content: '';
10       display: block;
11       width: 100%;
12       height: .1em;
13       margin-top: 1.5rem;
14       margin-bottom: .5em;
15       background: rgb(250,17,0);
16   }
17     .form-group input.line , select.line , textarea.line{
18       border-bottom: 1px solid #888 !important;
19       background: transparent !important;
20       border: 0;
21     }
22     input.line:focus,
23     select.line:focus,
24     textarea.line:focus{
25       outline:none !important;
26       outline-offset: 0;
27     }
28     input.line:active{
29       outline:none !important;
30       outline-offset: 0 !important;
31     }
32     .form-group .error{
33       display: none;
34     }
35     input.form-control , select.form-control,
36     textarea.form-control{
37       border-radius: 0 !important;
38     }
Imagen de la publicación

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

Grover Cristobal@grovercristobal

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.

1<!--
2       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:
3       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.
4   -->
5   <form action="" class="frm">
6       <fieldset class="fieldset">
7           <legend class="legend">Tarifa Estacionamiento</legend>
8           <br>
9           <label for="name">Nombres: </label><input class="inputText" type="text" name="name" id="name"><br><br>
10           <label for="lastname">Apellidos: </label><input class="inputText" type="text" name="lastname" id="lastname"><br><br>
11           <label for="cant-hours">Cantidad horas: </label><input class="inputText" type="text" name="cant-hours" id="cant-hours"><br><br>
12           <label for="pago-hour">Pago hora: </label><input class="inputText" type="text" name="pago-hour" id="pago-hour" ><br><br>
13           <div>
14               <button class="btn" id="btnCalcular" type="button">CALCULAR</button>
15               <button class="btn" id="btnLimpiar" type="reset">LIMPIAR</button>
16           </div>
17       </fieldset>
18       <br>
19       <hr>   
20   </form>
21
22   <div class="results" id="results">
23       <label class="etiqueta" id="">Sr(a)</label> <label class="answer" id="nombres-completos"></label>
24       <label class="etiqueta" id="">Cantidad de horas:</label> <label class="answer" id="hrs-trabajadas"></label>
25       <label class="etiqueta" id="">Pago por hora:</label> <label class="answer" id="hrs-extras"></label>
26       <label class="etiqueta" id="">Pago total:</label> <label class="answer" id="pagoTotal"></label>
27   </div>
1  *,
2*::before,
3*::after{
4   box-sizing: border-box;
5   margin: 0;
6   padding: 0;
7}
8body{
9   font-family: sans-serif;
10}
11.frm{
12   margin: 2rem 2rem 0;
13}
14.fieldset{
15   width: 30%;
16}
17.fieldset div{
18   display: flex;
19   justify-content: space-evenly;
20   width: 30%;
21   margin-left: auto;
22   margin-right: auto;
23}
24.inputText{
25   width: 60%;
26   padding: .3em;
27   font: 400 1rem sans-serif; 
28}
29label{
30  display: inline-block;
31  width: 150px;
32  text-align: right;
33  margin-right: 1em;
34}
35.btn{
36   display: block;
37   padding: .5em;
38   margin: 0 auto 1rem;
39   box-shadow: 0 2px 2px rgba(0,0,0,.6);
40}
41.results{
42   width: 23%;
43   margin-top: 2rem;
44   margin-left: 2rem;
45   display: none;
46}
47.results .etiqueta{
48   width: 190px;
49   text-align: left;
50}
51.results .answer, .etiqueta{
52   display: inline-block;
53}
54.results .answer{
55   width: 48%;
56   text-align: left;
57}
1document.addEventListener('DOMContentLoaded', inicializar)
2
3const inicializar = () => {
4   let btnCalc = document.getElementById('btnCalcular')
5   btnCalc.addEventListener('click', calcular)
6}
7
8const calcular = () => {
9   let name = document.getElementById('name')
10   let apel = document.getElementById('lastname')
11   let ch = document.getElementById('cant-hours')
12   let ph = document.getElementById('pago-hour')
13   let results = document.getElementById('results')
14   var tp
15
16   if(ch < 3){
17       ph = 5
18       tp = `${ch.value * ph.value}`
19   }
20   
21   let stp = document.getElementById('pagoTotal')
22   stp.textContent = tp
23   results.style.display = 'block'
24
25}

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

Grover Cristobal@grovercristobal

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!