Research Profiles by @jowinb - Codewith.it

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

Referenze

maxImposta il valore numerico o temporale massimo per un elemento input
<head>Tag primario di un documento HTML
<link>Collega il documento corrente con una risorsa esterna
enctypeDetermina il tipo di codifica dei dati di un form per l'invio al server
<b>Formatta il testo in grassetto
<cite>Inserisce citazioni e menzioni riguardo un'opera creativa.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Html con 3 img e descrize

Aurion Agency | Digital Alchemy

educazione civica info

HOTEL STELLA MARIS

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