From 16a06f64ef4fb1f8b44be69c56d4a50bfc7c0345 Mon Sep 17 00:00:00 2001 From: kom-senapati Date: Wed, 17 Jul 2024 19:23:28 +0530 Subject: [PATCH] project: npm package search --- public/NPM Package Search/index.html | 21 ++++++++ public/NPM Package Search/script.js | 35 ++++++++++++ public/NPM Package Search/styles.css | 81 ++++++++++++++++++++++++++++ public/index.html | 6 +++ 4 files changed, 143 insertions(+) create mode 100644 public/NPM Package Search/index.html create mode 100644 public/NPM Package Search/script.js create mode 100644 public/NPM Package Search/styles.css diff --git a/public/NPM Package Search/index.html b/public/NPM Package Search/index.html new file mode 100644 index 00000000..00217614 --- /dev/null +++ b/public/NPM Package Search/index.html @@ -0,0 +1,21 @@ + + + + + + NPM Package Search + + + +
+

NPM Package Search

+
+ + +
+

Results:

+
+
+ + + diff --git a/public/NPM Package Search/script.js b/public/NPM Package Search/script.js new file mode 100644 index 00000000..7fb15b0e --- /dev/null +++ b/public/NPM Package Search/script.js @@ -0,0 +1,35 @@ +const resultsDiv = document.getElementById('results'); +resultsDiv.style.display = 'none'; + +document.getElementById('search-button').addEventListener('click', function() { + const query = document.getElementById('search-input').value; + fetch(`https://registry.npmjs.org/-/v1/search?text=${query}&size=10`) + .then(response => { + if (response.status === 429) { + throw new Error('Rate limit exceeded. Please try again later.'); + } + return response.json(); + }) + .then(data => { + resultsDiv.style.display = 'block'; + resultsDiv.innerHTML = ''; + if (data.objects.length === 0) { + resultsDiv.innerHTML = '

No packages found.

'; + } else { + data.objects.forEach(pkg => { + const pkgElement = document.createElement('div'); + pkgElement.classList.add('package'); + pkgElement.innerHTML = ` +

${pkg.package.name}

+

${pkg.package.description}

+ `; + resultsDiv.appendChild(pkgElement); + }); + } + }) + .catch(error => { + const resultsDiv = document.getElementById('results'); + resultsDiv.innerHTML = `

Error: ${error.message}

`; + console.error('Error fetching packages:', error); + }); +}); diff --git a/public/NPM Package Search/styles.css b/public/NPM Package Search/styles.css new file mode 100644 index 00000000..4db90ef0 --- /dev/null +++ b/public/NPM Package Search/styles.css @@ -0,0 +1,81 @@ +body { + font-family: Arial, sans-serif; + height: 100vh; + background-image: linear-gradient(to top, #37ecba 0%, #72afd3 100%); + margin: 0; + padding: 0; + overflow: hidden; +} + +.container { + max-width: 800px; + margin: 5rem auto 0; + padding: 20px; + border-radius: 8px; + background: rgba(255, 255, 255, 0.8); + backdrop-filter: blur(10px); + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); + overflow-y: auto; +} + +h1, h2 { + text-align: center; +} + +.search-container { + display: flex; + justify-content: center; + margin-bottom: 20px; +} + +input { + width: 300px; + padding: 10px; + border: 1px solid #ccc; + border-radius: 4px 0 0 4px; + border-right: none; +} + +button { + padding: 10px 20px; + background-color: #007bff; + color: white; + border: none; + border-radius: 0 4px 4px 0; + cursor: pointer; +} + +button:hover { + background-color: #0056b3; +} + +#results { + max-height: 400px; + overflow-y: auto; + border: 1px solid #ccc; + padding: 10px; + border-radius: 4px; +} + +.package { + margin: 10px 0; + padding: 10px; + border-bottom: 1px solid #ccc; +} + +.package h3 { + margin: 0; +} + +.package p { + margin: 5px 0; +} + +.package a { + text-decoration: none; + color: #007bff; +} + +.package a:hover { + text-decoration: underline; +} diff --git a/public/index.html b/public/index.html index 12843f6c..b7823b4e 100644 --- a/public/index.html +++ b/public/index.html @@ -484,6 +484,12 @@ Demo +
+
Day 79
+
NPM Package Search
+ Demo +
+