Question

In: Computer Science

Use the complete HTML to do all of the things: 3-3)   Install and work with Redis....

Use the complete HTML to do all of the things:

3-3)   Install and work with Redis.
3-4)   Write a JQuery Ajax program that can communicate with a flicker to get the last pictures taken from any place or related to any concept(s) the user has written in a textbox, say Sydney, train. Some information associated with the image like its topic, time taken, and its link needs to be appeared with it.

3-5)   Develop a server which can serve the file you developed in 3-4.

3-6)   Add a plugin to the real jQuery library so that when you pass an array of elements to it, the function can move the elements forward and backward repeatedly. Then test your plugin by sending an array of images to it.

Hopefully, someone can help me with the complete HTML. I don't want to see the JavaScript code. If someone can really help me, I will appreciate you. (HTML file not the JavaScript code). If you can, please answer me as soon as possible

Solutions

Expert Solution

Here is your html file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Search Images</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .page{
            width: 100%;
            height: auto;
        }
        .container{
            width: 80%;
            margin: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .header-text{
            font-size: 35px;
            letter-spacing: 6px;
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
            text-transform: uppercase;
            text-align: center;
            margin: 35px;
        }
        form{
            width: 800px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .form-control{
            margin: 10px;
            display: flex;
            flex-direction: column;
        }
        .m-10{
            margin: 10px;
        }
        input{
            padding: 8px 12px;
            width: 500px;
        }
        label{
            text-transform: uppercase;
            font-size: 20px;
        }
        .btn{
            padding: 12px;
            text-transform: uppercase;
            font-size: 20px;
            border: none;
            border-radius: 15px;
            background-color: rgb(64, 103, 175);
            color: white;
        }
        .btn:hover{
            background-color: blue;
        }
        #image-gallery{
            width: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            background-color: rgb(245, 245, 245);
            border-radius: 35px;
        }
        img{
            width: 400px;
            height: 400px;
            margin: 15px;
        }
        #move{
            position: relative;
            width: auto;
            height: 450px;
            display: flex;
            animation-name: move;
            animation-timing-function: linear;
            animation-duration: 10s;
            animation-iteration-count: infinite;
        }
        @keyframes move{
            0%{
                transform: translateX(0);
            }
            60%{
                transform: translateX(-2400px);
            }
            100%{
                transform: translateX(0px);
            }
        }
    </style>
</head>
<body>
    <div class="page">
        <div class="container">
            <h1 class="header-text">Search Images</h1>
            <form id="search-form">
                <div class="form-control">
                    <label>Enter Photo name</label>
                    <input type="text" id="search-field" name="search" placeholder="example :- car">
                </div>
                <div class="m-10">
                    <button type="submit" name="btn-submit" class="btn">Submit</button>
                </div>
            </form>
        </div>
        <div id="move"></div>
        <div class="container">
            <div id="image-gallery"></div>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.20.0/axios.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
        $(document).ready(function(){
            const searchForm=document.querySelector("#search-form");
            const imageGallery=document.querySelector("#image-gallery");
            const move=document.querySelector("#move");
            searchForm.addEventListener("submit",async e=>{
                e.preventDefault();
                imageGallery.innerHTML='';
                move.innerHTML='';
                const value =document.querySelector("#search-field").value;
                const res=await axios.get(`https://api.pexels.com/v1/search?query=${value}&per_page=10`,{
                    headers:{
                        Authorization:"563492ad6f917000010000017a4a7fd3a75d4f15808ac3b25156552b"
                    }
                })
                const photos=res.data.photos;
                photos.map(photo=>{
                    imageGallery.innerHTML+=`<img class="image" src=${photo.src.original} alt=${value}>`;
                    move.innerHTML+=`<img class="image" src=${photo.src.original} alt=${value}>`;
                })
            })
        })
    </script>
</body>
</html>

venereology answered 1 year ago
Next > < Previous

Related Solutions

