Proyectos JavaScript- Conoce cómo construir tu propia aplicación web
Según una encuesta realizada por Hirekind, alrededor de un tercio de todos los trabajos relacionados con la programación que aparecen en los sitios requieren conocimientos de JavaScript. Además, JavaScript proporciona la base del 95,1% de todos los sitios web activos. Es una parte esencial del desarrollo web y en este artículo, vamos a discutir algunos de los proyectos de JavaScript que le ayudará a construir aplicaciones por su cuenta en la siguiente secuencia:
- Carrera en JavaScript
- Proyectos de JavaScript
- Reloj analógico
- Elige tu color
- Lista de tareas
- Carro de la compra
Carrera en JavaScript
En 2018, hubo casi 34k puestos de trabajo de JavaScript creados en la India. Y el número aumenta cada día. JavaScript es uno de los principales lenguajes que está creando un enorme número de puestos de trabajo.
Hay tanto alcance para los desarrolladores de JavaScript como puede construir su propio sitio de cartera y hacer proyectos de freelance junto con los trabajos regulares de JavaScript. Con el crecimiento de los puestos de trabajo de JavaScript, puede convertirse en una parte de todo tipo de industrias como las finanzas, los seguros y las telecomunicaciones. Echemos un vistazo a algunos de los roles clave en JavaScript junto con su salario:
- Desarrollador Web Front End – El salario promedio para los desarrolladores de Front End en la India oscila alrededor de 4,00,000 a 4,50,000 por año.
- Desarrollador de aplicaciones web – El salario promedio para los desarrolladores web en la India es de 2,80,727 rupias por año.
- Desarrollador de JavaScript – Para los desarrolladores de JavaScript, el salario medio en la India es de 4.25.863 rupias al año.
- Diseñador web – El salario medio de un diseñador de interfaz de usuario en la India es de alrededor de 5.07.943 rupias al año.
- Desarrollador de pila completa – El salario medio de un desarrollador de pila completa en la India es de alrededor de 500000 rupias por año.
Ahora que sabes sobre el crecimiento de la carrera, echemos un vistazo a algunos de los Proyectos de JavaScript que te ayudarán a entender mejor el lenguaje de scripting y también a construir tus propios proyectos.
Proyectos de JavaScript
Los Proyectos de JavaScript se dividen en tres niveles- Básico, Intermedio y Avanzado. Discutiremos los diferentes niveles de proyectos y cómo funciona el código JavaScript. Esto le ayudará a entender mejor el lenguaje de scripting y le proporcionará la idea de construir sus propias aplicaciones usando JavaScript. Así que, vamos a empezar con el proyecto JavaScript de nivel básico.
Reloj analógico
En el primer proyecto, vamos a construir un simple reloj analógico con la ayuda de un lienzo HTML.
El primer paso es crear un lienzo. El reloj necesita un contenedor HTML:
<!DOCTYPE html><html><body><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.90setInterval(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();//hourhour = 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);//minuteminute = (minute*Math.PI/30)+(second*Math.PI/(30*60));drawHand(ctx, minute, radius*0.8, radius*0.07);// secondsecond = (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>
Este código HTML crea el lienzo para el reloj y crea la función para dibujar el reloj. Ahora el siguiente paso es dibujar la cara del reloj. Ahora, necesitamos una función JavaScript para dibujar la cara:
function drawClock() { //Create a function for drawing the clock facedrawFace(ctx, radius);}function drawFace(ctx, radius) {var grad;ctx.beginPath(); //Draw the white circlectx.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 gradientgrad.addColorStop(0, '#333'); //Create 3 color stops, corresponding with the inner, middle, and outer edge of the arcgrad.addColorStop(0.5, 'white');grad.addColorStop(1, '#333');ctx.strokeStyle = grad; //Define the gradient as the stroke style of the drawing objectctx.lineWidth = radius*0.1; //Define the line width of the drawing objectctx.stroke(); //Draw the circlectx.beginPath(); //Draw the clock centerctx.arc(0, 0, radius * 0.1, 0, 2 * Math.PI);ctx.fillStyle = '#333';ctx.fill();}
Una vez dibujada la cara del reloj, es el momento de añadir números:
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 radiusctx.textBaseline = "middle"; //Set the text alignment to the middle and the center of the print positionctx.textAlign = "center";for(num = 1; num < 13; num++){ //Calculate the print position to 85% of the radius, rotated for each numberang = 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);}}
Ahora, antes de poner en marcha el reloj tenemos que añadir las manecillas del reloj:
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, secondvar hour = now.getHours();var minute = now.getMinutes();var second = now.getSeconds();//hourhour = hour%12; //Calculate the angle of the hour hand, and draw it a length, and a widthhour = (hour*Math.PI/6)+(minute*Math.PI/(6*60))+(second*Math.PI/(360*60));drawHand(ctx, hour, radius*0.5, radius*0.07);//minuteminute = (minute*Math.PI/30)+(second*Math.PI/(30*60));drawHand(ctx, minute, radius*0.8, radius*0.07);// secondsecond = (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);}
Ahora que has diseñado tu reloj analógico, es el momento de ponerlo en marcha. Para poner en marcha el reloj, llama a la función drawClock a intervalos:
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);
Lo único que tienes que hacer para poner en marcha el reloj es llamar a la función drawClock a intervalos. Con esto, hemos terminado con el primer Proyecto JavaScript de nivel básico. Te dará la siguiente salida:
Ahora vamos a echar un vistazo a otro proyecto de nivel básico.
Escoge tu color
Se trata de un juego de colores en el que tendrás seis cajas cuadradas con diferentes colores. Ahora, tienes que elegir el color correcto basado en el valor RGB proporcionado durante cada ronda. Así que vamos a echar un vistazo a las funciones de JavaScript que se requieren para construir este juego:
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) {square.style.background = colors;} else {square.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.style.background = colors;square.style.display = "block";}});resetButton.addEventListener("click", function(){//generate all new colorscolors = generateRandomColors(numSquares);//pick a new random color from the arraypickedColor = pickColor();//change colorDisplay to match picked colorrgbCode.textContent = pickedColor;this.textContent = "New Color";messageDisplay.textContent = "";//change colors of squaresfor (var i = 0; i < square.length; i++) {square.style.background = colors;}h1.style.background = "steelblue";})rgbCode.textContent = pickedColor;for(var i = 0; i < square.length; i++) {//add initial colors to squaressquare.style.background = colors;//add click listeners to squaressquare.addEventListener("click", function() {//grab color of picked squarevar clickedColor = this.style.background;//compare color to pickedColorif (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 squaresfor (var i = 0; i < square.length; i++) {//change each color to match given colorsquare.style.background = color;}}function pickColor(){var random = Math.floor(Math.random() * colors.length)return colors;}function generateRandomColors(num){//make and arrayvar arr = //add num random colors to arrayfor (var i = 0; i < num; i++) {arr.push(randomColor())//get random color and push into array}//return that arrayreturn arr;}function randomColor(){//pick a "red" from 0-255var r = Math.floor(Math.random() * 256)//pick a "green" from 0-255var g = Math.floor(Math.random() * 256)//pick a "blue" from 0-255var b = Math.floor(Math.random() * 256)return "rgb(" + r +", " + g + ", " + b +")";}
Estas son las diferentes funciones que harán que su juego funcione. Ahora, también puedes añadir estilos con la ayuda de 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%;}
Una vez que hayas terminado de dar estilo a tu juego, es el momento de implementar estas funciones y estilos en el código HTML para construir la estructura básica de tu juego:
<head><meta charset="utf-8"><title>Color Game</title></head><link rel="stylesheet" href="colorgamestyle.css"><body><h1>Pick your Shade<br><span>RGB</span><br>Pick and Play</h1><div><button>Change Colors</button><span></span><button>Easy</button><button class="selected" id ="hardBtn">Hard</button></div><div><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>
Con esto, tu juego está listo y puedes elegir los colores de las cajas cuadradas basándote en el valor RGB. Los códigos anteriores darán la siguiente salida:
Ahora que tienes una idea sobre la construcción de un reloj analógico y un juego de colores, vamos a pasar al siguiente nivel de Proyectos JavaScript.
Lista de tareas
La lista de tareas te ayuda a crear una lista de tareas que deben ser completadas. Puedes añadir un número de tareas en la lista y también eliminarlas una vez que se haya completado. Este es un proyecto de nivel intermedio. Así que vamos a ver cómo utilizar diferentes funciones de JavaScript para crear una lista de tareas:
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 textul.appendChild(li); //adds li to ulinput.value = ""; //Reset text input field//Start Strikethrough// because it's in the function, it only adds it for new itemsfunction crossOut() {li.classList.toggle("done");}li.addEventListener("click",crossOut);//End strikethrough// Start add delete buttonvar 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 licreateListElement();}}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 === 13createListElement();}}enterButton.addEventListener("click",addListAfterClick);input.addEventListener("keypress", addListAfterKeypress);
El siguiente paso es añadir características de estilo a la lista con la ayuda de 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;}
Ahora que has escrito las funciones y les has dado estilo a todas, es el momento de crear la estructura HTML para la lista de tareas:
<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>Enter text into the input field to add items to your list.</p><p>Click the item to mark it as complete.</p><p>Click the "X" to remove the item from your list.</p></div></div><div class="row"><div class="col-12"><input type="text" placeholder="New item..." maxlength="27"><button><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>
Con esto, tu lista de tareas está lista y puedes añadir la lista de tareas que hay que completar. Los códigos anteriores darán la siguiente salida:
Ahora que has entendido los diferentes proyectos de nivel básico e intermedio, vamos a pasar al Proyecto JavaScript de nivel avanzado y a crear un carrito de la compra con tus artículos favoritos en la lista.
Carrito de la compra
El proyecto de nivel avanzado consiste en crear un carrito de la compra con un número de artículos. Nos proporcionará el precio de cada artículo y además podremos añadir o eliminar estos artículos del carrito.
El primer paso es crear nuestra estructura HTML. Necesitamos un div contenedor que será nuestro carrito de la compra. Dentro del contenedor, tendremos un título y tres artículos que incluirán:
- Dos botones – botón de eliminar y botón de favorito
- Imagen del producto
- Nombre y descripción del producto
- Botones que ajustarán la cantidad de productos
- Precio total
<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>
Ahora, vamos a añadir algo de estilo a nuestro cuerpo:
* {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;}
Ahora, es el momento de añadir dimensiones al carrito y darle estilo para que se vea bien. Estamos usando flexbox, así que lo configuramos para mostrar flex y hacemos que la dirección de flex sea columna, ya que por defecto la dirección de flex está configurada como fila.
.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;}
El siguiente paso es estilizar la estructura básica del carrito de la compra:
.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;}
Los primeros elementos son los botones de eliminar y favoritos. Aquí hemos implementado la animación del botón de corazón de twitter:
/* 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;}
En este paso, establecemos la clase «is-active» para que cuando hagamos clic en el botón se anime usando 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; }}
El siguiente paso es la imagen del producto que necesita un margen derecho de 50px:
/* 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: antiquewhitefont-weight: 400;}.description span:first-child {margin-bottom: 5px;}.description span:last-child {font-weight: 300;margin-top: 8px;color: #86939E;}
Después de esto, tenemos que añadir un elemento de cantidad, donde tenemos dos botones para añadir o quitar la cantidad de producto:
/* 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 {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;}
Ahora, la sección final es el precio total del producto:
/* Total Price */.total-price {width: 83px;padding-top: 27px;text-align: center;font-size: 16px;color: antiquewhite;font-weight: 300;}
Por último, para que el carrito de la compra sea responsivo:
/* 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;}}
Esto ha sido todo sobre el estilo del carrito de la compra. Ahora tenemos que usar funciones de JavaScript para que el corazón se anime cuando hagamos clic en él:
$('.like-btn').on('click', function() {$(this).toggleClass('is-active');});
Y por último, vamos a hacer que los botones de cantidad funcionen:
$('.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);});
Con esto, tu carrito de la compra ya está listo. Y puedes añadir o eliminar artículos de la lista. Los códigos anteriores darán la siguiente salida:
Estos fueron algunos de los Proyectos JavaScript. con esto, hemos llegado al final de este artículo. Espero que hayas entendido los diferentes niveles de proyectos y tengas la idea de cómo construir tus propias aplicaciones o proyectos utilizando JavaScript.
Ahora que sabes sobre los bucles de JavaScript, echa un vistazo a la Formación de Certificación de Desarrollo Web por Edureka. La Formación de Certificación en Desarrollo Web te ayudará a aprender a crear sitios web impresionantes utilizando HTML5, CSS3, Twitter Bootstrap 3, jQuery y Google APIs y a desplegarlo en Amazon Simple Storage Service(S3).
¿Tienes alguna pregunta para nosotros? Por favor, menciónala en la sección de comentarios de «Proyectos JavaScript» y nos pondremos en contacto contigo.