Make this code better

Meteor Simple-todos

It is not working I just get a blue background and nothing else.

main.html
<head> <title>simple</title> </head>
main.css
/* CSS declarations go here */ body { font-family: sans-serif; background-color: #315481; background-image: linear-gradient(to bottom, #315481, #918e82 100%); background-attachment: fixed; position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 0; margin: 0; font-size: 14px; } .container { max-width: 600px; margin: 0 auto; min-height: 100%; background: white; } header { background: #d2edf4; background-image: linear-gradient(to bottom, #d0edf5, #e1e5f0 100%); padding: 20px 15px 15px 15px; position: relative; } #login-buttons { display: block; } h1 { font-size: 1.5em; margin: 0; margin-bottom: 10px; display: inline-block; margin-right: 1em; } form { margin-top: 10px; margin-bottom: -10px; position: relative; } .new-task input { box-sizing: border-box; padding: 10px 0; background: transparent; border: none; width: 100%; padding-right: 80px; font-size: 1em; } .new-task input:focus{ outline: 0; } ul { margin: 0; padding: 0; background: white; } .delete { float: right; font-weight: bold; background: none; font-size: 1em; border: none; position: relative; } li { position: relative; list-style: none; padding: 15px; border-bottom: #eee solid 1px; } li .text { margin-left: 10px; } li.checked { color: #888; } li.checked .text { text-decoration: line-through; } li.private { background: #eee; border-color: #ddd; } header .hide-completed { float: right; } .toggle-private { margin-left: 5px; } @media (max-width: 600px) { li { padding: 12px 15px; } .search { width: 150px; clear: both; } .new-task input { padding-bottom: 5px; } }
import '../imports/startup/accounts-config.js'; import '../imports/ui/body.js';
body.html
<body> <div class="container"> <header> <h1>Todo List ({{incompleteCount}})</h1> </header> <label class="hide-completed"> <input type="checkbox" /> Hide Completed Tasks </label> {{> loginButtons}} <form class="new-task"> <input type="text" name="text" placeholder="Type to add new tasks" /> </form> </div> </body> <template name="task"> <li>{{text}}</li> </template>
task.html
<template name="task"> <li class="{{#if checked}}checked{{/if}} {{#if private}}private{{/if}}"> <button class="delete">&times;</button> <input type="checkbox" checked="{{checked}}" class="toggle-checked" /> {{#if isOwner}} <button class="toggle-private"> {{#if private}} Private {{else}} Public {{/if}} </button> {{/if}} <span class="text"><strong>{{username}}</strong> - {{text}}</span> </li> </template>
import { Meteor } from 'meteor/meteor'; import { Template } from 'meteor/templating'; import './task.html'; Template.task.helpers({ isOwner() { return this.owner === Meteor.userId(); }, }); Template.task.events({ 'click .toggle-checked'() { // Set the checked property to the opposite of its current value Meteor.call('tasks.setChecked', this._id, !this.checked); }, 'click .delete'() { Meteor.call('tasks.remove', this._id); }, 'click .toggle-private'() { Meteor.call('tasks.setPrivate', this._id, !this.private); }, });

Reactions 0 reactions

No reactions yet, be the first: comment or tweak the code

Comment on this code:

Please Login or Register to leave a comment.