Use complete sentences and show all relevant work. Appropriate use of significant figures and units is...
Use complete sentences and show all relevant work. Appropriate use of significant figures and units is required to receive full credit. 1. Is the Haber process an exothermic or endothermic reaction? 2. Write a balanced thermochemical equation with phase labels for the Haber process with the heat energy as part of the equation. 3. What is the theoretical yield of ammonia(in grams) if 17.15 grams of nitrogen gas and 10.95 grams of hydrogen gas are allowed to react? 4. Based...
take the following html code and make it work for html validator. heres the ,html file...
take the following html code and make it work for html validator. heres the ,html file <!DOCTYPE html> <html lang="en">    <head>        <title> GettingStarted</title>        <meta charset="utf-8">        <link href="Style.css" rel="stylesheet">    </head>       <body>        <header><h1>GettingStarted</h1></header>        <nav>               <b>        <a href="Home.html">Home</a>&nbsp;        <a href="GettingStarted.html">Getting Started</a>&nbsp;        <a href="MaterialsNeeded.html">Materials Needed</a>&nbsp;                      <a href="TroubleShooting.html">TroubleShooting</a>&nbsp;        <a href="InfoMaterials.html">Infomation on materials</a>&nbsp;   ...
Describe 3 things the medical office assistant can do to reduce the fraudulent use of a...
Describe 3 things the medical office assistant can do to reduce the fraudulent use of a health card. List the employee’s responsibilities when making a claim to Workers Compensation.
Operating Systems class Complete the following work with Linux commands and submit the screenshot. 1.Install a...
Operating Systems class Complete the following work with Linux commands and submit the screenshot. 1.Install a virtual machine with Lubuntu 2.Log in and display the content of your home directory 3.Create a directory called homework under your home directory and navigate to homework directory 4.Create a file called newfile under homework directory (this can be done by Leafpad) 5.Copy the file newfile to tempfile, then rename tempfile to myfile and delete newfile 6.Display the content of myfile
<!DOCTYPE html> <html> <head> <!-- *************************************************************************************** --> <!-- * * --> <!-- * Do not change...
<!DOCTYPE html> <html> <head> <!-- *************************************************************************************** --> <!-- * * --> <!-- * Do not change anything within the <head></head> section of the HTML * --> <!-- * * --> <!-- *************************************************************************************** --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <style> .btn{border:1px solid black; padding:5px;display:inline-block} </style> </head> <body> <!-- *************************************************************************************** --> <!-- * * --> <!-- * Nothing to change here in the <body> * --> <!-- * * --> <!-- ***************************************************************************************...
The two things which do not allow for a complete market for the allocation of risk...
The two things which do not allow for a complete market for the allocation of risk to exist are ___________________ and ____________________. This is all that was given, it is fill in the blank.
Please complete all work in excel. Use excel to make the calculations (cells can be clicked...
Please complete all work in excel. Use excel to make the calculations (cells can be clicked on to view any formulas used) and be sure to identify your answer, including units. A firm has 82 units of a product on hand. Forecasts of demand are 30 units per week. An MPS quantity of 100 units is planned to arrive in period 3. Customer orders are 32 for period 1, 28 for period 2, and 25 for period 3. What is...
Please complete all work in excel. Use excel to make the calculations (cells can be clicked...
Please complete all work in excel. Use excel to make the calculations (cells can be clicked on to view any formulas used) and be sure to identify your answer, including units. The manager of QuikStop (open 365 days a year) sells 40 cases of water each day. Order costs are $30 per order, and water costs $0.10 per bottle (each case of water contains 24 bottles). Daily holding costs are equal to 3 percent of the cost of the water....
Please complete all work in excel. Use excel to make the calculations (cells can be clicked...
Please complete all work in excel. Use excel to make the calculations (cells can be clicked on to view any formulas used) and be sure to identify your answer, including units. Activity Immediate Predecessor Activity Time (wks) Total Budgeted Cost A - 4 24,000 B - 5 15,000 C A 2 16,000 D B 8 40,000 E C 3 30,000 F D, E 5 55,000 G F 3 21,000 H D 7 21,000 I F 5 10,000 J G, H...
Please complete all work in excel. Use excel to make the calculations (cells can be clicked...
Please complete all work in excel. Use excel to make the calculations (cells can be clicked on to view any formulas used) and be sure to identify your answer, including units. There are four jobs to be done and four employees to do them. Each resource will take a specific time, translated to salaries, to do each job, as shown in the following table: Employee Job A B C D 1 $20 23 21 17 2 18 18 22 19...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT