JavaScript-Projekte – Wissen, wie man seine eigene Webanwendung erstellt
Nach einer Umfrage von Hirekind erfordern etwa ein Drittel aller programmierbezogenen Jobs, die auf Websites aufgeführt sind, JavaScript-Kenntnisse. Außerdem bildet JavaScript die Grundlage für 95,1 % aller aktiven Websites. Es ist ein wesentlicher Bestandteil der Web-Entwicklung und in diesem Artikel werden wir in der folgenden Reihenfolge einige JavaScript-Projekte besprechen, die Ihnen helfen werden, Anwendungen selbst zu erstellen:
- Karriere in JavaScript
- JavaScript-Projekte
- Analoguhr
- Wählen Sie Ihre Farbe
- To-Do-Liste
- Einkaufswagen
Karriere in JavaScript
Im Jahr 2018 wurden in Indien fast 34k JavaScript-Jobs geschaffen. Und die Zahl steigt jeden Tag. JavaScript ist eine der Top-Sprachen, die eine enorme Anzahl von Jobs schafft.
Es gibt so viele Möglichkeiten für JavaScript-Entwickler, wie Sie Ihre eigene Portfolio-Website aufbauen und freiberufliche Projekte zusammen mit den regulären JavaScript-Jobs machen können. Mit dem Wachstum in JavaScript-Jobs, kann es ein Teil aller Arten von Branchen wie Finanzen, Versicherungen und Telekommunikation werden. Werfen wir einen Blick auf einige der Schlüsselrollen in JavaScript zusammen mit ihrem Gehalt:
- Front-End-Web-Entwickler – Das durchschnittliche Gehalt für Front-End-Entwickler in Indien reicht um 4.00.000 bis 4.50.000 pro Jahr.
- Web Application Developer – Das durchschnittliche Gehalt für Web-Entwickler in Indien ist Rs. 2.80.727 pro Jahr.
- JavaScript Entwickler – Für JavaScript Entwickler liegt das durchschnittliche Gehalt in Indien bei Rs. 4,25,863 pro Jahr.
- Web Designer – Das durchschnittliche Gehalt eines UI Designers in Indien liegt bei Rs. 5,07,943 pro Jahr.
- Full-Stack Entwickler – Das durchschnittliche Gehalt eines Full-Stack Entwicklers in Indien liegt bei Rs. 500000 pro Jahr.
Nun, da Sie über das Karrierewachstum Bescheid wissen, lassen Sie uns einen Blick auf einige der JavaScript-Projekte werfen, die Ihnen helfen werden, die Skriptsprache besser zu verstehen und auch Ihre eigenen Projekte zu erstellen.
JavaScript-Projekte
Die JavaScript-Projekte sind in drei Stufen unterteilt – Basic, Intermediate und Advance. Wir besprechen die verschiedenen Ebenen der Projekte und wie der JavaScript-Code funktioniert. Dies wird Ihnen helfen, die Skriptsprache besser zu verstehen und Ihnen die Idee vermitteln, eigene Anwendungen mit JavaScript zu erstellen. Beginnen wir also mit dem JavaScript-Projekt der Grundstufe.
Analoge Uhr
Im ersten Projekt werden wir eine einfache analoge Uhr mit Hilfe von HTML-Canvas bauen.
Der erste Schritt ist die Erstellung eines Canvas. Die Uhr benötigt einen HTML-Container:
<!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>
Dieser HTML-Code erzeugt die Leinwand für die Uhr und erstellt die Funktion zum Zeichnen der Uhr. Der nächste Schritt ist nun das Zeichnen des Ziffernblatts der Uhr. Jetzt brauchen wir eine JavaScript-Funktion, um das Zifferblatt zu zeichnen:
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();}
Nachdem Sie das Zifferblatt der Uhr gezeichnet haben, ist es an der Zeit, Zahlen hinzuzufügen:
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);}}
Nun, bevor wir die Uhr starten, müssen wir die Uhrzeiger hinzufügen:
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);}
Nun, da Sie Ihre analoge Uhr entworfen haben, ist es Zeit, die Uhr zu starten. Um die Uhr zu starten, rufen Sie die Funktion drawClock in Intervallen auf:
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);
Das Einzige, was Sie tun müssen, um die Uhr zu starten, ist, die Funktion drawClock in Intervallen aufzurufen. Damit sind wir mit dem ersten JavaScript-Projekt der Grundstufe fertig. Sie erhalten folgende Ausgabe:
Nun schauen wir uns ein weiteres Basic-Level-Projekt an.
Pick Your Color
Dieses ist ein Farbspiel, bei dem Sie sechs quadratische Kästchen mit verschiedenen Farben haben werden. Nun müssen Sie die richtige Farbe anhand des RGB-Wertes auswählen, der in jeder Runde angegeben wird. Schauen wir uns also die JavaScript-Funktionen an, die benötigt werden, um dieses Spiel zu erstellen:
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 +")";}
Das sind die verschiedenen Funktionen, die Ihr Spiel zum Laufen bringen. Jetzt können Sie auch Stile mit Hilfe von CSS hinzufügen:
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%;}
Wenn Sie mit dem Styling Ihres Spiels fertig sind, ist es an der Zeit, diese Funktionen und Stile in den HTML-Code zu implementieren, um die Grundstruktur Ihres Spiels aufzubauen:
<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>
Damit ist Ihr Spiel fertig und Sie können Farben aus den quadratischen Feldern basierend auf dem RGB-Wert auswählen. Die obigen Codes ergeben folgende Ausgabe:
Nun, da Sie eine Vorstellung davon haben, wie man eine analoge Uhr und ein Farbenspiel baut, lassen Sie uns zur nächsten Ebene der JavaScript-Projekte übergehen.
To-Do-Liste
Die To-Do-Liste hilft Ihnen, eine Liste von Aufgaben zu erstellen, die erledigt werden müssen. Sie können eine Reihe von Aufgaben in die Liste aufnehmen und sie auch wieder entfernen, wenn sie erledigt ist. Dies ist ein Projekt der Mittelstufe. Sehen wir uns also an, wie man verschiedene JavaScript-Funktionen verwendet, um eine To-Do-Liste zu erstellen:
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);
Der nächste Schritt ist das Hinzufügen von Styling-Funktionen zur Liste mit Hilfe von 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;}
Nun, da Sie die Funktionen geschrieben und alle gestylt haben, ist es an der Zeit, die HTML-Struktur für die To-Do-Liste zu erstellen:
<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>
Damit ist Ihre To-Do-Liste fertig und Sie können die Liste der zu erledigenden Aufgaben hinzufügen. Die obigen Codes ergeben folgende Ausgabe:
Nun, da Sie die verschiedenen Projekte der Grundstufe und der Zwischenstufe verstanden haben, lassen Sie uns zum JavaScript-Projekt der fortgeschrittenen Stufe übergehen und einen Einkaufswagen mit Ihren Lieblingsartikeln in der Liste erstellen.
Einkaufswagen
Das Projekt der fortgeschrittenen Stufe soll einen Einkaufswagen mit einer Anzahl von Artikeln erstellen. Es wird den Preis für jeden Artikel anzeigen und Sie können diese Artikel auch hinzufügen oder aus dem Warenkorb entfernen.
Der erste Schritt ist die Erstellung unserer HTML-Struktur. Wir brauchen ein Container-Div, das unser Warenkorb sein wird. Innerhalb des Containers werden wir einen Titel und drei Artikel haben, die folgendes beinhalten werden:
- zwei Schaltflächen – Löschen-Schaltfläche und Favoriten-Schaltfläche
- Produktbild
- Produktname und Beschreibung
- Schaltflächen, die die Menge der Produkte anpassen
- Gesamtpreis
<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>
Nun fügen wir unserem Body einen Stil hinzu:
* {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;}
Nun ist es an der Zeit, dem Warenkorb Dimensionen hinzuzufügen und ihn so zu gestalten, dass er schön aussieht. Wir verwenden Flexbox, also stellen wir ihn auf „display flex“ und machen die Flex-Richtung zur Spalte, denn standardmäßig ist die Flex-Richtung auf „row“ eingestellt.
.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;}
Nächster Schritt ist es, die Grundstruktur des Warenkorbs zu stylen:
.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;}
Die ersten Elemente sind die Lösch- und Favoriten-Buttons. Hier haben wir die Twitter-Herz-Button-Animation implementiert:
/* 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 diesem Schritt setzen wir die Klasse „is-active“ für das Anklicken des Buttons, um ihn mit jQuery zu animieren:
.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; }}
Nächster Schritt ist das Produktbild, das einen 50px rechten Rand benötigt:
/* 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;}
Danach müssen wir ein Mengenelement hinzufügen, in dem wir zwei Schaltflächen zum Hinzufügen oder Entfernen der Produktmenge haben:
/* 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;}
Der letzte Abschnitt ist der Gesamtpreis des Produkts:
/* Total Price */.total-price {width: 83px;padding-top: 27px;text-align: center;font-size: 16px;color: antiquewhite;font-weight: 300;}
Zu guter Letzt, um den Warenkorb responsive zu machen:
/* 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;}}
Das war alles über das Styling des Warenkorbs. Jetzt müssen wir JavaScript-Funktionen verwenden, um das Herz zu animieren, wenn wir darauf klicken:
$('.like-btn').on('click', function() {$(this).toggleClass('is-active');});
Und schließlich müssen wir noch die Mengentasten zum Laufen bringen:
$('.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);});
Damit ist Ihr Warenkorb nun fertig. Und Sie können Artikel aus der Liste hinzufügen oder entfernen. Die obigen Codes ergeben folgende Ausgabe:
Das waren einige der JavaScript-Projekte. Damit sind wir am Ende dieses Artikels angelangt. Ich hoffe, Sie haben die verschiedenen Ebenen der Projekte verstanden und die Idee bekommen, wie Sie Ihre eigenen Anwendungen oder Projekte mit JavaScript erstellen können.
Nun, da Sie über JavaScript-Schleifen Bescheid wissen, schauen Sie sich das Web Development Certification Training von Edureka an. Im Web Development Certification Training lernen Sie, wie Sie beeindruckende Websites mit HTML5, CSS3, Twitter Bootstrap 3, jQuery und Google APIs erstellen und auf Amazon Simple Storage Service(S3) bereitstellen können.
Sie haben eine Frage an uns? Bitte erwähnen Sie sie im Kommentarbereich von „JavaScript-Projekte“ und wir werden uns bei Ihnen melden.