SimplicA8 / Simplicetech-webside

1 stars 0 forks source link

Web Development #6

Open SimplicA8 opened 1 month ago

SimplicA8 commented 1 month ago
body {
  font-family: sans-serif;
}
#taskList {
  list-style-type: none;
  padding: 0;
}
#taskList li {
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

JavaScript (script.js):

const taskInput = document.getElementById('taskInput');
const addTaskButton = document.getElementById('addTask');
const taskList = document.getElementById('taskList');

addTaskButton.addEventListener('click', () => {
  const taskText = taskInput.value.trim();
  if (taskText !== '') {
    const listItem = document.createElement('li');
    listItem.textContent = taskText;
    taskList.appendChild(listItem);
    taskInput.value = '';
  }
});

This code creates a simple to-do list. The user enters a task, clicks "Add Task," and the task is added to the list.

2. Back-End (Server-Side): A Simple REST API with Node.js and Express

This example demonstrates a basic REST API endpoint using Node.js and Express. It doesn't interact with a database, but it shows the fundamental structure.

const express = require('express');
const app = express();
const port = 3000;

app.get('/api/hello', (req, res) => {
  res.json({ message: 'Hello from the server!' });
});

app.listen(port, () => {
  console.log(`Server listening on port ${port}`);
});

This code creates a server that listens on port 3000. When a GET request is made to /api/hello, it returns a JSON object with a message. To run this, you'll need Node.js and npm (Node Package Manager) installed. Save the code as server.js, then run npm install express followed by node server.js.

3. Database Interaction (Conceptual):

Interacting with a database requires a database system (like MySQL, PostgreSQL, MongoDB) and a database driver (a library that allows your code to communicate with the database). Here's a conceptual example using a hypothetical database driver:

// ... (previous server code) ...

const db = require('./db'); // Hypothetical database driver

app.get('/api/tasks', async (req, res) => {
  try {
    const tasks = await db.getAllTasks();
    res.json(tasks);
  } catch (error) {
    res.status(500).json({ error: 'Database error' });
  }
});

// ... (rest of server code) ...

This code fetches all tasks

SimplicA8 commented 1 month ago

Here's a sample of Web development code