The project aims to create a Checkout App using JS and Bootstrap.
- Your company has recently started on a project that aims to create a Checkout Page. So you and your colleagues have started to work on the project.
Checkout Page (folder)
|
|----readme.md
|----index.html
|----checkout.js
|----img (folder)
|----css (folder)
|----index.css
|----checkout.css
|----universal.css
- HTML
- select
- strong
- del
- CSS
- Nested CSS
- text-decoration: line-through
.nav__list--btn {
color: orangered;
font-size: 14px;
cursor: pointer;
& i:hover {
color: white;
border-radius: 50%;
background-color: #ff7623;
}
}
.line-through {
text-decoration: line-through;
}
-
JS
-
DOM Manipulations
- innerHTML
- innerText
- textContent
-
DOM Selectors
-
querySelector
-
querySelectorAll
-
const productList = document.querySelector("div.main__product-painel"); //?basina div yazarak belirtirsek performans acisindan daha hizli olur
-
Events
- click
- load
-e.target & e.currentTarget
e.currentTarget.firstElementChild.innerText = "My Cart"; //? NOT:e.target tiklanan elementi verirken e.currentTarget sabittir ve addEventListener in tanimlandigi elemandir burda navbarList ve daha hizlidir
-
Capturing & Bubbling
-
DOM Traversing
- nextElementSibling
- e.target.closest(".main__product-info"
- if (e.target.classList.contains("fa-plus"))
- e.target.previousElementSibling.innerText++;
- firstElementChild
- children
-
localStorage & sessionStorage
-
Array Methods
-
forEach() & reduce()
productTotalPriceDivs.forEach(eachProductTotalPriceDiv => { subtotal += parseFloat(eachProductTotalPriceDiv.innerText) });
reduce() const subTotalAlternatif = [...productPriceDivs]; //reduce icin array a dönüstürmeliyiz let subtotal = subTotalAlternatif.reduce((acc, curr) => { return acc + parseFloat(curr.innerText); //parseFloat stringten float yapar }, 0);
-
parseFloat
const taxPrice = parseFloat(subtotal * localStorage.getItem("taxRate")); parseFloat stringten float yapar
-
if else - if - else conditions
-
Ternary
let shipping = (subtotal > 0 ? parseFloat(localStorage.getItem("shippingPrice")) : 0);
-
String Methods( toFixed() )
productTotalPriceDiv.innerText = (productQuantity * productPrice).toFixed(2);
-
-
improve coding skills within HTML, CSS and JS
-
use git commands (push, pull, commit, add etc.) and Github as a Version Control System.
- You can use HTML, CSS and JS to complete this project.
⌛ Happy Coding ✍