Introduction to Celebrating Your Wins
Celebrating your wins is an essential part of maintaining a positive and productive mindset, especially in the world of software development. As developers, we often focus on the next challenge, the next bug to fix, or the next feature to implement, but taking the time to reflect on our accomplishments can have a significant impact on our motivation and overall well-being. In this article, we will explore a practical approach to celebrating your wins by building a simple web application that allows you to track and reflect on your accomplishments.
Setting Up the Project
To get started, we will need to set up a new project using Node.js and Express.js. If you don't have Node.js installed, you can download it from the official Node.js website. Once you have Node.js installed, create a new project folder and navigate to it in your terminal.
mkdir celebrating-wins
cd celebrating-wins
Next, initialize a new Node.js project using the following command:
npm init -y
This will create a package.json file in your project folder. Now, install the required dependencies:
npm install express mongoose
Creating the Database Model
We will use Mongoose to interact with our MongoDB database. Create a new file called models/Wins.js and add the following code:
// models/Wins.js
const mongoose = require('mongoose');
const winSchema = new mongoose.Schema({
title: String,
description: String,
date: Date
});
const Win = mongoose.model('Win', winSchema);
module.exports = Win;
This code defines a simple Mongoose model for our wins.
Creating the API Endpoints
Create a new file called routes/wins.js and add the following code:
// routes/wins.js
const express = require('express');
const router = express.Router();
const Win = require('../models/Wins');
// Get all wins
router.get('/', async (req, res) => {
try {
const wins = await Win.find();
res.json(wins);
} catch (err) {
res.status(500).json({ message: err.message });
}
});
// Create a new win
router.post('/', async (req, res) => {
try {
const win = new Win(req.body);
await win.save();
res.json(win);
} catch (err) {
res.status(500).json({ message: err.message });
}
});
// Get a win by id
router.get('/:id', async (req, res) => {
try {
const win = await Win.findById(req.params.id);
res.json(win);
} catch (err) {
res.status(404).json({ message: err.message });
}
});
// Update a win
router.put('/:id', async (req, res) => {
try {
const win = await Win.findByIdAndUpdate(req.params.id, req.body, { new: true });
res.json(win);
} catch (err) {
res.status(404).json({ message: err.message });
}
});
// Delete a win
router.delete('/:id', async (req, res) => {
try {
await Win.findByIdAndRemove(req.params.id);
res.json({ message: 'Win deleted successfully' });
} catch (err) {
res.status(404).json({ message: err.message });
}
});
module.exports = router;
This code defines API endpoints for creating, reading, updating, and deleting wins.
Creating the Frontend
Create a new file called index.html and add the following code:
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Celebrating Your Wins</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Celebrating Your Wins</h1>
<form id="win-form">
<label for="title">Title:</label>
<input type="text" id="title" name="title"><br><br>
<label for="description">Description:</label>
<textarea id="description" name="description"></textarea><br><br>
<button id="submit-btn">Submit</button>
</form>
<div id="wins-container"></div>
<script src="script.js"></script>
</body>
</html>
This code defines a simple HTML form for creating new wins and a container for displaying all wins.
Creating the Frontend Logic
Create a new file called script.js and add the following code:
javascript
// script.js
const form = document.getElementById('win-form');
const winsContainer = document.getElementById('wins-container');
form.addEventListener('submit', async (e) => {
e.preventDefault();
const title = document.getElementById('title').value;
const description = document.getElementById('description').value;
try {
const response = await fetch('/wins', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ title, description })
});
const win = await response.json();
console.log(win);
displayWins();
} catch (err) {
console.error(err);
}
});
async function displayWins() {
try {
const response = await fetch('/wins');
const wins = await response.json();
winsContainer.innerHTML = '';
wins.forEach((win) => {
const winHTML = `
<h2>${win.title}</h2
---
☕ **Community-Focused**
Top comments (0)