Research Profiles by @jowinb - Codewith.it

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

Referenze

<h1>Titolo di intestazione di primo livello
<div>Crea contenitori generici o sezioni in una pagina
<source>Il tag HTML <source> si usa per indicare una o più risorse multimediali per elementi media
mediaSpecifica a quale dispositivo/display/documento è ottimizzata una risorsa.
minImposta il valore numerico o temporale minimo per un elemento input
requiredRende obbligatorio un campo di input

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Esercio-selettori-di-relazione

numeri primi e divisori pro

LB Campodarsego(2)(2)(2)

Esercitazione n. 2

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