├── .gitignore
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
├── favicon.ico
└── index.html
└── src
├── App.vue
├── assets
└── style.css
├── components
├── appHeader.vue
├── noteItem.vue
└── speech.vue
└── main.js
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | /dist
4 |
5 | # local env files
6 | .env.local
7 | .env.*.local
8 |
9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 |
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # vue-speech-api-regex-ile-not-uygulamasi
2 |
3 | ## Project setup
4 | ```
5 | npm install
6 | ```
7 |
8 | ### Compiles and hot-reloads for development
9 | ```
10 | npm run serve
11 | ```
12 |
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 |
18 | ### Run your tests
19 | ```
20 | npm run test
21 | ```
22 |
23 | ### Lints and fixes files
24 | ```
25 | npm run lint
26 | ```
27 |
28 | ### Customize configuration
29 | See [Configuration Reference](https://cli.vuejs.org/config/).
30 |
--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: [
3 | '@vue/cli-plugin-babel/preset'
4 | ]
5 | }
6 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vue-speech-api-regex-ile-not-uygulamasi",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "serve": "vue-cli-service serve",
7 | "build": "vue-cli-service build"
8 | },
9 | "dependencies": {
10 | "core-js": "^3.6.4",
11 | "vue": "^2.6.11"
12 | },
13 | "devDependencies": {
14 | "@vue/cli-plugin-babel": "^4.2.0",
15 | "@vue/cli-service": "^4.2.0",
16 | "vue-template-compiler": "^2.6.11"
17 | },
18 | "browserslist": [
19 | "> 1%",
20 | "last 2 versions"
21 | ]
22 | }
23 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gkandemi/vue-speech-to-text-api-regex-not-uygulamasi/f92d645e1d2260df4f5415d5c1b571a1e728c4be/public/favicon.ico
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | <%= htmlWebpackPlugin.options.title %>
9 |
13 |
14 |
15 |
22 |
23 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
10 |
15 |
16 |
17 |
18 |
19 |
59 |
--------------------------------------------------------------------------------
/src/assets/style.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css?family=Exo+2:400,700&display=swap");
2 |
3 | * {
4 | box-sizing: border-box;
5 | margin: 0;
6 | padding: 0;
7 | }
8 |
9 | body {
10 | font-family: "Exo 2", sans-serif;
11 | background-color: #fff;
12 | color: white;
13 | }
14 | header {
15 | font-size: 20px;
16 | height: 50px;
17 | background-color: #c00201;
18 | display: flex;
19 | justify-content: center;
20 | align-items: center;
21 | margin-bottom: 10px;
22 | }
23 |
24 | #appContainer {
25 | display: flex;
26 | justify-content: flex-start;
27 | align-items: center;
28 | flex-direction: column;
29 | padding: 10px;
30 | }
31 |
32 | .note_item {
33 | color: #333;
34 | width: 500px;
35 | height: 120px;
36 | text-align: justify;
37 | background-color: #f4f4f4;
38 | display: grid;
39 | grid-template-columns: 1fr 4fr;
40 | grid-gap: 10px;
41 | padding: 10px;
42 | margin-bottom: 10px;
43 | border: 2px solid #333;
44 | }
45 | .id_content {
46 | display: flex;
47 | justify-content: center;
48 | align-items: center;
49 | }
50 |
51 | .id_content span {
52 | background-color: #333;
53 | color: white;
54 | width: 50px;
55 | height: 50px;
56 | border-radius: 50%;
57 | display: flex;
58 | justify-content: center;
59 | align-items: center;
60 | font-size: 18px;
61 | font-weight: bold;
62 | }
63 |
64 | .speech_container {
65 | margin-bottom: 20px;
66 | width: 500px;
67 | display: flex;
68 | flex-direction: column;
69 | justify-content: center;
70 | align-items: center;
71 | color: #333;
72 | }
73 |
--------------------------------------------------------------------------------
/src/components/appHeader.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 | Speech Recognition | Vue.js | kablosuzkedi
4 |
5 |
6 |
--------------------------------------------------------------------------------
/src/components/noteItem.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | #{{ noteItem.id }}
5 |
6 |
7 | {{ noteItem.note }}
8 |
9 |
10 |
11 |
12 |
22 |
--------------------------------------------------------------------------------
/src/components/speech.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
8 |
9 | {{ speechToText }}
10 |
11 |
12 |
13 |
70 |
71 |
84 |
--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from "vue";
2 | import App from "./App.vue";
3 |
4 | import "@/assets/style.css";
5 |
6 | Vue.config.productionTip = false;
7 |
8 | new Vue({
9 | render: h => h(App)
10 | }).$mount("#app");
11 |
--------------------------------------------------------------------------------