Skip to content

Commit 85fe996

Browse files
jjyepezjjyepez
committed
Commit inicial ... working beta OK.
0 parents  commit 85fe996

File tree

3 files changed

+199
-0
lines changed

3 files changed

+199
-0
lines changed

‎index.html

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<title>Juegos PS4 con descuento</title>
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
9+
<link rel="stylesheet" href="styles.css">
10+
</head>
11+
<body>
12+
<h1>Juegos de PS4 con +40% descuento en ML</h1>
13+
<div id="fecha"></div>
14+
15+
<div id="resultados">
16+
<div id="cargando"></div>
17+
</div>
18+
19+
<div class="pie">Demostración de Web Scraping con Javascript y Expresiones Regulares.</div>
20+
<div class="by">by @jjyepez</div>
21+
22+
<script src="index.js"></script>
23+
</body>
24+
</html>

‎index.js

+81
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
/*
2+
Demostración de Web Scraping con Javascript y Expresiones Regulares.
3+
Autor: Julio J. - @jjyepez
4+
Fecha: 24/06/2018
5+
*/
6+
7+
// --- si quieres probar con otros criterios de filtrado, remplaza la URL obtenida en ML en la sig linea --- jjy
8+
const urlML = "https://videojuegos.mercadolibre.com.co/juego-ps4_Envio_Gratis_DisplayType_LF_OrderId_PRICE*DESC_Discount_40-100"
9+
10+
iniciar()
11+
12+
function iniciar(){
13+
traerHTML( urlML )
14+
actualizarFecha()
15+
}
16+
17+
function traerHTML( urlML ){
18+
// --- servicio propio para superar restricciones CORS ... by jjyepez
19+
const URL = "https://noesishosting.com/sw/cors/?a=cors&url=" + urlML
20+
21+
// --- traer el HTML del sitio web
22+
fetch( URL )
23+
.then( rsp => rsp.text() )
24+
.then( rslt => {
25+
const jsonDatosExtraidos = procesarResultados( rslt )
26+
renderDatosExtraidos( jsonDatosExtraidos )
27+
})
28+
.catch( err => { console.log( err ) })
29+
}
30+
31+
// --- procesar con RegExp
32+
function procesarResultados( html ){
33+
const jsonDatos = []
34+
var matches = null
35+
36+
// --- RegExp by jjyepez
37+
const expresionRegular = new RegExp(
38+
"<img(?:.*?)alt=\'(.*?)\'(?:.*?)src=\'(.*?)\'(?:.*?)<a(?:.*?)href=\"(.*?)\"(?:.*?)<del>(.*?)</del>(?:.*?)fraction\">(.*?)</span>?(?:.*?)discount(?:.*?)>(.*?\%)"
39+
, "g" )
40+
41+
do {
42+
// --- extrayendo datos
43+
matches = expresionRegular.exec( html )
44+
jsonDatos.push( matches )
45+
46+
}
47+
while ( matches !== null )
48+
return jsonDatos
49+
}
50+
51+
function renderDatosExtraidos( datos ){
52+
const $divResultados = document.getElementById('resultados')
53+
$divResultados.innerHTML = ''
54+
datos.forEach( reg => {
55+
if( reg ){
56+
const $card = document.createElement('div')
57+
$card.classList.add('card')
58+
$card.addEventListener('click', ()=>{
59+
window.open(reg[3])
60+
})
61+
$card.innerHTML = `
62+
<div class="thumb" >
63+
<img src="${reg[2]}"/>
64+
</div>
65+
<div class="titulo">${reg[1]}</div>
66+
<div class="precio-ant">
67+
<div class="precio">${reg[4]}</div>
68+
<div class="dcto" >-${reg[6]} OFF</div>
69+
</div>
70+
<div class="oferta">$ ${reg[5]}</div>
71+
`
72+
$divResultados.appendChild( $card )
73+
}
74+
})
75+
}
76+
77+
function actualizarFecha() {
78+
const hoy = new Date()
79+
const $fecha = document.getElementById('fecha')
80+
$fecha.innerHTML = `Actualizado al: ${('0'+hoy.getDate()).substr(-2)}/${('0'+(hoy.getMonth()+1)).substr(-2)}/${hoy.getFullYear()}`
81+
}

‎styles.css

+94
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
body {
2+
display: flex;
3+
flex-direction: column;
4+
align-items: center;
5+
font-family: 'Montserrat', sans-serif;
6+
margin-bottom: 3rem;
7+
}
8+
h1 {
9+
color: #333;
10+
font-size: 1.5rem;
11+
margin: 3rem 0 .5rem;
12+
}
13+
#fecha {
14+
margin-bottom: 2rem;
15+
color: #999;
16+
}
17+
#resultados {
18+
width: 90vw;
19+
max-width: 1024px;
20+
min-height: 65vh;
21+
display: grid;
22+
grid-gap: 1rem;
23+
justify-content: center;
24+
align-content: center;
25+
}
26+
@media screen and (min-width: 601px) {
27+
#resultados {
28+
grid-template-columns: 24% 24% 24% 24%;
29+
}
30+
}
31+
@media screen and (max-width: 600px) {
32+
#resultados {
33+
grid-template-columns: 45% 45%;
34+
}
35+
}
36+
.card {
37+
font-size: 90%;
38+
transition: all .35s ease;
39+
border: 1px solid #eee;
40+
border-radius: .5rem;
41+
box-shadow: 0 2px 25px rgba(0,0,0,.15);
42+
justify-content: center;
43+
display: flex;
44+
flex-direction: column;
45+
align-items: center;
46+
cursor: pointer;
47+
}
48+
.card:hover{
49+
box-shadow: 0 5px 50px rgba(0,0,0,.25);;
50+
}
51+
.card div {
52+
padding: 0 1rem;
53+
}
54+
.card img {
55+
margin: 1rem;
56+
margin-bottom: .5rem;
57+
}
58+
.card .titulo{
59+
font-size: 100%;
60+
margin-bottom: .5rem;
61+
}
62+
.card .precio-ant {
63+
display: flex;
64+
}
65+
.card .precio {
66+
font-size: small;
67+
text-decoration: line-through;
68+
color: grey;
69+
}
70+
.card .dcto {
71+
white-space: nowrap;
72+
font-size: small;
73+
color: green;
74+
}
75+
.card .oferta {
76+
font-size: 150%;
77+
margin: .5rem 0;
78+
}
79+
#cargando {
80+
margin-top: -10vh;
81+
height:20vh;
82+
width: 400%;
83+
background: transparent url(https://loading.io/spinners/balls/lg.circle-slack-loading-icon.gif) no-repeat center center;
84+
background-size: contain;
85+
}
86+
.pie {
87+
font-size: .9rem;
88+
margin-top: 5rem;
89+
color: #999;
90+
}
91+
.by {
92+
font-size: .9rem;
93+
color: #ccc;
94+
}

0 commit comments

Comments
 (0)