Emiel_DK
/
frontend
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

22-intro-vue

22-intro-vue
emieldkr 4 years ago
parent
94427e3d0b
commit
5644628767
13 changed files with 319 additions and 0 deletions
Split View Show Diff Stats
  1. 6
    0
      22-intro-vue/.prettierrc
  2. 3
    0
      22-intro-vue/debug.log
  3. 35
    0
      22-intro-vue/index.html
  4. 28
    0
      22-intro-vue/scripts/main.js
  5. 7
    0
      22-intro-vue/styles/main.css
  6. 6
    0
      22-intro-vue/todo/.prettierrc
  7. 3
    0
      22-intro-vue/todo/debug.log
  8. BIN
      22-intro-vue/todo/images/close.png
  9. BIN
      22-intro-vue/todo/images/correct-symbol.png
  10. BIN
      22-intro-vue/todo/images/logo.png
  11. 64
    0
      22-intro-vue/todo/index.html
  12. 48
    0
      22-intro-vue/todo/scripts/main.js
  13. 119
    0
      22-intro-vue/todo/styles/style.css

+ 6
- 0
22-intro-vue/.prettierrc View File

@@ -0,0 +1,6 @@
{
"trailingComma": "es5",
"tabWidth": 4,
"semi": true,
"singleQuote": true
}

+ 3
- 0
22-intro-vue/debug.log View File

@@ -0,0 +1,3 @@
[0302/094334.245:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0302/094334.245:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0302/094334.245:ERROR:crash_report_database_win.cc(469)] failed to stat report

+ 35
- 0
22-intro-vue/index.html View File

@@ -0,0 +1,35 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="styles/main.css" />
<title>22-Intro-Vue</title>
</head>
<body>
<div id="app">
<input
type="text"
v-model="message"
v-bind:disabled="disabledMessage"
/>

<p v-bind:class="color">{{message}}</p>
<p v-if="showColor">{{color}}</p>

<button v-on:click="changeColor">Change color</button>
<button v-on:click="toggleShowColor">Show color</button>
<button v-on:click="toggleDisableMessage">
Disable Message Input
</button>
<button v-on:mouseOver="addNumber">Add number</button>
<span v-for="number in numbers">
{{number}}
</span>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="scripts/main.js"></script>
</body>
</html>

+ 28
- 0
22-intro-vue/scripts/main.js View File

@@ -0,0 +1,28 @@
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
color: 'green',
showColor: true,
disabledMessage: false,
numbers: [1, 2],
},
methods: {
changeColor() {
if (this.color === 'green') {
this.color = 'blue';
} else {
this.color = 'green';
}
},
toggleShowColor() {
this.showColor = !this.showColor;
},
toggleDisableMessage() {
this.disabledMessage = !this.disabledMessage;
},
addNumber() {
this.numbers.push(this.numbers[this.numbers.length - 1] + 1);
},
},
});

+ 7
- 0
22-intro-vue/styles/main.css View File

@@ -0,0 +1,7 @@
.green {
color: green;
}

.blue {
color: blue;
}

+ 6
- 0
22-intro-vue/todo/.prettierrc View File

@@ -0,0 +1,6 @@
{
"trailingComma": "es5",
"tabWidth": 4,
"semi": true,
"singleQuote": true
}

+ 3
- 0
22-intro-vue/todo/debug.log View File

@@ -0,0 +1,3 @@
[0302/104753.635:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0302/104753.636:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0302/104753.636:ERROR:crash_report_database_win.cc(469)] failed to stat report

BIN
22-intro-vue/todo/images/close.png View File


BIN
22-intro-vue/todo/images/correct-symbol.png View File


BIN
22-intro-vue/todo/images/logo.png View File


+ 64
- 0
22-intro-vue/todo/index.html View File

@@ -0,0 +1,64 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="styles/style.css" />
<title>22-Intro-Vue</title>
</head>
<body>
<div id="app">
<header>
<h1>TODO or not TODO</h1>
<img src="images/logo.png" alt="logo" />
</header>

