Skip to content

Latest commit

 

History

2 Commits

Folders and files

NameName
Last commit message
Last commit date
 
 
 
 
 
 
 
 

Repository files navigation

Ironhack Todos

CSS transition and DOM manipulation

DOM manipulation and logic ⚙️

The application

The Ironhack Todos is a todo app working only with DOM manipulation and has nice css transitions and animations.

We want to be able to create new tasks, mark them as done and delete them easily.

The page should be minimalistic with a simple input form and a list of todos where our new task will appear.

step 0: setting up the project

src/
    |___script.js
styles/
    |___main.css
index.html

1st iteration: The html template

...
<body>
    <div id="todo-content">
        <h2>Todos</h2>

        <div id="add-todo-form">
            <input type="text" placeholder="🚀 Add a new task...">
        </div>

        <div id="todo-list">
            <!-- Here will be our list of todos -->
        </div>
    </div>

    <script src="./scr/script.js"></script>
    <script src="./scr/funkyColors.js"></script>
</body>
...

2nd iteration: Create dome elements with JS

Create buttons with callbacks

Create divs

3nd iteration: The form submit

3rd iteration: Adding a new item in the list

Styling 💅

[to do]

About

A workshop on DOM manipulation and more advanced CSS, transitions and animations

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages