Jump to content

Dynamic Item Search List

Deye

By Deye
in Misc

 Share

Recommended Posts

Deye Universalist

Deye

Posted
Posted (edited)

Hi,

I want to use this code to make an Android app that will be simple to use on my phone. I would like to create, add, remove, and rename categories called "Box 1," "Box 2," and so on in Scratch. I would also like to have the ability to change the header link that leads to the pictures associated with that particular box-category. In order to make the app's interface more user-friendly for mobile devices, I want to make sure that the HTML content is backed up somewhere, such as at https://photos.app.goo.gl/, where I store the images. 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Item Search List</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f8f9fa;
            margin: 0;
            padding: 20px;
            color: #333;
        }

        h1 {
            text-align: center;
            color: #5a6268;
        }

        .search-container {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 20px;
        }

        input {
            width: calc(100% - 200px);
            padding: 10px;
            border: 1px solid #ced4da;
            border-radius: 4px 0 0 4px;
            outline: none;
        }

        button {
            padding: 10px 15px;
            border: 1px solid #007bff;
            background-color: #007bff;
            color: white;
            border-radius: 0 4px 4px 0;
            cursor: pointer;
        }

        button:hover {
            background-color: #0056b3;
        }

        ul {
            list-style-type: none;
            padding-left: 0;
        }

        .box {
            border: 1px solid #adb5bd;
            border-radius: 8px;
            margin: 10px 0;
            overflow: hidden;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            transition: background-color 0.3s;
            cursor: pointer;
        }

        .box:hover {
            background-color: #e9ecef;
        }

        .box-header {
            background-color: #007bff;
            color: white;
            padding: 15px;
            font-weight: bold;
            display: flex;
            justify-content: space-between;
        }

        .sub-list {
            display: none;
            padding: 10px 15px;
            background-color: #f8f9fa;
        }

        .sub-item {
            margin-left: 20px;
            padding: 5px 0;
            display: flex;
            justify-content: space-between;
        }

        .remove-item {
            cursor: pointer;
            color: red;
            margin-left: 10px;
        }

        .add-item {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }

        select {
            padding: 10px;
            margin-right: 10px;
            border-radius: 4px;
            border: 1px solid #ced4da;
        }

        .new-category-container {
            display: flex;
            justify-content: center;
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <h1>Dynamic Item Search List</h1>
    <div class="search-container">
        <input type="text" id="searchInput" placeholder="Search for items..." onkeyup="filterItems()">
        <button onclick="clearSearch()">Clear</button>
    </div>

    <div class="add-item">
        <input type="text" id="newItemsInput" placeholder="Add new items (comma separated)">
        <select id="categorySelect" onchange="setSelectedCategory(this.value)">
            <option value="" disabled selected>Select category</option>
        </select>
        <button onclick="addItems()">Add</button>
    </div>

    <div class="new-category-container">
        <input type="text" id="newCategoryInput" placeholder="New category name">
        <button onclick="addCategory()">Add Category</button>
    </div>

    <ul id="itemList"></ul>

    <script>
        const storageKey = 'dynamicItems'; // Key for localStorage
        let defaultCategories = JSON.parse(localStorage.getItem(storageKey)) || {}; // Load data from localStorage

        let currentCategories = Object.keys(defaultCategories);
        let selectedCategory = "";

        // Initialize item list
        function initItemList() {
            const itemList = document.getElementById("itemList");
            itemList.innerHTML = "";

            for (const category in defaultCategories) {
                const uniqueItems = [...new Set(defaultCategories[category])]; // Ensure unique items
                uniqueItems.sort(); // Sort items

                const box = document.createElement("li");
                box.className = "box";

                const boxHeader = document.createElement("div");
                boxHeader.className = "box-header";
                boxHeader.innerHTML = `<a href="https://www.autoitscript.com/forum/topic/212740-dynamic-item-search-list" target="_blank" style="color: white;">${category}</a><span>▼</span>`;
                boxHeader.onclick = () => toggleBox(boxHeader);

                const subList = document.createElement("ul");
                subList.className = "sub-list";

                uniqueItems.forEach(item => {
                    const subItem = document.createElement("li");
                    subItem.className = "sub-item";
                    subItem.innerHTML = `${item}<span class="remove-item" onclick="removeItem('${category}', '${item}')">✖</span>`;
                    subList.appendChild(subItem);
                });

                box.appendChild(boxHeader);
                box.appendChild(subList);
                itemList.appendChild(box);
            }
        }

        // Toggle visibility of sub-items
        function toggleBox(boxHeader) {
            const subList = boxHeader.nextElementSibling;
            const arrow = boxHeader.lastElementChild;

            if (subList.style.display === "block") {
                subList.style.display = "none";
                arrow.innerHTML = "▼"; // Down arrow
            } else {
                subList.style.display = "block";
                arrow.innerHTML = "▲"; // Up arrow
            }
        }

        // Add new items to selected category
        function addItems() {
            const input = document.getElementById("newItemsInput").value.trim();
            if (input && selectedCategory) {
                const items = input.split(",").map(item => item.trim()).filter(item => item !== '');
                items.forEach(item => {
                    if (!defaultCategories[selectedCategory].includes(item)) {
                        defaultCategories[selectedCategory].push(item);
                    }
                });
                document.getElementById("newItemsInput").value = ''; // Clear the input
                saveToLocalStorage(); // Save to localStorage
                initItemList(); // Re-initialize the item list
            }
        }

        // Add new category
        function addCategory() {
            const newCategory = document.getElementById("newCategoryInput").value.trim();
            if (newCategory && !currentCategories.includes(newCategory)) {
                defaultCategories[newCategory] = [];
                currentCategories.push(newCategory);
                const option = document.createElement("option");
                option.value = newCategory;
                option.textContent = newCategory;
                document.getElementById("categorySelect").appendChild(option);
                setSelectedCategory(newCategory); // Set the new category as selected

                document.getElementById("newCategoryInput").value = ''; // Clear the input
                saveToLocalStorage(); // Save changes
            }
        }

        // Set currently selected category
        function setSelectedCategory(category) {
            selectedCategory = category;
        }

        // Remove item from a category
        function removeItem(category, item) {
            defaultCategories[category] = defaultCategories[category].filter(i => i !== item);
            saveToLocalStorage(); // Save changes
            initItemList(); // Re-initialize the item list
        }

        // Save data to localStorage
        function saveToLocalStorage() {
            localStorage.setItem(storageKey, JSON.stringify(defaultCategories));
        }

        // Filter items based on search input
        function filterItems() {
            const input = document.getElementById('searchInput').value.toLowerCase();
            const boxes = document.getElementById('itemList').getElementsByClassName('box');

            for (let i = 0; i < boxes.length; i++) {
                const subItems = boxes[i].getElementsByClassName('sub-item');
                let boxContainsMatch = false;

                for (let j = 0; j < subItems.length; j++) {
                    const item = subItems[j].textContent.toLowerCase();
                    if (item.includes(input)) {
                        subItems[j].style.display = ''; // Show matched item
                        boxContainsMatch = true;
                    } else {
                        subItems[j].style.display = 'none'; // Hide non-matched item
                    }
                }

                // Show or hide the box based on sub-items visibility
                boxes[i].style.display = boxContainsMatch || input === '' ? '' : 'none';
            }
        }

        // Clear search term
        function clearSearch() {
            document.getElementById('searchInput').value = ''; // Clear search input
            filterItems(); // Show all items
        }

        // Initialize the item list on page load
        initItemList();
    </script>
</body>

</html>

 

Edited by Deye
Deye Universalist

Deye

Posted
  • Author
Posted

Let’s clarify and organize the concept for your app showcasing pictures of home items sorted into specific "boxes," where each box has its own category with links to view the pictures it contains. Here’s a structured outline for how this could work:

### App Structure for Home Item Boxes

#### 1. **Main Interface**

  • - **Header Section:** 

  - Display the title of the app (e.g., "Home Item Organizer").
  

  • - **Categories (Boxes) Section:**

  - Create a list of buttons or clickable headers for each box (e.g., "Box 1," "Box 2," etc.).
  - Each button is linked to the corresponding collection of home items (pictures).

#### 2. **Categories (Boxes)**

  • - **Each Box Represents a Category:**
  •   - **Box 1**: Kitchen Items
  •   - **Box 2**: Living Room Decor
  •   - **Box 3**: Bedroom Essentials
  •   - **Box 4**: Garage Tools

  - And so on...

#### 3. **Clickable Links to View Pictures**

  • - **When a user taps on "Box 1"**:

  - The app navigates to a new screen that displays all the pictures of items in the Kitchen.
  

  • - **Similar behavior for other boxes**:

  - Tapping on "Box 2" will navigate to images for the Living Room, "Box 3" for Bedroom items, etc.

#### 4. **Image Display**

  • - **Gallery Style View:**

  - Each box will present a gallery view of images.
  - Users can scroll through the images, tap on individual pictures for a larger view, or even zoom in.

#### 5. **User Interactivity**

  • - **Add New Boxes**: 

  - Users can create a new box by choosing “Add Box,” entering a name, and linking it to a collection of images.
  

  • - **Modify/Remove Boxes**: 

  - Options to edit the box name or delete a box.
  

  • - **Image Management**: 

  - Users can upload, remove, or edit images associated with each box.

#### 6. **Organizing Items within Boxes**

  • - **Tagging and Notes**: 

  - Option to add notes or tags to each image for better organization and to provide more details (e.g., purchase date, usage tips).

#### 7. **Backup and Synchronization**

  • - **Cloud Backup**: 

  - Provide an option to back up images to cloud storage to prevent data loss.

#### 8. **User Interface Considerations**

  • - **Simple, Intuitive Design**: 

  - Use a clean layout that makes navigation easy.
  - Ensure that buttons and images are large enough to tap on mobile devices easily.
  

  • - **Responsive Design**: 

  - Adapt to different screen sizes for a seamless experience on tablets and various smartphones.

### Example User Flow:

  • 1. **User opens the app.**
  • 2. **Sees a list of boxes (categories)**.
  • 3. **Taps on "Box 1"**.
  • 4. **Views all images in the Kitchen Items gallery**.
  • 5. **Taps on an image to see it larger or add a note.**
  • 6. **Returns to the main menu to select another box if desired.**

### Conclusion:
The app structure you envision allows users to effectively manage pictures of home items categorized in specific boxes. Each box has its own link, enabling easy access to the images contained within it. This setup not only simplifies the organization of items but also enhances the user experience. By incorporating features for creating, editing, and managing boxes, the app can meet the needs of anyone looking to keep their home items organized visually.

argumentum Universalist

argumentum

Posted
Posted
On 2/27/2025 at 9:01 AM, Deye said:

such as at https://photos.app.goo.gl/,

Spoiler

Invalid Dynamic Link
Requested URL must be a parseable URI, but possibly incomplete to be a DynamicLink.

If you are the developer of this app, ensure that your Dynamic Links domain is correctly configured and that the path component of this URL is valid.

maybe the link has problems ?
In any case, I doubt that you're gonna find a HTML front end person in this forum 🤔

Follow the link to my code contribution ( and other things too ).
FAQ - Please Read Before Posting.
autoit_scripter_blue_userbar.png

Deye Universalist

Deye

Posted
  • Author
Posted

 Catagory box : structural and repair  

 https://photos.app.goo.gl/DXujzk2nHwgxaHvFA

I am not sure how much of the information about converting HTML to APK is correct. 

Quote

You can create an APK from HTML online using several no-code platforms that allow you to upload your HTML, CSS, and JavaScript files without complex setups. Notable services include:

1. **AppGyver**: A platform for building mobile apps that lets you embed HTML and export projects for Android after signing up and creating a new project.
2. **BuildFire**: Allows app creation using HTML templates; users can upload files and download the APK after building the app.
3. **Web2Apk**: An online tool for converting HTML to APK by entering a URL or uploading a file and customizing settings.
4. **Appy Pie**: A popular platform that facilitates converting HTML websites into apps through an app builder with a free account option.
5. **Thunkable**: Lets you create apps visually, incorporating HTML content using a WebViewer component before building and downloading the APK.

Users should be aware of potential limitations on free accounts and check platforms' terms of service and privacy policies. Ensuring HTML is mobile-friendly enhances the user experience on Android devices. These tools streamline the APK creation process without requiring a development environment.

 

 

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...