What is the best way to incorporate color, alignment, and background to my response.send("some text") in my Node.js documentation?

As a newcomer to the world of node.js, I find myself a bit lost when it comes to adding text colors, backgrounds, alignments, etc., to my node.js document. Can someone please provide me with a solution that will allow me to display the result sum = 12 in red?

Below is the code snippet I have provided. Any suggestions on how to achieve what I am looking for would be greatly appreciated.

                        **app.js**
const express= require("express");
const bodyparser =require("body-parser");
const app=express();
 
 app.use(bodyparser.urlencoded({extended:true}))

  app.get("/",function(req,res){
  res.sendFile( __dirname+"/cal.html");
            
     });
  app.post("/",function(req,res)
  {
    var n1=Number(req.body.num1);
    var n2=Number(req.body.num2);
    var n=n1+n2;

    res.write("<h1>sum is" + n+"</h1>");
   res.send();


   }) 
   app.listen(2000,function()
   {
    console.log("server is running");
       });
                      
          
                           

cal.html (HTML document)

<!DOCTYPE html>
<html>
<head>
<title>server </title>
</head>
<body>
    <form action="/" method="post">
    <input type="text" name="num1" value=number1>
    <input type="text" name="num2" placeholder="number3">
    <button type="submit" name="button">calculate</button>
    </form>

 </body>
 </html>

Answer №1

After leaving a comment on your query, it's recommended to include some appropriate CSS within your HTML file:

Take note of the following JavaScript code snippet:

res.write('<h1 class="sum">sum is' + n+'</h1>');
.

I've inserted an <h1> element in the HTML to demonstrate the impact of adding the <style></style> block.

/*
// This section has been disabled and is purely for demonstration purposes only

const express = require("express");
const bodyParser = require("body-parser");
const app = express();
 
app.use(bodyParser.urlencoded({extended:true}))

app.get("/", function(req, res){
  res.sendFile(__dirname+"/cal.html");  
});

app.post("/", function(req, res) {
  var n1 = Number(req.body.num1);
  var n2 = Number(req.body.num2);
  var n = n1 + n2;

  res.write('<h1 class="sum">sum is ' + n + '</h1>');
  res.send();  
}); 

app.listen(2000, function() {
  console.log("server is running");
});
*/
<!DOCTYPE html>
<html>
<head>
<title>Server</title>

<style>
.sum { color: red }
</style>

</head>
<body>
    <form action="/" method="post">
        <input type="text" name="num1" value=number1>
        <input type="text" name="num2" placeholder="number3">
        <button type="submit" name="button">calculate</button>
    </form>

    <!-- Sample output -->
    <h1 class="sum">sum is 99999</h1>
</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to identify when a <td> element in a table is modified using JavaScript?

Currently, I am working on a Table where the values in the <td> elements change dynamically based on user input from a form. To achieve this, I am utilizing Tangle for creating a reactive document. I am facing a challenge where I need to detect any n ...

React-Toolbox: Attempting to horizontally align the Cards side by side

When working with React-Toolbox, I encountered an issue with aligning Card elements horizontally. I attempted using display: inline-block, which successfully separated them into three distinct cards as desired. However, they did not align next to one ano ...

What is the process of creating the /dist folder in an unreleased version of an npm package?

Currently working on implementing a pull request for this module: https://github.com/echoulen/react-pull-to-refresh ... It seems that the published module generates the /dist folder in the package.json prepublish npm script. I have my local version of the ...

Error in Internet Explorer when using SyntaxHighlighter and jQuery - "Property 'slice' cannot be accessed: object is null or undefined"

I have a strong liking for SyntaxHighter - it presents code in a very stylish manner. However, I have encountered a frustrating JS error in IE7 and IE8 that is hindering me from using this wonderful plugin to its full potential. Let's run a test case ...

How to place a stylish font over an image and recreate hover effects

I am looking to place social media icons below an image next to the photo's title, including Facebook, Twitter, Soundcloud, and Instagram. I want these icons to rotate along with the image when it is hovered over. HTML <div class="polaroid-image ...

