The code snippet below is from my node.js server (using express):
app.get('/appointment/:id',function(req,res){
res.writeHead(200,{'Content-Type':'text/html'});
res.write('<link href="public/css/style.css" rel="stylesheet" type="text/css">');
res.write('<form name="accept" action="http://localhost:8080/appointment/'+ req.params.id+'/1" method="post">');
res.write('<input id="accept" type="submit" value="Accept">');
res.write('</form><br>');
res.write('<form name="decline" action="http://localhost:8080/appointment/'+ req.params.id+'/0" method="post">');
res.write('<input id="decline" type="submit" value="Decline">');
res.write('</form><br>');
res.end();
});
In the root directory, there is a folder called appointment with a subfolder named public/css/style.css.
Upon loading the webpage, only the form buttons are displayed without the applied CSS.
Here is the CSS code:
#accept {
width:50px;
height:30px;
background-color:#00FF00;
color:#FFFFFF;
font-weight:bold;
font-size:120%;
}
#decline {
width:50px;
height:30px;
background-color:#FF0000;
color:#FFFFFF;
font-weight:bold;
font-size:120%;
}
What could be causing this issue and how can it be resolved?
UPDATE: The folder structure is as follows:
-server_files
--nodeServer.js
--public
---css
----style.css