Skip to content

Commit edd42b3

Browse files
NelltheWizanthonydmays
NelltheWiz
and
anthonydmays
authored
feat: adds Chanel's web server implementation (#579)
* feat: adds Chanels lesson 24 changes * chore: creates files for contact page and route * chore: adds contact forms and additional files * chore: removes unneded files Signed-off-by: Anthony D. Mays <[email protected]> * feat: adds form submit handler Signed-off-by: Anthony D. Mays <[email protected]> * fix: changes contract url Signed-off-by: Anthony D. Mays <[email protected]> --------- Signed-off-by: Anthony D. Mays <[email protected]> Co-authored-by: Anthony D. Mays <[email protected]>
1 parent e00d035 commit edd42b3

File tree

11 files changed

+1768
-0
lines changed

11 files changed

+1768
-0
lines changed

‎lesson_24/chanel_mock_site/package-lock.json

Lines changed: 1374 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lesson_24/chanel_mock_site/package.json

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"name": "lesson_24",
3+
"version": "1.0.0",
4+
"description": "## Pre-work",
5+
"main": "index.js",
6+
"scripts": {
7+
"devStart": "nodemon server.js"
8+
},
9+
"keywords": [],
10+
"author": "",
11+
"license": "ISC",
12+
"dependencies": {
13+
"ejs": "^3.1.10",
14+
"express": "^5.1.0",
15+
"morgan": "^1.10.0"
16+
},
17+
"devDependencies": {
18+
"nodemon": "^3.1.10"
19+
}
20+
}

‎lesson_24/chanel_mock_site/public/hero.jpg

329 KB
Loading

‎lesson_24/chanel_mock_site/public/index.html

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<html>
2+
<head>
3+
<title>Homepage</title>
4+
<meta name="viewport" content="width=device-width, initial-scale=1" />
5+
<link rel="stylesheet" id="redux-google-fonts-salient_redux-css" href="https://fonts.googleapis.com/css?family=Poppins%3A600%2C400%7CMontserrat%3A800%2C900%2C700&amp;ver=1597678827" type="text/css" media="all">
6+
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Poppins%3A600%2C400%7CMontserrat%3A800%2C900%2C700&#038;ver=1597678827' type='text/css' media='all' />
7+
<link rel="stylesheet" type="text/css" href="style.css">
8+
</head>
9+
<body>
10+
<header class="header">
11+
<div class="header-logo">
12+
<a href="index.html">
13+
<img src="logo.png" alt="Code Differently Logo" />
14+
</a>
15+
</div>
16+
<ul class="header-top-menu">
17+
<li><a href="#">Home</a></li>
18+
<li><a href="#">About</a></li>
19+
<li><a href="/contact">Contact</a></li>
20+
</ul>
21+
<div class="header-cta">
22+
<a class="sign-up-button" href="#">Sign Up</a>
23+
</div>
24+
</header>
25+
<div class="main">
26+
<div class="content">
27+
<article>
28+
<section class="hero-section">
29+
<div class="hero-overlay"></div>
30+
<div class="hero-content">
31+
<h2 class="hero-title">Together we can move the needle of <em class="highlight">diversity in tech.</em></h2>
32+
<div class="hero-text"><span>Code Differently</span> provides hands on training and education through coding classes that gives participants the technical and cognitive skills they need to excel in technology-driven workplaces.</div>
33+
</div>
34+
</section>
35+
<section class="programs-section">
36+
<h2>Our <em class="highlight">Programs</em></h2>
37+
<ul class="programs">
38+
<li class="program">
39+
<h3>1000 Kids Coding</h3>
40+
<p>The Code Differently 1000 Kids Coding program was created to expose New Castle County students to computing and programming. The 1000 Kids Coding courses are designed for all experience levels, no experience required.</p>
41+
</li>
42+
<li class="program">
43+
<h3>Return Ready</h3>
44+
<p>The Code Differently Workforce Training Initiatives were created to help individuals underrepresented in tech reinvent their skills to align with the changing workforce market. If you are ready to start your tech journey, join our talent community today.</p>
45+
</li>
46+
<li class="program">
47+
<h3>Pipeline DevShops</h3>
48+
<p>Pipeline DevShop is a youth work-based learning program. Youth participants experience working in a real software development environment while sharpening their technology and soft skills.</p>
49+
</li>
50+
<li class="program">
51+
<h3>Platform Programs</h3>
52+
<p>Platform programs are designed for high school graduates, college students, career changers, or professionals looking to develop the technology job readiness skills for today’s workforce.</p>
53+
</li>
54+
</ul>
55+
</section>
56+
</article>
57+
</div>
58+
</div>
59+
<footer class="footer">
60+
&copy; 2024 Code Differently
61+
</footer>
62+
</body>
63+
</html>

