Skip to content

Commit 99e36fb

Browse files
vladmondayvladmonday
committed
feat: add first exercise
1 parent 96da4e8 commit 99e36fb

File tree

9 files changed

+72
-1
lines changed

9 files changed

+72
-1
lines changed

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
node_modules
2+
.idea
3+
.DS_Store

‎README.md‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,17 @@
1-
# monday-u-exercises
1+
# Welcome to monday-u!
2+
3+
Welcome to monday-u official github repository! We are very excited to have you here!
4+
This is going to be so much fun! Here are a few general details:
5+
6+
![](https://i.ytimg.com/vi/6_zFLsW7z2E/maxresdefault.jpg)
7+
8+
## Exercises list
9+
10+
**Exercise 1** - [HTML, CSS, JS.](https://github.com/monday-u-com/monday-u-exercises/tree/master/src/ex1)
11+
12+
# Submitting your tasks
13+
Create a pull request in your forked repository and send to your mentor when it's ready.
14+
15+
# Solutions
16+
17+
Every friday a new exercise and the solution for previous one will be published

‎src/assets/cli.gif‎

664 KB
Loading

‎src/assets/hw-2.gif‎

2.35 MB
Loading

‎src/assets/hw-5.gif‎

686 KB
Loading

‎src/ex1/README.md‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
# Exercise 1 - HTML, CSS, JS
2+
Welcome to your first monday-u task! Hope you are excited as we are!
3+
This is going to be an ongoing task, so don't worry, we are going to build this awesome project step by step, from zero to hero :)
4+
5+
6+
## In this section you will practice
7+
**HTML** - Basic level, tags.
8+
**CSS** - Simple positioning concepts, colors and shapes.
9+
**JS** - Basic DOM manipulation
10+
11+
## What you are going to build
12+
A todo app!
13+
Almost as cool as our boards, but with a bit less functionality.
14+
The requirements:
15+
- [x] Import the relevant CSS (style.css) and JS (script.js) files - already done for you
16+
- [ ] Choose a name for your app and update the title to your app name
17+
- [ ] Add your app name in the top of the screen (see mock)
18+
- [ ] Build the layout according to the mock. (background, centered white box, etc...)
19+
- [ ] Add a textbox to be used for adding tasks
20+
- [ ] Add a button ("Add task")
21+
- [ ] When "Add task" button is clicked, add a task to the task list
22+
- [ ] Change the background and cursor type of an item when hovered on
23+
- [ ] When a list item is clicked, show 'alert' (**Hint**: check the [alert](https://developer.mozilla.org/en-US/docs/Web/API/Window/alert) method) with the item name
24+
- [ ] Delete an item when "Delete" button is clicked
25+
26+
27+
Bonus
28+
- [ ] Clear the input when a new item is added
29+
- [ ] Add input validation. e.g when the text input is empty, show a message with an error
30+
- [ ] Add "empty state" - when there are no items on the list, show some nice and inviting UI to encourage the user to add items
31+
- [ ] Add ability to sort the list by name
32+
- [ ] Add task when enter key is pressed
33+
- [ ] Add animation when a new item is added
34+
- [ ] have another cool idea? Go wild!
35+
36+
When you finish, it should look like this:
37+
38+
![](https://res.cloudinary.com/practicaldev/image/fetch/s--pyyuGSZ9--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/i/o96lsrld21tk232kidu4.png)

‎src/ex1/index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>Exercise 1</title>
5+
<link rel="stylesheet" href="style.css" />
6+
</head>
7+
<body>
8+
9+
<h1>Todo list</h1>
10+
11+
12+
</body>
13+
<script src="script.js"></script>
14+
</html>

‎src/ex1/script.js‎

Whitespace-only changes.

‎src/ex1/style.css‎

Whitespace-only changes.

0 commit comments

Comments
 (0)