JavaScript Projecten – Weet hoe je je eigen webapplicatie bouwt
Volgens een onderzoek van Hirekind vereist ongeveer een derde van alle programmeer-gerelateerde banen die op sites staan vermeld, JavaScript-vaardigheid. JavaScript vormt ook de basis voor 95,1% van alle actieve websites. Het is een essentieel onderdeel van webontwikkeling en in dit artikel bespreken we enkele van de JavaScript-projecten waarmee je zelf applicaties kunt bouwen, in de volgende volgorde:
- Carrière in JavaScript
- JavaScript-projecten
- Analoge klok
- Kies je kleur
- To-Do Lijst
- Winkelwagentje
Carrière in JavaScript
In 2018 waren er bijna 34k JavaScript-banen gecreëerd in India. En het aantal neemt elke dag toe. JavaScript is een van de toptalen die een enorm aantal banen creëert.
Er is zo veel ruimte voor JavaScript-ontwikkelaars zoals je je eigen portfoliosite kunt bouwen en freelanceprojecten kunt doen, samen met de reguliere JavaScript-banen. Met de groei in JavaScript banen, kan het een onderdeel worden van alle soorten industrieën zoals financiën, verzekeringen en telecommunicatie. Laten we eens kijken naar een aantal van de belangrijkste rollen in JavaScript, samen met hun salaris:
- Front End Web Developer – Het gemiddelde salaris voor Front End Developers in India varieert rond de 4.00.000 tot 4.50.000 per jaar.
- Web Application Developer – Het gemiddelde salaris voor Web Developers in India is Rs. 2.80.727 per jaar.
- JavaScript Developer – Voor JavaScript ontwikkelaars ligt het gemiddelde salaris in India op Rs. 4.25.863 per jaar.
- Web Designer – Het gemiddelde salaris van een UI Designer in India ligt rond Rs. 5.07.943 per jaar.
- Full-Stack Developer – Het gemiddelde salaris van een Full Stack Developer in India ligt rond Rs.500000 per jaar.
Nu je meer weet over de carrièregroei, laten we eens kijken naar enkele van de JavaScript-projecten die je zullen helpen de scripttaal beter te begrijpen en ook je eigen projecten te bouwen.
JavaScript Projecten
De JavaScript-projecten zijn verdeeld in drie niveaus – Basis, Intermediair en Gevorderd. We bespreken de verschillende projectniveaus en hoe de JavaScript-code werkt. Dit zal je helpen om de scripttaal beter te begrijpen en je het idee geven om je eigen applicaties te bouwen met JavaScript. Laten we beginnen met het JavaScript-project van het basisniveau.
Analoge klok
In het eerste project bouwen we een eenvoudige analoge klok met behulp van HTML canvas.
De eerste stap is het maken van een canvas. De klok heeft een HTML-container nodig:
<!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>Deze HTML-code maakt het canvas voor de klok en creëert de functie om de klok te tekenen. De volgende stap is het tekenen van de wijzerplaat van de klok. We hebben een JavaScript-functie nodig om de wijzerplaat te tekenen:
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();}Als je de wijzerplaat hebt getekend, is het tijd om getallen toe te voegen:
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);}}Nu, voordat we de klok starten, moeten we de wijzers toevoegen:
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);}Nu je je analoge klok hebt ontworpen, is het tijd om de klok te starten. Om de klok te starten, roep je met tussenpozen de functie drawClock aan:
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);Het enige wat je hoeft te doen om de klok te starten, is met tussenpozen de functie drawClock aan te roepen. Hiermee zijn we klaar met het eerste basisniveau JavaScript Project. Het zal de volgende output geven:
Nu gaan we eens kijken naar een ander basisniveau project.
Pick Your Color
Dit is een kleurenspel waarbij je zes vierkante vakjes met verschillende kleuren zult hebben. Nu moet je de juiste kleur kiezen op basis van de RGB-waarde die tijdens elke ronde wordt gegeven. Laten we eens kijken naar de JavaScript functies die nodig zijn om dit spel te bouwen:
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 +")";}Dit zijn de verschillende functies die je spel zullen laten werken. Je kunt nu ook stijlen toevoegen met behulp van 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%;}Als je klaar bent met het stijlen van je spel, is het tijd om deze functies en stijlen in de HTML-code te implementeren om de basisstructuur van je spel te bouwen:
<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>
Hiermee is je spel klaar en kun je kleuren kiezen uit de vierkante vakjes op basis van de RGB-waarde. De bovenstaande codes geven de volgende uitvoer:
Nu u een idee hebt over het bouwen van een analoge klok en een kleurenspel, gaan we verder met het volgende niveau van JavaScript-projecten.
To-Do-Lijst
De To-Do-Lijst helpt u bij het maken van een lijst met taken die moeten worden voltooid. Je kunt een aantal taken aan de lijst toevoegen en ze ook weer verwijderen als ze af zijn. Dit is een project van gemiddeld niveau. Laten we eens kijken hoe we verschillende JavaScript functies kunnen gebruiken om een takenlijst te maken:
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);De volgende stap is het toevoegen van styling functies aan de lijst met behulp van 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;}Nu je de functies hebt geschreven en ze allemaal hebt gestyled, is het tijd om de HTML-structuur voor de To-Do-lijst te maken:
<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>
Met dit is je To-Do-lijst klaar en kun je een lijst met taken toevoegen die moeten worden voltooid. Bovenstaande codes geven de volgende uitvoer:
Nu u de verschillende projecten op basisniveau en intermediair niveau hebt begrepen, gaan we over naar het JavaScript-project op gevorderd niveau en maken we een winkelwagentje met uw favoriete artikelen in de lijst.
Winkelwagentje
Het project op gevorderd niveau is bedoeld om een winkelwagentje te maken met een aantal artikelen. Het zal de prijs van elk item geven en u kunt ook deze items toevoegen of verwijderen uit uw winkelwagen.
De eerste stap is het maken van onze HTML-structuur. We hebben een container div nodig die ons winkelwagentje wordt. Binnen de container hebben we een titel en drie items, die zullen omvatten:
- twee knoppen – verwijder knop en favoriet knop
- product afbeelding
- product naam en beschrijving
- knoppen die hoeveelheid van producten
- totaal prijs
<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>
Nu, laten we wat stijl toevoegen aan onze 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;}Nu is het tijd om afmetingen aan de winkelwagen toe te voegen en de stijl aan te passen zodat hij er mooi uitziet. We gebruiken flexbox, dus we zetten het op flex weergeven en maken de flex richting kolom, omdat standaard de flex richting is ingesteld als rij.
.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;}De volgende stap is het stijlen van de basisstructuur van de winkelwagen:
.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;}De eerste elementen zijn de verwijder en favoriet knoppen. Hier hebben we de twitter heart knop animatie geimplementeerd:
/* 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 deze stap stellen we class “is-active” in voor wanneer we op de knop klikken om deze te animeren met behulp van 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; }}De volgende stap is de productafbeelding die een 50px rechtermarge nodig heeft:
/* 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;}Daarna moeten we een hoeveelheid element toevoegen, waar we twee knoppen hebben voor het toevoegen of verwijderen van product hoeveelheid:
/* 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;}Nu, de laatste sectie is de totale prijs van het product:
/* Total Price */.total-price {width: 83px;padding-top: 27px;text-align: center;font-size: 16px;color: antiquewhite;font-weight: 300;}Tot slot, om uw winkelwagen responsive te maken:
/* 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;}}Dit was alles over de styling van de winkelwagen. Nu moeten we JavaScript-functies gebruiken om het hartje te laten animeren als we erop klikken:
$('.like-btn').on('click', function() {$(this).toggleClass('is-active');});En tot slot, laten we de hoeveelheidsknoppen werken:
$('.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);});Met dit is uw winkelwagen nu klaar. En u kunt items toevoegen of verwijderen uit de lijst. De bovenstaande codes geven de volgende uitvoer:
Dit waren enkele van de JavaScript-projecten. hiermee zijn we aan het einde van dit artikel gekomen. Ik hoop dat u de verschillende niveaus van projecten hebt begrepen en een idee hebt gekregen over hoe u uw eigen toepassingen of projecten met JavaScript kunt bouwen.
Nu u meer weet over JavaScript Loops, bekijk dan de Web Development Certification Training van Edureka. Web Development Certification Training zal u helpen leren hoe u indrukwekkende websites kunt maken met behulp van HTML5, CSS3, Twitter Bootstrap 3, jQuery en Google API’s en deze te implementeren in Amazon Simple Storage Service (S3).
Heeft u een vraag voor ons? Stel hem dan in de commentaarsectie van “JavaScript Projecten” en we nemen contact met u op.