Scribd
Upload
3 views3 pages

Full Stack Task Detailed

The document outlines a practical test for creating a Simple To-Do App using HTML, CSS, JavaScript, and Node.js within a one-hour time limit. It includes requirements for UI creation, data handling with the fetch API, and backend task storage, along with evaluation criteria for functionality, code quality, and design. Additionally, it provides a folder structure and sample code for the backend and frontend components of the application, along with bonus task suggestions for enhancement.

Uploaded by

revn0yoru
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views3 pages

Full Stack Task Detailed

The document outlines a practical test for creating a Simple To-Do App using HTML, CSS, JavaScript, and Node.js within a one-hour time limit. It includes requirements for UI creation, data handling with the fetch API, and backend task storage, along with evaluation criteria for functionality, code quality, and design. Additionally, it provides a folder structure and sample code for the backend and frontend components of the application, along with bonus task suggestions for enhancement.

Uploaded by

revn0yoru
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Full Stack Practical Test (1 Hour)

Task Title

Simple To-Do App with Backend

Objective

Build a web application using HTML, CSS, JavaScript, and [Link] where users can add and view
tasks.

Time Limit

1 Hour

Requirements

1. Create UI with input and button 2. Send data using fetch API 3. Store tasks in backend 4. Display
tasks on UI

Evaluation Criteria

Functionality (10 marks) Code Quality (5 marks) UI Design (5 marks) Bonus Features (5 marks)

Folder Structure

project/ [Link] public/ [Link] [Link] [Link]

Backend Code ([Link])

const express = require("express");


const app = express();
const PORT = 3000;

[Link]([Link]());
[Link]([Link]("public"));

let tasks = [];

[Link]("/tasks", (req, res) => {


[Link]([Link]);
[Link]({ message: "Task added" });
});

[Link]("/tasks", (req, res) => {


[Link](tasks);
});

[Link](PORT, () => {
[Link](`Server running on [Link]
});
Frontend HTML ([Link])

<!DOCTYPE html>
<html>
<head>
<title>To-Do App</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>

<div class="container">
<h2>To-Do List</h2>
<input type="text" id="taskInput" placeholder="Enter task">
<button onclick="addTask()">Add</button>
<ul id="taskList"></ul>
</div>

<script src="[Link]"></script>
</body>
</html>

CSS ([Link])

body {
font-family: Arial;
display: flex;
justify-content: center;
margin-top: 100px;
}

.container {
text-align: center;
}

button:hover {
background-color: lightgray;
}

JavaScript ([Link])

async function addTask() {


const input = [Link]("taskInput");
const task = [Link];

await fetch("/tasks", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: [Link]({ task })
});

[Link] = "";
loadTasks();
}

async function loadTasks() {


const res = await fetch("/tasks");
const tasks = await [Link]();

const list = [Link]("taskList");


[Link] = "";

[Link](t => {
const li = [Link]("li");
[Link] = t;
[Link](li);
});
}

loadTasks();

Bonus Tasks

1. Add delete button 2. Prevent empty input 3. Improve UI 4. Add timestamp

You might also like