alexluque29 · alexluque29 · Jun 26, 2022 · Jun 27, 2022 · Jun 27, 2022 · Jun 28, 2022
diff --git a/css/style.css 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
diff --git a/image/11.png b/image/11.png
diff --git a/image/12.png b/image/12.png
diff --git a/image/13.png b/image/13.png
diff --git a/image/14.png b/image/14.png
diff --git a/image/15.png b/image/15.png
diff --git a/image/16.png b/image/16.png
diff --git a/image/17.png b/image/17.png
diff --git a/image/18.png b/image/18.png
diff --git a/image/19.png b/image/19.png
diff --git a/image/2.png b/image/2.png
diff --git a/image/20.png b/image/20.png
diff --git a/image/21.png b/image/21.png
diff --git a/image/22.png b/image/22.png
diff --git a/image/23.png b/image/23.png
diff --git a/image/3.png b/image/3.png
diff --git a/image/33.png b/image/33.png
diff --git a/image/34.png b/image/34.png
diff --git a/image/35.png b/image/35.png
diff --git a/image/36.png b/image/36.png
diff --git a/image/37.png b/image/37.png
diff --git a/image/38.png b/image/38.png
diff --git a/image/39.png b/image/39.png
diff --git a/image/4.png b/image/4.png
diff --git a/image/40.png b/image/40.png
diff --git a/image/41.png b/image/41.png
diff --git a/image/42.png b/image/42.png
diff --git a/image/43.png b/image/43.png
diff --git a/image/44.png b/image/44.png
diff --git a/image/5.png b/image/5.png
diff --git a/image/6.png b/image/6.png
diff --git a/image/7.png b/image/7.png
diff --git a/image/8.png b/image/8.png
diff --git a/image/blob.svg b/image/blob.svg
diff --git a/image/blob2.svg b/image/blob2.svg
diff --git a/image/blob3.svg b/image/blob3.svg
diff --git a/index.html b/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sprint 5 - TypeScript & Api's</title>
+    <link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">
+    <link rel="stylesheet" href="./css/style.css" />
+</head>
+<body onload="loadApiWeather()">
+    <main>
+        <div class="meteo">
+            <div class="icono" id="icono"></div>
+            <div class="temp" id="temp"></div>
+        </div>
+        <div class="master">
+            <div class="colizq"></div>
+            <div class="container">
+                <div class="title">
+                    <p>'World's bad jokes. The very best.'</p>
+                </div>
+                <div class="joke">
+                    <h4 id="writeJoke"></h4>
+                </div>
+                <div class="rateButtons">
+                    <i class="em em-flushed" id="1" onclick="rate(1)"></i>
+                    <i class="em em-grinning" id="2" onclick="rate(2)"></i>
+                    <i class="em em-joy" id="3" onclick="rate(3)"></i>
+                </div>
+                <div class="rateok" id="rateok" style="visibility:hidden;"></div>
+                <div class="buttonNext">
+                    <input type="button" class="nextButton" value="Next Joke" onclick="changeFunc()">
+                </div>
+            </div>
+            <div class="colder"></div>
+        </div>
+        <div></div>
+    </main>
+    <script src="./js/main.js"></script>
+</body>
+</html>
diff --git a/js/main.js 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 (<b>${score}</b>)`;
+    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 =  `<img src="./image/${printIcon}.png">`;
+document.getElementById("icono").innerHTML = icono;
+document.getElementById("temp").innerHTML = `Max ºC: <b>${printTemp} </b>`;
+} 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;
+}