Research Profiles by @jowinb - Codewith.it

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

Referenze

langSpecifica la lingua del contenuto di un elemento
selectedPre-seleziona un elemento di input
<source>Il tag HTML <source> si usa per indicare una o più risorse multimediali per elementi media
valueValore alfanumerico o booleano contenuto in un elemento
mediaSpecifica a quale dispositivo/display/documento è ottimizzata una risorsa.
_selfApre collegamenti ipertestuali nella stessa pagina del browser

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Futura Design - Agenzia di Design

effect6 bouncing

Five Random Poker Cards

My Anime Blog - Ninjas and Dragons

GEMELLAGGIO IN DEUTSCHLAND

Cappuccetto Rosso - La Storia

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!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
  ]
}