Skip to content

Commit 65ecef0

Browse files
author
charitha95
committed
first commit
0 parents  commit 65ecef0

16 files changed

+17222
-0
lines changed

‎.babelrc

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{'presets':['@babel/preset-env']}

‎.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
dist
2+
node_modules
3+
.env

‎README.md

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
# Webbpack Express Example App
2+
3+
The goal of this repo is be an example of a basic but functional app built on Express and Webpack.
4+
5+
If you want to follow along, start from master and look at the numbered branches of this project. Each one is a step along the path to creating a fully functional webpack setup. In each branch, there will be a documentation file that lists out the steps taken in that branch (each step should also match to a git commit if you look at the history) which you can use as a checklist when setting up your own projects.
6+
7+
## Get Up and Running
8+
9+
Fork this repo, then clone your forked repo down to your computer:
10+
11+
```
12+
git clone -- [email protected]:[your-user-name]/webpack-express.git --
13+
```
14+
15+
`cd` into your new folder and run:
16+
- ```npm install```
17+
- ```npm start``` to start the app
18+
- this app runs on localhost:3000, but you can of course edit that in server.js

‎package-lock.json

+8,760
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{
2+
"name": "example-project",
3+
"version": "1.0.0",
4+
"main": "index.js",
5+
"scripts": {
6+
"test": "echo \"Error: no test specified\" && exit 1",
7+
"start": "node src/server/index.js",
8+
"dev": "webpack-dev-server --config webpack.dev.js --open",
9+
"prod": "webpack --config webpack.prod.js"
10+
},
11+
"keywords": [],
12+
"author": "",
13+
"license": "ISC",
14+
"description": "",
15+
"dependencies": {
16+
"cors": "^2.8.5",
17+
"express": "^4.17.1",
18+
"mini-css-extract-plugin": "^0.9.0",
19+
"optimize-css-assets-webpack-plugin": "^5.0.3",
20+
"terser-webpack-plugin": "^2.3.5",
21+
"webpack": "^4.41.6",
22+
"webpack-cli": "^3.3.11"
23+
},
24+
"devDependencies": {
25+
"@babel/core": "^7.8.6",
26+
"@babel/preset-env": "^7.8.6",
27+
"babel-loader": "^8.0.6",
28+
"css-loader": "^3.4.2",
29+
"html-webpack-plugin": "^3.2.0",
30+
"node-sass": "^4.13.1",
31+
"sass-loader": "^8.0.2",
32+
"style-loader": "^1.1.3",
33+
"webpack-dev-server": "^3.10.3",
34+
"workbox-webpack-plugin": "^5.0.0"
35+
}
36+
}

‎src/client/index.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { handleSubmit } from './js/app';
2+
import './styles/resets.scss';
3+
import './styles/site.scss';
4+
5+
export { handleSubmit }

‎src/client/js/app.js

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
export function handleSubmit(event) {
2+
alert('hei')
3+
event.preventDefault()
4+
5+
// check what text was put into the form field
6+
let formText = document.getElementById('name').value
7+
8+
console.log("::: Form Submitted :::")
9+
10+
}
11+
12+
document.getElementById('submit-btn').addEventListener('click', () => {
13+
event.preventDefault();
14+
fetch('http://localhost:8081/getForcast')
15+
.then(res => res.json())
16+
.then(function (res) {
17+
alert(res.message)
18+
})
19+
20+
})

‎src/client/styles/resets.scss

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
/* http://meyerweb.com/eric/tools/css/reset/
2+
v2.0 | 20110126
3+
License: none (public domain)
4+
*/
5+
6+
* {
7+
box-sizing: border-box;
8+
}
9+
10+
html, body, div, span, applet, object, iframe,
11+
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
12+
a, abbr, acronym, address, big, cite, code,
13+
del, dfn, em, img, ins, kbd, q, s, samp,
14+
small, strike, strong, sub, sup, tt, var,
15+
b, u, i, center,
16+
dl, dt, dd, ol, ul, li,
17+
fieldset, form, label, legend,
18+
table, caption, tbody, tfoot, thead, tr, th, td,
19+
article, aside, canvas, details, embed,
20+
figure, figcaption, footer, header, hgroup,
21+
menu, nav, output, ruby, section, summary,
22+
time, mark, audio, video {
23+
margin: 0;
24+
padding: 0;
25+
border: 0;
26+
font-size: 100%;
27+
font: inherit;
28+
vertical-align: baseline;
29+
}
30+
/* HTML5 display-role reset for older browsers */
31+
article, aside, details, figcaption, figure,
32+
footer, header, hgroup, menu, nav, section {
33+
display: block;
34+
}
35+
body {
36+
line-height: 1;
37+
}
38+
ol, ul {
39+
list-style: none;
40+
}
41+
blockquote, q {
42+
quotes: none;
43+
}
44+
blockquote:before, blockquote:after,
45+
q:before, q:after {
46+
content: '';
47+
content: none;
48+
}
49+
table {
50+
border-collapse: collapse;
51+
border-spacing: 0;
52+
}
53+
ul {
54+
list-style-type: none;
55+
}

