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"> <script setup lang="ts">
import Edit from './components/Edit.vue' import { ref } from 'vue'
import Item from './components/Item.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> </script>
<template> <template>
<div class="container"> <div class="container" id="container">
<Item title="Hello, World!" /> <item v-for="item in items"
:title="item.title" />
</div> </div>
<edit />
</template> </template>
<style scoped> <style scoped>
.container { .container {
display: flex; border: 1px solid #000;
align-items: center; padding: 10px;
justify-content: center; width: fit-content;
height: 100vh; margin-bottom: 20px;
} }
</style> </style>

31
src/components/Edit.vue
View file

@ -1,7 +1,34 @@
<script setup lang="ts"> <script setup lang="ts">
</script> </script>
<template> <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>

22
src/components/Item.vue
View file

@ -16,29 +16,11 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border: 1px solid #ccc;
width: fit-content;
padding: 10px; padding: 10px;
border-radius: 0.25rem; 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);
.btn {
display: flex;
align-items: center;
justify-content: center;
padding: 0.5rem;
background-color: #272727; 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; border-radius: 0.25rem;
cursor: pointer;
margin: 0 10px;
transition: 0.3s;
}
.btn:hover {
background-color: #383838;
transition: 0.3s;
} }
.title { .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 { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
/* import specific icons */ /* 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 */ /* add icons to the library */
library.add(faTrash, faPenToSquare) library.add(faTrash, faPenToSquare, faCheck)
createApp(App) createApp(App)

20
src/style.css
View file

@ -1,5 +1,23 @@
:root { :root {
background-color: #121212; background-color: darkgray;
color: white; color: white;
font-family: "Fira Code", sans-serif; 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;
}