pick4you/index.html at master · MatteoSchieven/pick4you · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title>Pick4you!</title>
    <script>
        let serieTv = [];
        serieTv.push({
            title: "La casa di carta",
            original_title: "La casa de papel",
            description:"Lorem ipsum dolor sit amet, con Ut enim ommodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore",
            img: "https://nssdata.s3.amazonaws.com/images/galleries/16184/la-casa-de-papel-cover(1).jpg",
            year: 2017,
            rating: 6
        });
        serieTv.push({
            title: "Breaking Bad",
            original_title: "Breaking Bad",
            description: "Lorem ipsum dolor sit a aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore",
            img: "https://images.everyeye.it/img-articoli/breaking-bad-storia-successo-importanza-serie-vince-gilligan-v5-47057.jpg",
            year: 2014,
            rating: 8
        });
        serieTv.push({
            title: "Dexter",
            original_title: "Dexter",
            description:"Lorem  et dolore magna aliqua. ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore",
            img: "https://images-na.ssl-images-amazon.com/images/S/sgp-catalog-images/region_GLOBAL/showtime-DEXTER_7_IN-Full-Image_GalleryCover-in-IN-1480722420784._UY500_UX667_RI_Vi9lf7sr8wLDSEjVVFRWg3DD2hS8MQVP5_TTW_.jpg",
            year: 2010,
            rating: 7
        });
        function getRandomSeries(allSeries) {
            return allSeries[getRandomInt(allSeries.length)];
        }
        function getRandomInt(max) {
            return Math.floor(Math.random() * Math.floor(max));
        }
        const shuffle= (serieTv) => {
          let serieSelezionata = getRandomSeries(serieTv);
          let title_holder = document.querySelectorAll('#random_series .card-title');
          let description_holdel = document.querySelectorAll('#random_series .card-text');
          let img_holdel = document.querySelectorAll('#random_series .card-img-top')
          title_holder[0].innerText = serieSelezionata.title;
          description_holdel[0].innerText = serieSelezionata.description;
          img_holdel[0].src= serieSelezionata.img;
        }
        document.addEventListener('DOMContentLoaded', () =>{
          shuffle(serieTv);
          let btn = document.getElementById('button');
          btn.addEventListener('click', ()=>{
            shuffle(serieTv);
        })
        })

    </script>
</head>

<body>
  <nav class="navbar navbar-light bg-light">
    <a class="navbar-brand" href="#">Random Series</a>
  </nav>
    <div class="container" style="margin-top:30px;" id="random_series">
        <!-- Content here -->
        <div style="display: flex;">
          <h5>Filtro da che anno è stata prodotta:<input id="year_min" style="width:15%"></h5>
          <h5>Filtro per voto da <input id="rating_min" style="width: 5%"> voto a <input id="rating_max" style="width:5%"> voto</h5>
        </div>
        <div class="card mb-2">
          <button id="button" class="btn-promary">RANDOM</button>
          <img class="card-img-top" style="max-height: 30rem;">
          <div class="card-title">title</div>
            <div class="card-body">
                <p class="card-text"></p>

            </div>
        </div>
      <script>
        /*shuffle(serieTv);
        let btn = document.getElementById('button')
        btn.addEventListener('click', ()=>{
          shuffle(serieTv);
        })*/
      </script>
    </div>
</body>
</html>