Introduction
In this tutorial, we’ll create FarmHelper, a web-based tool that tracks crop growth and equipment maintenance for Farm Simulator 22. This guide is fully coding-focused, with all code included in text form so you can copy, paste, and experiment.
We’ll use HTML, CSS, and JavaScript, and store farm data in the browser using localStorage.
Step 1: Project Setup
Create a project folder, farmhelper, with three files:
index.html
style.css
script.js
This keeps your code organized and easy to maintain.
Step 2: HTML Structure
Here’s the full index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FarmHelper</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>FarmHelper Dashboard</h1>
</header>
<main>
<section id="crop-section">
<h2>Crops</h2>
<ul id="crop-list"></ul>
<input type="text" id="crop-name" placeholder="Crop Name">
<input type="number" id="growth-days" placeholder="Days to Grow">
<button id="add-crop">Add Crop</button>
</section>
<section id="equipment-section">
<h2>Equipment</h2>
<ul id="equipment-list"></ul>
<input type="text" id="equip-name" placeholder="Equipment Name">
<input type="number" id="maintenance-days" placeholder="Maintenance Interval">
<button id="add-equipment">Add Equipment</button>
</section>
</main>
<script src="script.js"></script>
</body>
</html>
This HTML creates two sections: Crops and Equipment, each with a list, input fields, and an add button.
Step 3: CSS Styling
Here’s style.css:
body {
font-family: Arial, sans-serif;
background: #f4f4f4;
color: #333;
margin: 0;
padding: 0;
}
header {
background: #2a7ae2;
color: white;
text-align: center;
padding: 1rem 0;
}
main {
display: flex;
justify-content: space-around;
padding: 2rem;
}
section {
background: white;
padding: 1rem 2rem;
border-radius: 8px;
width: 40%;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
input, button {
margin: 0.5rem 0;
padding: 0.5rem;
}
button {
background: #2a7ae2;
color: white;
border: none;
cursor: pointer;
border-radius: 4px;
}
button:hover {
background: #1c5bbf;
}
This keeps the dashboard clean and readable, with simple styling for lists, input fields, and buttons.
Step 4: JavaScript Logic
Here’s script.js with all functionality:
// Local Storage Helpers
const getData = (key) => JSON.parse(localStorage.getItem(key)) || [];
const saveData = (key, data) => localStorage.setItem(key, JSON.stringify(data));
// Crop Management
const cropList = document.getElementById('crop-list');
const addCropBtn = document.getElementById('add-crop');
const cropNameInput = document.getElementById('crop-name');
const growthDaysInput = document.getElementById('growth-days');
let crops = getData('crops');
const renderCrops = () => {
cropList.innerHTML = '';
crops.forEach((crop, index) => {
const li = document.createElement('li');
li.textContent = `${crop.name} - ${crop.growthDays} days to grow`;
const deleteBtn = document.createElement('button');
deleteBtn.textContent = 'Remove';
deleteBtn.onclick = () => {
crops.splice(index, 1);
saveData('crops', crops);
renderCrops();
};
li.appendChild(deleteBtn);
cropList.appendChild(li);
});
};
addCropBtn.addEventListener('click', () => {
const name = cropNameInput.value.trim();
const days = parseInt(growthDaysInput.value);
if (name && days > 0) {
crops.push({ name, growthDays: days });
saveData('crops', crops);
renderCrops();
cropNameInput.value = '';
growthDaysInput.value = '';
}
});
renderCrops();
// Equipment Management
const equipmentList = document.getElementById('equipment-list');
const addEquipBtn = document.getElementById('add-equipment');
const equipNameInput = document.getElementById('equip-name');
const maintenanceDaysInput = document.getElementById('maintenance-days');
let equipment = getData('equipment');
const renderEquipment = () => {
equipmentList.innerHTML = '';
equipment.forEach((item, index) => {
const li = document.createElement('li');
li.textContent = `${item.name} - Maintenance every ${item.maintenanceDays} days`;
const deleteBtn = document.createElement('button');
deleteBtn.textContent = 'Remove';
deleteBtn.onclick = () => {
equipment.splice(index, 1);
saveData('equipment', equipment);
renderEquipment();
};
li.appendChild(deleteBtn);
equipmentList.appendChild(li);
});
};
addEquipBtn.addEventListener('click', () => {
const name = equipNameInput.value.trim();
const days = parseInt(maintenanceDaysInput.value);
if (name && days > 0) {
equipment.push({ name, maintenanceDays: days });
saveData('equipment', equipment);
renderEquipment();
equipNameInput.value = '';
maintenanceDaysInput.value = '';
}
});
renderEquipment();
This code handles:
Adding/removing crops and equipment.
Storing data in localStorage.
Rendering lists dynamically on the page.
Step 5: Optional Enhancements
You can extend this project with:
Timers for crop growth – decrement days automatically.
Maintenance alerts – notify when equipment needs servicing.
Profit calculations – add fields for cost, revenue, and net profit.
Sorting and filtering – sort crops by growth time or equipment by maintenance date.
All enhancements can be done purely with JavaScript manipulating the arrays and DOM elements.
Conclusion
With this setup, you now have a fully functional Farm Simulator 22 dashboard in the browser. Everything is coded from scratch:
HTML for structure.
CSS for styling.
JavaScript for interactivity and persistence.
You can expand it further into a full-featured farm management tool, adding charts, notifications, or even backend storage for multi-device use.
Top comments (0)