diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..4f5a22f --- /dev/null +++ b/css/style.css @@ -0,0 +1,117 @@ +html, +body { + margin: 0; + padding: 0; + height: 100%; + background-color: white; +} +main { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + flex-direction: column; + justify-content: space-between; +} +.meteo { + display: flex; + flex-direction: row; + margin-top: 10px; + text-align: start; + font-family: Verdana, Geneva, Tahoma, sans-serif; + font-size: small; + color: rgb(15, 0, 100); + align-items: center; + width: 95%; +} +.colizq{ + display: flex; + flex-direction: column; + justify-content: center; + min-width: 200px; + background-image: url("../image/blob2.svg"); + background-repeat: no-repeat; + background-position: bottom; +} +.colder{ + display: flex; + flex-direction: column; + min-width: 200px; + background-image: url("../image/blob3.svg"); + background-repeat: no-repeat; +} +.master{ + display: flex; + flex-direction: row; + justify-content: space-around; + height: 80%; +} +.container { + display: flex; + flex-direction: column; + align-items: center; + padding: 20px; + margin-top: -50px; + min-width: 800px; + max-width: 1200px; + width: 100%; + height: 100%; + background-image: url("../image/blob.svg"); + background-repeat: no-repeat; + background-size: 100%; + background-position: center; + justify-content: center; +} +.container div { + padding: 10px; +} +.title { + margin-top: 40px; + text-align: center; + font-family: Verdana, Geneva, Tahoma, sans-serif; + font-size: large; + font-weight: bold; + text-shadow: 2px 2px black; + color: rgb(255, 255, 255); +} +.joke { + /* margin-top: 10px; */ + text-align: center; + font-family: Verdana, Geneva, Tahoma, sans-serif; + font-size: medium; + color: rgb(240, 240, 240); + max-width: 500px; +} +.rateButtons { + display: flex; + flex-direction: row; + margin-top: 20px; + justify-content: space-around; + width: 20%; + } + .rateButtons :hover { + cursor: pointer; + } +.nextButton { + background-color: #edc951; + color: black; + font-family: Verdana, Geneva, Tahoma, sans-serif; + font-weight: bold; + padding: 5px 20px; + border: solid; + border-color: black; + border-width: 3px; + border-radius: 25px; + text-transform: uppercase; +} +.nextButton:hover { + background-color: black; + color: #edc951; + border-color: #edc951; +} +.rateok{ + text-align: center; + font-family: Verdana, Geneva, Tahoma, sans-serif; + font-size: small; + color: #edc951; +} diff --git a/image/1.png b/image/1.png new file mode 100644 index 0000000..5127a9d Binary files /dev/null and b/image/1.png differ diff --git a/image/11.png b/image/11.png new file mode 100644 index 0000000..593b09a Binary files /dev/null and b/image/11.png differ diff --git a/image/12.png b/image/12.png new file mode 100644 index 0000000..e78e2ce Binary files /dev/null and b/image/12.png differ diff --git a/image/13.png b/image/13.png new file mode 100644 index 0000000..96c79e5 Binary files /dev/null and b/image/13.png differ diff --git a/image/14.png b/image/14.png new file mode 100644 index 0000000..259278f Binary files /dev/null and b/image/14.png differ diff --git a/image/15.png b/image/15.png new file mode 100644 index 0000000..3520832 Binary files /dev/null and b/image/15.png differ diff --git a/image/16.png b/image/16.png new file mode 100644 index 0000000..b5be8d3 Binary files /dev/null and b/image/16.png differ diff --git a/image/17.png b/image/17.png new file mode 100644 index 0000000..0ce0911 Binary files /dev/null and b/image/17.png differ diff --git a/image/18.png b/image/18.png new file mode 100644 index 0000000..3e5b47d Binary files /dev/null and b/image/18.png differ diff --git a/image/19.png b/image/19.png new file mode 100644 index 0000000..5b53ae6 Binary files /dev/null and b/image/19.png differ diff --git a/image/2.png b/image/2.png new file mode 100644 index 0000000..b323c8b Binary files /dev/null and b/image/2.png differ diff --git a/image/20.png b/image/20.png new file mode 100644 index 0000000..5610b39 Binary files /dev/null and b/image/20.png differ diff --git a/image/21.png b/image/21.png new file mode 100644 index 0000000..2fe3017 Binary files /dev/null and b/image/21.png differ diff --git a/image/22.png b/image/22.png new file mode 100644 index 0000000..05f7605 Binary files /dev/null and b/image/22.png differ diff --git a/image/23.png b/image/23.png new file mode 100644 index 0000000..0fa0dcf Binary files /dev/null and b/image/23.png differ diff --git a/image/3.png b/image/3.png new file mode 100644 index 0000000..b9bfb83 Binary files /dev/null and b/image/3.png differ diff --git a/image/33.png b/image/33.png new file mode 100644 index 0000000..aec8e71 Binary files /dev/null and b/image/33.png differ diff --git a/image/34.png b/image/34.png new file mode 100644 index 0000000..7279392 Binary files /dev/null and b/image/34.png differ diff --git a/image/35.png b/image/35.png new file mode 100644 index 0000000..587a4d0 Binary files /dev/null and b/image/35.png differ diff --git a/image/36.png b/image/36.png new file mode 100644 index 0000000..3844317 Binary files /dev/null and b/image/36.png differ diff --git a/image/37.png b/image/37.png new file mode 100644 index 0000000..9888912 Binary files /dev/null and b/image/37.png differ diff --git a/image/38.png b/image/38.png new file mode 100644 index 0000000..572bfec Binary files /dev/null and b/image/38.png differ diff --git a/image/39.png b/image/39.png new file mode 100644 index 0000000..5accec9 Binary files /dev/null and b/image/39.png differ diff --git a/image/4.png b/image/4.png new file mode 100644 index 0000000..fb0a1ba Binary files /dev/null and b/image/4.png differ diff --git a/image/40.png b/image/40.png new file mode 100644 index 0000000..7c71a5f Binary files /dev/null and b/image/40.png differ diff --git a/image/41.png b/image/41.png new file mode 100644 index 0000000..5e678c2 Binary files /dev/null and b/image/41.png differ diff --git a/image/42.png b/image/42.png new file mode 100644 index 0000000..e0dea63 Binary files /dev/null and b/image/42.png differ diff --git a/image/43.png b/image/43.png new file mode 100644 index 0000000..da96f77 Binary files /dev/null and b/image/43.png differ diff --git a/image/44.png b/image/44.png new file mode 100644 index 0000000..47a85e7 Binary files /dev/null and b/image/44.png differ diff --git a/image/5.png b/image/5.png new file mode 100644 index 0000000..09e7448 Binary files /dev/null and b/image/5.png differ diff --git a/image/6.png b/image/6.png new file mode 100644 index 0000000..a80555c Binary files /dev/null and b/image/6.png differ diff --git a/image/7.png b/image/7.png new file mode 100644 index 0000000..e9f9d0a Binary files /dev/null and b/image/7.png differ diff --git a/image/8.png b/image/8.png new file mode 100644 index 0000000..4f20ce1 Binary files /dev/null and b/image/8.png differ diff --git a/image/blob.svg b/image/blob.svg new file mode 100644 index 0000000..60a047b --- /dev/null +++ b/image/blob.svg @@ -0,0 +1,4 @@ + + + + diff --git a/image/blob2.svg b/image/blob2.svg new file mode 100644 index 0000000..f8e73cb --- /dev/null +++ b/image/blob2.svg @@ -0,0 +1,4 @@ + + + + diff --git a/image/blob3.svg b/image/blob3.svg new file mode 100644 index 0000000..9498310 --- /dev/null +++ b/image/blob3.svg @@ -0,0 +1,4 @@ + + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..b6058b4 --- /dev/null +++ b/index.html @@ -0,0 +1,42 @@ + + + + + + + Sprint 5 - TypeScript & Api's + + + + +
+
+
+
+
+
+
+
+
+

'World's bad jokes. The very best.'

+
+
+

+
+
+ + + +
+ +
+ +
+
+
+
+
+
+ + + \ No newline at end of file diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..c64d97f --- /dev/null +++ b/js/main.js @@ -0,0 +1,80 @@ + +const CALLINGJOKES = "https://icanhazdadjoke.com/"; +const CALLINGWEATHER = "http://dataservice.accuweather.com/forecasts/v1/daily/1day/307297?apikey=jDRJs43fxDcQlMD5etovQZTl7GXiJozS"; +const CALLINGCHUCK = "https://api.chucknorris.io/jokes/random" +let reportJokes = []; +let printJoke, printIcon, printTemp; +let date = new Date(); + +// Llamada a la API Chistes +let loadApi = async() =>{ + try{ +let response = await fetch(CALLINGJOKES, { + headers: { + 'Accept': "application/json" + } + }); +const data = await response.json(); +printJoke = data.joke; +console.log (printJoke); +document.getElementById("writeJoke").innerHTML = printJoke; + +} catch(error){ + console.log(error); +} +} + +// Creación de la clase Register +class Register { + constructor(joke, score, date) { + this.joke = joke; + this.score = score; + this.date = date; + } +} +// Obtención de la puntuación del chiste y creación de la instancia que se añade al array. +function rate(id){ + let joke = printJoke; + let score = id; + let dateIso = date.toISOString(); + let newRegister = new Register (joke, score, dateIso); + reportJokes.push(newRegister); + document.getElementById("rateok").style.visibility = "visible"; + document.getElementById("rateok").innerHTML = `Thanks for rating (${score})`; + console.table(reportJokes) +} + +// Llamada a la API Meteo +let loadApiWeather = async() =>{ + try{ +let response = await fetch(CALLINGWEATHER); +const data = await response.json(); +let tempF = data.DailyForecasts[0].Temperature.Maximum.Value; +printIcon = data.DailyForecasts[0].Day.Icon; +printTemp = ((tempF - 32) * 5/9).toFixed(1); +let icono = ``; +document.getElementById("icono").innerHTML = icono; +document.getElementById("temp").innerHTML = `Max ºC: ${printTemp} `; +} catch(error){ + console.log(error); +} +} +// Llamada a la API Chuck Norris +let loadChuck = async() =>{ + try{ +let response = await fetch(CALLINGCHUCK); +const data = await response.json(); +printJoke= data.value; +document.getElementById("writeJoke").innerHTML = printJoke; + +} catch(error){ + console.log(error); +} +} +// Intercambio de funciones al pulsar el botón de nuevo chiste +let toggle = true; +function changeFunc(){ + document.getElementById("rateok").style.visibility = "hidden"; + toggle ? loadApi() : loadChuck(); + toggle = !toggle; +}