From 1895abdec6b62c31a6be6d7b085b58524bc734af Mon Sep 17 00:00:00 2001 From: imrozkhan205 Date: Sat, 14 Sep 2024 17:14:52 +0530 Subject: [PATCH] two projects of star rating and one of sorting table --- .vscode/settings.json | 3 + sortable-table/index.html | 13 ++++ sortable-table/script.js | 138 ++++++++++++++++++++++++++++++++++++++ sortable-table/styles.css | 12 ++++ star-rating/index.html | 13 ++++ star-rating/script.js | 67 ++++++++++++++++++ star-rating/styles.css | 24 +++++++ 7 files changed, 270 insertions(+) create mode 100644 .vscode/settings.json create mode 100644 sortable-table/index.html create mode 100644 sortable-table/script.js create mode 100644 sortable-table/styles.css create mode 100644 star-rating/index.html create mode 100644 star-rating/script.js create mode 100644 star-rating/styles.css diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..6f3a2913 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/sortable-table/index.html b/sortable-table/index.html new file mode 100644 index 00000000..4bada7dd --- /dev/null +++ b/sortable-table/index.html @@ -0,0 +1,13 @@ + + + + + + Sorted-table + + + + +
+ + \ No newline at end of file diff --git a/sortable-table/script.js b/sortable-table/script.js new file mode 100644 index 00000000..191e13a6 --- /dev/null +++ b/sortable-table/script.js @@ -0,0 +1,138 @@ +const data = [ + { + id: 1, + title: 'iPhone 9', + price: 549, + inStock: true, + category: 'smartphones', + }, + { + id: 2, + title: 'iPhone X', + price: 899, + inStock: true, + category: 'smartphones', + }, + { + + id: 3, + title: 'Samsung Universe 9', + price: 1249, + inStock: true, + category: 'smartphones', + }, + { + id: 4, + title: 'Huawei P30', + price: 499, + inStock: false, + category: 'smartphones', + }, + { + id: 5, + title: 'OPPOF19', + price: 280, + inStock: false, + category: 'smartphones', + }, + { + id: 6, + title: 'MacBook Pro', + price: 1749, + inStock: true, + category: 'laptops', + }, + { + id: 7, + title: 'Samsung Galaxy Book', + price: 1499, + inStock: false, + category: 'laptops' + }, + { + id: 8, + title: 'Microsoft Surface Laptop 4', + price: 1499, + inStock: false, + category: 'laptops', + }, + { + id: 9, + title: 'HP Pavilion 15-DK1056WM', + price: 1099, + inStock: true, + category: 'laptops', + }, + { + + id: 10, + title: 'Infinix INBOOK', + price: 1099, + inStock: true, + category: 'laptops', + } +]; + + +const createTable = productData => { + const tableElem = document.createElement('table'); + const tableHead = document.createElement('thead'); + const tableBody = document.createElement('tbody'); + + const headers = Object.keys(productData[0]); + tableHead.appendChild(createHeaderRow(headers)); + + productData.forEach(rowData => { + tableBody.appendChild(createProductRow(rowData)); + }) + + tableElem.appendChild(tableHead); + tableElem.appendChild(tableBody); + + return tableElem; +} + +const createHeaderRow = columnNames => { + const tr = document.createElement('tr'); + columnNames.forEach(columnName => { + const th = document.createElement('th'); + th.textContent = columnName[0].toUpperCase() + columnName.slice(1); + const searchUp = document.createElement('span'); + searchUp.textContent = '🔼'; + const searchDown = document.createElement('span'); + searchDown.textContent = '🔽'; + + searchUp.onclick = () => sortDataBy(columnName, 'ASC'); + searchDown.onclick = () => sortDataBy(columnName, 'DESC'); + + th.appendChild(searchDown); + th.appendChild(searchUp); + tr.appendChild(th); + }) + + return tr; +} + +const createProductRow = product => { + const tr = document.createElement('tr'); + Object.values(product).forEach(value => { + const td = document.createElement('td'); + td.textContent = value; + tr.appendChild(td); + }); + + return tr; +} + +const sortDataBy = (columnName, direction) => { + const sortedASCData = [...data.sort((a, b) => a[columnName] > b[columnName] ? 1 : -1)]; + const sortedDESCData = [...data.sort((a, b) => a[columnName] < b[columnName] ? 1 : -1)]; + renderTable(direction === 'ASC' ? sortedASCData : sortedDESCData); +}; + +const renderTable = productData => { + const sortableTableElement = document.getElementById('sortableTable'); + sortableTableElement.innerHTML = ''; + sortableTableElement.appendChild(createTable(productData)); +}; +renderTable(data); \ No newline at end of file diff --git a/sortable-table/styles.css b/sortable-table/styles.css new file mode 100644 index 00000000..187ca2ba --- /dev/null +++ b/sortable-table/styles.css @@ -0,0 +1,12 @@ +body{ + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + +} +table, th{ + text-align: left; + border: 1px solid black; +} +th>span{ + margin: 2.5rem; + cursor: pointer; +} \ No newline at end of file diff --git a/star-rating/index.html b/star-rating/index.html new file mode 100644 index 00000000..a59f017c --- /dev/null +++ b/star-rating/index.html @@ -0,0 +1,13 @@ + + + + + + Document + + + + +
+ + \ No newline at end of file diff --git a/star-rating/script.js b/star-rating/script.js new file mode 100644 index 00000000..198d1f65 --- /dev/null +++ b/star-rating/script.js @@ -0,0 +1,67 @@ +const initialQuestions = [ + { + label: 'Friendliness', + rating: 0, + }, + { + label: 'Cleanliness', + rating: 0, + }, + { + label: 'Food', + rating: 0, + }, + { + label: 'Service', + rating: 0, + }, +]; + +const storedQuestions = JSON.parse(localStorage.getItem('storedQuestions')); + +const questions = storedQuestions || initialQuestions; + +const makeStarRating = question => { + const container = document.createElement('div'); + const label = document.createElement('label'); + label.textContent = question.label; + container.appendChild(label); + container.appendChild(makeStars(5, question)); + + return container; +}; + +const makeStars = (maxValue, question) => { + const starContainer = document.createElement('div'); + + for (let starPosition = 1; starPosition <= maxValue; starPosition++) { + const starElement = document.createElement('span'); + starContainer.appendChild(starElement); + if (starPosition <= question.rating) { + starElement.classList.add('filled'); + } else { + starElement.classList.add('empty'); + } + + starElement.onclick = () => { + for (let i = 0; i < maxValue; i++) { + if (i < starPosition) { + starContainer.children[i].classList.add('filled'); + } else { + starContainer.children[i].classList.remove('filled'); + starContainer.children[i].classList.add('empty'); + } + } + question.rating = starPosition; + localStorage.setItem('storedQuestions', JSON.stringify(questions)); + } + } + + return starContainer; +} + +const ratingsElement = document.getElementById('ratings'); + +questions.forEach(question => { + ratingsElement.appendChild(makeStarRating(question)) +}); \ No newline at end of file diff --git a/star-rating/styles.css b/star-rating/styles.css new file mode 100644 index 00000000..34b4894b --- /dev/null +++ b/star-rating/styles.css @@ -0,0 +1,24 @@ +body { + font-family: sans-serif; +} + +#ratings { + display: flex; + flex-direction: column; + gap: 1rem; + border: 2px solid black; + padding: 1rem; + width: 100px; +} + +.empty::before { + content: '☆'; + cursor: pointer; +} + +.filled::before { + content: '★'; + cursor: pointer; +} + +/* ☆★ */ \ No newline at end of file