Node Application of Coffee-To-Code (#101)

narze · Oct 31, 2021 · 4cc9644 · 4cc9644
1 parent d7b0986
commit 4cc9644
Show file tree

Hide file tree

Showing 5 changed files with 125 additions and 0 deletions.
diff --git a/NodeJS/ShaSha-Codes/README.md b/NodeJS/ShaSha-Codes/README.md
@@ -0,0 +1,8 @@
+1) Open Terminal and Input the following commands 
+ a) npm install (For installing all the required dependencies)
+ b) npm run start (For running the application)
+2) Open web browser and type localhost:3000 (For running the application)
+3) Input any text in the textbox provided and press convert.
+4) Enjoy :D 
+
+
diff --git a/NodeJS/ShaSha-Codes/app.js b/NodeJS/ShaSha-Codes/app.js
@@ -0,0 +1,26 @@
+const express=require('express');
+const app =express();
+
+
+app.set('view engine', 'ejs');
+app.use(express.static(__dirname + '/public'));
+app.use(express.urlencoded({extended:false}));
+
+app.get('/',(req,res)=>{
+    res.render('index',{'Code':0});
+})
+
+
+app.post('/',(req,res)=>{
+    try{
+        CoffeeString=req.body.coffee
+        CodeString=CoffeeString.replaceAll(/coffee/ig,'Code')
+        res.render('index',{'Code':CodeString});
+    }
+    catch{
+        res.redirect('/');
+    }
+
+})
+
+app.listen(3000,()=>console.log("App is Running at Port 3000"));
diff --git a/NodeJS/ShaSha-Codes/package.json b/NodeJS/ShaSha-Codes/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "coffee-to-code",
+  "version": "1.0.0",
+  "description": "This webpage converts coffee to code",
+  "main": "app.js",
+  "scripts": {
+    "start":"node app",
+    "dev": "nodemon app"
+  },
+  "author": "ShaSha-Codes",
+  "license": "ISC",
+  "dependencies": {
+    "ejs": "^3.1.6",
+    "express": "^4.17.1"
+  },
+  "devDependencies": {
+    "nodemon": "^2.0.14"
+  }
+}
diff --git a/NodeJS/ShaSha-Codes/public/css/style.css b/NodeJS/ShaSha-Codes/public/css/style.css
@@ -0,0 +1,6 @@
+body{
+    background-color: #e7eff9;
+    background-image: linear-gradient(315deg, #e7eff9 0%, #cfd6e6 74%);
+    height:100vh;
+}
+
diff --git a/NodeJS/ShaSha-Codes/views/index.ejs b/NodeJS/ShaSha-Codes/views/index.ejs
@@ -0,0 +1,66 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+    <link rel="stylesheet" href="/css/style.css">
+    <title>Coffee to Code!</title>
+  </head>
+  <body>
+    <h1 class="text-center my-3">Coffee-To-Code</h1>
+    <div class="container">
+        <div class="row">
+            <div class="col">
+                <div class="card mx-auto my-5" style="width: 30rem;">
+                    <div class="card-body">
+                      <h4 class="text-center">
+                        <i class="fas fa-coffee fa-2x"></i>
+                      </h4>
+                      <h2 class="card-title text-center"> Coffee-To-Code</h2>
+                     <hr>
+                      <form action="/" method="post">
+                        <div class="form-floating mt-3 mb-4">
+                            <textarea class="form-control" placeholder="Leave a comment here" name="coffee" id="floatingTextarea2" style="height: 100px"></textarea>
+                            <label for="floatingTextarea2">Text</label>
+                          </div>
+                          <div class="d-grid gap-2 mb-3">
+                            <button type="submit" class="btn btn-primary" type="button">Convert</button>
+                          </div>
+                    </form>
+                    </div>
+                  </div>
+
+            </div>
+            </div>
+
+            <%if(Code!="0"){%>
+                <div class="row">
+                    <div class="col my-3">
+                        <div class="card mx-auto" style="width:35rem;">
+                            <div class="card-header">
+                            Converted Text
+                            </div>
+                            <div class="card-body mx-auto">
+                                <p><%=Code%></p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            <%}%>
+
+
+
+
+    </div>
+
+
+
+
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
+    <script src="https://kit.fontawesome.com/f51f107350.js" crossorigin="anonymous"></script>
+  </body>
+</html>