Wine Cellar Journal
About this app
Record your wine experiences and thoughts in a beautifully designed wine journal application. Simple, elegant, and user-friendly for all wine enthusiasts!
Wine Cellar Journal Wine Cellar Journal Add Entry Your Entries
Related apps
Put this on your site
Source
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Wine Cellar Journal</title>
<meta name="description" content="Record your wine experiences and thoughts in a beautifully designed wine journal application. Simple, elegant, and user-friendly for all wine enthusiasts!">
<meta name="keywords" content="Wine, Journal, Wine Experiences, Wine Tasting, Wine Notes, Write about Wine">
<style>
body {
font-family: 'Playfair Display', serif;
background: linear-gradient(to bottom, #2e0c24, #630e2d);
color: #fff;
padding: 20px;
margin: 0;
}
.app {
max-width: 500px;
margin: auto;
background: rgba(255, 255, 255, 0.05);
padding: 20px;
border-radius: 10px;
}
h1 {
text-align: center;
font-size: 2em;
color: #f3d9dc;
}
input, textarea {
width: 100%;
margin: 5px 0;
padding: 10px;
border-radius: 5px;
border: none;
outline: none;
}
button {
width: 100%;
background: #8b1c3f;
color: #fff;
border: none;
padding: 10px;
margin-top: 10px;
border-radius: 5px;
font-weight: bold;
cursor: pointer;
}
button:hover {
background: #a2264d;
}
h2 {
border-bottom: 1px solid #ccc;
padding-bottom: 5px;
margin-top: 20px;
}
#report {
background: rgba(255, 255, 255, 0.1);
padding: 10px;
border-radius: 5px;
}
</style>
<script type="text/javascript">
try {
let wineEntries = [];
function addWineEntry() {
const name = document.getElementById('wine-entry-name').value;
const notes = document.getElementById('wine-entry-notes').value;
if(name && notes) {
wineEntries.push({ name, notes });
displayEntries();
clearForm();
} else {
alert("Please fill in all fields.");
}
}
function displayEntries() {
const entriesSection = document.getElementById('entries');
entriesSection.innerHTML = '';
wineEntries.forEach((entry, index) => {
const entryElement = `<div class="entry">
<h3>${entry.name}</h3>
<p>${entry.notes}</p>
<button onclick="deleteEntry(${index})">Delete Entry</button>
</div>`;
entriesSection.innerHTML += entryElement;
});
}
function deleteEntry(index) {
wineEntries.splice(index, 1);
displayEntries();
}
function clearForm() {
document.getElementById('wine-entry-name').value = '';
document.getElementById('wine-entry-notes').value = '';
}
document.addEventListener("DOMContentLoaded", function() {
document.getElementById('submit-entry-button').addEventListener('click', addWineEntry);
});
} catch (error) {
throw error;
}
</script>
</head>
<body>
<div class="app">
<h1>Wine Cellar Journal</h1>
<input type="text" id="wine-entry-name" placeholder="Wine Name" required>
<textarea id="wine-entry-notes" placeholder="Notes about your experience" rows="4" required></textarea>
<button id="submit-entry-button">Add Entry</button>
<h2>Your Entries</h2>
<div id="entries"></div>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!