diff --git a/Todo.css b/Todo.css new file mode 100644 index 0000000..7d0df91 --- /dev/null +++ b/Todo.css @@ -0,0 +1,57 @@ +body { + font-family: 'Open Sans', sans-serif; + background-color: #f8f9fa; + color: #343a40; + display: flex; + flex-direction: column; + align-items: center; + margin: 0; +} +#main-heading { + margin-top: 20px; +} +.container { + width: 90%; + max-width: 600px; + margin-top: 20px; +} +.grid-container { + display: grid; + grid-template-columns: 1fr auto auto; + gap: 10px; + margin-bottom: 20px; +} +.todo-container { + list-style-type: none; + padding: 0; + text-align: center; +} +.completed-todo-list { + margin-top: 20px; +} +.btn-todo { + background-color: #007bff; + color: white; +} +.completed { + text-decoration: line-through; + color: gray; +} +.light { + background-color: #343a40; + color: #f8f9fa; +} +.light-arrow { + color: #f8f9fa; +} +.delete-btn { + background: transparent; + border: none; + cursor: pointer; + color: #dc3545; + margin-left: 10px; +} +.delete-btn img { + width: 20px; + height: 20px; +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..6504627 --- /dev/null +++ b/index.html @@ -0,0 +1,117 @@ + + + + + + + TO-DO APP + + + +

TO-DO APP

+ +
+
+
+ +
+
+

24th Sep

+

Wednesday

+
+
+ +
+ + + +
+ + + +
+

Completed Tasks

+
+ +
+
+
+
+ + + + diff --git a/index.jsx b/index.jsx new file mode 100644 index 0000000..f95c24f --- /dev/null +++ b/index.jsx @@ -0,0 +1,208 @@ +import React, { useState, useEffect } from 'react'; +import { Search, Globe, Users, MapPin, Loader } from 'lucide-react'; + +const CountryExplorer = () => { + const [countries, setCountries] = useState([]); + const [filteredCountries, setFilteredCountries] = useState([]); + const [searchTerm, setSearchTerm] = useState(''); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + + // Fetch countries data on component mount + useEffect(() => { + const fetchCountries = async () => { + try { + setLoading(true); + const response = await fetch('https://restcountries.com/v3.1/all'); + + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } + + const data = await response.json(); + + // Sort countries alphabetically by name + const sortedCountries = data.sort((a, b) => + a.name.common.localeCompare(b.name.common) + ); + + setCountries(sortedCountries); + setFilteredCountries(sortedCountries); + setError(null); + } catch (err) { + setError('Failed to fetch countries data. Please try again later.'); + console.error('Error fetching countries:', err); + } finally { + setLoading(false); + } + }; + + fetchCountries(); + }, []); + + // Filter countries based on search term + useEffect(() => { + if (searchTerm === '') { + setFilteredCountries(countries); + } else { + const filtered = countries.filter(country => + country.name.common.toLowerCase().includes(searchTerm.toLowerCase()) + ); + setFilteredCountries(filtered); + } + }, [searchTerm, countries]); + + // Format population with commas + const formatPopulation = (population) => { + return population ? population.toLocaleString() : 'N/A'; + }; + + // Get capital city (handle array format) + const getCapital = (capital) => { + if (!capital || capital.length === 0) return 'N/A'; + return Array.isArray(capital) ? capital[0] : capital; + }; + + if (loading) { + return ( +
+
+ +

Loading countries...

+
+
+ ); + } + + if (error) { + return ( +
+
+
⚠️
+

Oops! Something went wrong

+

{error}

+ +
+
+ ); + } + + return ( +
+ {/* Header */} +
+
+
+ +

Country Explorer

+
+ + {/* Search Bar */} +
+ + setSearchTerm(e.target.value)} + className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition-all" + /> +
+ + {/* Results Counter */} +
+

+ Showing {filteredCountries.length} of {countries.length} countries +

+
+
+
+ + {/* Countries Grid */} +
+ {filteredCountries.length === 0 ? ( +
+
🔍
+

No countries found

+

Try adjusting your search term

+
+ ) : ( +
+ {filteredCountries.map((country) => ( +
+ {/* Flag */} +
+ {`Flag { + e.target.src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIwIiBoZWlnaHQ9IjIxMyIgdmlld0JveD0iMCAwIDMyMCAyMTMiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIzMjAiIGhlaWdodD0iMjEzIiBmaWxsPSIjRjNGNEY2Ii8+CjxyZWN0IHg9IjEzNS41IiB5PSI5MS41IiB3aWR0aD0iNDkiIGhlaWdodD0iMzAiIHJ4PSIyIiBzdHJva2U9IiM5Q0EzQUYiLz4KPC9zdmc+'; + }} + /> +
+ + {/* Country Info */} +
+

+ {country.name.common} +

+ +
+
+ + + Capital: {getCapital(country.capital)} + +
+ +
+ + + Population: {formatPopulation(country.population)} + +
+ +
+ + + Region: {country.region || 'N/A'} + +
+
+
+
+ ))} +
+ )} +
+ + {/* Footer */} + +
+ ); +}; + +export default CountryExplorer;