style.css
body {
font-family: Arial, sans-serif;
margin: 0;
background: #f9f9f9;
}
.layout {
display: flex;
height: 100vh;
}
aside.toc {
width: 250px;
background: #2c3e50;
color: white;
padding: 20px;
overflow-y: auto;
}
aside.toc h2 {
font-size: 18px;
margin-bottom: 10px;
}
#tocList {
list-style: none;
padding: 0;
}
#tocList li {
padding: 8px;
cursor: pointer;
color: #ecf0f1;
}
#tocList li:hover {
background-color: #34495e;
}
main.content {
flex: 1;
padding: 30px;
overflow-y: auto;
}
input#searchBox {
width: 100%;
padding: 10px;
font-size: 16px;
margin-bottom: 20px;
}
#contentDisplay {
background: white;
padding: 20px;
border: 1px solid #ccc;
}
app.js
document.addEventListener("DOMContentLoaded", function () {
renderTOC(data);
function renderTOC(dataSet) {
const tocList = document.getElementById('tocList');
tocList.innerHTML = '';
dataSet.forEach((item) => {
const li = document.createElement('li');
li.textContent = item.title;
li.onclick = () => displayContent(item);
tocList.appendChild(li);
});
}
window.filterResults = function () {
const query = document.getElementById('searchBox').value.toLowerCase();
const filtered = data.filter(item =>
item.title.toLowerCase().includes(query) ||
item.content.toLowerCase().includes(query)
);
renderTOC(filtered);
if (filtered.length > 0) {
displayContent(filtered[0]);
} else {
document.getElementById('contentDisplay').innerHTML = "<p>No results found.</p>";
}
};
function displayContent(item) {
const container = document.getElementById('contentDisplay');
container.innerHTML = `<h2>${item.title}</h2><p>${item.content}</p>`;
}
});
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TOC Search App (Offline)</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="layout">
<aside class="toc">
<h2>Table of Contents</h2>
<ul id="tocList"></ul>
</aside>
<main class="content">
<h1>Search TOC</h1>
<input type="text" id="searchBox" placeholder="Search..." oninput="filterResults()">
<div id="contentDisplay">
<p>Select a topic from the TOC or use the search above.</p>
</div>
</main>
</div>
<script>
const data = [
{
"title": "Apples",
"content": "Apples are a type of fruit that come in many varieties."
},
{
"title": "Bananas",
"content": "Bananas are yellow and rich in potassium."
},
{
"title": "Cherries",
"content": "Cherries are small, round, and typically red or black."
},
{
"title": "Dates",
"content": "Dates are sweet fruits from the date palm tree."
},
{
"title": "Eggplants",
"content": "Eggplants are purple vegetables used in many dishes."
},
{
"title": "Figs",
"content": "Figs are soft, sweet fruits with many seeds."
},
{
"title": "Grapes",
"content": "Grapes can be eaten fresh or used for wine production."
},
{
"title": "Honeydew",
"content": "Honeydew melons are sweet and green-fleshed."
},
{
"title": "Indian Fig",
"content": "Also known as prickly pear, found in arid climates."
},
{
"title": "Jackfruit",
"content": "Jackfruit is a large fruit with a unique flavor."
},
{
"title": "Kiwi",
"content": "Kiwis are brown on the outside and green inside."
},
{
"title": "Lemon",
"content": "Lemons are sour citrus fruits used in drinks and dishes."
},
{
"title": "Mango",
"content": "Mangos are tropical fruits with orange flesh."
},
{
"title": "Nectarine",
"content": "Nectarines are similar to peaches but with smooth skin."
},
{
"title": "Orange",
"content": "Oranges are sweet, round citrus fruits."
},
{
"title": "Papaya",
"content": "Papayas are soft, tropical fruits with black seeds."
},
{
"title": "Quince",
"content": "Quince is a fruit that\u2019s usually cooked before eating."
},
{
"title": "Raspberry",
"content": "Raspberries are red, juicy, and grow on bushes."
},
{
"title": "Strawberry",
"content": "Strawberries are popular for desserts and smoothies."
},
{
"title": "Tomato",
"content": "Tomatoes are often used in sauces and salads."
},
{
"title": "Ugli Fruit",
"content": "A citrus fruit hybrid from Jamaica."
},
{
"title": "Vanilla Bean",
"content": "Used for flavoring, especially in desserts."
},
{
"title": "Watermelon",
"content": "Large, juicy fruit with green rind and red flesh."
},
{
"title": "Xigua",
"content": "Xigua is another name for watermelon, especially in Africa."
},
{
"title": "Yellow Passion Fruit",
"content": "Tropical fruit with tart, seedy pulp."
},
{
"title": "Zucchini",
"content": "Zucchini is a green summer squash."
}
];
</script>
<script src="app.js"></script>
</body>
</html>
