El día de hoy se continuó con el proyecto del periodo.
Por mi parte intenté hacer un código que hiciera lo siguiente:
(Este código no es el del proyecto, es una prueba que yo hice)
Pedir -pasajero
-hora
-fecha
-maleta
-destino
-transporte
Si el destino es departamental, el valor del pasaje es 40.000$, si es nacional es 100.000$
- Si el número de maletas es mayor a 3, el valor del pasaje aumenta en 2%
- Si el número de maletas es mayor o igual a 1, el valor del pasaje disminuye en 5%
- Si el número de maletas es cero, el valor del pasaje disminuye en 2,5%
-Si el transporte es copetran el "total" será el 10% del pasaje, y este "total" se le deberá disminuir al valor del pasaje
-Si el transporte es berlinas el "total" será el 5% del pasaje, y este "total" se le deberá disminuir al valor del pasaje
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
function valorfinal(){
var d = document.getElementById("destino").value
if(d == "Departamental"){var pasaje = 40000}
else {var pasaje = 100000}
var m = document.getElementById("maleta").value
if (m > 3) { var valorpasaje = pasaje + (pasaje/100)*2}
else if (m >=1) {var valorpasaje = pasaje - (pasaje/100)*5}
else {var valorpasaje = pasaje - (pasaje/100)*2.5}
var t = document.getElementById("transporte").value
if (t == "Copetran") {var valortotal = valorpasaje - (valorpasaje/100)*10}
else {var valortotal = valorpasaje - (valorpasaje/100)*5}
var pasajero = document.getElementById("pasajero").value
var hora = document.getElementById("hora").value
var fecha = document.getElementById("fecha").value
alert("Hola " + pasajero + ".\nCon destino " + d + " a las " + hora + " con fecha del " + fecha + ".\nCon " + m + " maletas el valor de su pasaje es de: " + valorpasaje + "$. En " + t + " su valor total a pagar es de: \n\n" + valortotal + "$" )
}
</script>
<body>
<form action="javascript:valorfinal()">
Pasajero: <input type="text" size="30" placeholder="Pasajero" id="pasajero" required> <hr>
Hora: <input type="time" size="30" id="hora" required> <hr>
Fecha: <input type="date" size="30" id="fecha" required> <hr>
Maletas: <input type="number" id="maleta" min="0" placeholder="Número de maletas" required> <hr>
Destino:<br> <select id="destino" size="2" required>
<option>Departamental</option>
<option>nacional</option>
</select> <hr>
Transporte:<br> <select size="2" id="transporte" required>
<option>Copetran</option>
<option>Berlinas</option>
</select> <hr>
<input type="submit" value="Enviar tiquete">
</form>
</body>
</html>
Mañana se continuará el proyecto en la primera hora de clase.
Read more
El día de hoy se inició el proyecto del segundo bimestre, yo pertenezco al sexto grupo, a nosotros nos corresponde la validación en javascript.
Hoy solo pudo trabajar el primer grupo y un poco el segundo.
A continuación, un ejercicios que realicé en CSS:
El ejercicio consiste en cambiar el diseño de una caja de texto, como se mostrará a continuación:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>cajatexto</title>
</head>
<style>
input.hola{border:10px solid #7342AF;
font-size:25px;
font-family: Helvetica;
padding-top:15px;
padding-left:10px;
padding-bottom:15px;
padding-right:30px;
border-radius:50px;
background:#769FCF;
background: linear-gradient(left, #769FCF, #265287);
background: -moz-linear-gradient(left, #769FCF, #265287);
background: -webkit-linear-gradient(left, #769FCF, #265287);
background: -o-linear-gradient(left, #769FCF, #265287);
color:#22343E;
}
input.hola:hover
{
font-family: Arial;
padding-top:1px;
padding-left:5px;
padding-bottom:200px;
padding-right:100px;
border-radius:5px;
background:#206A12;
background: linear-gradient(left, #206A12, #3EA72A);
background: -moz-linear-gradient(left, #206A12, #3EA72A);
background: -webkit-linear-gradient(left, #206A12, #3EA72A);
background: -o-linear-gradient(left, #206A12, #3EA72A);
color:#E26209;}
input.hola:focus
{
font-family: Arial;
padding-top:1px;
padding-left:5px;
padding-bottom:200px;
padding-right:100px;
border-radius:5px;
background:#206AAF;
background: linear-gradient(left, #206AAF, #3EA98A);
background: -moz-linear-gradient(left, #206AAF, #3EA98A);
background: -webkit-linear-gradient(left, #206AAF, #3EA98A);
background: -o-linear-gradient(left, #206AAF, #3EA98A);
color:#E26209;}
/* ___________________________________________________________________________________________________________________________ */
input.caja
{
border: 1px solid #DBE1EB;
font-size: 18px;
font-family: Arial, Verdana;
padding-left: 7px;
padding-right: 7px;
padding-top: 10px;
padding-bottom: 10px;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-o-border-radius: 4px;
background: #FFFFFF;
background: linear-gradient(left, #FFFFFF, #F7F9FA);
background: -moz-linear-gradient(left, #FFFFFF, #F7F9FA);
background: -webkit-linear-gradient(left, #FFFFFF, #F7F9FA);
background: -o-linear-gradient(left, #FFFFFF, #F7F9FA);
color: #2E3133;
}
input.caja:hover{
font-family: Arial;
padding-top:1px;
padding-left:5px;
padding-bottom:200px;
padding-right:100px;
border-radius:5px;
background:#206A12;
background: linear-gradient(left, #206A12, #3EA72A);
background: -moz-linear-gradient(left, #206A12, #3EA72A);
background: -webkit-linear-gradient(left, #206A12, #3EA72A);
background: -o-linear-gradient(left, #206A12, #3EA72A);
color:#E26209;}
input.caja:focus
{
font-family: Arial;
padding-top:1px;
padding-left:5px;
padding-bottom:200px;
padding-right:100px;
border-radius:5px;
background:#406E32;
background: linear-gradient(left, #406E32, #FF0);
background: -moz-linear-gradient(left, #406E32, #FF0);
background: -webkit-linear-gradient(left, #406E32, #FF0);
background: -o-linear-gradient(left, #406E32, #FF0);
color:#E26209;
}
/* ___________________________________________________________________________________________________________________________ */
textarea.caja{border: 1px solid #DBE1EB;
font-size: 18px;
font-family: Arial, Verdana;
padding-left: 7px;
padding-right: 7px;
padding-top: 10px;
padding-bottom: 10px;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-o-border-radius: 4px;
background: #FFFFFF;
background: linear-gradient(left, #FFFFFF, #F7F9FA);
background: -moz-linear-gradient(left, #FFFFFF, #F7F9FA);
background: -webkit-linear-gradient(left, #FFFFFF, #F7F9FA);
background: -o-linear-gradient(left, #FFFFFF, #F7F9FA);
color: #2E3133;}
textarea.caja:hover
{
font-family: Arial;
padding-top:1px;
padding-left:5px;
padding-bottom:200px;
padding-right:100px;
border-radius:5px;
background:#206A12;
background: linear-gradient(left, #206A12, #3EA72A);
background: -moz-linear-gradient(left, #206A12, #3EA72A);
background: -webkit-linear-gradient(left, #206A12, #3EA72A);
background: -o-linear-gradient(left, #206A12, #3EA72A);
color:#000;}
textarea.caja:focus
{
font-family: Arial;
padding-top:1px;
padding-left:5px;
padding-bottom:200px;
padding-right:100px;
border-radius:5px;
background:#406E32;
background: linear-gradient(left, #406E32, #FF0);
background: -moz-linear-gradient(left, #406E32, #FF0);
background: -webkit-linear-gradient(left, #406E32, #FF0);
background: -o-linear-gradient(left, #406E32, #FF0);
color:#E26209;}
</style>
<body>
<center><input type="text" class="hola" placeholder="HOLAAAAAAAAA"></center>
<hr>
<input type="text" class="caja" size="30" placeholder="Input Text">
<br>
<textarea cols="25" rows="10" class="caja" placeholder="Textarea"></textarea>
</body>
</html>
Read more
El día de hoy no hubo clase de informática debido al día E.
La próxima clase se dará inicio al proyecto del bimestre, en el cual yo junto con otros 3 compañeros seremos la base del digitador, este es quien escribe todo el código, y nosotros somos su apoyo. El tiempo dado para el proyecto serán 4 horas de clase, el día 17 y el 24 de mayo.
Read more
El día de hoy se realizó evaluación individual y escrita, mi nota fue 100 ya que tenía hecho un ejercicio dejado el fin de semana.
Se hizo la introducción al proyecto de este periodo, en el que todo el grado 10-B será un equipo.
A continuación, el ejercicio dejado el fin de semana:
El objetivo era recrear lo más parecido posible la anterior imagen.
Este es el código HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<link rel="stylesheet" type="text/css" href="estiloej2-03-05-2017.css">
<h1>Titulo</h1><br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. <a class="crojo">Ut enim ad minim veniam,</a>
quis nostrud <a class="camarillo">exercitation ullamco laboris</a> nisi ut aliquip.
<br>
<h2>Subtitulo</h2>
Lorem ipsum dolor sit amet, <span class="hola">consectetur <span class="adios">adipisicing</span> elit, sed do eiusmod
tempor</span> incididunt ut labore et dolore <span class="morado">magna aliqua. Ut enim ad minim</span> veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip.
<br><hr><br>
<table >
<caption>Titulo de la tabla</caption>
<tr>
<td></td>
<td class="uno">Titulo columna 1</td>
<td class="uno">Titulo columna 2</td>
</tr>
<tr>
<td class="uno">Titulo fila 1</td>
<td>Lorem ipsum dolor </td>
<td>Lorem <span>ipsum</span> dolor </td>
</tr>
<tr>
<td class="dos">Titulo fila 2</td>
<td>Lorem ipsum dolor</td>
<td>Lorem ipsum dolor </td>
</tr>
<tr>
<td></td>
<td class="dos">Titulo columna 1</td>
<td class="dos">Titulo columna 2</td>
</tr>
</table>
<br><br>
<hr>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud <span>exercitation ullamco laboris nisi ut aliquip.</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip.<br><br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip.<br><br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore <span class="chao">magna aliqua. Ut enim ad minim</span> veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip.</div>
</body>
</html>
El siguiente es el CSS:
h1{color:#38DB47;
text-decoration: blink}
.crojo {color:#F00;
font-weight:700;
text-decoration: none}
.camarillo{color:#EACF20;}
h2{color:#14507A;}
span.hola{color:red;
text-decoration: underline;}
span.adios{color:blue;
font-style: italic; }
.morado{color:#D03FD5;}
span{color:purple;}
table, tr, td {border: 1px solid black;
border-collapse: collapse;
padding-bottom:7px;
padding-top:7px;
padding-left:7px;
padding-right:7px; }
caption{color:blue;}
td{color:#28B73E;
font-weight: 600}
td.uno{font-weight:700;
color:#EACF20;}
td.dos{font-weight: 700;
color:red;}
td div{font-weight: 600;
color:#EACF20;}
td span{font-style: italic;
color:#28B73E;}
div{color:#ACD53F;}
div span{color:#F413DD;}
span.chao{color:#5C951B;
text-decoration: underline; }
Read more
Hoy no hubo clase de informática debido a la prueba saber del segundo periodo.
A continuación un ejercicio en css:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Botón</title>
</head>
<style>
input.button{border:5px solid #256323;
font-size:50px;
font-family: Arial
padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
padding-bottom: 100px;
border-radius: 60px;
background:#D1A454;
background: linear-gradient(left, #D1A454, #FF0);
background: -moz-linear-gradient(left, #D1A454, #FF0);
background: -webkit-linear-gradient(left, #D1A454, #FF0);
background: -o-linear-gradient(left, #D1A454, #FF0);
color:#000;
}
input.button:hover
{background: #365D9D;
color: #FFFFFF;
border-color: #FBFFAD;
border-radius: 10px;
}
input.button:focus{
background: #0F0;
background: linear-gradient(left, #0F0, #FF0);
background: -moz-linear-gradient(left, #0F0, #FF0);
background: -webkit-linear-gradient(left, #0F0, #FF0);
background: -o-linear-gradient(left, #0F0, #0F0);
color: #FFFFFF;
border-color: #F00;
border-radius: 30px;}
/* ___________________________________________________________________________________________________________________________ */
input.asd
{
border: 1px solid #DBE1EB;
font-size: 18px;
font-family: Arial, Verdana;
padding-left: 7px;
padding-right: 7px;
padding-top: 5px;
padding-bottom: 5px;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-o-border-radius: 4px;
background: #4972B5;
background: linear-gradient(left, #4972B5, #618ACB);
background: -moz-linear-gradient(left, #4972B5, #618ACB);
background: -webkit-linear-gradient(left, #4972B5, #618ACB);
background: -o-linear-gradient(left, #4972B5, #618ACB);
color: #FFFFFF;
}
input.asd:hover
{
background: #365D9D;
background: linear-gradient(left, #365D9D, #436CAD);
background: -moz-linear-gradient(left, #365D9D, #436CAD);
background: -webkit-linear-gradient(left, #365D9D, #436CAD);
background: -o-linear-gradient(left, #365D9D, #);
color: #FFFFFF;
border-color: #FBFFAD;
}
</style>
<body>
<center><input type="button" class="button" value="HOLA"><hr></center>
<input type="button" class="asd" value="HOLA">
</body>
</html>
Read more
El día de hoy, se continuó con la explicación de CSS.
Hoy se enseñó la función del punto ( . ), la cual se utiliza para "enfocarse" exclusivamente en algo. Para esto hay que utilizar class="ejemplo".
Ejemplo:
h1{color:#F00;
font-size:30px;}
Lo anterior, cambia el texto de los h1 a rojo, y también cambia el tamaño de la letra dentro de los <h1>
h1.hola{color:#FF0;}
<h1 class="hola">Este es un ejemplo</h1>
Ahora, todos los h1 con la class "hola" tendran el color del texto amarillo.
A continuación, otro ejemplo en donde se cambia el estilo de la etiqueta <a>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<style>
body{background-color:#a0c7e2 }
hr{color:#ff2b09;}
a{color:#dfbc0f;
font-family: arial}
a:hover{color:#000;
font-size:30px;
background-color:#8d38c1;
font-family: arial;
text-transform: uppercase;}
a:focus{color:#0F0;
}
.teclado{color:#537232;
font-family: impact;
font-size:40px;}
a.dos{color:#d82e13;
font-family: arial;
text-transform: uppercase;}
a.dos:hover{color:#000;
font-family: arial;}
a.uno:hover{color:#000;
font-size:30px;
font-family: arial;
text-transform: uppercase;}
a.uno{color:#233d94}
input{
background: linear-gradient(left, #e62222, #9bb64d);
background: -moz-linear-gradient(left, #e62222, #9bb64d);
background: -webkit-linear-gradient(left, #e62222, #9bb64d);
background: -o-linear-gradient(left, #e62222, #9bb64d);}
input.pass{
background: linear-gradient(left, #ffe000, #0d1599);
background: -moz-linear-gradient(left, #ffe000, #0d1599);
background: -webkit-linear-gradient(left, #ffe000, #0d1599);
background: -o-linear-gradient(left, #ffe000, #0d1599);}
input[type="email"]{
background: linear-gradient(left, #ff00ae, #00ffd4);
background: -moz-linear-gradient(left, #ff00ae, #00ffd4);
background: -webkit-linear-gradient(left, #ff00ae, #00ffd4);
background: -o-linear-gradient(left, #ff00ae, #00ffd4);}
/*_________________________________________________________________________________________________________*/
</style>
<a href="http://htmlcolorcodes.com/es/" target="_blank">HOLAAAAAA</a>
<hr>
<a href="http://htmlcolorcodes.com/es/" class="uno" target="_blank">HOLAAAAAA</a>
<hr>
<a href="http://htmlcolorcodes.com/es/" class="dos" target="_blank">HOLAAAAAA</a>
<br><br><br>
Bucaramanga <span class="teclado"> Ciudad</span> Bonita
<hr><hr><hr><hr>
texto: <input type="text" id="a"><br>
texto: <input type="text" id="b"><br>
email: <input type="email" id="c"><br>
password: <input type="password" class="pass" id="d"><br>
Adios <input type="checkbox" id="check">
</body>
</html>
Read more