‎lesson_24/chanel_mock_site/public/logo.png

29.2 KB
Loading

‎lesson_24/chanel_mock_site/public/style.css

Lines changed: 213 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,213 @@
1+
.header-logo img {
2+
width: 151px;
3+
height: 50px;
4+
position: relative;
5+
top: 0;
6+
left: 0;
7+
margin: 10px;
8+
z-index: 10;
9+
}
10+
11+
.header {
12+
display: flex;
13+
justify-content: space-between;
14+
align-items: center;
15+
padding: 20px 40px;
16+
background-color: #0a1f2c;
17+
position: sticky;
18+
top: 0;
19+
left: 0;
20+
right: 0;
21+
z-index: 4;
22+
}
23+
24+
* {
25+
margin: 0;
26+
padding: 0;
27+
box-sizing: border-box;
28+
}
29+
30+
body {
31+
font-family: 'Poppins', sans-serif;
32+
line-height: 1.6;
33+
color: #243e90;
34+
background-color: #fff;
35+
}
36+
37+
h2, h3 {
38+
font-family: 'Poppins', sans-serif;
39+
}
40+
41+
a {
42+
text-decoration: none;
43+
color: inherit;
44+
}
45+
46+
.header {
47+
display: flex;
48+
justify-content: space-between;
49+
align-items: center;
50+
padding: 20px 40px;
51+
background-color: #ffffff;
52+
}
53+
54+
.header-top-menu {
55+
display: flex;
56+
list-style: none;
57+
flex-wrap: wrap;
58+
gap: 20px;
59+
}
60+
61+
.header-top-menu li {
62+
margin-left: 20px;
63+
}
64+
65+
.header-top-menu li a {
66+
color:#243e90;
67+
font-weight: 600;
68+
font-size: 25px;
69+
text-transform: uppercase;
70+
}
71+
72+
.header-top-menu li a:hover {
73+
color: #ff7f32;
74+
}
75+
76+
.header-cta .sign-up-button {
77+
background-color: #ff7f32;
78+
color: white;
79+
padding: 10px 20px;
80+
font-weight: 600;
81+
border-radius: 5px;
82+
text-transform: uppercase;
83+
letter-spacing: 1px;
84+
transition: background-color 0.3s ease;
85+
}
86+
87+
.header-cta .sign-up-button:hover {
88+
/* Hover tool to highlight the button ~ free codecamp*/
89+
background-color: #243e90;
90+
}
91+
92+
/* Create the Hero Section to mimick the original; ChatGPT helped with these features*/
93+
.hero-section {
94+
position: relative;
95+
background-image: url('hero.jpg');
96+
background-size: cover;
97+
background-position: center;
98+
height: 400px;
99+
display: flex;
100+
justify-content: right;
101+
align-items: center;
102+
}
103+
104+
.hero-overlay {
105+
position: absolute;
106+
top: 0;
107+
left: 0;
108+
width: 100%;
109+
height: 100%;
110+
background: rgba(0, 0, 0, 0.5);
111+
}
112+
113+
.hero-title {
114+
font-size: 30px;
115+
}
116+
117+
.hero-content {
118+
position: relative;
119+
text-align: left;
120+
color: white;
121+
max-width: 700px;
122+
}
123+
124+
.hero-content span{
125+
color: #ff7f32;
126+
}
127+
128+
.hero-title {
129+
font-size: 36px;
130+
font-weight: 800;
131+
margin-bottom: 5px;
132+
}
133+
134+
.hero-text {
135+
font-size: 21px;
136+
font-weight: 400;
137+
line-height: 1.8;
138+
background: #243e90;
139+
}
140+
141+
.programs-section {
142+
padding: 75px 50px;
143+
text-align: left;
144+
background-color: #ffffff;
145+
}
146+
147+
.programs-section h2{
148+
font-weight: 1000;
149+
margin-bottom: 1px;
150+
}
151+
152+
.programs-section h2 .highlight{
153+
font-weight: 1000;
154+
font-size: larger;
155+
margin-bottom: 1px;
156+
}
157+
158+
.programs-section .highlight {
159+
font-weight: 700;
160+
}
161+
162+
.programs {
163+
display: grid;
164+
grid-template-columns: repeat(2, 1fr);
165+
gap: 15px;
166+
}
167+
168+
.programs {
169+
list-style-type: none;
170+
padding-left: 0;
171+
}
172+
173+
.program {
174+
list-style-type: none;
175+
position: relative;
176+
padding-bottom: 40px;
177+
}
178+
179+
.program {
180+
background-color: #fff;
181+
padding: 20px;
182+
border-radius: 8px;
183+
}
184+
185+
.program h3 {
186+
font-size: 22px;
187+
font-weight: 700;
188+
margin-bottom: 20px;
189+
}
190+
191+
.program p {
192+
font-size: 16px;
193+
line-height: 1.6;
194+
color: #555;
195+
margin-bottom: 50px;
196+
}
197+
198+
.footer {
199+
background-color: white;
200+
color: black;
201+
text-align: center;
202+
padding: 20px;
203+
font-size: 14px;
204+
letter-spacing: 0.5px;
205+
}
206+
207+
/* Responsive Styles */
208+
@media (max-width: 768px) {
209+
.header {
210+
flex-direction: row;
211+
align-items: flex-start;
212+
}
213+
}

