Skip to content

Commit 46c0766

Browse files
author
Yusuf Özlü
committed
create game app
1 parent 92a1cac commit 46c0766

23 files changed

+475
-4
lines changed

LICENSE

100644100755
Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
MIT License
1+
The MIT License (MIT)
22

3-
Copyright (c) 2017 ePlatform
3+
Copyright (c) 2016 Yusuf Özlü
44

55
Permission is hereby granted, free of charge, to any person obtaining a copy
66
of this software and associated documentation files (the "Software"), to deal

README.md

100644100755
Lines changed: 65 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,65 @@
1-
# vue-ask-question
2-
A game you can ask a question and get your answer with a funny gif.
1+
# web-generator
2+
Basic web application tools and structure
3+
4+
#### technologies
5+
1) Jade (HTML template engine)
6+
7+
2) SASS (.scss)
8+
9+
3) PostCSS auto prefixer (support for cross browsers)
10+
11+
```
12+
.{
13+
transition: all .4s ease;
14+
}
15+
```
16+
becomes
17+
```
18+
.{
19+
-webkit-transition:all .4s ease;
20+
-o-transition:all .4s ease;
21+
-moz-transition:all .4s ease;
22+
transition:all .4s ease
23+
}
24+
```
25+
4) Image optimizer (optimizes images' sizes)
26+
27+
28+
29+
#### packages
30+
```
31+
- gulp
32+
- del
33+
- gulp-autoprefixer
34+
- gulp-concat
35+
- gulp-connect
36+
- gulp-contrib-copy
37+
- gulp-express
38+
- gulp-image
39+
- gulp-pug(known as Jade)
40+
- gulp-minify-css
41+
- gulp-sass
42+
- gulp-sourcemaps
43+
- gulp-uglify
44+
```
45+
#### useage
46+
47+
If you install with npm type
48+
49+
to see on NPM click <a href='https://www.npmjs.com/package/web-generator' target="_blank">link</a>
50+
51+
`npm install web-generator` or `npm i web-generator`
52+
53+
If you download directly you must install Npm Packages by typing
54+
55+
`npm install` or `npm i`
56+
57+
then run Gulp Task Runner
58+
59+
`npm start` or `gulp`
60+
61+
and finally visit `http://localhost:1453`
62+
63+
#### output demo
64+
You will see same views when you run the project
65+
[Output Demo Link](http://ozluy.github.io/projects/web-generator/)

dev/assets/images/balls.gif

25.8 KB
Loading

dev/assets/images/eplatform-logo.png

4.74 KB
Loading

dev/assets/scripts/common.js

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
var watchExampleVM = new Vue({
2+
el: '#app',
3+
data: {
4+
question: '',
5+
img: '',
6+
answer: 'I cannot give you an answer until you ask a question!'
7+
},
8+
watch: {
9+
question: function (newQuestion) {
10+
this.answer = 'Waiting for you to stop typing...'
11+
this.img = './assets/img/balls.gif'
12+
this.getAnswer()
13+
}
14+
},
15+
methods: {
16+
getAnswer: _.debounce(
17+
function () {
18+
if (this.question.indexOf('?') === -1) {
19+
this.answer = 'Questions usually contain a question mark. ;-)'
20+
this.img = ''
21+
return
22+
}
23+
this.answer = 'Thinking...'
24+
this.img = './assets/img/balls.gif'
25+
var vm = this
26+
axios.get('https://yesno.wtf/api')
27+
.then(function (response) {
28+
vm.answer = _.capitalize(response.data.answer)
29+
vm.img = _.capitalize(response.data.image)
30+
})
31+
.catch(function (error) {
32+
vm.answer = 'Error! Could not reach the API. ' + error
33+
})
34+
},
35+
500
36+
)
37+
}
38+
})

dev/assets/styles/common.scss

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
body{
2+
font-family: Ubuntu;
3+
padding: 0;
4+
margin: 0;
5+
}
6+
*{
7+
box-sizing: border-box;
8+
}
9+
a{
10+
text-decoration: none;
11+
color: #999;
12+
font-weight: bold;
13+
transition: color .4s ease;
14+
&:hover{
15+
color: #777;
16+
}
17+
}
18+
ul{
19+
margin: 0;
20+
padding: 0;
21+
list-style: none;
22+
}
23+
main .container{
24+
background-color: #ddd;
25+
padding: 15px;
26+
min-height: 300px;
27+
}
28+
.container{
29+
width:724px;
30+
margin: 0 auto;
31+
transition: all 400ms ease;
32+
@media screen and (max-width: 724px){
33+
width: 100%;
34+
}
35+
}

dev/assets/styles/footer.scss

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
.footer{
2+
&--container{
3+
background-color: #ccc;
4+
padding: 15px;
5+
color: #444;
6+
&__dojocat{
7+
width: 100%;
8+
transition: filter .4s ease;
9+
filter: blur(15px);
10+
&:hover{
11+
filter: blur(0);
12+
}
13+
}
14+
}
15+
&-github{
16+
float: right;
17+
}
18+
}

dev/assets/styles/header.scss

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
header{
2+
background-color: #f3f3f3;
3+
padding: 15px;
4+
}
5+
ul.nav{
6+
&:before,&:after{
7+
display: table;
8+
content: ' ';
9+
clear: both;
10+
}
11+
li{
12+
float: left;
13+
background-color: #ccc;
14+
border: solid 1px #ddd;
15+
transition: background-color .4s ease;
16+
a{
17+
height: 100%;
18+
width: 100%;
19+
display: block;
20+
padding: 15px;
21+
color: #fff;
22+
}
23+
&:hover{
24+
background-color: #999;
25+
}
26+
}
27+
}

dev/assets/styles/index.scss

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
.question-game{
2+
&__input{
3+
width: 100%;
4+
padding: 15px;
5+
font-size: 14px;
6+
border-radius: 5px;
7+
border: solid 1px #aaa;
8+
font-family: Ubuntu;
9+
transition: all .3s ease;
10+
&:focus, &:active{
11+
outline: none;
12+
margin: 0 -15px;
13+
width: calc(100% + 30px);
14+
}
15+
}
16+
&__button{
17+
width: 100px;
18+
padding: 15px;
19+
float: right;
20+
background-color: #58585A;
21+
color: #fff;
22+
margin: 15px 0;
23+
font-size: 14px;
24+
text-align: center;
25+
border-radius: 5px;
26+
border: solid 1px #58585A;
27+
text-transform: uppercase;
28+
font-family: Ubuntu;
29+
&:focus, &:active{
30+
outline: none;
31+
}
32+
transition: background-color .4s ease;
33+
&:hover{
34+
background-color: #38383A;
35+
cursor: pointer;
36+
}
37+
}
38+
&__answer{
39+
&:before, &:after{
40+
width: 100%;
41+
display: table;
42+
content: ' ';
43+
clear: both;
44+
45+
}
46+
&-text{
47+
font-size: 24px;
48+
}
49+
&-img{
50+
width: 50%;
51+
}
52+
}
53+
}

dev/favicon.ico

6.37 KB
Binary file not shown.

0 commit comments

Comments
 (0)