<main>
<textarea
name="whatToDo"
id="area"
cols="30"
rows="5"
placeholder="What to do?"
v-model="textArea"
></textarea>

<div class="buttonContainer">
<button id="save" v-on:click="save">Save</button>
<button id="clear" v-on:click="clear">Clear All</button>
</div>

<span id="toDoNumber">Todo: {{toDoNumber}}</span>
<div class="toDoContainer">
<div
v-for="(item, index) in toDoContainer"
v-bind:class="['toDo', (index == currentSelected) ? 'bold' : ''"
>
<span v-on:click="bold(index)">{{item}}</span>
<img
v-on:click="finish(item, index)"
src="images/correct-symbol.png"
alt=""
/>
</div>
</div>

<span id="doneNumber">Done: {{doneNumber}}</span>
<div class="doneContainer">
<div class="done" v-for="(element, index) in doneContainer">
<span>{{element}}</span>
<img
v-on:click="remove(element,index)"
src="images/close.png"
alt=""
/>
</div>
</div>
</main>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="scripts/main.js"></script>
</body>
</html>

+ 48
- 0
22-intro-vue/todo/scripts/main.js View File

@@ -0,0 +1,48 @@
var app = new Vue({
el: '#app',
data: {
textArea: '',
toDoNumber: 0,
doneNumber: 0,
toDoContainer: [],
doneContainer: [],
currentSelected: -1,
},
methods: {
save() {
let text = this.textArea;
this.add(text, 'toDo');
this.textArea = '';
},
clear() {
this.toDoContainer = [];
this.doneContainer = [];
this.toDoNumber = 0;
this.doneNumber = 0;
},
finish(item, index) {
this.toDoContainer.splice(index, 1);
this.add(item, 'done');
},
bold(index) {
currentSelected = index;
},
remove(element, index) {
this.doneContainer.splice(index, 1);
this.doneNumber--;
},

add(text, className) {
if (text === '') return;

if (className === 'toDo') {
this.toDoContainer.push(text);
this.toDoNumber++;
} else if (className === 'done') {
this.doneContainer.push(text);
this.toDoNumber--;
this.doneNumber++;
}
},
},
});

+ 119
- 0
22-intro-vue/todo/styles/style.css View File

@@ -0,0 +1,119 @@
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}

button {
border: none;
padding-top: 2px;
padding-bottom: 2px;
}

header {
background-color: blue;
height: 100px;
display: flex;
justify-content: space-around;
align-items: center;
color: white;
}

header img {
width: 50px;
height: 50px;
background-color: white;
border-radius: 50%;
box-sizing: border-box;
padding: 5px;
}

main {
padding-left: 100px;
padding-right: 100px;
padding-top: 50px;
}

main textarea {
box-sizing: border-box;
padding-left: 5px;
padding-top: 5px;
width: 100%;
font-size: 2rem;
}

main .buttonContainer {
display: flex;
justify-content: space-between;
margin-top: 10px;
margin-bottom: 10px;
}

main #save {
background-color: green;
color: white;
width: 75%;
}

main #clear {
background-color: red;
color: white;
width: 20%;
}

main .toDoContainer {
box-sizing: border-box;
width: 100%;
border: 2px darkgray solid;
margin-top: 5px;
margin-bottom: 10px;
}

main .doneContainer {
box-sizing: border-box;
width: 100%;
border: 2px darkgray solid;
margin-top: 5px;
margin-bottom: 10px;
color: darkgray;
text-decoration: line-through;
}

.toDo,
.done {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 5px;
border-top: 2px darkgray solid;
padding-top: 5px;
margin: 5px;
}

.toDo span {
width: 100%;
height: 100%;
}

.toDoContainer > div:first-child,
.doneContainer > div:first-child {
border-top: none;
}

main .toDoContainer img {
background-color: green;
height: 25px;
width: 25px;
border-radius: 50%;
}

main .doneContainer img {
background-color: red;
height: 25px;
width: 25px;
border-radius: 50%;
}

.bold {
font-weight: bold;
}

Write Preview
Loading…
Cancel
Save