Research Profiles by @jowinb - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

maxImposta il valore numerico o temporale massimo per un elemento input
<blockquote>Inserisce citazioni in un documento HTML
<form>Crea un modulo/form HTML per consentire all'utente di inviare dati al server
<thead>Definisce un gruppo di intestazione all'interno di una tabella.
requiredRende obbligatorio un campo di input
titleIndica informazioni aggiuntive riguardo un elemento HTML

Users

Log in to search for users

Explore

Find inspiration

UFFICIALE SITO REGIONI

poccodio inserimenti immagineee

Prova qualsiasi

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Research Profiles</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
        }

        header {
            background-color: #2c3e50;
            color: white;
            padding: 20px;
            text-align: center;
        }

        input {
            padding: 10px;
            width: 80%;
            max-width: 400px;
            margin-top: 10px;
        }

        #results {
            margin: 20px;
        }

        .card {
            background-color: white;
            padding: 20px;
            margin: 10px 0;
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .card img {
            max-width: 100px;
            border-radius: 50%;
            margin-right: 20px;
        }

        .card .info {
            display: flex;
            align-items: center;
        }

        .card .info div {
            margin-left: 10px;
        }

        .card .description {
            margin-top: 10px;
            font-size: 14px;
            color: #555;
        }
    </style>
</head>
<body>
    <header>
        <h1>Research Profiles</h1>
        <div>
            <input type="text" id="search" placeholder="Search for a person or country..." />
        </div>
    </header>
    <main>
        <div id="results"></div>
    </main>

    <script>
        // Inline JSON data for people and countries
        const researchData = {
            "people": [
                {
                    "id": 1,
                    "name": "Albert Einstein",
                    "birthdate": "14 March 1879",
                    "birthplace": "Ulm, Kingdom of Württemberg, German Empire",
                    "occupation": "Theoretical Physicist",
                    "bio": "Albert Einstein was a German-born theoretical physicist who developed the theory of relativity...",
                    "image": "https://upload.wikimedia.org/wikipedia/commons/a/a2/Albert_Einstein_1921.jpg"
                },
                {
                    "id": 2,
                    "name": "Mahatma Gandhi",
                    "birthdate": "2 October 1869",
                    "birthplace": "Porbandar, British India",
                    "occupation": "Political Leader, Activist",
                    "bio": "Mahatma Gandhi was a leader of the Indian independence movement and a proponent of nonviolent civil disobedience...",
                    "image": "https://upload.wikimedia.org/wikipedia/commons/a/ab/Mahatma_Gandhi_1942.jpg"
                }
            ],
            "countries": [
                {
                    "id": 1,
                    "name": "India",
                    "capital": "New Delhi",
                    "population": "1.366 billion",
                    "area": "3,287,263 km²",
                    "languages": ["Hindi", "English"],
                    "flag": "https://upload.wikimedia.org/wikipedia/en/4/41/Flag_of_India.svg",
                    "description": "India is a country in South Asia. It is the seventh-largest country by land area, the second-most populous country..."
                },
                {
                    "id": 2,
                    "name": "United States",
                    "capital": "Washington, D.C.",
                    "population": "331 million",
                    "area": "9,525,067 km²",
                    "languages": ["English"],
                    "flag": "https://upload.wikimedia.org/wikipedia/commons/a/a4/Flag_of_the_United_States.svg",
                    "description": "The United States of America is a country located primarily in North America..."
                }
            ]
        };

        // Function to filter and display the search results
        function searchProfiles(query) {
            const resultsDiv = document.getElementById('results');
            resultsDiv.innerHTML = ''; // Clear previous results

            // Filter people and countries based on the search query
            const filteredPeople = researchData.people.filter(person => person.name.toLowerCase().includes(query.toLowerCase()));
            const filteredCountries = researchData.countries.filter(country => country.name.toLowerCase().includes(query.toLowerCase()));

            // Display filtered people results
            filteredPeople.forEach(person => {
                const card = document.createElement('div');
                card.classList.add('card');
                card.innerHTML = `
                    <div class="info">
                        <img src="${person.image}" alt="${person.name}" />
                        <div>
                            <h3>${person.name}</h3>
                            <p><strong>Born:</strong> ${person.birthdate}</p>
                            <p><strong>Occupation:</strong> ${person.occupation}</p>
                        </div>
                    </div>
                    <p class="description">${person.bio}</p>
                `;
                resultsDiv.appendChild(card);
            });

            // Display filtered country results
            filteredCountries.forEach(country => {
                const card = document.createElement('div');
                card.classList.add('card');
                card.innerHTML = `
                    <div class="info">
                        <img src="${country.flag}" alt="${country.name}" />
                        <div>
                            <h3>${country.name}</h3>
                            <p><strong>Capital:</strong> ${country.capital}</p>
                            <p><strong>Population:</strong> ${country.population}</p>
                            <p><strong>Area:</strong> ${country.area}</p>
                            <p><strong>Languages:</strong> ${country.languages.join(', ')}</p>
                        </div>
                    </div>
                    <p class="description">${country.description}</p>
                `;
                resultsDiv.appendChild(card);
            });
        }

        // Add event listener to the search input field
        document.getElementById('search').addEventListener('input', function(event) {
            const query = event.target.value;
            searchProfiles(query);
        });

        // Initial load: show all profiles when no search is applied
        window.onload = function() {
            searchProfiles('');
        };
    </script>
</body>
</html>

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}