A simple guide on passing a variable from Node.js to the view

Currently, I am delving into the world of Node.js and encountering a hurdle in sending a variable from app.js to index.html without relying on Jade or any other template engine. Below is my implementation in app.js: var express = require("express"); var ...

Methods for applying a style property to a div element with JavaScriptExecutor in Selenium utilizing C#

I have been attempting to change the style of a div element using JavascriptExecutor in C#, but so far, nothing has happened. IJavaScriptExecutor js = (IJavaScriptExecutor)driver; IWebElement element = driver.FindElement(By.XPath("//div[contains(@class, ...

Alignment issues with Navigation Elements

Recently, while working with the Bulma CSS framework, I encountered an interesting challenge. I wanted to align the navigation buttons to the bottom of the red field, but they appeared to be shifted out of alignment. Despite trying to apply inline CSS styl ...

What is the best way to position elements in a horizontal line?

I am trying to align three elements (DIVs) horizontally using Bootstrap's guidelines, but it doesn't seem to be working. This is the desired layout: https://i.sstatic.net/7lPKU.png However, this is what it currently looks like, aligned to the ...

Ways to achieve a consistent 2px border width across different browser zoom levels using CSS

Imagine you have two divs on a website: one with a 1px wide border and the other with a 2px wide border. Suddenly, when zooming below 100% (depending on various factors like browser and screen resolution), the 2px border div mysteriously transforms to loo ...

Button element has too much margin in IE, but appears perfectly in Firefox

I'm currently working on implementing rounded corners in a login form for the first time. Right now, I am focusing on getting the layout correct, but I've run into some issues with IE7. I'm trying to avoid using conditional statements and wh ...

Retrieve information from two separate HTTP requests and merge them together

Two mongoose schemas are used in my project - one for storing information about doctors and another for ranking them. Here is the schema for doctors: var doctorsSchema = new schema({ Entity: {type:String}, name: {type:String}, Expertise : {type:Stri ...

Ensure that the modal remains open in the event of a triggered keydown action, preventing it from automatically closing

I am currently toggling the visibility of some modals by adjusting their CSS properties. I would like them to remain displayed until there is no user interaction for a period of 3 seconds. Is there a way to achieve this using JavaScript? Preferably with Vu ...

Sending data with Node.js

1) I am facing an issue when trying to retrieve parameters from a post request in node.js and getting the correct values. app.post('/users', function(req, res) { console.log(">>> " + req.param('name')); ' works but wit ...

MongoDB - Error: Unable to access properties of an undefined value (reading 'collection')

The code in indexHelpers.js utilizes functions to interact with the database and perform operations on user details. However, there seems to be an issue where the db.get() function returns null, causing errors when trying to access certain properties. Thi ...

The CSS theme fails to adapt to changes made using jQuery

I encountered a peculiar problem while using a CSS theme with jQuery. After applying a custom CSS theme to a webpage, everything looked fine. However, when I performed certain operations using jQuery - like checking checkboxes causing others to be checked ...

Event handling in Node.js can sometimes result in throwing exceptions

I need advice on how to handle errors or return values from an event in my code. Here is what it looks like: _initConnection(){ try{ const errorValidation = this.errorValidation const HOST = "192.168.2.32" ...

How to Efficiently Organize OpenAI AI Responses Using TypeScript/JavaScript and CSS

I'm using a Next.js framework to connect to the OpenAI API, and I've integrated it seamlessly with an AI npm package. The functionality is incredible, but I've encountered an issue regarding line breaks in the responses. You can find the AI ...

Utilizing Node.js for Email Verification

After a user registers, they receive an email with a verification link that they need to click on. This link contains a token that I am trying to use for verification. However, I am encountering difficulties in updating the user's status once they cli ...

How to install Typed.js without using Node.js

I'm currently working on a project that requires the JavaScript library typed.js, however, I am using the free webhost 000webhost which does not support Node.js. Since typed.js is typically installed using Yarn, NPM, or Bower - all of which require No ...