diff --git a/API.js b/API.js new file mode 100644 index 0000000..0c12c46 --- /dev/null +++ b/API.js @@ -0,0 +1,23 @@ +const express = require('express'); +const app = express(); // framework to create server +const port = 8080; + +// Serve the JSON file +app.get('/', (req, res) => { + // Path to the JSON file + + // Set the appropriate Content-Type header + res.setHeader('Content-Type', 'application/json'); + + // Send the JSON file + res.sendFile(__dirname + '/data/products.json'); +}); + + + +// Start the server +app.listen(port, () => { + console.log(`Server is running on port ${port}`); +}); + + diff --git a/client.js b/client.js new file mode 100644 index 0000000..b38728b --- /dev/null +++ b/client.js @@ -0,0 +1,19 @@ +const net = require('net'); + +// Create a TCP socket and connect to the server +const client = new net.Socket(); +client.connect(3000, 'localhost', () => { + console.log('Connected to server.'); +}); + +// Handle data received from the server +client.on('data', data => { + console.log(`Received data from server: ${data}`); + + // You can perform further actions with the received data here +}); + +// Handle server disconnection (optional) +client.on('close', () => { + console.log('Server connection closed.'); +}); \ No newline at end of file diff --git a/data/products.json b/data/products.json new file mode 100644 index 0000000..3186461 --- /dev/null +++ b/data/products.json @@ -0,0 +1,106 @@ +[ + { + "id": 0, + "name": "APPLE iPhone SE", + "color":"Black", + "ROM": 128, + "price": 990, + "modeName": "iPhone SE", + "modelNumber": "MHGT3HN/A", + "size": "11.94 cm (4.7 inch) Retina HD Display", + "camera": "12MP Rear Camera | 7MP Front Camera", + "Description": "Widescreen HD LCD Retina Multi-touch IPS Display (1400:1 Contrast Ratio (Typical), True Tone Display, Wide Color Display (P3), Haptic Touch, 625 nits Max Brightness (Typical), Fingerprint-resistant Oleophobic Coating, Display Zoom, Reachability)", + "productImage":"http://atlas-content-cdn.pixelsquid.com/stock-images/iphone-x-smartphone-xwVXQLD-600.jpg" + }, + { + "id": 1, + "name": "APPLE iPhone XR", + "color":"White", + "ROM": 64, + "price": 790, + "modeName": "iPhone XR", + "modelNumber": "MH6N3HN/A", + "size": "15.49 cm (6.1 inch) Display", + "camera": "12MP Rear Camera | 7MP Front Camera", + "Description": "1400:1 Contrast Ratio (Typical), True Tone Display (Six-channel Light Sensor), Wide Colour Display (P3), 625 nits Maximum Brightness (Typical), Fingerprint-resistant Oleophobic Coating, Support for Display of Multiple Languages and Characters Simultaneously, Liquid Retina HD Display, Tap to Wake, Wide Colour Gamut", + "productImage":"https://c8.alamy.com/zooms/6/e98284ded5444c08949d7fd9f2bae166/2cd68c5.jpg" + }, + { + "id": 2, + "name": "APPLE iPhone 11", + "color":"White", + "ROM": 64, + "price": 740, + "modeName": "iPhone 11", + "modelNumber": "MHDC3HN/A", + "size": "15.49 cm (6.1 inch) Liquid Retina HD", + "camera": "12MP + 12MP | 12MP Front Camera", + "Description": "1400:1 Contrast Ratio (Typical), True Tone Display, Wide Colour Display (P3), Haptic Touch, 625 nits Max Brightness (Typical), Fingerprint Resistant Oleophobic Coating, Support for Display of Multiple Languages and Characters Simultaneously", + "productImage":"https://png.pngtree.com/png-vector/20201230/ourlarge/pngtree-smart-phone-vector-3d-style-mobile-design-mockup-png-image_2679535.jpg" + }, + { + "id": 3, + "name": "APPLE iPhone XR", + "color":"Yellow", + "ROM": 128, + "price": 999, + "modeName": "iPhone XR", + "modelNumber": "MHDC4HN/A", + "size": "15.49 cm (6.1 inch) Liquid Retina HD", + "camera": "12MP + 12MP | 12MP Front Camera", + "Description": "1400:1 Contrast Ratio (Typical), True Tone Display, Wide Colour Display (P3), Haptic Touch, 625 nits Max Brightness (Typical), Fingerprint Resistant Oleophobic Coating, Support for Display of Multiple Languages and Characters Simultaneously", + "productImage":"https://png.pngtree.com/png-vector/20201230/ourlarge/pngtree-vector-3d-style-smart-phone-mockup-design-png-image_2679529.jpg" + }, + { + "id": 4, + "name": "APPLE iPhone 12 Mini", + "color":"Purple", + "ROM": 64, + "price": 720, + "modeName": "iPhone 12", + "modelNumber": "MGJE3HN/A", + "size": "13.72 cm (5.4 inch) Super Retina XDR Display", + "camera": "12MP + 12MP | 12MP Front Camera", + "Description": "Dive into a world of crystal-clear visuals with the Super Retina XDR Display of the iPhone 12 Mini. This beast of a smartphone packs the A14 Bionic chip to make for blazing-fast performance speeds. On top of that, its Dual-camera System, along with Night Mode, helps you click amazing pictures and selfies even when the lighting isn’t as good as you’d want it to be.", + "productImage":"https://cdn1.vectorstock.com/i/1000x1000/70/05/realistic-frameless-smartphone-mock-up-3d-vector-33107005.jpg" + }, + { + "id": 5, + "name": "APPLE iPhone 11", + "color":"Red", + "ROM": 128, + "price": 990, + "modeName": "iPhone 11", + "modelNumber": "MHDC3HN/A", + "size": "15.49 cm (6.1 inch) Liquid Retina HD", + "camera": "12MP + 12MP | 12MP Front Camera", + "Description": "1400:1 Contrast Ratio (Typical), True Tone Display, Wide Colour Display (P3), Haptic Touch, 625 nits Max Brightness (Typical), Fingerprint Resistant Oleophobic Coating, Support for Display of Multiple Languages and Characters Simultaneously", + "productImage":"https://previews.123rf.com/images/barmaleeva/barmaleeva2003/barmaleeva200300004/141800762-white-realistic-smartphone-mockup-3d-mobile-phone-with-blank-white-screen-modern-vector-cell-phone-t.jpg" + }, + { + "id": 6, + "name": "APPLE iPhone SE", + "color":"White", + "ROM": 64, + "price": 780, + "modeName": "iPhone SE", + "modelNumber": "MHGT3HN/A", + "size": "11.94 cm (4.7 inch) Retina HD Display", + "camera": "12MP Rear Camera | 7MP Front Camera", + "Description": "Widescreen HD LCD Retina Multi-touch IPS Display (1400:1 Contrast Ratio (Typical), True Tone Display, Wide Color Display (P3), Haptic Touch, 625 nits Max Brightness (Typical), Fingerprint-resistant Oleophobic Coating, Display Zoom, Reachability)", + "productImage":"http://atlas-content-cdn.pixelsquid.com/stock-images/iphone-x-smartphone-xwVXQLD-600.jpg" + }, + { + "id": 7, + "name": "APPLE iPhone 12", + "color":"Blue", + "ROM": 64, + "price": 780, + "modeName": "iPhone 12", + "modelNumber": "MHGT3HN/A", + "size": "11.94 cm (4.7 inch) Retina HD Display", + "camera": "12MP Rear Camera | 7MP Front Camera", + "Description": "Widescreen HD LCD Retina Multi-touch IPS Display (1400:1 Contrast Ratio (Typical), True Tone Display, Wide Color Display (P3), Haptic Touch, 625 nits Max Brightness (Typical), Fingerprint-resistant Oleophobic Coating, Display Zoom, Reachability)", + "productImage":"https://cdn1.vectorstock.com/i/1000x1000/70/05/realistic-frameless-smartphone-mock-up-3d-vector-33107005.jpg" + } +] \ No newline at end of file diff --git a/home.css b/home.css index a94cc07..0557aa3 100644 --- a/home.css +++ b/home.css @@ -182,4 +182,16 @@ display: inline-block; } + + .data{ + width: 700px; + background-color: antiquewhite; + height: 400px; + color: #000; + } + + ::selection{ + color: white; + background-color: #000; + } \ No newline at end of file diff --git a/main.html b/main.html index 07004fd..299beec 100644 --- a/main.html +++ b/main.html @@ -5,8 +5,7 @@ WEB WORKSPACE - + + + @@ -64,13 +65,13 @@

