How to create a function to grab html title name and insert an image into separate website

Question

my name is Om, and I'm currently trying to learn how to make a fully functional search bar where I can add and remove certain items on a whole separate page (which is the "admin" page). I currently have the prototype posted on my GitHub, so if you want to have a more in-depth look at both the code and the folder structuring, you can check it over on this link:

Github Repository

Currently, I have set up a value on the testSearchBar/html/apples.html folder which shows the image and description that I am planning on trying to dynamically add and remove:

header {
    display: flex;
    flex-direction: column;
    text-align: center;
}

a {
    color: black;
    text-decoration: none;
}

a:hover {
    color: red;
    transition: 1s;
}

main {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
}

#completeCard {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#mainCard {
    width: 18rem;
}

#card-desc {
    margin: 0 auto;
    transition: 1s;
}




    
    
    
    
    
    
    Apple Search


    
         Apples
        
        
            
                
                
              
        
    

    
        
            
                
                    
                    
                        Granny Smith
                    
                
            
            
                
                    
                        
                            The granny smith is truly a wonder! This green apple may seem like a disgusting apple at first, but it's sweet and juicy taste well justifies the weird color.

Now I also have another HTML document, testSearchBar/html/admin.html. The code is show below:

body {
    width: 80%;
    margin: 0 auto;
}




    
    
    
    
    
    Admin Page




    Administrative Page
    


    
        
             Choose a fruit. 
            
        

        
             Insert image link. 
            
        

        
             Insert Image Title. 
            
        

        
             Inset image description. 
            
        

        Add Fruit

The first form item (#choose-fruit) is supposed to have a function that runs through all of the HTML documents, grabs the value of the website in the head (ex. Apples, and push its value as one of the options on the dropdown.)

The second form item (#input-link) is supposed to essentially be the image link that would be added to the selected website.

The third form item (#input-title) is supposed to give the image a title to the selected website.

And finally, the fourth form item (#input-desc) is supposed to give a description of the item in the selected website.

In short, when the submit button is pressed, it basically needs to be able to figure out which website I'm trying to add my item to, then push this line of code to the selected website (the specific form items needed are inside this line of code):


        
            
                
                
                    #input-title
                
            
        
        
            
                
                    
                        #input-desc

Now what my issue currently is as of right now is, firstly, on how to create a function that goes through every HTML document inside of the testSearchBar/html folder, and to grab its document name and push it onto the #choose-fruit dropdown. I'm also stuck on how to create a function that adds the line of code above to the selected website, with all 3 values (link, title, and desc) pushed into their respective positions inside of this line of code.

Any tips will help me tremendously, and I will be giving an update when I figure out this problem.

How to create a function to grab html title name and insert an image into separate website

0 Answers