Create Festival Wishing Website On MEAN Stack

Create Festival Wishing Website On MEAN Stack


Create Festival Wishing Website On MEAN Stack

FESTIVAL WISHING APP ON MEAN STACK

Today we will create a Wishing Website On MEAN Stack. There will be one webpage which takes a username in a textbox and show the wishing message with the username on the top of the page. You can actually call this a festival wishing webpage or and user welcome page using a query string.
If you have heard about query string for the first time then, It is a text which is passed as a URL on the top and fetched but some element of the page.
here is an example of Query string:-


Required software for this project


  1. Text Editor (of your choice I will use Sublime Text 3)
  2. NodeJs
  3. GIT

 NPM packages to be used.

  • EJS(Embedded JavaScript)
  • Express
  • Nodemon (Optional)



I will not show you how to install these now. I will write another post real soon on this topic and update this one.

Steps

1. Create a file on the desktop name it anything you want.

2. Right-click on the folder and select the open git bash here command. (make sure you have installed GIT on your system before this step else you can`t follow this part.)

3. Type npm init and create a JSON File.
  • give package name app.js
  • if you want to change version you can 
  • Rest, hit enter no need to change anything.
4. Now inside your folder create a file and name it app.js
and paste this code I will explain later

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
var express = require("express"),
 app     = express();

app.set("view engine", "ejs");
app.use(express.static(__dirname + '/public'));


app.get("/", function(req,res){ 
 res.render("welcome",{qs: req.query});
});


//server set up
var server =app.listen(3000,function(){
 console.log("on server!");
})


5. In your git bash command line, you have to install those packages mentioned above.
Type these, one by one.
  • npm install express --save
  • npm install ejs --save
  • npm install nodemon 
6. Now create two more folders inside your main folder.
Name them like public, views respectively. and don't name it something else name them as given here it is essential of the project.

7. Inside of the views folder, we will create a new EJS file name it anything with .ejs extension at the end.

8.  Inside of the public folder, we will create a new CSS file name it anything with .css extension at the end.

9. open the CSS file in the text editor and add this code


html,body{

 padding: 0;

 margin: 0;

 

}



.container{

 background-color: #F5F5F5;

 max-width: 500px;

 height: 100%;

 width: 100%;

 margin: 0 auto;

 text-align: center;

 border-radius: 18px;

 box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);

}



.swing{

 animation: swing ease-in-out 1s infinite alternate;

 box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);

}

@keyframes swing{

 0%{transform: rotate(5deg);}

 100%{transform: rotate(-5deg);}

}



img{

 max-width: 60%;

 max-height: 30%;

}



#nameOverflow{

 text-transform: uppercase;

 overflow-wrap: break-word;

}



.bounce {

 margin-left: auto;

 margin-right: auto;

 color: white;

 font-size: 35px;

 text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;

 animation: bounce 2s infinite ;

}



@keyframes bounce {

 0%, 20%, 50%, 80%, 100% {transform: translateY(0);}

 40% {transform: translateY(-30px);}

 60% {transform: translateY(-15px);}

}

10. Now open the EJS file and enter this code


<!DOCTYPE html>

<html>

<head>

 <title>query string</title>

 <link rel="stylesheet" type="text/css" href="welcome.css">

</head>

<body>

 <div class="container"> 

 <br>

 <% if (qs.name ) { -%>

 <h1 id="nameOverflow"><%=qs.name%></h1>

 

 <% } else { -%>

 <h1 id="nameOverflow">Your Name</h1>

 <% } -%> 

 

 <h2>की ताराफ से</h2>

 <h2>

 YOU WISHING TEXT

 </h2>

 <img class="swing" src="https://upload.wikimedia.org/wikipedia/commons/4/4a/Shiva_cropped.jpg"> 

 <% if (qs.name ) { -%>

 <h2  class= "bounce" id="nameOverflow"><%=qs.name%></h2>

 

 <% } else { -%>

 <h2 class= "bounce" id="nameOverflow">Your Name</h2>

 <% } -%>

 <form action="/" method="GET">

 <input type="text" name="name" placeholder="ENTER YOUR NAME">

 <button>submit</button> 

 </form>

 

 <br>

 <h2>

 YOUR WISHING TEXT

 </h2>

 <br>

 <h1>creator:- Atanu Modal</h1> 

 </div>



 

</body>

</html>

I have used an image from Wikipedia you can change as per your requirement and add it to your code. You can change the creator name and the wishing text to anything. rest should be the same.
We are done, we have created the CSS for style and the HTML file using EJS.
now we have to test it.

11. In your git bash command line type node app.js or nodemon app.js (If you have installed nodemon as a package) else use the above, both will work fine.

12. Open a Web Browser, I will use firefox. Type localhost:3000 on the address bar BOOM!! it works. Enter your name in the text field and hit submit button, it works!

Here is the link of complete sample project hosted on Heroku.
https://serene-hollows-45031.herokuapp.com

If you want to host your app for free like I did use Heroku to host it. Below is a link to a guide provided by Heroku you should check, it`s super easy to follow.
 https://devcenter.heroku.com/articles/getting-started-with-nodejs#set-up




0 comments :

Post a Comment