Free Keyword Research Tool
Free Keyword Research Tool
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5;
}
header {
background-color: #333;
color: #fff;
text-align: center;
padding: 1rem;
}
main {
max-width: 800px;
margin: 0 auto;
padding: 2rem;
}
.keyword-section {
display: flex;
gap: 1rem;
align-items: center;
}
#keyword-input {
flex: 1;
padding: 0.5rem;
border: 1px solid #ccc;
border-radius: 5px;
}
#search-button {
background-color: #333;
color: #fff;
border: none;
border-radius: 5px;
padding: 0.5rem 1rem;
cursor: pointer;
transition: background-color 0.3s;
}
#search-button:hover {
background-color: #555;
}
.results-section {
margin-top: 2rem;
}
.results-section h2 {
font-size: 1.5rem;
}
.results-section ul {
list-style: none;
padding: 0;
}
footer {
text-align: center;
background-color: #333;
color: #fff;
padding: 1rem;
}
const keywordInput = document.getElementById("keyword-input");
const searchButton = document.getElementById("search-button");
const resultsList = document.getElementById("results-list");
searchButton.addEventListener("click", () => {
const keyword = keywordInput.value;
// Simulate fetching results from a server
const mockResults = ["Result 1", "Result 2", "Result 3"];
displayResults(mockResults);
});
function displayResults(results) {
resultsList.innerHTML = "";
results.forEach(result => {
const li = document.createElement("li");
li.textContent = result;
resultsList.appendChild(li);
});
}
0 Comments