gitpractice/index.html at master · csmaster23/gitpractice · 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
88
89
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="/styles.css"/>
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <title>XKCD Browser</title>


    <style>
    body{
      background-color: white;
    }

    h2{
      font-family: 'Russo One', sans-serif;

    }

    h1{
      font-family: 'Monoton', cursive;
      font-size: 6vh;

    }
    #sticky_index {
      text-align: center;
      background-color: gray;
    }
    a {
      color: black;
    }
  </style>
  </head>
  <body>
    <div id="app">
      <h1>XKCD Browser</h1>

      <p>
  <button v-on:click="previousComic">Previous</button>
  <button v-on:click="nextComic">Next</button>
  <button v-on:click="randomComic">Random</button>
  <button v-on:click="firstComic">FirstComic</button>
  <button v-on:click="lastComic">LastComic</button>
      </p>

      <div v-if="loading">
  <p>Loading...</p>
      </div>
      <div v-else>
  <h2>{{ current.safe_title}}</h2>
  <img v-bind:src="current.img" v-bind:alt="current.alt">
  <p><i># {{number}}, drawn on {{current.day}} {{month}} {{current.year}}</i></p>
  <h3>Rating</h3>
  <star-rating @rating-selected="addRating" v-model="rating" :increment="0.5" :show-rating="false" active-color="#9C0000"></star-rating>
  <!-- <h3>Rating: {{rating}}</h3> -->
 <!-- <h3>Average Rating: {{testAverage}}</h3> -->
  <!-- <h3>Average Rating: {{averageRatings.averaged}}</h3> -->
  <h3>Average Rating: {{theAverages}}</h3>
  <!-- <div v-for="(averageRatings, index) in averageRatings[number]">
    <div v-if="index != averageRatings.length - 1">{{averageRatings.averaged}}</div>
  </div> -->
  <h3>Add a Comment</h3>
  <form v-on:submit.prevent="addComment">
    <input v-model="addedName" placeholder="Name"></p>
    <textarea v-model="addedComment"></textarea>
    <br/>
    <button type="submit">Comment</button>
  </form>
  <h3>Comments</h3>
  <div v-for="comment in comments[number]">
    <hr>
    <p>{{comment.text}}</p>
    <p><i>-- {{comment.author}}</i></p>
    <p>{{comment.today}}</p>

  </div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-star-rating/dist/star-rating.min.js"></script>
    <script src="./script.js"></script>
  </body>
  <footer id="sticky_index"><a href="https://github.com/BYU-CS260-Winter-2018/lab-3-csmaster23.git">Github</a></footer>
</html>


<!-- <star-rating :increment="0.5" :show-rating="false" :v-on:rating-selected="rating = $event" :rating="rating" active-color="#9C0000"></star-rating> -->

<!-- <star-rating @rating-selected="rating = $event" :rating="rating"></star-rating> -->