Adding To-Do List project

danfimov · Jul 1, 2021 · ff26f2a · ff26f2a
1 parent 87d8e7c
commit ff26f2a
Show file tree

Hide file tree

Showing 19 changed files with 1,790 additions and 1 deletion.
diff --git a/Frontend Developer/To-Do List/Everyone's a designer these days/task-info.yaml b/Frontend Developer/To-Do List/Everyone's a designer these days/task-info.yaml
@@ -0,0 +1,117 @@
+type: edu
+files:
+- name: src/index.html
+  visible: true
+  text: |
+    <!doctype html>
+    <html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <title>Document</title>
+    </head>
+    <body>
+
+    </body>
+    </html>
+  learner_created: false
+- name: test/test.js
+  visible: false
+  text: |
+    const puppeteer = require('puppeteer');
+    const path = require('path');
+    // '..' since we're in the test/ subdirectory; learner is supposed to have src/index.html
+    const pagePath = 'file://' + path.resolve(__dirname, '../src/index.html');
+    const hs = require('hs-test-web');
+    const sleep = (ms) => new Promise(res => setTimeout(res, ms));
+
+    async function stageTest() {
+
+        const browser = await puppeteer.launch({
+            headless: false,
+            defaultViewport: null,
+            args: ['--start-maximized', '--disable-infobar'],
+            ignoreDefaultArgs: ['--enable-automation']
+        });
+
+        const page = await browser.newPage();
+        await page.goto(pagePath);
+
+        await sleep(1000);
+
+        let result = await hs.testPage(page,
+            // Test #1 - Check title
+            () => {
+                if (document.title !== 'To-Do List') {
+                    return hs.wrong("The title of the page should be 'To-Do List'")
+                }
+                return hs.correct();
+            },
+
+            // Test #2 - Check elements
+            () => {
+                const inputField = document.getElementById("input-task")
+                if (inputField === null || inputField.tagName !== 'INPUT')
+                    return hs.wrong("Can't find input field with id '#input-task'")
+
+                const addButton = document.getElementById("add-task-button")
+                if (addButton === null || addButton.tagName !== 'BUTTON')
+                    return hs.wrong("Can't find button with id '#add-task-button'")
+
+                this.taskList = document.getElementById("task-list")
+                if (this.taskList === null || this.taskList.tagName !== 'UL')
+                    return hs.wrong("Can't find <ul> tag with id '#task-list'")
+
+                return hs.correct();
+            },
+
+            // Test #3 - Check each task in task list
+            () => {
+
+                const tasks = this.taskList.getElementsByTagName("li")
+                if (tasks.length !== 3)
+                    return hs.wrong("Inside the <ul> tag should be 3 <li> elements!")
+
+                for (let task of tasks) {
+                    const checkbox = task.querySelector("input[type=checkbox]")
+                    if (checkbox === null)
+                        return hs.wrong("Inside each <li> tag should one <input> tag with 'checkbox' type")
+
+                    const taskName = task.querySelector("span.task")
+                    if (taskName === null)
+                        return hs.wrong("Inside each <li> tag should one <spane> tag with 'task' class")
+
+                    const deleteButton = task.querySelector("button.delete-btn")
+                    if (deleteButton === null)
+                        return hs.wrong("Inside each <li> tag should one <button> tag with 'delete-btn' class")
+                }
+
+                return hs.correct();
+            }
+        );
+
+        await browser.close();
+        return result;
+    }
+
+
+    jest.setTimeout(30000);
+    test("Test stage", async () => {
+            let result = await stageTest();
+            if (result['type'] === 'wrong') {
+                fail(result['message']);
+            }
+        }
+    );
+  learner_created: false
+- name: src/style.css
+  visible: true
+  learner_created: true
+- name: src/close.svg
+  visible: true
+  learner_created: true
+feedback_link: https://hyperskill.org/projects/183/stages/927/implement#comment
+status: Solved
+feedback:
+  message: Congratulations!
+  time: Wed, 30 Jun 2021 19:50:18 UTC
+record: 1
diff --git a/Frontend Developer/To-Do List/Everyone's a designer these days/task-remote-info.yaml b/Frontend Developer/To-Do List/Everyone's a designer these days/task-remote-info.yaml
@@ -0,0 +1,2 @@
+id: 13194
+update_date: Sun, 13 Jun 2021 15:20:32 UTC
diff --git a/Frontend Developer/To-Do List/Everyone's a designer these days/task.html b/Frontend Developer/To-Do List/Everyone's a designer these days/task.html
@@ -0,0 +1,31 @@
+<h2>Description</h2>
+
+<p>It's great to have a simple to-do list where you can add new tasks, mark them as done, or delete them if they are no longer important. Let's create a web application for that.</p>
+
+<p>Before we start, we need to think over our design. We will use HTML and CSS and create a static version of a to-do list in this stage.</p>
+
+<h2>Objectives</h2>
+
+<p>Your HTML file should contain the following elements:</p>
+
+<ul>
+	<li><code class="java">&lt;input&gt;</code> element with the <code class="java">#input-task</code> id that indicates the task name;</li>
+	<li><code class="java">&lt;button&gt;</code> with the <code class="java">#add-task-button</code> id. Add a task by clicking on this button.</li>
+	<li><code class="java">&lt;ul&gt;</code> element with the <code class="java">#task-list</code> id. Store the tasks in this element.</li>
+</ul>
+
+<p>Create three hardcoded tasks inside the <code class="java">&lt;ul&gt;</code> element. Wrap each task in <code class="java">&lt;li&gt;</code> tags. Each <code class="java">&lt;li&gt;</code> tag should have the following elements:</p>
+
+<ul>
+	<li><code class="java">&lt;input&gt;</code> element of the <code class="java">checkbox</code> type. Mark the task as complete by clicking on it.</li>
+	<li><code class="java">&lt;span&gt;</code> element with the <code class="java">task</code> class. Store the task name inside this element.</li>
+	<li><code class="java">&lt;button&gt;</code> element with the <code class="java">delete-btn</code> class. Leave it as it is. In this stage, when users click on it, this button should do nothing.</li>
+</ul>
+
+<p>There is no need to implement the business logic of adding new tasks, marking them as complete, and deleting them. You can use any design you want. </p>
+
+<h2>Examples</h2>
+
+<p><strong>Example 1</strong>: <em>A</em><em>n example of a To-Do list</em></p>
+
+<p><img alt="" src="https://ucarecdn.com/4628a0eb-a805-4eed-928e-409fbf8b4759/"></p>