├── assets
├── image
│ └── screenshot.png
├── css
│ └── style.css
├── sass
│ └── style.scss
└── js
│ └── script.js
├── README.md
├── package.json
├── index.html
└── .gitignore
/assets/image/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/prtrt/EmojiGenerator-VanillaJS/HEAD/assets/image/screenshot.png
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Emoji Generator VanillaJS
2 |
3 | ## A simple Emoji Generator app with JavaScript
4 |
5 | 
6 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "emojigenerator-vanillajs",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "build-css": "node-sass assets/sass/style.scss -o assets/css -w"
8 | },
9 | "keywords": [],
10 | "author": "",
11 | "license": "ISC",
12 | "dependencies": {
13 | "node-sass": "^9.0.0"
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/assets/css/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0; }
4 |
5 | #app {
6 | display: flex;
7 | justify-content: center;
8 | align-items: center;
9 | height: 100vh;
10 | flex-direction: column;
11 | background-color: darkseagreen; }
12 | #app .emoji {
13 | font-size: 15rem;
14 | transition-duration: 200ms;
15 | filter: grayscale(1);
16 | cursor: pointer; }
17 | #app .emoji:hover {
18 | filter: grayscale(0); }
19 |
--------------------------------------------------------------------------------
/assets/sass/style.scss:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | }
5 | #app {
6 | display: flex;
7 | justify-content: center;
8 | align-items: center;
9 | height: 100vh;
10 | flex-direction: column;
11 | background-color: darkseagreen;
12 | .emoji {
13 | font-size: 15rem;
14 | transition-duration: 200ms;
15 | filter: grayscale(1);
16 | cursor: pointer;
17 | &:hover {
18 | filter: grayscale(0);
19 | }
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Emoji Generator
7 |
8 |
9 |
10 |
11 |
12 |
13 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/assets/js/script.js:
--------------------------------------------------------------------------------
1 | const btn = document.querySelector(".emoji");
2 | const emojis = [
3 | "😄",
4 | "😁",
5 | "😆",
6 | "😅",
7 | "😂",
8 | "🤣",
9 | "😊",
10 | "😇",
11 | "🙂",
12 | "🙃",
13 | "😉",
14 | "😌",
15 | "😍",
16 | "🥰",
17 | "😘",
18 | "😗",
19 | "😙",
20 | "😚",
21 | "😋",
22 | "😛",
23 | "😝",
24 | "😜",
25 | "🤪",
26 | "🤨",
27 | "🧐",
28 | "🤓",
29 | "😎",
30 | "🤩",
31 | "🥳",
32 | "😏",
33 | "😒",
34 | "😞",
35 | "😔",
36 | "😟",
37 | "😕",
38 | "🙁",
39 | "☹️",
40 | "😣",
41 | "😖",
42 | "😫",
43 | "😩",
44 | ];
45 | btn.addEventListener("mouseover", () => {
46 | btn.innerHTML = emojis[Math.floor(Math.random() * emojis.length)];
47 | });
48 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Windows thumbnail cache files
2 | Thumbs.db
3 | Thumbs.db:encryptable
4 | ehthumbs.db
5 | ehthumbs_vista.db
6 |
7 | # Dump file
8 | *.stackdump
9 |
10 | # Folder config file
11 | [Dd]esktop.ini
12 |
13 | # Recycle Bin used on file shares
14 | $RECYCLE.BIN/
15 |
16 | # Windows Installer files
17 | *.cab
18 | *.msi
19 | *.msix
20 | *.msm
21 | *.msp
22 |
23 | # Windows shortcuts
24 | *.lnk
25 |
26 | .vscode/*
27 | !.vscode/settings.json
28 | !.vscode/tasks.json
29 | !.vscode/launch.json
30 | !.vscode/extensions.json
31 | !.vscode/*.code-snippets
32 |
33 | # Local History for Visual Studio Code
34 | .history/
35 |
36 | # Built Visual Studio Code Extensions
37 | *.vsix
38 |
39 | # Logs
40 | logs
41 | *.log
42 | npm-debug.log*
43 | yarn-debug.log*
44 | yarn-error.log*
45 | lerna-debug.log*
46 | .pnpm-debug.log*
47 |
48 | # Diagnostic reports (https://nodejs.org/api/report.html)
49 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
50 |
51 | # Runtime data
52 | pids
53 | *.pid
54 | *.seed
55 | *.pid.lock
56 |
57 | # Directory for instrumented libs generated by jscoverage/JSCover
58 | lib-cov
59 |
60 | # Coverage directory used by tools like istanbul
61 | coverage
62 | *.lcov
63 |
64 | # nyc test coverage
65 | .nyc_output
66 |
67 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
68 | .grunt
69 |
70 | # Bower dependency directory (https://bower.io/)
71 | bower_components
72 |
73 | # node-waf configuration
74 | .lock-wscript
75 |
76 | # Compiled binary addons (https://nodejs.org/api/addons.html)
77 | build/Release
78 |
79 | # Dependency directories
80 | node_modules/
81 | jspm_packages/
82 |
83 | # Snowpack dependency directory (https://snowpack.dev/)
84 | web_modules/
85 |
86 | # TypeScript cache
87 | *.tsbuildinfo
88 |
89 | # Optional npm cache directory
90 | .npm
91 |
92 | # Optional eslint cache
93 | .eslintcache
94 |
95 | # Optional stylelint cache
96 | .stylelintcache
97 |
98 | # Microbundle cache
99 | .rpt2_cache/
100 | .rts2_cache_cjs/
101 | .rts2_cache_es/
102 | .rts2_cache_umd/
103 |
104 | # Optional REPL history
105 | .node_repl_history
106 |
107 | # Output of 'npm pack'
108 | *.tgz
109 |
110 | # Yarn Integrity file
111 | .yarn-integrity
112 |
113 | # dotenv environment variable files
114 | .env
115 | .env.development.local
116 | .env.test.local
117 | .env.production.local
118 | .env.local
119 |
120 | # parcel-bundler cache (https://parceljs.org/)
121 | .cache
122 | .parcel-cache
123 |
124 | # Next.js build output
125 | .next
126 | out
127 |
128 | # Nuxt.js build / generate output
129 | .nuxt
130 | dist
131 |
132 | # Gatsby files
133 | .cache/
134 | # Comment in the public line in if your project uses Gatsby and not Next.js
135 | # https://nextjs.org/blog/next-9-1#public-directory-support
136 | # public
137 |
138 | # vuepress build output
139 | .vuepress/dist
140 |
141 | # vuepress v2.x temp and cache directory
142 | .temp
143 | .cache
144 |
145 | # Docusaurus cache and generated files
146 | .docusaurus
147 |
148 | # Serverless directories
149 | .serverless/
150 |
151 | # FuseBox cache
152 | .fusebox/
153 |
154 | # DynamoDB Local files
155 | .dynamodb/
156 |
157 | # TernJS port file
158 | .tern-port
159 |
160 | # Stores VSCode versions used for testing VSCode extensions
161 | .vscode-test
162 |
163 | # yarn v2
164 | .yarn/cache
165 | .yarn/unplugged
166 | .yarn/build-state.yml
167 | .yarn/install-state.gz
168 | .pnp.*
169 |
--------------------------------------------------------------------------------