cl1p.net - The internet clipboard

cl1p.net/1234

This cl1p will be deleted in in 12 days.

1)
// Check if user is logged in
const currentUser = localStorage.getItem('currentUser');
if (!currentUser) {
  window.location.href = 'index.html';
}

// Logout Functionality
document.getElementById('logoutBtn').addEventListener('click', function() {
  localStorage.removeItem('currentUser');
  window.location.href = 'index.html';
});

// Plant Care Functionality
const addPlantForm = document.getElementById('addPlantForm');
const plantsContainer = document.getElementById('plantsContainer');

let plants = JSON.parse(localStorage.getItem(currentUser + '_plants')) || [];

addPlantForm.addEventListener('submit', (e) => {
  e.preventDefault();
  const plantName = document.getElementById('plantName').value;
  const waterInterval = document.getElementById('waterInterval').value;

const newPlant = { name: plantName, waterInterval: parseInt(waterInterval) };
  plants.push(newPlant);
  localStorage.setItem(currentUser + '_plants', JSON.stringify(plants));
  displayPlants();
  addPlantForm.reset();
});

const waterPlant = (index) => {
  alert(`You watered the ${plants[index].name}!`);
};

// Display plants on page load
displayPlants();

2)<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Plant Care Reminder App</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<section class="login-section">
    <h2>Login to PlantCare</h2>
    <form id="loginForm">
      <input type="text" id="loginUsername" placeholder="Username" required>
      <input type="password" id="loginPassword" placeholder="Password" required>
      <button type="submit">Login</button>
    </form>
    <p>Don't have an account? <a href="signup.html">Sign Up</a></p>
  </section>

3)document.getElementById('loginForm').addEventListener('submit', function(e) {
    e.preventDefault();
    const username = document.getElementById('loginUsername').value;
    const password = document.getElementById('loginPassword').value;
  
    const user = JSON.parse(localStorage.getItem(username));
  
    if (user && user.password === password) {
      localStorage.setItem('currentUser', username);
      window.location.href = 'plantcare.html';
    } else {
      alert('Invalid username or password');
    }
  });

4)<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Plant Care Reminder</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<header>
    <h1>PlantCare</h1>
    <button id="logoutBtn">Logout</button>
  </header>

<section class="add-plant">
    <h2>Add a New Plant</h2>
    <form id="addPlantForm">
      <input type="text" id="plantName" placeholder="Plant Name" required>
      <input type="number" id="waterInterval" placeholder="Water Interval (days)" required>
      <button type="submit">Add Plant</button>
    </form>
  </section>

<section class="plant-list">
    <h2>Your Plants</h2>
    <div id="plantsContainer"></div>
  </section>

5)<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Plant Care Reminder App - Sign Up</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<section class="signup-section">
    <h2>Create an Account</h2>
    <form id="signupForm">
      <input type="text" id="signupUsername" placeholder="Username" required>
      <input type="password" id="signupPassword" placeholder="Password" required>
      <button type="submit">Sign Up</button>
    </form>
    <p>Already have an account? <a href="index.html">Login</a></p>
  </section>

6)document.getElementById('signupForm').addEventListener('submit', function(e) {
    e.preventDefault();
    const username = document.getElementById('signupUsername').value;
    const password = document.getElementById('signupPassword').value;
  
    const user = {
      username: username,
      password: password
    };
  
    localStorage.setItem(username, JSON.stringify(user));
    alert('Account created successfully! Please log in.');
    window.location.href = 'index.html';
  });

7)/* Global Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
    line-height: 1.6;
  }
  
  h2 {
    font-size: 24px;
    margin-bottom: 20px;
  }
  
  /* Header Section */
  header {
    background-color: #4CAF50;
    color: white;
    padding: 20px;
    text-align: center;
  }
  
  header h1 {
    font-size: 32px;
    margin: 0;
  }
  
  header button {
    background-color: #f44336;
    color: white;
    padding: 10px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    font-size: 16px;
  }
  
  header button:hover {
    background-color: #e53935;
  }
  
  /* Login / Signup Page */
  section {
    max-width: 400px;
    margin: 50px auto;
    padding: 30px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  
  form input {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
  }
  
  form button {
    width: 100%;
    padding: 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 16px;
    border-radius: 5px;
  }
  
  form button:hover {
    background-color: #45a049;
  }
  
  p {
    text-align: center;
  }
  
  a {
    color: #4CAF50;
    text-decoration: none;
  }
  
  a:hover {
    text-decoration: underline;
  }
  
  /* Plant Care Page */
  .add-plant, .plant-list {
    margin: 30px;
  }
  
  .add-plant form input, .add-plant form button {
    width: 100%;
  }
  
  .plant-card {
    background-color: white;
    padding: 15px;
    margin: 15px 0;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .plant-card button {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 8px 15px;
    cursor: pointer;
    font-size: 14px;
    border-radius: 5px;
  }
  
  .plant-card button:hover {
    background-color: #45a049;
  }