Category: React JS Projects

Set Up Your React Project

Open your terminal and create a new React app:

bashCopy codenpx create-react-app recipe-finder
cd recipe-finder

Step 2: Get Your API Key

1. Sign up at Edamam.
2. Create a new application to get your App ID and App Key.

Step 3: Create the Recipe Finder Component

Replace the content of src/App.js with the following code:

javascriptCopy codeimport React, { useState } from 'react';
import './App.css';

const App = () => {
  const [query, setQuery] = useState('');
  const [recipes, setRecipes] = useState([]);
  const [error, setError] = useState('');

  const APP_ID = 'YOUR_APP_ID'; // Replace with your Edamam App ID
  const APP_KEY = 'YOUR_APP_KEY'; // Replace with your Edamam App Key

  const fetchRecipes = async () => {
if (!query) return;
try {
  const response = await fetch(https://api.edamam.com/search?q=${query}&app_id=${APP_ID}&app_key=${APP_KEY});
  const data = await response.json();
  if (data.hits.length === 0) {
    setError('No recipes found.');
  } else {
    setRecipes(data.hits);
    setError('');
  }
} catch (err) {
  setError('Failed to fetch recipes.');
}
  };

  const handleKeyPress = (e) => {
if (e.key === 'Enter') {
  fetchRecipes();
}
  };

  return (
<div className="App">
  <h1>Recipe Finder</h1>
  <input
    type="text"
    value={query}
    onChange={(e) => setQuery(e.target.value)}
    onKeyPress={handleKeyPress}
    placeholder="Enter ingredients..."
  />
  <button onClick={fetchRecipes}>Search</button>
  {error && <p className="error">{error}</p>}
  <div className="recipe-list">
    {recipes.map((item) => (
      <div key={item.recipe.label} className="recipe-card">
        <h2>{item.recipe.label}</h2>
        <img src={item.recipe.image} alt={item.recipe.label} />
        <p>Calories: {Math.round(item.recipe.calories)}</p>
        <a href={item.recipe.url} target="_blank" rel="noopener noreferrer">View Recipe</a>
      </div>
    ))}
  </div>
</div>
  );
};

export default App;

Step 4: Style Your App

Open src/App.css and add some styles:

cssCopy code.App {
  text-align: center;
  margin: 20px;
  font-family: Arial, sans-serif;
}

input {
  padding: 10px;
  margin-right: 10px;
  width: 200px;
}

button {
  padding: 10px;
}

.error {
  color: red;
}

.recipe-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.recipe-card {
  border: 1px solid #ccc;
  border-radius: 8px;
  margin: 10px;
  padding: 10px;
  width: 200px;
}

.recipe-card img {
  width: 100%;
  border-radius: 8px;
}

Step 5: Run Your Application

In the terminal, run:

bashCopy codenpm start

Step 1: Set Up Your React Project

Open your terminal and run the following commands:

bashCopy codenpx create-react-app weather-app
cd weather-app

Step 2: Get Your API Key

1. Go to OpenWeatherMap and sign up for a free account.
2. After logging in, navigate to the API section and get your API key.

Step 3: Create the Weather App Component

Open src/App.js and replace its content with the following code:

javascriptCopy codeimport React, { useState } from 'react';
import './App.css';

const App = () => {
  const [city, setCity] = useState('');
  const [weather, setWeather] = useState(null);
  const [error, setError] = useState('');

  const API_KEY = 'YOUR_API_KEY'; // Replace with your OpenWeatherMap API key

  const handleInputChange = (e) => {
setCity(e.target.value);
  };

  const fetchWeather = async () => {
if (!city) return;
try {
  const response = await fetch(https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric);
  if (!response.ok) {
    throw new Error('City not found');
  }
  const data = await response.json();
  setWeather(data);
  setError('');
} catch (err) {
  setError(err.message);
  setWeather(null);
}
  };

  const handleKeyPress = (e) => {
if (e.key === 'Enter') {
  fetchWeather();
}
  };

  return (
<div className="App">
  <h1>Weather App</h1>
  <input
    type="text"
    value={city}
    onChange={handleInputChange}
    onKeyPress={handleKeyPress}
    placeholder="Enter city name..."
  />
  <button onClick={fetchWeather}>Get Weather</button>
  {error && <p className="error">{error}</p>}
  
  {weather && (
    <div className="weather-info">
      <h2>{weather.name}</h2>
      <p>Temperature: {weather.main.temp} °C</p>
      <p>Weather: {weather.weather[0].description}</p>
      <p>Humidity: {weather.main.humidity} %</p>
      <p>Wind Speed: {weather.wind.speed} m/s</p>
    </div>
  )}
</div>
  );
};

export default App;

Step 4: Style Your App

Open src/App.css and add some basic styles:

cssCopy code.App {
  text-align: center;
  margin: 20px;
  font-family: Arial, sans-serif;
}

input {
  padding: 10px;
  margin-right: 10px;
  width: 200px;
}

button {
  padding: 10px;
}

.weather-info {
  margin-top: 20px;
}

.error {
  color: red;
}

Step 5: Run Your Application

In the terminal, run:

bashCopy codenpm start

Step 1: Set Up Your React Project

Open your terminal and run the following commands:

bashCopy codenpx create-react-app todo-list
cd todo-list

Step 2: Create the Todo List Component

Open src/App.js and replace its content with the following code:

javascriptCopy codeimport React, { useState } from 'react';
import './App.css';

const App = () => {
  const [tasks, setTasks] = useState([]);
  const [inputValue, setInputValue] = useState('');

  const handleInputChange = (e) => {
setInputValue(e.target.value);
  };

  const handleAddTask = () => {
if (inputValue.trim()) {
  setTasks([...tasks, { text: inputValue, completed: false }]);
  setInputValue('');
}
  };

  const handleToggleTask = (index) => {
const newTasks = [...tasks];
newTasks[index].completed = !newTasks[index].completed;
setTasks(newTasks);
  };

  const handleDeleteTask = (index) => {
const newTasks = tasks.filter((_, i) => i !== index);
setTasks(newTasks);
  };

  return (
<div className="App">
  <h1>Todo List</h1>
  <input
    type="text"
    value={inputValue}
    onChange={handleInputChange}
    placeholder="Add a new task..."
  />
  <button onClick={handleAddTask}>Add Task</button>
  <ul>
    {tasks.map((task, index) => (
      <li key={index} style={{ textDecoration: task.completed ? 'line-through' : 'none' }}>
        <span onClick={() => handleToggleTask(index)}>{task.text}</span>
        <button onClick={() => handleDeleteTask(index)}>Delete</button>
      </li>
    ))}
  </ul>
</div>
  );
};

export default App;

Step 3: Style Your App

Open src/App.css and add some basic styles:

cssCopy code.App {
  text-align: center;
  margin: 20px;
  font-family: Arial, sans-serif;
}

input {
  padding: 10px;
  margin-right: 10px;
  width: 200px;
}

button {
  padding: 10px;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0;
}

Step 4: Run Your Application

In the terminal, run:

bashCopy codenpm start