‎src/client/styles/site.scss

+174
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
//variables
2+
$primary-color: #1c1a1a;
3+
$secondary-color: #3b355d;
4+
$bg-color: #e7e9ea;
5+
body,
6+
input,
7+
button {
8+
font-family: "Quicksand", sans-serif;
9+
}
10+
11+
// body {
12+
// // background: $bg-color;
13+
// }
14+
.page {
15+
margin: 50px 350px;
16+
background-color: $bg-color;
17+
display: flex;
18+
19+
.left,
20+
.right {
21+
flex: 1;
22+
padding: 15px;
23+
}
24+
25+
button {
26+
background: $primary-color;
27+
color: white;
28+
border-radius: 15px;
29+
border: none;
30+
width: 100px;
31+
&.save {
32+
padding: 15px;
33+
background: white;
34+
color: $primary-color;
35+
font-size: 16px;
36+
font-weight: 500;
37+
margin-top: 10px;
38+
}
39+
}
40+
41+
.search-panel {
42+
padding: 30px;
43+
background: white;
44+
border-radius: 12px;
45+
form {
46+
display: flex;
47+
justify-content: space-between;
48+
.input-group {
49+
display: flex;
50+
flex-direction: column;
51+
label {
52+
margin-bottom: 10px;
53+
}
54+
input {
55+
border: 0;
56+
outline: 0;
57+
background: transparent;
58+
border-bottom: 1px solid black;
59+
}
60+
}
61+
}
62+
}
63+
64+
.result-block {
65+
width: 100%;
66+
position: relative;
67+
figure {
68+
&.background-img {
69+
width: 100%;
70+
margin-top: 30px;
71+
position: relative;
72+
img {
73+
width: 100%;
74+
border-radius: 12px;
75+
object-fit: cover;
76+
width: 100%;
77+
height: 450px;
78+
}
79+
}
80+
}
81+
.backdrop {
82+
position: absolute;
83+
z-index: 1;
84+
display: flex;
85+
flex-direction: column;
86+
width: calc(100% - 100px);
87+
height: calc(100% - 100px);
88+
align-items: center;
89+
margin: 50px;
90+
background: #00000078;
91+
border-radius: 12px;
92+
top: 0;
93+
.header {
94+
display: flex;
95+
color: white;
96+
margin-top: 50px;
97+
label {
98+
color: rgba(white, 0.7);
99+
}
100+
.trip {
101+
margin-right: 20px;
102+
}
103+
h3 {
104+
font-size: 32px;
105+
font-weight: 600;
106+
margin-top: 10px;
107+
}
108+
}
109+
.temp {
110+
margin-top: 40px;
111+
display: flex;
112+
justify-content: center;
113+
color: whitesmoke;
114+
h1 {
115+
font-size: 64px;
116+
font-weight: 600;
117+
}
118+
figure {
119+
width: 15%;
120+
img {
121+
width: 100%;
122+
}
123+
}
124+
}
125+
.meta-info {
126+
color: white;
127+
display: flex;
128+
flex-direction: column;
129+
align-items: center;
130+
margin-top: 10px;
131+
letter-spacing: 1px;
132+
* {
133+
margin-bottom: 5px;
134+
}
135+
}
136+
}
137+
}
138+
139+
.recently-added-block {
140+
background: white;
141+
border-radius: 12px;
142+
padding: 20px 20px;
143+
h2 {
144+
font-size: 16px;
145+
font-weight: 500;
146+
margin-bottom: 30px;
147+
}
148+
.result {
149+
display: flex;
150+
margin-bottom: 15px;
151+
padding-bottom: 20px;
152+
border-bottom: 1px solid rgba($primary-color, 0.5);
153+
p {
154+
margin-right: 15px;
155+
}
156+
figure {
157+
width: 35%;
158+
img {
159+
border-radius: 12px;
160+
width: 100%;
161+
}
162+
}
163+
.details {
164+
display: flex;
165+
flex-direction: column;
166+
justify-content: center;
167+
margin-left: 10px;
168+
* {
169+
margin-bottom: 10px;
170+
}
171+
}
172+
}
173+
}
174+
}

0 commit comments

Comments
 (0)