progtime/web2-hw1
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

no way of importing the list...

Browse source
This commit is contained in:
Mootfrost777 2022-12-03 21:05:02 +03:00
parent 630fa88555
commit c5afaf346a
5 changed files with 67 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/App.vue
View file

@ -1,19 +1,24 @@
<script setup lang="ts">
import Edit from './components/Edit.vue'
import Item from './components/Item.vue'
import { ref } from 'vue'
import Item from "./components/Item.vue";
import Edit from "./components/Edit.vue";
const items = ref([{title: 'Item 1'}, {title: 'Item 2'}, {title: 'Item 3'}])
</script>
<template>
<div class="container">
<Item title="Hello, World!" />
<div class="container" id="container">
<item v-for="item in items"
:title="item.title" />
</div>
<edit />
</template>
<style scoped>
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
border: 1px solid #000;
padding: 10px;
width: fit-content;
margin-bottom: 20px;
}
</style>

31
src/components/Edit.vue
View file

@ -1,7 +1,34 @@
<script setup lang="ts">
</script>
<template>
<div class="container">
<input type="text" v-model="s">
<div class="btn" @click=""><span><font-awesome-icon icon="fa-solid fa-check" /> Add</span></div>
</div>
</template>
</template>
<style scoped>
.container {
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
margin: 5px 0;
box-shadow: 0 6px 6px -3px rgba(0,0,0,.2),0 10px 14px 1px rgba(0,0,0,.14),0 4px 18px 3px rgba(0,0,0,.12);
background-color: #272727;
border-radius: 0.25rem;
}
input {
background-color: #242424;
border: 1px solid #ccc;
color: white;
font-size: 1.2rem;
}
input:focus {
outline: none;
}
</style>

26
src/components/Item.vue
View file

@ -7,8 +7,8 @@
<div class="container">
<input type="checkbox">
<span class="title">{{ title }}</span>
<div class="btn"><span><font-awesome-icon icon="fa-solid fa-pen-to-square" /> Edit</span></div>
<div class="btn"><span><font-awesome-icon icon="fa-solid fa-trash" /> Delete</span></div>
<div class="btn"><span><font-awesome-icon icon="fa-solid fa-pen-to-square" /> Edit</span></div>
<div class="btn"><span><font-awesome-icon icon="fa-solid fa-trash" /> Delete</span></div>
</div>
</template>
<style scoped>
@ -16,29 +16,11 @@
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #ccc;
width: fit-content;
padding: 10px;
border-radius: 0.25rem;
}
.btn {
display: flex;
align-items: center;
justify-content: center;
padding: 0.5rem;
margin: 5px 0;
box-shadow: 0 6px 6px -3px rgba(0, 0, 0, .2), 0 10px 14px 1px rgba(0, 0, 0, .14), 0 4px 18px 3px rgba(0, 0, 0, .12);
background-color: #272727;
box-shadow: 0 6px 6px -3px rgba(0,0,0,.2),0 10px 14px 1px rgba(0,0,0,.14),0 4px 18px 3px rgba(0,0,0,.12);
border-radius: 0.25rem;
cursor: pointer;
margin: 0 10px;
transition: 0.3s;
}
.btn:hover {
background-color: #383838;
transition: 0.3s;
}
.title {

4
src/main.ts
View file

@ -9,10 +9,10 @@ import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
/* import specific icons */
import { faTrash, faPenToSquare } from '@fortawesome/free-solid-svg-icons'
import { faTrash, faPenToSquare, faCheck } from '@fortawesome/free-solid-svg-icons'
/* add icons to the library */
library.add(faTrash, faPenToSquare)
library.add(faTrash, faPenToSquare, faCheck)
createApp(App)

20
src/style.css
View file

@ -1,5 +1,23 @@
:root {
background-color: #121212;
background-color: darkgray;
color: white;
font-family: "Fira Code", sans-serif;
}
.btn {
display: flex;
align-items: center;
justify-content: center;
padding: 0.5rem;
border-radius: 0.25rem;
cursor: pointer;
margin: 0 10px;
border: 1px solid #ccc;
transition: 0.3s;
background-color: #272727;
}
.btn:hover {
background-color: #383838;
transition: 0.3s;
}