├── color-picker
├── script.js
├── index.html
└── style.css
├── faq-accordion
├── index.html
├── style.css
└── script.js
├── weather-app
├── index.html
├── style.css
└── script.js
├── number-guessing-game
├── index.html
├── style.css
└── script.js
├── typing-speed-test
├── index.html
├── style.css
└── script.js
├── paint-app
├── index.html
├── style.css
└── script.js
├── todo-list
├── index.html
├── style.css
└── script.js
├── random-quote-generator
├── index.html
├── style.css
└── script.js
├── quiz-app
├── index.html
├── style.css
└── script.js
├── count-down-timer
├── index.html
├── style.css
└── script.js
├── calculator
├── style.css
├── index.html
└── script.js
├── carousel-image-slider
├── script.js
├── index.html
└── style.css
├── audio-app
├── index.html
├── style.css
└── script.js
└── shopping-cart
├── index.html
├── styles.css
└── main.js
/color-picker/script.js:
--------------------------------------------------------------------------------
1 | document.getElementById("colorInput").addEventListener("input", function(event){
2 | // Get the Selected color from input
3 | let selectedColor = event.target.value
4 |
5 | // Update the color text
6 | document.getElementById("colorCode").textContent = selectedColor
7 |
8 | // Update the background color of the display box
9 | document.getElementById("colorDisplay").style.backgroundColor = selectedColor
10 |
11 |
12 | })
--------------------------------------------------------------------------------
/faq-accordion/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | FAQ Accordion
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/color-picker/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Color Picker App
7 |
8 |
9 |
10 |
11 |
Color Picker
12 |
13 |
14 |
Selected Color: #ffffff
15 |
16 |
17 |
18 |
19 |
11 |
Weather App
12 |
13 |
Your Location
14 |
Temperature: -- °C
15 |
Description: --
16 |
17 |
18 |
19 |
20 |
21 |
22 |
11 |
Number Guessing Game
12 |
Guess a number between 1 and 100 !
13 |
14 |
15 |
16 |
17 |
18 |
Good Luck! Start Guessing . . .
19 |
20 |
21 |
22 |
11 |
Typing Speed Test
12 |
The quick brown fox jumps over the lazy dog.
13 |
15 |
16 |
17 |
Time : 0 seconds
18 |
Words per Minute: 0 WPM
19 |
20 |
11 |
12 |
13 |
16 |
19 |
20 |
23 |
24 |
25 |
26 |
11 |
To-Do List App
12 |
13 |
14 |
17 |
19 |
20 |
Edit Modal
21 |
22 |
23 |
24 |
25 |
13 |
14 |
Random Quote Generator
15 |
16 |
17 |
18 |
Click the button below to generate a random quote
19 |
20 |
- Author
21 |
22 |
23 |
24 |
11 |
Quiz App
12 |
13 |
14 |
Question text goes here
15 |
16 |
17 |
18 |
19 |
20 |
23 |
24 |
25 |
26 |
Your Score : 0 / 0
27 |
30 |
31 |
11 |
12 |
13 |
24 |
27 |
28 |
No Track Selected
29 |
30 |
31 |
32 |
33 |
36 |
37 |
40 |
41 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
My Store
13 |
14 | 🛒 0
15 |
16 |
17 |
18 |
19 |
20 |
23 |
24 |
25 |
26 |
27 |
28 |
×
29 |
Shopping Cart
30 |
33 |
34 | Total: $0.00
35 |
36 |
37 |
41 |
42 |
×
43 |
![Product Image]()
44 |
45 |
46 |
47 |
50 |
51 |
`
26 |
27 |
28 | } catch (error) {
29 | console.error('Error fetching weather data: ');
30 | alert('Failed to fetch weather data. Please try again later');
31 | }
32 | }
33 |
34 | function getLocation() {
35 | if (navigator.geolocation) {
36 | navigator.geolocation.getCurrentPosition((position) => {
37 | const latitude = position.coords.latitude
38 | const longitude = position.coords.longitude
39 | getWeather(latitude, longitude)
40 | }, error => {
41 | alert('Failed to get your location. Please Enable location services')
42 | });
43 | } else {
44 | alert('Geolocation is not supported by your browser')
45 | }
46 | }
47 |
48 | // memanggil fungsi getLocation ketika halaman dimuat
49 | window.onload = getLocation
50 |
--------------------------------------------------------------------------------
/paint-app/script.js:
--------------------------------------------------------------------------------
1 | // get element from the DOM
2 | const canvas = document.getElementById('canvas')
3 | const ctx = canvas.getContext('2d')
4 |
5 | const brushBtn = document.getElementById('brush')
6 | const eraserBtn = document.getElementById('eraser')
7 | const clearBtn = document.getElementById('clear')
8 | const colorPicker = document.getElementById('colorPicker')
9 |
10 | // set canvas
11 | canvas.width = 800
12 | canvas.height = 500
13 |
14 | // variable to store state of the tools
15 | let painting = false
16 | let erasing = false
17 | let currentColor = '#000000'
18 | let lineWidth = 5
19 |
20 | // function to startPainting
21 | function startPosition(e){
22 | painting= true
23 | draw(e) // function to draw on canvas
24 | }
25 |
26 | // function to stop painting
27 | function endPosition(e) {
28 | painting = false
29 | ctx.beginPath() // start new path,
30 | }
31 |
32 | // function to draw on canvas
33 | function draw (e){
34 | if(!painting) return
35 |
36 | ctx.lineWidth = lineWidth
37 | ctx.lineCap = 'round'
38 | ctx.strokeStyle = erasing ? '#ffffff' : currentColor
39 |
40 | ctx.lineTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop)
41 | ctx.stroke()
42 | ctx.beginPath()
43 | ctx.moveTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop)
44 | }
45 |
46 | function selectBrush() {
47 | erasing = false
48 | brushBtn.classList.add('active')
49 | eraserBtn.classList.remove('active')
50 | }
51 |
52 | function selectEraser(){
53 | erasing = true;
54 | eraserBtn.classList.add('active')
55 | brushBtn.classList.remove('active')
56 | }
57 |
58 | function clearCanvas(){
59 | ctx.clearRect(0,0, canvas.width, canvas.height)
60 | }
61 |
62 | function changeColor(e){
63 | currentColor = e.target.value
64 | }
65 |
66 | // add event listener to each tool
67 | brushBtn.addEventListener('click', selectBrush)
68 | eraserBtn.addEventListener('click', selectEraser)
69 | clearBtn.addEventListener('click', clearCanvas)
70 | colorPicker.addEventListener('input', changeColor)
71 |
72 | canvas.addEventListener('mousedown', startPosition)
73 | canvas.addEventListener('mouseup', endPosition)
74 | canvas.addEventListener('mousemove', draw)
--------------------------------------------------------------------------------
/carousel-image-slider/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Image Carousel App
7 |
8 |
9 |
10 |
11 |
12 | Welcome to Project Carousel
13 | Follow for more project
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
13 | ${this.name}
14 | $${this.price.toFixed(2)}
15 | Quantity in cart: 0
16 |
17 |
18 |
19 | `
20 | }
21 | }
22 |
23 | class CartItem{
24 | constructor(product, quantity =1){
25 | this.product = product
26 | this.quantity = quantity
27 | }
28 | incrementQuantity(){
29 | this.quantity ++
30 | }
31 | getTotalPrice(){
32 | return this.quantity * this.product.price
33 | }
34 | }
35 |
36 | class ShoppingCart{
37 | constructor(){
38 | this.products = []
39 | this.cart = []
40 | }
41 | addProduct(product){
42 | this.products.push(product)
43 | }
44 | displayProducts(){
45 | const productList = document.getElementById('product-list')
46 | productList.innerHTML = ''
47 | this.products.forEach(product => {
48 | const productCard = document.createElement('div')
49 | productCard.classList.add('product-card')
50 | productCard.innerHTML = product.displayCard()
51 | productList.appendChild(productCard)
52 | })
53 | }
54 |
55 | viewProductDetail(id){
56 | const product = this.products.find(p => p.id === id)
57 | document.getElementById('detail-image').src = product.image
58 | document.getElementById('detail-title').textContent = product.name
59 | document.getElementById('detail-description').textContent = product.description
60 |
61 | document.getElementById('detail-price').textContent = `$${product.price.toFixed(2)}`
62 |
63 | document.getElementById('add-to-cart-btn').setAttribute('onclick', `shoppingCart.addToCart(${product.id})`)
64 |
65 | this.toggleProductDetail()
66 | }
67 |
68 | toggleProductDetail(addFromDisplay = false){
69 | const modal = document.getElementById('product-modal')
70 | modal.style.display = modal.style.display === 'block'? 'none' : "block"
71 | }
72 |
73 | addToCart(id){
74 | const product = this.products.find(p=> p.id === id)
75 | const existingItem = this.cart.find(item => item.product.id === id)
76 |
77 | if (existingItem){
78 | existingItem.incrementQuantity()
79 | } else {
80 | this.cart.push(new CartItem(product))
81 | }
82 |
83 | this.updateCart()
84 | this.updateProductQuantity(id)
85 | }
86 |
87 | updateCart(){
88 | const cartItems = document.getElementById('cart-items')
89 | cartItems.innerHTML = ''
90 | let totalPrice = 0
91 |
92 | this.cart.forEach((item,index)=> {
93 | const itemTotalPrice = item.getTotalPrice()
94 | totalPrice += itemTotalPrice
95 |
96 | const li = document.createElement('li')
97 |
98 | li.innerHTML = `
99 | ${item.product.name} - $${item.product.price.toFixed(2)} x ${item.quantity} = $${itemTotalPrice.toFixed(2)}
100 |
101 | `
102 | cartItems.appendChild(li)
103 | })
104 |
105 | document.getElementById('cart-count').textContent = this.cart.reduce((sum,item) => sum + item.quantity,0)
106 | document.getElementById('total-price').textContent = totalPrice.toFixed(2)
107 | }
108 |
109 | updateProductQuantity(id){
110 | const cartItem = this.cart.find(item => item.product.id === id)
111 | const quantityElement = document.getElementById(`quantity-${id}`)
112 |
113 |
114 | if(cartItem) {
115 | quantityElement.textContent = `Quantity in cart: ${cartItem.quantity}`
116 | } else {
117 | quantityElement.textContent = `Quantity in cart: 0`
118 | }
119 | }
120 |
121 | removeFromCart(index){
122 | const removedItem = this.cart.splice(index,1)[0]
123 | this.updateCart()
124 | this.updateProductQuantity(removedItem.product.id)
125 | }
126 |
127 | toggleCart(){
128 | const modal = document.getElementById('cart-modal')
129 | modal.style.display = modal.style.display === 'block' ? 'none': 'block'
130 | }
131 | }
132 |
133 | // inisialisasi shopping cart dan product
134 | const shoppingCart = new ShoppingCart()
135 |
136 | shoppingCart.addProduct(
137 | new Product(
138 | 1,
139 | 'Product 1',
140 | 'This is the description for Product 1',
141 | 10.0,
142 | 'https://images.unsplash.com/photo-1633455583769-4d8c28b50286?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDJ8fHxlbnwwfHx8fHw%3D'
143 | )
144 | );
145 | shoppingCart.addProduct(
146 | new Product(
147 | 2,
148 | 'Product 2',
149 | 'This is the description for Product 2',
150 | 20.0,
151 | 'https://images.unsplash.com/photo-1613140506142-277c6241b858?q=80&w=1964&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'
152 | )
153 | );
154 | shoppingCart.addProduct(
155 | new Product(
156 | 3,
157 | 'Product 3',
158 | 'This is the description for Product 3',
159 | 30.0,
160 | 'https://images.unsplash.com/photo-1520170350707-b2da59970118?q=80&w=1965&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'
161 | )
162 | );
163 |
164 | shoppingCart.displayProducts()
165 |
166 | window.onclick = function(event) {
167 | const cartModal = document.getElementById('cart-modal')
168 | const productModal = document.getElementById('product-modal')
169 |
170 | if(event.target == cartModal){
171 | cartModal.style.display = "none"
172 | }
173 | if(event.target == productModal){
174 | productModal.style.display = "none"
175 | }
176 | }
177 |
--------------------------------------------------------------------------------