<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Mood Journal</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Mood Journal</h1>
<form id="journal-form">
<label for="mood">Mood:</label>
<select id="mood">
<option value="Happy">π Happy</option>
<option value="Sad">π’ Sad</option>
<option value="Excited">π Excited</option>
<option value="Angry">π Angry</option>
</select><br><br>
<label for="entry">Your thoughts:</label><br>
<textarea id="entry" rows="5" cols="40" placeholder="Write about your day..."></textarea><br><br>
<button type="submit">Save Entry</button>
</form>
<h2>Previous Entries</h2>
<div id="entries"></div>
<script src="script.js"></script>
</body>
</html>
document.getElementById('journal-form').addEventListener('submit', function(e) {
e.preventDefault();
const mood = document.getElementById('mood').value;
const entryText = document.getElementById('entry').value;
const date = new Date().toLocaleDateString();
const entry = {
date: date,
mood: mood,
text: entryText
};
let entries = JSON.parse(localStorage.getItem('moodEntries')) || [];
entries.push(entry);
localStorage.setItem('moodEntries', JSON.stringify(entries));
document.getElementById('entry').value = '';
displayEntries();
});
function displayEntries() {
const entriesDiv = document.getElementById('entries');
entriesDiv.innerHTML = '';
const entries = JSON.parse(localStorage.getItem('moodEntries')) || [];
entries.forEach(entry => {
const entryEl = document.createElement('div');
entryEl.className = 'entry';
entryEl.innerHTML = `<strong>${entry.date} - ${entry.mood}</strong><br>${entry.text}`;
entriesDiv.appendChild(entryEl);
});
}
window.onload = displayEntries;
ILM
2
Please Tell us whatβs happening in your own words.
Learning to describe problems is hard, but it is an important part of learning how to code.
Also, the more you say, the more we can help!