Skip to content

Commit feb74d8

Browse files
umarwazeerumarwazeer
committed
Initial commit
1 parent 72a50c1 commit feb74d8

File tree

5 files changed

+345
-62
lines changed

5 files changed

+345
-62
lines changed

‎src/App.vue

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
<template>
2-
<img alt="Vue logo" src="./assets/logo.png">
3-
<HelloWorld msg="Welcome to Your Vue.js App"/>
2+
<div class="body">
3+
<Notebook/>
4+
</div>
45
</template>
56

67
<script>
7-
import HelloWorld from './components/HelloWorld.vue'
8+
import Notebook from './components/Notebook.vue'
89
910
export default {
1011
name: 'App',
1112
components: {
12-
HelloWorld
13+
Notebook
1314
}
1415
}
1516
</script>
@@ -23,4 +24,7 @@ export default {
2324
color: #2c3e50;
2425
margin-top: 60px;
2526
}
27+
.body{
28+
background-color: #c0c2c5;
29+
}
2630
</style>

‎src/components/HelloWorld.vue

Lines changed: 0 additions & 58 deletions
This file was deleted.

‎src/components/NoteComponent.vue

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
<template>
2+
<div class="row">
3+
<div class="col-sm-6 note">
4+
<div class="card">
5+
<button class="close" style="" @click="$emit('remove', index)">&times;</button>
6+
<div class="card-block notes">
7+
<h4 class="card-title">{{note.title}}</h4>
8+
<h6 class="card-subtitle mb-2 text-muted">{{note.date}}</h6>
9+
<p class="card-text">{{note.text}}</p>
10+
</div>
11+
</div>
12+
</div>
13+
</div>
14+
</template>
15+
16+
<script>
17+
export default {
18+
props: {
19+
note: {
20+
type: String,
21+
required: true,
22+
},
23+
24+
index: {
25+
type: Number,
26+
required: true,
27+
},
28+
29+
onRemove: {
30+
type: Function,
31+
required: true,
32+
},
33+
},
34+
data(){
35+
return{
36+
37+
}
38+
},
39+
40+
methods:{
41+
}
42+
43+
};
44+
</script>
45+
46+
<style scoped>
47+
body {
48+
font-size: 14px;
49+
min-width: 300px;
50+
font-family: 'Ubuntu', sans-serif;
51+
background: #c0bebe;
52+
margin: 0;
53+
-webkit-user-select: none;
54+
user-select: none;
55+
padding: 70px 30px 0px 30px;
56+
font-weight: 100;
57+
}
58+
59+
.card {
60+
margin: 20px 0;
61+
background: #e7e2e2;
62+
border: 10px;
63+
/* padding: 20px; */
64+
}
65+
66+
button.btn {
67+
display: block;
68+
padding: 15px 20px;
69+
font-family: 'Ubuntu', sans-serif;
70+
margin: 15px 0px;
71+
width: 100%;
72+
box-shadow: 0px 1px 3px rgb(217, 217, 217);
73+
border: none;
74+
border-radius: 2px;
75+
}
76+
77+
h1 {
78+
text-align: center;
79+
margin: 15px 0px;
80+
}
81+
82+
h2 {
83+
text-align: center;
84+
margin: 15px 0px;
85+
color: #b5b5b5;
86+
}
87+
88+
h3 {
89+
text-align: center;
90+
font-size: 14px;
91+
margin: 30px 0px 30px 0px;
92+
color: #b5b5b5;
93+
}
94+
95+
h4.card-title {
96+
margin: 5px 0px 15px 0px;
97+
}
98+
99+
p.card-text {
100+
margin: 25px 0px 0px 0px;
101+
}
102+
103+
.card {
104+
border-radius: 3px;
105+
box-shadow: 0px 2px 3px rgb(217, 217, 217);
106+
}
107+
108+
.alert { display: none;
109+
}
110+
111+
.active { display: block;
112+
}
113+
114+
.col-sm-12 > div {
115+
max-width: 600px;
116+
margin: 0px auto;
117+
}
118+
119+
.card{
120+
float: left;
121+
margin-left: 20px;
122+
margin-top: 50px;
123+
width: 200px;
124+
height: 150px;
125+
border-color: 1px #b5b5b5
126+
127+
}
128+
129+
.col-sm-6{
130+
box-align: left;
131+
width: 1100px
132+
}
133+
134+
</style>
135+

