InteractivePeriodic/index.html at main · Saahi30/InteractivePeriodic · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Periodic Table</title>
    <link rel="stylesheet" href="style.css">
    <link rel="icon" href="https://res.cloudinary.com/ddgqnimxd/image/upload/f_auto,q_auto/v1734947741/periodic-table_faviconpng_axqemu.png" type="image/x-icon">
    <script src="data.js"></script>

</head>

  <!-- search box code  -->
  <div class="search-bar">
    <form onsubmit="searchElement(event)">
      <input type="text" id="search-input" placeholder="Enter Atomic no. or Symbol to Search">
      <input type="submit" value="Search">
    </form>
    <button onclick="renderTable(periodicTable); resetInput(); btnDisplayNone()" class="show-table-btn">Click to See Full Periodic-Table</button>
  </div>

<!-- Search History code -->
  <div id="history-sidebar" class="sidebar">
    <h3>Search History</h3>
    <ul id="sidebar-history-list"></ul>
    <button id="clear-history-btn" onclick="clearHistory()">Clear History</button>
  </div>
  <button id="his-bar" onclick="toggleSidebar()"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#74C0FC" d="M75 75L41 41C25.9 25.9 0 36.6 0 57.9L0 168c0 13.3 10.7 24 24 24l110.1 0c21.4 0 32.1-25.9 17-41l-30.8-30.8C155 85.5 203 64 256 64c106 0 192 86 192 192s-86 192-192 192c-40.8 0-78.6-12.7-109.7-34.4c-14.5-10.1-34.4-6.6-44.6 7.9s-6.6 34.4 7.9 44.6C151.2 495 201.7 512 256 512c141.4 0 256-114.6 256-256S397.4 0 256 0C185.3 0 121.3 28.7 75 75zm181 53c-13.3 0-24 10.7-24 24l0 104c0 6.4 2.5 12.5 7 17l72 72c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-65-65 0-94.1c0-13.3-10.7-24-24-24z"/></svg>History</button>

<!-- Element details -->
    <div class="category" id="alkali">Alkali metals</div>
    <div class="category" id="alkaline">Alkaline earth metals</div>
    <div class="category" id="Transition">Transition metals</div>
    <div class="category" id="Metalloids">Metalloids</div>
    <div class="category" id="noble">Noble gases</div>
    <div class="category" id="Lanthanides">Rare earth elements and Lanthanides</div>
    <div class="category" id="Actinides">Actinides</div>
    <div class="category" id="o-metal">Other Metals</div>
    <div class="category" id="o-non-metal">Other Non-Metals</div>
    <div class="category" id="halogens">Halogens</div>


<!-- table render code -->
    <div id="table">
      <table id="periodic-table"></table>
    </div>


    <script src="script.js"></script>
</body>
</html>