Scribd Logo
Upload

Welcome to Scribd!

  • XML HTML (Tourist)

    Uploaded by

    Sujamoni 824
    15 views4 pages
    The document contains code for a web page that allows users to search for tourist places by entering a place name. It uses XMLHttpRequest to load data from an XML file containing tourist place details like country, language, mode of transport, and highlights. The details of any matching places will be displayed in a table on the web page. Styling is applied using CSS for colors and layout.

    Original Description:

    Original Title

    xml-html(tourist)

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document contains code for a web page that allows users to search for tourist places by entering a place name. It uses XMLHttpRequest to load data from an XML file containing tourist place details like country, language, mode of transport, and highlights. The details of any matching places will be displayed in a table on the web page. Styling is applied using CSS for colors and layout.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    15 views4 pages

    XML HTML (Tourist)

    Uploaded by

    Sujamoni 824
    The document contains code for a web page that allows users to search for tourist places by entering a place name. It uses XMLHttpRequest to load data from an XML file containing tourist place details like country, language, mode of transport, and highlights. The details of any matching places will be displayed in a table on the web page. Styling is applied using CSS for colors and layout.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 4

    <!

    DOCTYPE html>
    <html>
    <head>
    <style>
    table {
    border-collapse: collapse;
    width: 100%;
    }
    th,
    td {
    text-align: left;
    padding: 8px;
    color:white;
    }
    tr:nth-child(even) {
    background-color: #7ce2af
    }
    th {
    background-color: #7c0f65;
    color:white;
    }
    .button {
    position: relative;
    text-align: center;
    padding: 10px;
    border: 4px solid darkcyan;
    background:cyan;
    color: darkcyan;
    }
    .button:hover {
    color: white;
    background-color: darkcyan;
    }
    </style>
    <script>
    function loadXMLDoc() {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
    empDetails(this);
    }};
    xmlhttp.open("GET", "tourist.xml", true);
    xmlhttp.send();
    }
    function empDetails(xml) {
    var i;
    var xmlDoc = xml.responseXML;
    var employeeId = document.getElementById(").value.toLowerCase(); // Get the entered employee
    ID
    var table =
    `<tr><th>country</th><th>
    <th>mode_of_transport</th><th>
    </tr>`;
    var x = xmlDoc.getElementsByTagName(");
    for (i = 0; i < x.length; i++) {
    if (x[i].getAttribute("name").toL() === employeeId) {
    table += "<tr><td>" +
    x[i].getElementsByTagName(")[0].childNodes[0].nod + "</td><td>" +
    x[i].getElementsByTagName(")[0].childNodes[0].no + "</td><td>" +
    x[i].getElementsByTagName(")[0].childNo[0].nodeValue + "</td><td>" +
    x[i].getElementsByTagName(")[0].childNodes[0].n + "</td><td>";
    }
    }
    document.getElementById("name"innerHTML = table;
    }
    </script>
    </head>
    <body>
    <center>
    <input type="text" id="place" placeholder="Enter place you want to go">
    <button type="button" class="button" onclick="loadXMLDoc()">
    Get tourist place
    </button>
    </center>
    <br><br>
    <table id="name"></table>
    </body>
    </html>

    tourist.xml
    <?xml version="1.0" encoding="UTF-8"?>
    <tourists>
    <places name="paris">
    <country>France</country>
    <language>French or English</language>
    <mode_of_transport>Airplane</m>
    <highlight>Eiffel Tower</highlight>
    </places>
    <places name="New Delhi">
    <country>India</country>
    <language>Multi Language</language>
    <mode_of_transport>Airplane</m>
    <highlight>Taj Mahal</highlight>
    </places>
    </tourists>
    output:

    You might also like