Library-App-Javascript-Project/index.html at master · rupinderk44-web/Library-App-Javascript-Project · 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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Library | JavaScript OOP</title>
  <link rel="stylesheet" href="./style.css" />
</head>
<body>

<header>
  <h1>Library</h1>
  <p>JavaScript Object-Oriented Programming Project</p>
</header>

<main>
  <div class="input_div">
     <h2>Add Media</h2>

    <form id="mediaForm">
        <div class="form-group">
        <label>Type</label>
        <select id="type">
            <option value="book">Book</option>
            <option value="movie">Movie</option>
        </select>
        </div>

        <div class="form-group">
        <label>Title</label>
        <input type="text" id="title" required />
        </div>

       <div class="form-group">
        <label>Author / Director</label>
        <input type="text" id="creator" required/>
        </div>

        <div class="form-group">
        <label>Pages / Runtime (minutes)</label>
        <input type="number" id="length" required  />
        </div>

        <div class="form-group">
        <label>Rating (1–5)</label>
        <input type="number" id="rating" min="1" max="5" required />
        </div>

        <button type="submit">Add to Library</button>
    </form>
  </div>
  <div class="output_div">
    <h2>Your Library</h2>
    <div class="grid" id="output"></div>
  </div>
</main>

<footer>
Crafted with by Rupinder Kaur · HTML · CSS · JavaScript
</footer>
<script src="./BuildALibrary.js"></script>

<script>
   const form = document.getElementById("mediaForm");
  const output = document.getElementById("output");

  form.addEventListener("submit", function (e) {
    e.preventDefault();

    const type = document.getElementById("type").value;
    const title = document.getElementById("title").value;
    const creator = document.getElementById("creator").value;
    const number = document.getElementById("length").value;
    const rating = Number(document.getElementById("rating").value);

    let item;

    if (type === "book") {
      item = new Book(creator, title, number);
    } else {
      item = new Movie(creator, title, number);
    }

    item.addRating(rating);
    let stars = "";

    for (let i = 1; i <=  5; i++) {
        if (i <= rating) {
            stars = stars + "★";
        }
    }
    console.log(stars);
    output.innerHTML += `
      <div class="card">
        <small class="typeofMedia">${type}</small>
        <h3>${title}</h3>
        <p class="info"><strong>${type === "book" ? "Author" : "Director"}:</strong> ${creator}</p>
        <p class="info"><strong>${type === "book" ? "Pages" : "Runtime"}:</strong> ${number}</p>
        <p class="rating"> ${stars}</p>
      </div>
    `;

    form.reset();
  });
</script>

</body>
</html>