‎src/components/NoteForm.vue

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
<template>
2+
<div id="app">
3+
<div class="container">
4+
<div class="row">
5+
<div class="col-sm-12">
6+
<div class="form">
7+
<div class="form-group">
8+
<label>Note Title</label>
9+
<input class="form-control" type="text" v-model="notes.title" required>
10+
</div>
11+
<div class="form-group">
12+
<label>Note Text</label>
13+
<textarea rows="3" class="form-control" v-model="notes.text" required></textarea>
14+
</div>
15+
<button class="btn btn-primary" @click="addNote">Save Note</button>
16+
<!-- <div class="alert alert-danger text-center" role="alert" v-bind:class="{ active: isActive }">All fields are Required</div> -->
17+
</div>
18+
</div>
19+
</div>
20+
</div>
21+
</div>
22+
</template>
23+
24+
<script>
25+
export default {
26+
name: 'NoteForm',
27+
28+
data(){
29+
return {
30+
notes:{
31+
text: "",
32+
title: "",
33+
date: Date.now(),
34+
35+
}
36+
}
37+
},
38+
39+
methods:{
40+
41+
addNote() {
42+
this.$emit("addNote", this.notes)
43+
}
44+
}
45+
}
46+
</script>
47+
48+
49+
<style scoped>
50+
body {
51+
font-size: 14px;
52+
min-width: 300px;
53+
font-family: 'Ubuntu', sans-serif;
54+
background: #f3f3f3;
55+
margin: 0;
56+
-webkit-user-select: none;
57+
user-select: none;
58+
padding: 70px 30px 0px 30px;
59+
font-weight: 100;
60+
}
61+
.card {
62+
margin: 20px 0;
63+
background: #ffffff;
64+
border: 10px;
65+
padding: 20px;
66+
}
67+
button.btn {
68+
padding-bottom: 40px;
69+
display: block;
70+
padding: 15px 20px;
71+
font-family: 'Ubuntu', sans-serif;
72+
margin: 15px 0px;
73+
width: 100%;
74+
box-shadow: 0px 1px 3px rgb(217, 217, 217);
75+
border: none;
76+
border-radius: 2px;
77+
}
78+
h1 {
79+
text-align: center;
80+
margin: 15px 0px;
81+
}
82+
h2 {
83+
text-align: center;
84+
margin: 15px 0px;
85+
color: #b5b5b5;
86+
}
87+
h3 {
88+
text-align: center;
89+
font-size: 14px;
90+
margin: 30px 0px 30px 0px;
91+
color: #b5b5b5;
92+
}
93+
94+
h4.card-title {
95+
margin: 5px 0px 15px 0px;
96+
}
97+
p.card-text {
98+
margin: 25px 0px 0px 0px;
99+
}
100+
.card {
101+
border-radius: 3px;
102+
box-shadow: 0px 2px 3px rgb(217, 217, 217);
103+
}
104+
.alert {
105+
display: none;
106+
}
107+
.active {
108+
display: block;
109+
}
110+
.col-sm-12 > div {
111+
max-width: 600px;
112+
margin: 0px auto;
113+
}
114+
.btn {
115+
margin-bottom: 30px;
116+
background-color: indigo;
117+
color:#ffffff
118+
}
119+
.btn:hover{
120+
background-color: rgb(32, 1, 54);
121+
font-size: 15px
122+
}
123+
.form{
124+
width: 500px,
125+
}
126+
.form-group{
127+
padding-top: 30px;
128+
}
129+
.form-control{
130+
width: 500px;
131+
}
132+
.form-control[type='text']{
133+
height: 30px;
134+
outline-offset:30rem;
135+
}
136+
.form-control{
137+
outline-offset:30rem;
138+
}
139+
140+
</style>

0 commit comments

Comments
 (0)