project: npm package search (#310)

## Related Issue Closes #308 ## Email id used to regsiter for VSoc'24 [email protected] ## Description Searches packages in npm via npm API ## Type of PR - [ ] Bug fix - [ ] Feature enhancement - [ ] Documentation update - [ ] Security enhancement - [X] Other (specify): Project ## Screenshots / Videos (if applicable) ![image](https://github.com/user-attachments/assets/436145a1-d1a4-48f1-b876-622564d6069c) ## Checklist - [X] I have performed a self-review of my code. - [X] I have read and followed the Contribution Guidelines. - [X] I have tested the changes thoroughly before submitting this pull request. - [X] I have provided relevant issue numbers, screenshots, and videos after making the changes. - [ ] I have commented my code, particularly in hard-to-understand areas. - [X] I have followed the code style guidelines of this project. - [X] I have checked for any existing open issues that my pull request may address. - [X] I have ensured that my changes do not break any existing functionality. - [X] Each contributor is allowed to create a maximum of 4 issues per day. This helps us manage and address issues efficiently. - [X] I have read the resources for guidance listed below. - [x] I have followed security best practices in my code changes.
dhairyagothi · Jul 17, 2024 · 10656a0 · 10656a0
2 parents da4c869 + 16a06f6
commit 10656a0
Show file tree

Hide file tree

Showing 4 changed files with 143 additions and 0 deletions.
diff --git a/public/NPM Package Search/index.html b/public/NPM Package Search/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>NPM Package Search</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="container">
+        <h1>NPM Package Search</h1>
+        <div class="search-container">
+            <input type="text" id="search-input" placeholder="Enter package name">
+            <button id="search-button">Search</button>
+        </div>
+        <h2>Results:</h2>
+        <div id="results"></div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/public/NPM Package Search/script.js 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 = '<p>No packages found.</p>';
+            } else {
+                data.objects.forEach(pkg => {
+                    const pkgElement = document.createElement('div');
+                    pkgElement.classList.add('package');
+                    pkgElement.innerHTML = `
+                        <h3><a href="https://www.npmjs.com/package/${pkg.package.name}" target="_blank">${pkg.package.name}</a></h3>
+                        <p>${pkg.package.description}</p>
+                    `;
+                    resultsDiv.appendChild(pkgElement);
+                });
+            }
+        })
+        .catch(error => {
+            const resultsDiv = document.getElementById('results');
+            resultsDiv.innerHTML = `<p>Error: ${error.message}</p>`;
+            console.error('Error fetching packages:', error);
+        });
+});
diff --git a/public/NPM Package Search/styles.css 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
@@ -484,6 +484,12 @@
             <a href="./Stone-Paper-Scissor/index.html" class="demo-link">Demo</a>
        </div>
 
+      <div class="table">
+            <div class="day-number">Day 79</div>
+            <div class="project-name">NPM Package Search</div>
+            <a href="./NPM Package Search/index.html" class="demo-link">Demo</a>
+       </div>
+
     <footer>
         <div class="footer-container">
             <div class="footer-left">