To Do List using firebase

Developer
Joseph Victory
Size
2,894 Kb
Views
26,312
  1. To Do List using firebase Previews
  2. To Do List using firebase HTML Codes
  3. To Do List using firebase CSS Codes
  4. To Do List using firebase JS Codes

How do I make an to do list using firebase?

What is a to do list using firebase? How do you make a to do list using firebase? This script and codes were developed by Joseph Victory on 20 August 2022, Saturday.

To Do List using firebase Previews
IQ Test

To Do List using firebase - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>To Do List using firebase</title> <script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,900,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="row inputFields"> <div class="ten columns"> <label for="exampleEmailInput">To Do:</label> <input class="u-full-width" type="text" placeholder="Add a task..." id="toDo"> </div> <div class="two columns"> <label for="exampleRecipientInput">Status:</label> <select class="u-full-width" id="s" name="options"> <option value='Open'>Open</option> <option value='In Progress'>In Progress</option> <option value='Closed'>Closed</option> </select> </div> </div> <div class="row"> <div class="twelve columns"> <button class="button-primary u-full-width" id="toggleInput">+ New Task</button> </div> </div> <hr /> <div class="row" id="list"> </div> <div class="row"> <div class="twelve columns tCount"> You currently have <span class="taskCount"></span> on going tasks. </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

To Do List using firebase - Script Codes CSS Codes

body{ font-family: 'Roboto', sans-serif;
}
.container{ margin-top:2%;
}
#list{ padding:0px; margin:0px;
}
.listItem{ padding: 1%; margin-bottom:0%; margin-left:0%;
}
.right, .delete{ text-align:center;
}
.delete{ cursor:pointer;
}
.delete:hover{
}
.inputFields{ display:none;
}
.tCount{ color:#CECECE; text-align:center;
}
.taskCount{ font-weight:bold;
}

To Do List using firebase - Script Codes JS Codes

$(document).ready(function() { var data = new Firebase('https://jwvtodo.firebaseio.com/'); $('#toggleInput').on('click', function() { var tState = $('.inputFields').hasClass('toggled'); console.log(tState); if (tState == false) { $('.inputFields').slideDown().addClass('toggled'); $(this).hide(); } }); $('#toDo').keypress(function(e) { if (e.keyCode == 13) { var toDo = $('#toDo').val(); var s = $('#s').val(); console.log(toDo); data.push({ todo: toDo, status: s }); } }); $('#list').on('click', '.delete', function() { console.log('qerewrew'); var dataKey = $(this).data("key"); console.log(dataKey); var dataUpdate = new Firebase('https://jwvtodo.firebaseio.com/' + dataKey); dataUpdate.remove(); $(this).closest('#containList').fadeOut(function(){ $(this).remove(); }); taskCount(); }); data.on('child_added', function(snapshot) { console.log(snapshot); var toDo = snapshot.val(); var key = snapshot.key(); toDoList(toDo.todo, toDo.status, key); taskCount(); }); data.on('child_removed', function(oldChildSnapshot) { console.log('removed key' + oldChildSnapshot.key()); }); function toDoList(todo, status, key) { $('<div id="containList"><div class="eight columns listItem">' + todo + '</div><div class="two columns status">' + status + '</div>' + ' <div class="two columns delete" data-key=' + key + '>Delete</div></div>').hide().prependTo($('#list')).fadeIn('slow'); console.log(key); $('#toDo').val(''); $('.inputFields').slideUp('slow',function(){ $(this).removeClass('toggled'); $('#toggleInput').show(); }); }; function update(key) { var dataUpdate = new Firebase('https://jwvtodo.firebaseio.com/' + key); dataUpdate.update({ todo: 'updated', status: 'changed' }); }; function taskCount(){ var taskAmount = $('.listItem').length; $('.taskCount').html(taskAmount); }
});
To Do List using firebase - Script Codes
To Do List using firebase - Script Codes
Home Page Home
Developer Joseph Victory
Username j-w-v
Uploaded August 20, 2022
Rating 3
Size 2,894 Kb
Views 26,312
Do you need developer help for To Do List using firebase?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Joseph Victory (j-w-v) Script Codes
Name
Portfolio Opening Page
Fading Navigation Bar
Perfect Primary Colors
To Do List
Loading Animation
Login Form
Instagram User Profile
Pricing Tables
A Pen by Joseph Victory
Faded Title
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!