Projekty JavaScript- Wiedzieć Jak Zbudować Własną Aplikację Internetową
Według ankiety przeprowadzonej przez Hirekind, około jedna trzecia wszystkich ofert pracy związanych z programowaniem wymienionych na stronach internetowych wymaga biegłości w JavaScript. Ponadto, JavaScript stanowi podstawę dla 95.1% wszystkich aktywnych stron internetowych. Jest on istotną częścią tworzenia stron internetowych, a w tym artykule omówimy niektóre z projektów JavaScript, które pomogą Ci samodzielnie budować aplikacje w następującej kolejności:
- Kariera w JavaScript
- Projekty JavaScript
- Zegar analogowy
- Wybierz swój kolor
- Lista rzeczy do zrobienia
- Kartka na zakupy
Kariera w JavaScript
W 2018 roku w Indiach powstało prawie 34k miejsc pracy w JavaScript. A liczba ta rośnie z każdym dniem. JavaScript jest jednym z najlepszych języków, który tworzy ogromną liczbę miejsc pracy.
Jest tak wiele możliwości dla programistów JavaScript, takich jak możesz zbudować własną stronę portfolio i robić projekty freelancingowe wraz z regularnymi ofertami pracy w JavaScript. Wraz ze wzrostem liczby miejsc pracy w JavaScript, może on stać się częścią wszystkich rodzajów przemysłu, takich jak finanse, ubezpieczenia i telekomunikacja. Spójrzmy na niektóre z kluczowych ról w JavaScript wraz z ich wynagrodzeniem:
- Front End Web Developer – Średnia pensja dla Front End Developerów w Indiach wynosi około 4,00,000 do 4,50,000 rocznie.
- Web Application Developer – Średnia pensja dla Web Developerów w Indiach wynosi Rs. 2,80,727 rocznie.
- JavaScript Developer – Dla programistów JavaScript, średnia pensja w Indiach wynosi Rs 4,25,863 rocznie.
- Web Designer – Średnia pensja UI Designer w Indiach wynosi około Rs. 5,07,943 rocznie.
- Full-Stack Developer – Średnia pensja Full Stack Developer w Indiach wynosi około Rs.500000 rocznie.
Teraz, gdy już wiesz o rozwoju kariery, spójrzmy na niektóre z projektów JavaScript, które pomogą Ci lepiej zrozumieć język skryptowy, a także budować własne projekty.
Projekty JavaScript
Projekty JavaScript są podzielone na trzy poziomy- Podstawowy, Średniozaawansowany i Zaawansowany. Omówimy różne poziomy projektów i sposób działania kodu JavaScript. Pomoże to Państwu lepiej zrozumieć język skryptowy i dostarczy pomysłów do budowania własnych aplikacji przy użyciu JavaScript. Tak więc, zacznijmy od podstawowego poziomu projektu JavaScript.
Zegar analogowy
W pierwszym projekcie, zbudujemy prosty zegar analogowy z pomocą HTML canvas.
Pierwszym krokiem jest stworzenie płótna. Zegar potrzebuje kontenera 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>
Ten kod HTML tworzy płótno dla zegara i tworzy funkcję do narysowania zegara. Teraz następnym krokiem jest narysowanie tarczy zegara. Teraz potrzebujemy funkcji JavaScript do narysowania tarczy:
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();}
Po narysowaniu tarczy zegara, nadszedł czas na dodanie liczb:
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);}}
Teraz, zanim uruchomimy zegar musimy dodać wskazówki zegara:
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);}
Teraz, gdy zaprojektowałeś już swój zegar analogowy, czas uruchomić zegar. Aby uruchomić zegar, wywołaj funkcję drawClock w odstępach czasu:
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);
Jedyną rzeczą, którą musisz zrobić, aby uruchomić zegar, jest wywołanie funkcji drawClock w odstępach czasu. W ten sposób zakończyliśmy pierwszy projekt JavaScript na poziomie podstawowym. Otrzymasz następujące wyjście:
Teraz spójrzmy na inny projekt poziomu podstawowego.
Pick Your Color
To jest gra w kolory, w której będziesz miał sześć kwadratowych pudełek w różnych kolorach. Teraz musisz wybrać odpowiedni kolor na podstawie wartości RGB podanej podczas każdej rundy. Spójrzmy więc na funkcje JavaScript, które są wymagane do zbudowania tej gry:
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 +")";}
To są różne funkcje, które sprawią, że twoja gra będzie działać. Teraz możesz również dodać style za pomocą 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%;}
Jak już skończysz stylizować swoją grę, nadszedł czas, aby zaimplementować te funkcje i style w kodzie HTML, aby zbudować podstawową strukturę swojej gry:
<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>
Dzięki temu twoja gra jest gotowa i możesz wybierać kolory z kwadratowych pól na podstawie wartości RGB. Powyższe kody dadzą następujące wyjście:
Teraz, gdy masz już pomysł na zbudowanie zegara analogowego i gry kolorowej, przejdźmy do następnego poziomu Projektów JavaScript.
Lista rzeczy do zrobienia
Lista rzeczy do zrobienia pomaga stworzyć listę zadań, które mają być wykonane. Możesz dodać wiele zadań do listy, a także usunąć je po zakończeniu. Jest to projekt na poziomie średniozaawansowanym. Zobaczmy więc, jak wykorzystać różne funkcje JavaScript do stworzenia listy rzeczy do zrobienia:
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);
Następnym krokiem jest dodanie cech stylowych do listy za pomocą 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;}
Teraz, gdy już napisałeś funkcje i nadałeś im styl, nadszedł czas na stworzenie struktury HTML dla listy rzeczy do zrobienia:
<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>
Dzięki temu Twoja lista rzeczy do zrobienia jest gotowa i możesz dodać listę zadań, które mają być wykonane. Powyższe kody dadzą następujące wyjście:
Jak już zrozumiałeś różne projekty poziomu podstawowego i średniozaawansowanego, przejdźmy do projektu JavaScript poziomu zaawansowanego i stwórzmy koszyk na zakupy z twoimi ulubionymi przedmiotami na liście.
Koszyk na zakupy
Projekt poziomu zaawansowanego ma na celu stworzenie koszyka na zakupy z wieloma przedmiotami. Będzie on zawierał cenę każdego przedmiotu, a także możliwość dodania lub usunięcia tych przedmiotów z koszyka.
Pierwszym krokiem jest stworzenie naszej struktury HTML. Potrzebujemy kontenera div, który będzie naszym koszykiem na zakupy. Wewnątrz kontenera, będziemy mieli tytuł i trzy elementy, które będą zawierać:
- dwa przyciski – przycisk usuń oraz przycisk ulubione
- obrazek produktu
- nazwa i opis produktu
- przyciski, które będą dostosowywały ilość produktów
- cena całkowita
<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>
Teraz dodajmy trochę stylu do naszego ciała:
* {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;}
Teraz czas dodać wymiary do koszyka i nadać mu ładny wygląd. Używamy flexboxa, więc ustawiamy go na wyświetlanie flexa i ustawiamy kierunek flexa na kolumnę, ponieważ domyślnie kierunek flexa jest ustawiony jako wiersz.
.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;}
Następnym krokiem jest wystylizowanie podstawowej struktury koszyka:
.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;}
Pierwszymi elementami są przyciski usuń i ulubione. Tutaj mamy zaimplementowaną animację przycisku z twitterowym serduszkiem:
/* 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;}
W tym kroku ustawiamy klasę „is-active” dla momentu kliknięcia przycisku, aby animować go za pomocą 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; }}
Następnym krokiem jest obrazek produktu, który potrzebuje 50px prawego marginesu:
/* 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;}
Po tym musimy dodać element quantity, gdzie mamy dwa przyciski do dodawania i usuwania ilości produktu:
/* 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;}
Teraz ostatnia sekcja to cena całkowita produktu:
/* Total Price */.total-price {width: 83px;padding-top: 27px;text-align: center;font-size: 16px;color: antiquewhite;font-weight: 300;}
Na koniec, aby koszyk był responsywny:
/* 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;}}
To było wszystko o stylizacji koszyka. Teraz musimy użyć funkcji JavaScript, aby serce animowało się, gdy na nie klikniemy:
$('.like-btn').on('click', function() {$(this).toggleClass('is-active');});
I na koniec, sprawmy, aby przyciski ilości działały:
$('.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);});
Dzięki temu, Twój koszyk jest już gotowy. I możesz dodawać lub usuwać produkty z listy. Powyższe kody dadzą następujące dane wyjściowe:
To były niektóre z projektów JavaScript. z tym, doszliśmy do końca tego artykułu. Mam nadzieję, że zrozumiałeś różne poziomy projektów i masz pomysł na to, jak budować własne aplikacje lub projekty przy użyciu JavaScript.
Teraz, gdy wiesz o pętlach JavaScript, sprawdź szkolenie certyfikacyjne Web Development Certification Training by Edureka. Szkolenie certyfikacyjne Web Development pomoże Ci nauczyć się jak tworzyć imponujące strony internetowe przy użyciu HTML5, CSS3, Twitter Bootstrap 3, jQuery i Google API oraz wdrożyć je do Amazon Simple Storage Service(S3).
Masz do nas pytanie? Proszę wspomnieć o tym w sekcji komentarzy „Projekty JavaScript”, a my skontaktujemy się z Tobą.