React JS Training Course Online
- 21k Enrolled Learners
- Weekend
- Live Class
According to a survey by Hirekind, about one-third of all programming-related jobs listed on sites require JavaScript proficiency. Also, JavaScript provides the foundation for 95.1% of all active websites. It is an essential part of Web development and in this article, we will discuss some of the JavaScript Projects that will help you build applications on your own in the following sequence:
In 2018, there were almost 34k JavaScript jobs created in India. And the number is increasing each day. JavaScript is one of the top languages that is creating an enormous number of jobs.
There is so much scope for JavaScript developers like you can build your own portfolio site and do freelancing projects along with the regular JavaScript jobs. With the growth in JavaScript jobs, it may become a part of all types of industries like finance, insurance, and telecommunication. Let’s have a look at some of the Key Roles in JavaScript along with their Salary:
Now that you know about the career growth, let’s have a look at some of the JavaScript Projects that will help you understand the scripting language better and also build your own projects.
The JavaScript Projects are divided into three levels- Basic, Intermediate, and Advance. We will discuss the different levels of project and how the JavaScript code works. This will help you understand the scripting language better and provide you the idea to build your own applications using JavaScript. So, let’s begin with the basic level JavaScript Project.
In the first project, we will build a simple analog clock with the help of HTML canvas.
The first step is to create a canvas. The clock needs an HTML container:
<!DOCTYPE html> <html> <body> <canvas id="canvas" width="400" height="400" style="background-color:#333"></canvas> <script> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var radius = canvas.height / 2; ctx.translate(radius, radius); radius = radius * 0.90 setInterval(drawClock, 1000); //drawClock(); function drawFace(ctx, radius) { var grad; ctx.beginPath(); ctx.arc(0, 0, radius, 0, 2 * Math.PI); ctx.fillStyle = 'white'; ctx.fill(); grad = ctx.createRadialGradient(0, 0 ,radius * 0.95, 0, 0, radius * 1.05); grad.addColorStop(0, '#333'); grad.addColorStop(0.5, 'white'); grad.addColorStop(1, '#333'); ctx.strokeStyle = grad; ctx.lineWidth = radius*0.1; ctx.stroke(); ctx.beginPath(); ctx.arc(0, 0, radius * 0.1, 0, 2 * Math.PI); ctx.fillStyle = '#333'; ctx.fill(); } function drawNumbers(ctx, radius) { var ang; var num; ctx.font = radius * 0.15 + "px arial"; ctx.textBaseline = "middle"; ctx.textAlign = "center"; for(num = 1; num < 13; num++){ ang = num * Math.PI / 6; ctx.rotate(ang); ctx.translate(0, -radius * 0.85); ctx.rotate(-ang); ctx.fillText(num.toString(), 0, 0); ctx.rotate(ang); ctx.translate(0, radius * 0.85); ctx.rotate(-ang); } } function drawClock() { drawFace(ctx, radius); drawNumbers(ctx, radius); drawTime(ctx, radius); } function drawTime(ctx, radius){ var now = new Date(); var hour = now.getHours(); var minute = now.getMinutes(); var second = now.getSeconds(); //hour hour = hour%12; hour = (hour*Math.PI/6)+(minute*Math.PI/(6*60))+(second*Math.PI/(360*60)); drawHand(ctx, hour, radius*0.5, radius*0.07); //minute minute = (minute*Math.PI/30)+(second*Math.PI/(30*60)); drawHand(ctx, minute, radius*0.8, radius*0.07); // second second = (second*Math.PI/30); drawHand(ctx, second, radius*0.9, radius*0.02); } function drawHand(ctx, pos, length, width) { ctx.beginPath(); ctx.lineWidth = width; ctx.lineCap = "round"; ctx.moveTo(0,0); ctx.rotate(pos); ctx.lineTo(0, -length); ctx.stroke(); ctx.rotate(-pos); } /*var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var radius = canvas.height / 2; ctx.translate(radius, radius); radius = radius * 0.90 */ </script> </body> </html>
This HTML code creates the canvas for the clock and creates the function to draw the clock. Now the next step is to draw the face of the clock. Now, we need a JavaScript function to draw the face:
function drawClock() { //Create a function for drawing the clock face drawFace(ctx, radius); } function drawFace(ctx, radius) { var grad; ctx.beginPath(); //Draw the white circle ctx.arc(0, 0, radius, 0, 2 * Math.PI); ctx.fillStyle = 'white'; ctx.fill(); grad = ctx.createRadialGradient(0, 0 ,radius * 0.95, 0, 0, radius * 1.05); //Create a radial gradient grad.addColorStop(0, '#333'); //Create 3 color stops, corresponding with the inner, middle, and outer edge of the arc grad.addColorStop(0.5, 'white'); grad.addColorStop(1, '#333'); ctx.strokeStyle = grad; //Define the gradient as the stroke style of the drawing object ctx.lineWidth = radius*0.1; //Define the line width of the drawing object ctx.stroke(); //Draw the circle ctx.beginPath(); //Draw the clock center ctx.arc(0, 0, radius * 0.1, 0, 2 * Math.PI); ctx.fillStyle = '#333'; ctx.fill(); }
Once you have drawn the face of the clock, it’s time to add numbers:
function drawClock() { drawFace(ctx, radius); drawNumbers(ctx, radius); } function drawNumbers(ctx, radius) { var ang; var num; ctx.font = radius * 0.15 + "px arial"; //Set the font size to 15% of the radius ctx.textBaseline = "middle"; //Set the text alignment to the middle and the center of the print position ctx.textAlign = "center"; for(num = 1; num < 13; num++){ //Calculate the print position to 85% of the radius, rotated for each number ang = num * Math.PI / 6; ctx.rotate(ang); ctx.translate(0, -radius * 0.85); ctx.rotate(-ang); ctx.fillText(num.toString(), 0, 0); ctx.rotate(ang); ctx.translate(0, radius * 0.85); ctx.rotate(-ang); } }
Now, before we start the clock we need to add the clock hands:
function drawClock() { drawFace(ctx, radius); drawNumbers(ctx, radius); drawTime(ctx, radius); } function drawTime(ctx, radius){ var now = new Date(); //Use Date to get hour, minute, second var hour = now.getHours(); var minute = now.getMinutes(); var second = now.getSeconds(); //hour hour = hour%12; //Calculate the angle of the hour hand, and draw it a length, and a width hour = (hour*Math.PI/6)+(minute*Math.PI/(6*60))+(second*Math.PI/(360*60)); drawHand(ctx, hour, radius*0.5, radius*0.07); //minute minute = (minute*Math.PI/30)+(second*Math.PI/(30*60)); drawHand(ctx, minute, radius*0.8, radius*0.07); // second second = (second*Math.PI/30); drawHand(ctx, second, radius*0.9, radius*0.02); } function drawHand(ctx, pos, length, width) { ctx.beginPath(); ctx.lineWidth = width; ctx.lineCap = "round"; ctx.moveTo(0,0); ctx.rotate(pos); ctx.lineTo(0, -length); ctx.stroke(); ctx.rotate(-pos); }
Now that you have designed your analog clock, it’s time to start the clock. To start the clock, call the drawClock function at intervals:
var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var radius = canvas.height / 2; ctx.translate(radius, radius); radius = radius * 0.90 //drawClock(); setInterval(drawClock, 1000);
The only thing you have to do to start the clock is to call the drawClock function at intervals. With this, we are done with the first basic level JavaScript Project. It will give you the following Output:
Now let’s have a look at another basic level project.
This is a color game where you will have six square boxes with different colors. Now, you have to pick the right color based on the RGB value provided during each round. So let’s have a look at the JavaScript functions that are required to build this game:
var numSquares = 6; var colors = generateRandomColors(numSquares); var square = document.querySelectorAll(".square"); var pickedColor = pickColor(); var rgbCode = document.getElementById("rgbCode"); var messageDisplay = document.querySelector("#message"); var h1 = document.querySelector("h1"); var resetButton = document.querySelector("#reset"); var easyBtn = document.querySelector("#easyBtn"); var hardBtn = document.querySelector("#hardBtn"); easyBtn.addEventListener("click", function(){ hardBtn.classList.remove("selected"); easyBtn.classList.add("selected"); numSquares = 3; colors = generateRandomColors(numSquares); pickedColor = pickColor(); rgbCode.textContent = pickedColor; for(var i = 0; i < square.length; i++) { if (colors[i]) { square[i].style.background = colors[i]; } else { square[i].style.display = "none"; } } }); hardBtn.addEventListener("click", function(){ easyBtn.classList.remove("selected"); hardBtn.classList.add("selected"); numSquares = 6; colors = generateRandomColors(numSquares); pickedColor = pickColor(); rgbCode.textContent = pickedColor; for(var i = 0; i < square.length; i++) { square[i].style.background = colors[i]; square[i].style.display = "block"; } }); resetButton.addEventListener("click", function(){ //generate all new colors colors = generateRandomColors(numSquares); //pick a new random color from the array pickedColor = pickColor(); //change colorDisplay to match picked color rgbCode.textContent = pickedColor; this.textContent = "New Color"; messageDisplay.textContent = ""; //change colors of squares for (var i = 0; i < square.length; i++) { square[i].style.background = colors[i]; } h1.style.background = "steelblue"; }) rgbCode.textContent = pickedColor; for(var i = 0; i < square.length; i++) { //add initial colors to squares square[i].style.background = colors[i]; //add click listeners to squares square[i].addEventListener("click", function() { //grab color of picked square var clickedColor = this.style.background; //compare color to pickedColor if (clickedColor === pickedColor) { messageDisplay.textContent = "Good Job!"; resetButton.textContent = "Play Again ?"; changeColors(clickedColor); h1.style.background = clickedColor; }else{ this.style.background = "#232323"; messageDisplay.textContent = "Try Again"; } }) } function changeColors(color){ //loop through all squares for (var i = 0; i < square.length; i++) { //change each color to match given color square[i].style.background = color; } } function pickColor(){ var random = Math.floor(Math.random() * colors.length) return colors[random]; } function generateRandomColors(num){ //make and array var arr = [] //add num random colors to array for (var i = 0; i < num; i++) { arr.push(randomColor()) //get random color and push into array } //return that array return arr; } function randomColor(){ //pick a "red" from 0-255 var r = Math.floor(Math.random() * 256) //pick a "green" from 0-255 var g = Math.floor(Math.random() * 256) //pick a "blue" from 0-255 var b = Math.floor(Math.random() * 256) return "rgb(" + r +", " + g + ", " + b +")"; }
These are the different functions that will make your game work. Now, you can also add styles with the help of CSS:
body { background-color: #060111; margin: 0; font-family: sans-serif; font-weight: normal; text-transform: uppercase; } .square { width: 30%; background: white; padding-bottom: 30%; float: left; margin: 1.66%; border-radius: 10%; transition: background 0.7s; -webkit-transition: background 0.7s; -moz-transition: background 0.7s; } #container { margin: 20px auto; max-width: 600px; } h1 { color: white; line-height: 1.5; text-align: center; background-color: rgb(3, 69, 73); margin: 0; padding: 20px 0; } #stripe { background: white; height: 30px; text-align: center; color: black; } .selected { color: white; background: rgb(5, 153, 146); } #rgbCode { font-size: 200%; } button { border: none; background: none; text-transform: uppercase; font-family: sans-serif; height: 100%; font-weight: 700; color: rgb(5, 153, 146); letter-spacing: 1px; font-size: inherit; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; outline: none; } button:hover{ color: white; background: rgb(5, 153, 146); } #message{ display: inline-block; width: 20%; }
Once you are done styling your game, it’s time to implement these functions and styles in the HTML code to build the basic structure of your game:
<head> <meta charset="utf-8"> <title>Color Game</title> </head> <link rel="stylesheet" href="colorgamestyle.css"> <body> <h1> Pick your Shade <br> <span id="rgbCode">RGB</span> <br> Pick and Play </h1> <div id="stripe"> <button id="reset">Change Colors</button> <span id="message"></span> <button id="easyBtn">Easy</button> <button class="selected" id ="hardBtn">Hard</button> </div> <div id="container"> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> </div> <script src="colorgamejs.js" charset="utf-8"></script> </body>
With this, your game is ready and you can pick colors from the square boxes based on the RGB value. The above codes will give the following output:
Now that you have an idea about building an analog clock and a color game, let’s move on to the next level of JavaScript Projects.
The To-Do list helps you create a list of tasks that are to be completed. You can add a number of tasks in the list and also remove them once it is completed. This is an intermediate level project. So let’s see how to use different JavaScript functions to create a to-do list:
var enterButton = document.getElementById("enter"); var input = document.getElementById("userInput"); var ul = document.querySelector("ul"); var item = document.getElementsByTagName("li"); function inputLength(){ return input.value.length; } function listLength(){ return item.length; } function createListElement() { var li = document.createElement("li"); // creates an element "li" li.appendChild(document.createTextNode(input.value)); //makes text from input field the li text ul.appendChild(li); //adds li to ul input.value = ""; //Reset text input field //Start Strikethrough // because it's in the function, it only adds it for new items function crossOut() { li.classList.toggle("done"); } li.addEventListener("click",crossOut); //End strikethrough // Start add delete button var dBtn = document.createElement("button"); dBtn.appendChild(document.createTextNode("X")); li.appendChild(dBtn); dBtn.addEventListener("click", deleteListItem); // End add delete button //Add class delete (DISPLAY: NONE) function deleteListItem(){ li.classList.add("delete") } //End add class delete } function addListAfterClick(){ if (inputLength() > 0) { //makes sure that an empty input field doesn't create a li createListElement(); } } function addListAfterKeypress(event) { if (inputLength() > 0 && event.which ===13) { //this now looks to see if you hit "enter"/"return" //the 13 is the enter key's keycode, this could also be display by event.keyCode === 13 createListElement(); } } enterButton.addEventListener("click",addListAfterClick); input.addEventListener("keypress", addListAfterKeypress);
Next step is to add styling features to the list with the help of CSS:
body { background: rgb(8, 221, 210); text-align: center; font-family: 'Open Sans', sans-serif; } .intro { margin: 30px 0px; font-weight: bold; } h1 { color: #ffffff; text-transform: uppercase; font-weight: 800; } p { font-weight: 600; } #first { margin-top: 10px; color: rgb(2, 57, 65); } #second { color: rgb(226, 62, 40); } #third { color: rgb(217, 241, 79); margin-bottom: 30px; } #enter { border: none; padding: 15px 25px; border-radius: 10px; color: rgb(146, 250, 252); background-color: rgb(3, 63, 68); transition: all 0.75s ease; -webkit-transition: all 0.75s ease; -moz-transition: all 0.75s ease; -ms-transition: all 0.75s ease; -o-transition: all 0.75 ease; font-weight: normal; } #enter:hover{ background-color: rgb(172, 230, 240); color: rgb(85, 60, 7); } ul { text-align: left; margin-top: 20px; } li { list-style: none; padding: 10px 20px; color: #ffffff; text-transform: capitalize; font-weight: 600; border: 2px solid #94e0ee; border-radius: 10px; margin-bottom: 10px; background: rgb(3, 76, 88); transition: all 0.75s ease; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5 ease; } li:hover { background: rgb(129, 71, 5); } li > button { font-weight: normal; background: none; border: none; float: right; color: #025f70; font-weight: 800; } input { border-radius: 5px; min-width: 65%; padding: 15px; border: none; } .done { background: rgb(56, 161, 79) !important; color: rgb(187, 245, 200); } .delete { display: none; }
Now that you have written the functions and styled them all, it’s time to create the HTML structure for the To-Do list:
<link rel="stylesheet" href="todostyle.css"> <body> <div class="container"> <div class="row"> <div class="intro col-12"> <h1>Work To-Dos</h1> <div> <div class="border1"></div> <div c </div> </div> </div> <div class="row"> <div class="helpText col-12"> <p id="first">Enter text into the input field to add items to your list.</p> <p id="second">Click the item to mark it as complete.</p> <p id="third">Click the "X" to remove the item from your list.</p> </div> </div> <div class="row"> <div class="col-12"> <input id="userInput" type="text" placeholder="New item..." maxlength="27"> <button id="enter"><i class="fas fa-pencil-alt"></i></button> </div> </div> <!-- Empty List --> <div class="row"> <div class="listItems col-12"> <ul class="col-12 offset-0 col-sm-8 offset-sm-2"> </ul> </div> </div> </div> <script type="text/javascript" src="todojs.js"></script> </body> </html>
With this, your To-Do list is ready and you can add list of tasks that are to be completed. The above codes will give the following output:
Now that you have understood the different basic level and intermediate level projects, let’s move on to the advanced level JavaScript Project and create a shopping cart with your favorite items in the list.
Related Article: JS Interview Questions
The advanced level project is to create a shopping cart with a number of items. It will provide the price of each item and you can also add or remove these items from your cart.
The first step is to create our HTML structure. We need a container div which will be our shopping cart. Inside the container, we will have a title and three items which will include:
<div class="shopping-cart"> <!-- Title --> <div class="title"> Shopping Bag <span><pre> Price/item</pre></span> </div> <!-- Product #1 --> <div class="item"> <div class="buttons"> <span class="delete-btn"></span> <span class="like-btn"></span> </div> <div class="image"> <img src="item-1.jpg" alt="" /> </div> <div class="description"> <span>Daniel Jean</span> <span>Round neck</span> <span>Maroon</span> </div> <div class="quantity"> <button class="plus-btn" type="button" name="button"> <img src="plus.svg" alt="" /> </button> <input type="text" name="name" value="1"> <button class="minus-btn" type="button" name="button"> <img src="minus.svg" alt="" /> </button> </div> <div class="total-price">₹750</div> </div> <!-- Product #2 --> <div class="item"> <div class="buttons"> <span class="delete-btn"></span> <span class="like-btn"></span> </div> <div class="image"> <img src="item-2.jpg" alt=""/> </div> <div class="description"> <span>Maison Jack</span> <span>Leather Jacket</span> <span>Black</span> </div> <div class="quantity"> <button class="plus-btn" type="button" name="button"> <img src="plus.svg" alt="" /> </button> <input type="text" name="name" value="1"> <button class="minus-btn" type="button" name="button"> <img src="minus.svg" alt="" /> </button> </div> <div class="total-price">₹3499</div> </div> <!-- Product #3 --> <div class="item"> <div class="buttons"> <span class="delete-btn"></span> <span class="like-btn"></span> </div> <div class="image"> <img src="item-3.jpg" alt="" /> </div> <div class="description"> <span>Woodland</span> <span>Sneaker shoes</span> <span>Brown</span> </div> <div class="quantity"> <button class="plus-btn" type="button" name="button"> <img src="plus.svg" alt="" /> </button> <input type="text" name="name" value="1"> <button class="minus-btn" type="button" name="button"> <img src="minus.svg" alt="" /> </button> </div> <div class="total-price">₹6999</div> </div> </div>
Now, let’s add some style to our body:
* { box-sizing: border-box; } html, body { width: 100%; height: 100%; padding: 10px; margin: 0; background-color: rgb(6, 146, 151); font-family: 'Roboto', sans-serif; }
Now, it’s time to add dimensions to the cart and style it to look nice. We are using flexbox, so we set it to display flex and make the flex direction column, because by default the flex direction is set as row.
.shopping-cart { width: 750px; height: 423px; margin: 80px auto; background: rgb(0, 3, 3); box-shadow: 1px 2px 3px 0px rgba(0,0,0,0.10); border-radius: 6px; display: flex; flex-direction: column; }
Next step is to style the basic structure of the shopping cart:
.title { height: 60px; border-bottom: 1px solid rgb(108, 201, 224); padding: 20px 30px; color: rgb(255, 255, 255); font-size: 18px; font-weight: 400; } .item { padding: 20px 30px; height: 120px; display: flex; } .item:nth-child(3) { border-top: 1px solid #E1E8EE; border-bottom: 1px solid #E1E8EE; }
The first elements are the delete and favorite buttons. Here, we have implemented the twitter heart button animation:
/* Buttons - Delete and Like */ .buttons { position: relative; padding-top: 30px; margin-right: 60px; } .delete-btn { display: inline-block; cursor: pointer; width: 18px; height: 17px; background: url("delete-icn.svg") no-repeat center; margin-right: 20px; } .like-btn { position: absolute; top: 9px; left: 15px; display: inline-block; background: url('twitter-heart.png'); width: 60px; height: 60px; background-size: 2900%; background-repeat: no-repeat; cursor: pointer; }
In this step, we set class “is-active” for when we click the button to animate it using jQuery:
.is-active { animation-name: animate; animation-duration: .8s; animation-iteration-count: 1; animation-timing-function: steps(28); animation-fill-mode: forwards; } @keyframes animate { 0% { background-position: left; } 50% { background-position: right; } 100% { background-position: right; } }
Next step is the product image which needs a 50px right margin:
/* Product Image */ .image { margin-right: 50px; } /* Product Description */ .description { padding-top: 10px; margin-right: 60px; width: 115px; color: antiquewhite } .description span { display: block; font-size: 14px; color: antiquewhite font-weight: 400; } .description span:first-child { margin-bottom: 5px; } .description span:last-child { font-weight: 300; margin-top: 8px; color: #86939E; }
After this, we need to add a quantity element, where we have two buttons for adding or removing product quantity:
/* Product Quantity */ .quantity { padding-top: 20px; margin-right: 60px; } .quantity input { -webkit-appearance: none; border: none; text-align: center; width: 32px; font-size: 16px; color: #43484D; font-weight: 300; } button[class*=btn] { width: 30px; height: 30px; background-color: #E1E8EE; border-radius: 6px; border: none; cursor: pointer; } .minus-btn img { margin-bottom: 3px; } .plus-btn img { margin-top: 2px; } button:focus, input:focus { outline:0; }
Now, the final section is the total price of the product:
/* Total Price */ .total-price { width: 83px; padding-top: 27px; text-align: center; font-size: 16px; color: antiquewhite; font-weight: 300; }
Finally, to make you shopping cart responsive:
/* Responsive */ @media (max-width: 800px) { .shopping-cart { width: 100%; height: auto; overflow: hidden; } .item { height: auto; flex-wrap: wrap; justify-content: center; } .image img { width: 50%; } .image, .quantity, .description { width: 100%; text-align: center; margin: 6px 0; } .buttons { margin-right: 20px; } }
This was all about styling the shopping cart. Now we have to use JavaScript functions to make the heart animate when we click on it:
$('.like-btn').on('click', function() { $(this).toggleClass('is-active'); });
And finally,let’s make the quantity buttons work:
$('.minus-btn').on('click', function(e) { e.preventDefault(); var $this = $(this); var $input = $this.closest('div').find('input'); var value = parseInt($input.val()); if (value >1) { value = value - 1; } else { value = 0; } $input.val(value); }); $('.plus-btn').on('click', function(e) { e.preventDefault(); var $this = $(this); var $input = $this.closest('div').find('input'); var value = parseInt($input.val()); if (value < 100) { value = value + 1; } else { value =100; } $input.val(value); });
With this, your shopping cart is now ready. And you can add or remove items from the list. The above codes will give the following output:
These were some of the JavaScript Projects. with this, we have come to the end of this article. I hope you understood the different level of projects and got the idea on how to build your own applications or projects using JavaScript.
Now that you know about JavaScript Loops, check out the Web Development Certification Training by Edureka. Web Development Certification Training will help you learn how to create impressive websites using HTML5, CSS3, Twitter Bootstrap 3, jQuery and Google APIs and deploy it to Amazon Simple Storage Service(S3).
Check out the Angular certification training course by Edureka, a trusted online learning company with a network of more than 250,000 satisfied learners spread across the globe. Angular is a JavaScript framework that is used to create scalable, enterprise, and performance client-side web applications. With Angular framework adoption being high, performance management of the application is community-driven indirectly driving better job opportunities.
If you want to get trained in React and wish to develop interesting UI’s on your own, then check out the Best React JS Course by Edureka, a trusted online learning company with a network of more than 250,000 satisfied learners spread across the globe.
Take your design skills to the next level with our UI UX Design Course Online.
Got a question for us? Please mention it in the comments section of “JavaScript Projects” and we will get back to you.
Course Name | Date | Details |
---|---|---|
Web Developer Certification Training Course | Class Starts on 2nd November,2024 2nd November SAT&SUN (Weekend Batch) | View Details |
Web Developer Certification Training Course | Class Starts on 4th January,2025 4th January SAT&SUN (Weekend Batch) | View Details |
edureka.co