Plain HTML page providing data to the user from external API, based on the provided ID.
Go to file
2024-06-05 09:57:28 -05:00
data add: dcd files 2024-03-10 13:39:10 +01:00
scripts add: dcd files 2024-03-10 13:39:10 +01:00
.DS_Store add: dcd files 2024-03-10 13:39:10 +01:00
index.html add: dcd files 2024-03-10 13:39:10 +01:00
LICENSE Initial commit 2024-03-08 13:36:46 +01:00
README.md update: README 2024-06-05 09:57:28 -05:00
style.css add: dcd files 2024-03-10 13:39:10 +01:00

Dynamic Content Delivery

A static website that returns appropriate content to the website user based on the provided ID.

Which files am I allowed to edit?

How to use

Firstly, create template for your webpage. Go to index.html and edit code only between these lines:

<!-- TEMPLATE BEGINS -->
 
<!-- TEMPLATE ENDS -->

This is the template section of the HTML file.

Example:

<!-- TEMPLATE BEGINS -->
<p id="name">Hi!</p>           
<!-- TEMPLATE ENDS -->

Then, prepare your API:

  1. Clone this repository.

  2. Edit data/data-source.json file:

    • provide your data in DATA constant like this:
    const DATA = {
        "id1": {
            "#name": {
                "textContent": "John",
                "style": {
                    "color": "red"
                }
            }
        },
        "id2": {
            "#name": {
                "textContent": "Anna",
                "style": {
                    "color": "blue"
                }
            }
        },
        ...
    }
    
    • edit your data/config.json:
      1. provide your API host in API_HOST constant.
      2. provide your API port in PORT constant.

    Warning

    Do not change the structure of the DATA object. It must be an object with keys being IDs and values, which are objects with CSS selectors as keys and objects with DOM properties as values. Make sure that your API is running on the same port as the one provided in PORT constant.

  3. Deploy your API:

    1. Install Node.js and npm.
    2. Run npm install in the root directory of the API.
    3. Run npm start in the root directory of the API.

Custom styles

This website supports custom CSS. Just edit this file. If provided style doesn't work, try adding !important to the end of CSS rule.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Authors