Clothes

-

this is inner card

+

the name of the product is dg

-

this is inner card

+

this is inner card ad

-

this is inner card

+

{{%MODELNO%}}

this is inner card

@@ -94,17 +95,12 @@

Clothes

this is inner card

-

this is inner card

+

sdsd

+
+ -
-
-

This is the scrollable content that will overflow horizontally.

-

You can add more content here to make it scrollable.

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
@@ -141,8 +137,16 @@

Clothes

- + +

+ +

+ + + \ No newline at end of file diff --git a/package.json b/package.json index f557253..c98009c 100644 --- a/package.json +++ b/package.json @@ -3,4 +3,9 @@ "express": "^4.18.2", "json-server": "^0.17.3" } + + + } + + diff --git a/products.json b/products.json deleted file mode 100644 index 10435d5..0000000 --- a/products.json +++ /dev/null @@ -1,29 +0,0 @@ -{ - "user1": { - "id":1, - "firstname":"Munonye", - "lastname":"Kindson", - "email":"kany@gmail.com" - }, - - "user2": { - "id":2, - "firstname":"Imolode", - "lastname":"Saffron", - "email":"saffron@gmail.com" - }, - - "user3": { - "id":3, - "firstname":"Munonye", - "lastname":"Othniel", - "email":"othniel@gmail.com" - }, - - "user4": { - "id":4, - "firstname":"Yuba", - "lastname":"Oleander", - "email":"oleander@gmail.com" - } - } \ No newline at end of file diff --git a/script.js b/script.js index 2892b7b..05baeae 100644 --- a/script.js +++ b/script.js @@ -4,22 +4,68 @@ const modeIcon = document.getElementById("change-mode-icon") const body = document.body; const firstIcon = document.getElementById("m"); const favIcon = document.getElementById('fav'); + + + + + + favIcon.innerHTML = 'star'; + + + + + + firstIcon.addEventListener('click', function () { firstIcon.classList.remove('fa-address-book'); firstIcon.classList.add('fa-shopping-cart'); }); +modeToggle.addEventListener("click", function () { + body.classList.toggle("dark-mode"); + console.log('Icon clicked!'); +}); + +icon.addEventListener('click', function () { + // Perform your desired action here + console.log('Icon clicked!'); +}); + +button.addEventListener('click', function () { + button.classList.add('button-clicked'); + btn.style.backgroundColor = 'salmon'; + btn.style.color = 'white'; + // Toggle the icon between favorite and favorite_border + if (icon1.innerHTML === 'favorite') { + icon1.innerHTML = 'light_mode'; + } else { + icon1.innerHTML = 'favorite'; + } +}); + +button1.addEventListener('click', function() { + // Your click event handling code here + innerIcon.innerHTML = 'star'; +}); + +iconAr.addEventListener('click', function(){ + if(iconAr.innerHTML === "play_arrow"){ + iconAr.innerHTML = "home"; + }else{ + iconAr.innerHTML = "star"; + } + } + ); + + function change(t) { t.innerHTML = "star"; } console.log("this is the first consolo message"); -modeToggle.addEventListener("click", function () { - body.classList.toggle("dark-mode"); - console.log('Icon clicked!'); -}); + /*changeModeIcon.addEventListener('click',function(){ @@ -39,10 +85,6 @@ let changeIcon = function (x) { const icon = document.getElementById('myIcon'); -icon.addEventListener('click', function () { - // Perform your desired action here - console.log('Icon clicked!'); -}); function myFunction() { console.log("messages"); @@ -51,25 +93,12 @@ function myFunction() { const button = document.getElementById('myButton'); const icon1 = document.getElementById('myIcon'); -button.addEventListener('click', function () { - button.classList.add('button-clicked'); - btn.style.backgroundColor = 'salmon'; - btn.style.color = 'white'; - // Toggle the icon between favorite and favorite_border - if (icon1.innerHTML === 'favorite') { - icon1.innerHTML = 'light_mode'; - } else { - icon1.innerHTML = 'favorite'; - } -}); + const button1 = document.getElementById('myButton'); const innerIcon = document.getElementById('innerIcon'); -button1.addEventListener('click', function() { - // Your click event handling code here - innerIcon.innerHTML = 'star'; -}); + const span = document.getElementById('mySpan'); @@ -80,14 +109,7 @@ span.addEventListener('click', function() { const iconAr = document.getElementById("iconArrow"); -iconAr.addEventListener('click', function(){ - if(iconAr.innerHTML === "play_arrow"){ - iconAr.innerHTML = "home"; - }else{ - iconAr.innerHTML = "star"; - } - } - ); + function handleClick(){ iconAr.classList.toggle("home"); @@ -120,3 +142,4 @@ function changeContent(icon){ body.classList.toggle(dark_mode); console.log(name); */ } + diff --git a/server.js b/server.js index ceae75d..ba5872e 100644 --- a/server.js +++ b/server.js @@ -1,21 +1,58 @@ -const express = require('express'); -const app = express(); -const port = 3000; -// Serve the JSON file -app.get('/', (req, res) => { - // Path to the JSON file +const { json } = require("express"); +const fs = require("fs"); +fs.readFile("./data/products.json", "utf8", (err, jsonString) => { + if (err) { + console.log("Error reading file from disk:", err); + return; + } + try { + const customer = JSON.parse(jsonString); + console.log("Customer address is:", customer); // => "Customer address is: Infinity Loop Drive" - // Set the appropriate Content-Type header - res.setHeader('Content-Type', 'application/json'); + //var jsonString = JSON.stringify(customer); // Convert JSON object to string - // Send the JSON file - res.sendFile(__dirname + '/products.json'); -}); + let output = ""; + customer.forEach(element => { + console.log(element.color); + var listItem = document.createElement("p"); + listItem.textContent = element.name; // Replace "propertyName" with the actual property you want to display + console.log("DONE!"); + output += `

${element.name}

${element.color}

`; + }); -// Start the server -app.listen(port, () => { - console.log(`Server is running on port ${port}`); -}); + document.querySelector('.data').innerHTML = output; + + /* for(let x of customer){ + console.log(x.color) + element.innerHTML = x; + placeholder.append(element) + }*/ + + + // placeholder.innerHTML = out; + + + } catch (err) { + console.log("Error parsing JSON string:", err); + + } +}) + + +/*const fs = require("fs"); + +// Read users.json file +fs.readFile("./data/products.json", function(err, data) { + + // Check for errors + if (err) throw err; + + // Converting to JSON + const products = JSON.parse(data); + + console.log(products); // Print users + +}); */ \ No newline at end of file diff --git a/temp.js b/temp.js index 7490592..da36b52 100644 --- a/temp.js +++ b/temp.js @@ -1,9 +1,16 @@ -const iconn = document.getElementById("iconn"); +const dataContainer = document.getElementById('json-data'); -function func(t){ - -} - -iconn.addEventListener('click', function(){ - iconn.style.color = yellow; -}); \ No newline at end of file +fetch('http://localhost:3000') + .then(response => response.json()) + .then(data => { + // Process the fetched data + // For example, if the data is an array of objects, you can iterate over it and create HTML elements to display the data + data.forEach(item => { + const element = document.createElement('p'); + element.textContent = item.name; + dataContainer.appendChild(element); + }); + }) + .catch(error => { + console.error('Error:', error); + }); \ No newline at end of file