header {
    background-color: #2c3e50;
    color: white;
    padding: 20px;
    text-align: center;
}

input {
    padding: 10px;
    width: 80%;
    max-width: 400px;
    margin-top: 10px;
}

#results {
    margin: 20px;
}

.card {
    background-color: white;
    padding: 20px;
    margin: 10px 0;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card img {
    max-width: 100px;
    border-radius: 50%;
    margin-right: 20px;
}

.card .info {
    display: flex;
    align-items: center;
}

.card .info div {
    margin-left: 10px;
}

.card .description {
    margin-top: 10px;
    font-size: 14px;
    color: #555;
}

// script.js

// Fetch the research data from the JSON file
fetch('./src/api/research.json')
  .then(response => response.json())
  .then(data => {
    // Store the data globally
    window.researchData = data;
    initializeSearch();
  })
  .catch(error => console.error('Error loading the JSON file:', error));

// Function to initialize the search and filter results
function initializeSearch() {
  const searchInput = document.getElementById('search');
  const resultsDiv = document.getElementById('results');

  // Event listener for searching
  searchInput.addEventListener('input', function(e) {
    const query = e.target.value.toLowerCase();
    const filteredPeople = window.researchData.people.filter(person => person.name.toLowerCase().includes(query));
    const filteredCountries = window.researchData.countries.filter(country => country.name.toLowerCase().includes(query));
    
    resultsDiv.innerHTML = '';

    // Display filtered people results
    filteredPeople.forEach(person => {
      const card = document.createElement('div');
      card.classList.add('card');
      card.innerHTML = `
        <div class="info">
          <img src="${person.image}" alt="${person.name}" />
          <div>
            <h3>${person.name}</h3>
            <p><strong>Born:</strong> ${person.birthdate}</p>
            <p><strong>Occupation:</strong> ${person.occupation}</p>
          </div>
        </div>
        <p class="description">${person.bio}</p>
      `;
      resultsDiv.appendChild(card);
    });

    // Display filtered country results
    filteredCountries.forEach(country => {
      const card = document.createElement('div');
      card.classList.add('card');
      card.innerHTML = `
        <div class="info">
          <img src="${country.flag}" alt="${country.name}" />
          <div>
            <h3>${country.name}</h3>
            <p><strong>Capital:</strong> ${country.capital}</p>
            <p><strong>Population:</strong> ${country.population}</p>
            <p><strong>Area:</strong> ${country.area}</p>
            <p><strong>Languages:</strong> ${country.languages.join(', ')}</p>
          </div>
        </div>
        <p class="description">${country.description}</p>
      `;
      resultsDiv.appendChild(card);
    });
  });
}
{
  "people": [
    {
      "id": 1,
      "name": "Albert Einstein",
      "birthdate": "14 March 1879",
      "birthplace": "Ulm, Kingdom of Württemberg, German Empire",
      "occupation": "Theoretical Physicist",
      "bio": "Albert Einstein was a German-born theoretical physicist who developed the theory of relativity...",
      "image": "https://upload.wikimedia.org/wikipedia/commons/a/a2/Albert_Einstein_1921.jpg"
    },
    {
      "id": 2,
      "name": "Mahatma Gandhi",
      "birthdate": "2 October 1869",
      "birthplace": "Porbandar, British India",
      "occupation": "Political Leader, Activist",
      "bio": "Mahatma Gandhi was a leader of the Indian independence movement and a proponent of nonviolent civil disobedience...",
      "image": "https://upload.wikimedia.org/wikipedia/commons/a/ab/Mahatma_Gandhi_1942.jpg"
    }
    // Add more people profiles
  ],
  "countries": [
    {
      "id": 1,
      "name": "India",
      "capital": "New Delhi",
      "population": "1.366 billion",
      "area": "3,287,263 km²",
      "languages": ["Hindi", "English"],
      "flag": "https://upload.wikimedia.org/wikipedia/en/4/41/Flag_of_India.svg",
      "description": "India is a country in South Asia. It is the seventh-largest country by land area, the second-most populous country..."
    },
    {
      "id": 2,
      "name": "United States",
      "capital": "Washington, D.C.",
      "population": "331 million",
      "area": "9,525,067 km²",
      "languages": ["English"],
      "flag": "https://upload.wikimedia.org/wikipedia/commons/a/a4/Flag_of_the_United_States.svg",
      "description": "The United States of America is a country located primarily in North America..."
    }
    // Add more country profiles
  ]
}