First_WebDev/week3.html at main · Nikhileshs19/First_WebDev · 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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link href="styles2.css" rel="stylesheet" />

    <title>JavaScript DOM Project</title>
  </head>
  <body>
  	<div id="wrapper">
	    <header>
	    	<div id="page-banner">
	    		<h1 class="title">Bookorama</h1>
          <p>Books for Me</p>
          <form id="search-books">
            <input type="text" placeholder="Search books..." />
          </form>
          <form id="filter-books">
            <label for="genre">Filter by Genre:</label>
            <select id="genre">
              <option value="all">All</option>
              <option value="Fiction">Fiction</option>
              <option value="Non-Fiction">Non-Fiction</option>
            </select>
            <button type="button" id="filter">Filter</button>
            </form>
	    	</div>
	    </header>
	    <div id="book-list">
	    	<h2 class="title">Books to Read</h2>
	    	<ul>
	    		<li>
	    			<span class="name">Name of the Wind</span>
                    <span class="genre">Fiction</span>
                    <span class="rating">4.5</span>
	    			<span class="delete">delete</span>
	    		</li>
	    		<li>
	    			<span class="name">The Wise Man's Fear</span>
                    <span class="genre">Fiction</span>
                    <span class="rating">4</span>
	    			<span class="delete">delete</span>
	    		</li>
          <li>
	    			<span class="name">A Brief History of Time</span>
                    <span class="genre">Non-Fiction</span>
                    <span class="rating">4.5</span>
	    			<span class="delete">delete</span>
	    		</li>
	    		<li>
	    			<span class="name">Kafka on the Shore</span>
                    <span class="genre">Fiction</span>
                    <span class="rating">5</span>
	    			<span class="delete">delete</span>
	    		</li>
	    		<li>
	    			<span class="name">The Master and the Margarita</span>
                    <span class="genre">Non-Fiction</span>
                    <span class="rating">3.5</span>
	    			<span class="delete">delete</span>
	    		</li>
	    	</ul>
	    </div>
        <input type="checkbox" id="hide" />
        <label for="hide">Hide all books</label>
	    <form id="add-book">
            <input type="text" placeholder="Add a book..." />
            <select class="genre-input">
                <option value="Fiction">Fiction</option>
                <option value="Non-Fiction">Non-Fiction</option>
            </select>
            <input type="number" placeholder="Rating" class="rating-input" min="0" max="5" step="0.5"/>
            <button>Add</button>
	    </form>
      <div id="tabbed-content">
        <ul class="tabs">
          <li data-target="#about" class="active">About</li>
          <li data-target="#contact">Contact</li>
        </ul>
        <div class="panel active" id="about">
          <p>Content for about tab...</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem fuga dolore accusamus tenetur quibusdam! Deserunt cum nemo ea pariatur tempore, impedit laboriosam eaque nesciunt nobis dignissimos, maiores ad quos adipisci?</p>
        </div>
        <div class="panel" id="contact">
          <p>Content for contact tab...</p>
          <p>Nikhilesh S</p>
        </div>
      </div>
    </div>
    <script src="app.js"></script>
  </body>
</html>