So once upon a time in practicing HTML,CSS and JS I built a pretty website. It was a fully functional one with multiple web pages and used express for backend. I lost its files and left web prog for a while. Now I cannot figure out how to do that again. I went to source from where I learned it but in vain. If I Go-Live the HTML page I created with CSS, It displays corrrectly i.e with the css. However if I use express, it just shows the Html. Yes Plain, old Htmlsss. Hatesss and textsss, No sstylingss.
Here is the javascript
const fs = require('fs')
const express = require('express');
const app = express();
const port = 80;
const home_html = fs.readFileSync('HTML.html')
app.get("/", (req, res) => {
res.writeHead(200, { 'Content-Type': 'text/html' });
res.end(home_html);
});
app.listen(port, () => {
console.log(`The application started successfully on port ${port}`);
});
The website should look like when it is displayed along with css in snippet. Seriously can't figure out what is and where is it going wrong.
:root {
--black-col: #15191f;
--light-col: #e3ecf3;
}
* {
margin: 0px;
padding: 0px;
}
.cen {
text-align: center;
}
.flex {
display: flex;
}
.flex-row {
flex-direction: row;
}
.flex-column {
flex-direction: column;
}
.wrap {
flex-wrap: wrap;
}
.al-cen {
align-items: center;
}
.ju-cen {
justify-content: center;
}
body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 1.5vw;
background-color: var(--light-col);
}
div {
margin: 20px 15px;
}
.border-red {
border: 3.5px solid #ffb700d3;
border-radius: 12px;
box-shadow: 7px 7px 3px 1px green;
/* box-shadow: x y blur-radius spread-readius color; */
}
.border-green {
border: 3.5px solid green;
border-radius: 5px;
box-shadow: 7px 7px 3px 1px blue;
/* box-shadow: x y blur-radius spread-readius color; */
}
.border-blue {
border: 3.5px solid blue;
border-radius: 5px;
box-shadow: 7px 7px 3px 1px red;
/* box-shadow: x y blur-radius spread-readius color; */
}
.block {
display: block;
}
.inline-block {
display: inline-block;
}
.line-height {
line-height: 8vh;
}
/* NAVIGATION BAR */
.grinav {
display: grid;
grid-template-columns: 1fr 1fr;
}
#timeclock {
justify-content: end;
margin: 0px 0px 0px 0px;
color: var(--black-col);
}
#times {
border: 2px solid var(--light-col);
background-color: var(--light-col);
margin: 0px 2vw 0px 0px;
padding: 5px 20px 5px 20px;
font-weight: bold;
border-radius: 200px;
}
.glowbar {
display: block;
background-color: #ff7700;
box-sizing: border-box;
width: 0%;
margin: 0px 0px 0px 0px;
position: fixed;
height: 4px;
animation-name: fill2;
animation-duration: 4s;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
}
@keyframes fill1 {
from {
width: 0%;
background-color: gold;
}
to {
width: 100%;
background-color: #db9b00;
}
}
@keyframes fill2 {
0% {
width: 0%;
background-color: rgb(255, 217, 0);
}
90% {
/* width: 70%; */
background-color: #ff7700;
}
100% {
width: 100%;
background-color: #ff7700;
}
}
nav, .grinav {
position: sticky;
top: 0px;
left: 0px;
width: 100%;
box-sizing: border-box;
margin: 0px 0px 0px 0px;
padding: 5px 5px;
background-color: var(--black-col);
z-index: 2;
}
nav a {
text-decoration: none;
background-color: var(--black-col);
color: var(--light-col);
padding: 4px 10px;
border: 2px;
border-radius: 10px;
}
nav a:hover {
color: #15191f;
/* ff7700 */
transition-property: background-color;
/* transition-property: color; */
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
background-color: var(--light-col);
}
#li1 {
margin-left: 4vw;
}
#a1 {
margin: 0px 1.5vw;
}
#a2 {
margin: 0px 1.5vw;
}
#a3 {
margin: 0px 1.5vw;
}
#a4 {
margin: 0px 1.5vw;
}
nav ul li {
list-style: none;
}
#logo {
width: 3vw;
border: 2px;
border-radius: 100px;
margin: 5px 0px 0px 15px;
}
/* NAVIGATION BAR ENDS */
/* MAIN HEADING */
.heading {
height: 90vh;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
.ap {
grid-column-start: 2;
grid-column-end: 2;
margin: 100px 0px 0px 100px;
}
/* If there is a horizontal scroll bar, you can disable it by the following code:{
box-sizing: border-box;
width: 100%;
instead of width: 100vw;
This should solve the problem} */
.heading::before {
box-sizing: border-box;
content: "";
height: 100vh;
/* background-color: var(--black-col); */
background: url(../static/Pb_O_W.png) no-repeat center center/cover;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
z-index: -1;
}
.AiO {
font-family: 'Bahnschrift', 'Arial', 'Calibri', 'Times New Roman', Times, serif;
font-size: 2.5vw;
margin: 40px 0px;
color: orange;
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
/* text-align: left; */
top: 100px;
margin: 277px 0px 0px 150px;
}
.breaker {
display: none;
}
/* @media only screen and (max-width:2600px) {
.heading::before {
box-sizing: border-box;
content: "";
height: 100vh;
background-color: var(--black-col);
background: url(../static/Pb_O_W.png) no-repeat center center/cover;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
z-index: -1;
}
} */
.smbot {
text-align: center;
display: inline;
color: var(--light-col);
}
/* MAIN HEADING ENDS */
/* LISTS SECTION */
div ul {
margin: 0px 25px;
}
ol li {
margin: 0px 40px;
}
ol {
border: 2px solid blue;
border-radius: 5px;
text-align: center;
margin: 4px 0px;
width: 100;
}
.text-cen {
text-align: center;
}
ol li {
margin-left: 40px;
}
/* LISTS SECTION ENDS */
/* FORMS STARTED */
input {
display: block;
}
option {
background-color: var(--black-col);
color: var(--light-col);
height: 50px;
font-size: 1.1rem;
border-radius: 5px;
}
select {
width: 85px;
background-color: var(--black-col);
color: var(--light-col);
height: 30px;
border: 2px solid var(--black-col);
border-radius: 6px;
}
.button {
height: 25px;
width: 25px;
border-radius: 100px;
}
.checkbox {
height: 25px;
width: 25px;
}
/* FORMS ENDED */
h4, h5 {
text-shadow: 2px 2px 2px var(--black-col);
text-align: center;
}
.container {
background-color: rgb(255, 255, 255);
}
.box {
background-color: green;
width: 250px;
height: 250px;
position: relative;
animation-name: harry1;
/* animation-name: harry2; */
animation-duration: 4s;
animation-iteration-count: 1;
/* z-index: -1; */
transition: all 1s ease-in-out;
}
.box:hover {
transform: rotate(3600000000deg);
}
@keyframes harry1 {
from {
width: 200px;
}
to {
width: 1400px;
}
}
@keyframes harry2 {
0% {
top: 0px;
left: 0px;
}
25% {
top: 250px;
left: 0px;
}
75% {
top: 250px;
left: 250px;
}
100% {
top: 0px;
left: 250px;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML</title>
<link rel="stylesheet" href="HTML.css">
<!-- <script src="../JS/index.js"></script> -->
</head>
<body >
<div >
<nav >
<img id="logo" src="../static/Pb_O_Wsm.png" alt="Img not found">
<ul >
<li id="li1"><a id="a1" href="../HTML/HTML.html" target="_blank">Html</a></li>
<li id="li2"><a id="a2" href="../HTML/CSS.html" target="_blank">CSS</a></li>
<li id="li3"><a id="a3" href="../HTML/Javasc.html" target="_blank">JavaScript</a></li>
</ul>
</nav>
<li id="timeclock" ><span id="times"></span></li>
</div>
<div >
</div>
<div >
<h1 >All in ONE Website<br>
</h1>
<p >This <strong>Website</strong> aims to <br >
<i>include</i> all that<br >
has been <em>learnt</em> and<br >
keep a record of it <br >
for future usage.
</p>
</div>
<hr>
<div >
<p><b>
<\b>This Bold<\b>
</b>Lorem ipsum dolor sit amet consectetur, adipisicing elit. <br><strong>
<\br> Has been used here and here<\br><br>
</strong> modi molestias omnis voluptate alias unde voluptates provident hic voluptatibus ipsum deleniti
itaque
delectus et expedita quisquam, non soluta, harum consequuntur sapiente rem quaerat. Repellendus, impedit.
</p>
</div>
<div >
<div >
<ol id="ol1" type="1">
<h6 >OL type 1</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
<ol id="olA" type="A">
<h6 >OL type A</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
<ol id="ola" type="a">
<h6 >OL type a</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
<ol id="olI" type="I">
<h6 >OL type I</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
<ol id="oli" type="i">
<h6 >OL type i</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
</div>
<div >
<ul type="square">
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
<ul type="circle">
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
<ul type="disc">
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
</div>
</div>
<div >
<h4>This is a Table</h4>
<table>
<thead>
<tr>
<th>Heading-1</th>
<th>Heading-2</th>
<th>Heading-3</th>
<th>Heading-4</th>
<th>Heading-5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row-1-Colum-1</td>
<td>Row-1-Colum-2</td>
<td>Row-1-Colum-3</td>
<td>Row-1-Colum-4</td>
<td>Row-1-Colum-5</td>
</tr>
<tr>
<td>Row-2-Column-1</td>
<td>Row-2-Column-2</td>
<td>Row-2-Column-3</td>
<td>Row-2-Column-4</td>
<td>Row-2-Column-5</td>
</tr>
<tr>
<td>Row-3-Column-1</td>
<td>Row-3-Column-2</td>
<td>Row-3-Column-3</td>
<td>Row-3-Column-4</td>
<td>Row-3-Column-5</td>
</tr>
</tbody>
</table>
</div>
<div >
<h1 >FORMS</h1>
<h5 >Below are some types of input we can ask on forms.Include a NAME in input tags
</h5>
<p>We will make input tag a block element to make go to next line and make the code look clean.
Before it was inline so elements crammmed over each other.We can add value="" to show that thing.<br>
The diff between value and placeholder is that the placeholder gets removed whan an item is entered, wheras
when we enter an item at place of value, it concencates in the value. Placeholder is Background, value is
not.
@gmail.com is value below in email. Remaining are Placeholder
</p>
<form action="#">
Button <input type="button" placeholder="Placeholder">
Checkbox<input type="checkbox" placeholder="Placeholder">
Color<input type="color" placeholder="Placeholder">
Date<input type="date" placeholder="Placeholder">
Datetime<input type="datetime" placeholder="Placeholder">
Datetime-local<input type="datetime-local" placeholder="Placeholder">
<p>Just Testing</p>
Email<input type="email" value="@gmail.com" placeholder="Placeholder">
File<input type="file" placeholder="Placeholder">
Hidden<input type="hidden" placeholder="Placeholder">
Image<input type="image" placeholder="Placeholder">
Month<input type="month" placeholder="Placeholder">
Number<input type="number" placeholder="Placeholder">
Password<input type="password" placeholder="Placeholder">
Radio<input type="radio" placeholder="Placeholder">
Range<input type="range" placeholder="Placeholder">
Reset<input type="reset" placeholder="Placeholder">
Search<input type="search" placeholder="Placeholder">
Submit<input type="submit" placeholder="Placeholder">
Tel<input type="tel" placeholder="Placeholder">
Text<input type="text" placeholder="Placeholder">
Time<input type="time" placeholder="Placeholder">
Url<input type="url" placeholder="Placeholder">
Week<input type="week" placeholder="Placeholder">
Select from a dropdown <select>
<option value="Option-1-Val">Option-1</option>
<option value="Option-2-Val">Option-2</option>
<option value="Option-3-Val">Option-3</option>
<option value="Option-4-Val">Option-4</option>
<option value="Option-5-Val">Option-5</option>
</select>
</form>
</div>
<div >
<h4 >We use entities for displaying some character</h4>
<
<!-- Less Than -->
>
<!-- Greater Than -->
£
<!-- pound -->
©
<!-- copy -->
⇛
<!-- Arrow -->
½
<!-- In form of fraction -->
</div>
<div >
<p>A dropdown button which shows whatever is written in summary and when clicked reveals what is written in
detail tag.</p>
<details>
<summary>I have keys but no doors. I have space but no room. You can enter but you can't leave. What am i?
</summary>
A Keyboard.
</details>
<p>Now i will use a time tag</p>
<p>We will be celebrating new year on <time datetime="2022-12-12">December 12</time> in my house.</p>
</div>
</body>
<script>
function updateTime() {
timern = new Date()
times.innerHTML = `${timern.getHours()}:${timern.getMinutes()}:${timern.getSeconds()}`;
console.log(times.innerHTML)
}
setInterval(updateTime, 500);
</script>
</html>CodePudding user response：
Express static serve the css
const path = require('path')
app.use(express.static(path.join(__dirname, 'public')))
CodePudding user response：
I learned this all from the link provided by @Kennard but it was difficult. I'll try to explain it here in a beginner friendly way to assist other newbies like me coming to this post.
const fs = require('fs')
const express = require('express');
const app = express();
const port = 80;
const home_html = fs.readFileSync('HTML.html')
app.get("/", (req, res) => {
res.writeHead(200, { 'Content-Type': 'text/html' });
res.end(home_html);
});
app.listen(port, () => {
console.log(`The application started successfully on port ${port}`);
});
The JavaScript is perfectly fine by itself... except with a small problem, which scaled up ofc. The express could not found the stylesheet(CSS file) I linked in Html. It does not follows the link we gave in html. Rather it says
You want to serve a file along with HTML... Fine I'll do it.
But to avoid the mess, you have to do some thing more. Tell me the location where File is stored.
And this is the public thing mentined above
For the sake of simplicity I would recommend beginners to follow this guide to create a structure which is organized.
.
├── app.js
├── bin
│ └── www
├── package.json
├── public
│ ├── images
│ ├── javascripts
│ └── stylesheets
│ └── style.css
├── routes
│ ├── index.js
│ └── users.js
└── views
├── error.pug
├── index.pug
└── layout.pug
This is the structure we get by executing following commands:
npx express-generator
express --view=pug myapp (myapp is name of folder you wanna generate.)
Remember the "app.js" stores all of this Javascript.
Now we will tell express to look in following directory;
app.use('/public', express.static(path.join(__dirname, 'public')))
It simply means that in the directory I am standing right now, there is a folder named public. Go there and fetch files from there.
Now keep all the files e.g images to serve CSS and Html over here.
If you generate files using the method on this link, it has already got folders seperated for this.
Remember The answer to all question lies in Documentation... Once and for all
Upvote if Helpful.
//Thankyou Kennard. Would not have been possible without your help.