‎lesson_24/chanel_mock_site/public/test/tt.html

Whitespace-only changes.

‎lesson_24/chanel_mock_site/routes/contact.js

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
const express = require("express");
2+
const router = express.Router()
3+
4+
router.get("/", (req, res) => {
5+
res.render("index");
6+
7+
})
8+
9+
router.post('/', (req, res) =>{
10+
const { name, email, message } = req.body;
11+
res.render('contact-submitted', { name, email, message });
12+
})
13+
14+
router
15+
.route("/:id")
16+
.get((req, res) => {
17+
console.log(req.contact)
18+
req.params.id
19+
res.send(`Get Contact with ID ${req.params.id}`)
20+
})
21+
.put((req, res) => {
22+
req.params.id
23+
res.send(`Update Contact with ID ${req.params.id}`)
24+
})
25+
.delete((req, res) => {
26+
req.params.id
27+
res.send(`Delete Contact with ID ${req.params.id}`)
28+
29+
})
30+
31+
const contact = [{ name: "Sally Hurt"}, { name: "LaKiesha Miller"}]
32+
router.param("id", (req, res, next, id) => {
33+
console.log(id)
34+
req.contact = contact[id]
35+
next()
36+
})
37+
38+
module.exports = router

‎lesson_24/chanel_mock_site/server.js

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
const express = require("express")
2+
const morgan = require("morgan")
3+
const path = require("path")
4+
var debug = require('debug')('myapp:server')
5+
6+
7+
const app = express()
8+
9+
app.set("view engine", "ejs")
10+
11+
app.use(morgan("dev"))
12+
app.use(express.static(path.join(__dirname, "public")))
13+
app.use(express.urlencoded({ extended: true}))
14+
15+
const PORT = process.env.port || 3000
16+
17+
const userRouter = require('./routes/contact')
18+
19+
app.use('/contact', userRouter)
20+
21+
app.listen(PORT, () => {
22+
debug(`Server listening on http://localhost:${PORT}`)
23+
})
24+
25+

‎lesson_24/chanel_mock_site/views/contact-submitted.ejs

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Contact Submitted</title>
8+
</head>
9+
<body>
10+
<h3>Thank you <%= name %> for your message: <%= message %>. We will get back to you at <%= email %></h3>
11+
</body>
12+
</html>

0 commit comments

Comments
 (0)