Skip to content
GitLab
Commit 54e040c8 authored by Lukas Maximilian Kimpel's avatar Lukas Maximilian Kimpel
Browse files

Google Material Design implemented

parent 0079f5e0
Hide whitespace changes
Inline Side-by-side
src/style.css
View file @ 54e040c8
body {
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 18px;
background-color: #CECECE;
}
#page {
padding: 25px;
.demo-card-wide.mdl-card {
width: 512px;
}
#form {
padding: 15px;
}
#view {
margin-right: 25px;
}
#title {
width: 100%;
padding: 1px;
font-size: 24px;
}
#description {
width: 100%;
resize: none;
font-size: 18px;
.demo-card-wide > .mdl-card__title {
color: #fff;
height: 176px;
/*background: url('../assets/demos/welcome_card.jpg') center / cover;*/
}
#textAreaContainer {
margin-top: 15px;
}
#submitButtonContainer {
margin-top: 15px;
.demo-card-wide > .mdl-card__menu {
color: #fff;
}
#submitButton {
.mdl-textfield {
width: 100%;
text-align: center;
background-color: #7CB342;
padding: 25px;
}
.component {
width: 100%;
.mdl-layout__content {
margin: 0 auto;
}
.page-title {
text-align: center;
padding: 15px;
.demo-list-three {
width: 650px;
}
.box {
background-color: #FFFFFF;
box-shadow: rgba(0, 0, 0, 0.14902) 0 0 1px 0;
padding: 15px;
}
.todo-container {
margin-top: 15px;
}
.box-sizing {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
\ No newline at end of file
src/todo.html
View file @ 54e040c8
......@@ -2,21 +2,49 @@
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Todo!</title>
<title>Eine ToDo Web-App!</title>
<!-- GOOGLE MATERIAL -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-orange.min.css" />
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="todo.js"></script>
</head>
<body>
<div class="mdl-layout mdl-js-layout has-drawer is-upgraded">
<main class="mdl-layout__content">
<h1>Eine ToDo Web-App!</h1>
<div class="demo-card-wide mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Eine ToDo Web-App</h2>
</div>
<div id="form">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="title">
<label class="mdl-textfield__label" for="title">Titel</label>
</div>
<div class="mdl-textfield mdl-js-textfield">
<textarea class="mdl-textfield__input" type="text" rows="3" id="description"></textarea>
<label class="mdl-textfield__label" for="sample5">Beschreibung</label>
</div>
</div>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored" id="submitButton" onclick="submitTodo()">Hinzufügen</button>
</div>
<ul class="demo-list-three mdl-list" id="view">
</ul>
<div id="page">
<div class="page-title box-sizing"><h1>Todo!</h1></div>
<div id="form" class="component box box-sizing">
<div><input id="title" class="box-sizing" type="text" placeholder="Titel"/></div>
<div id="textAreaContainer"><textarea id="description" class="box-sizing" cols="40" rows="10" placeholder="Beschreibung"></textarea></div>
<div id="submitButtonContainer"><div id="submitButton" class="box-sizing" onclick="submitTodo()"><strong>Hinzufügen</strong></div></div>
</main>
</div>
<div id="view" class="component"></div>
</div>
</body>
</html>
\ No newline at end of file
</html>
src/todo.js
View file @ 54e040c8
......@@ -3,7 +3,6 @@
*/
const todos = [];
class Todo {
constructor(title, description) {
this.title = title;
......@@ -17,15 +16,23 @@ function addTodo(todo) {
function addTodoView(todo) {
const view = document.getElementById('view');
const wrapper = document.createElement('DIV');
const title = document.createElement('H3');
const description = document.createElement('P');
const wrapper = document.createElement('li');
const innerwrapper = document.createElement('span');
const title = document.createElement('span');
const description = document.createElement('span');
wrapper.classList.add("mdl-list__item");
wrapper.classList.add("mdl-list__item--three-line");
innerwrapper.classList.add("mdl-list__item-primary-content");
description.classList.add("mdl-list__item-text-body");
title.appendChild(document.createTextNode(todo.title));
description.appendChild(document.createTextNode(todo.description));
wrapper.appendChild(title);
wrapper.appendChild(description);
wrapper.className = 'todo-container box box-sizing';
wrapper.appendChild(innerwrapper);
innerwrapper.appendChild(title);
innerwrapper.appendChild(description);
view.appendChild(wrapper);
}
......@@ -39,4 +46,4 @@ function submitTodo() {
title.value = '';
description.value = '';
}
\ No newline at end of file
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment