Research Profiles by @jowinb - Codewith.it

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

References

<td>Definisce una cella di una tabella HTML.
<thead>Definisce un gruppo di intestazione all'interno di una tabella.
<textarea>Area di testo libero espandibile per form HTML
headersDetermina la relazione tra celle e celle di intestazione di una tabella.
_parentApre collegamenti ipertestuali nell'elemento genitore
forSpecifica a quale id è associato l'elemento in cui è dichiarato.

Users

Log in to search for users

Explore

Find inspiration

ximena sanchez JavaScript animati

il museo di leonardo

La Storia di Livia

Curriculum definitivo

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