32 |
33 |
34 |
35 |
40 |
41 |
42 |
55 | Loading...
56 |
57 |
58 | Results
59 |
60 |
61 |
62 |
63 |
64 |
65 |
72 |
73 |
74 |
--------------------------------------------------------------------------------
/js/shop.js:
--------------------------------------------------------------------------------
1 | class Shop {
2 | constructor() {
3 | this.searchContainer = document.querySelector(".search");
4 | if (this.searchContainer) {
5 | this.searchInput = this.searchContainer.querySelector(".search__input");
6 | this.searchButton = this.searchContainer.querySelector(".search__submit");
7 | this.searchResultCount = this.searchContainer.querySelector(
8 | ".search__result-count"
9 | );
10 | this.loading = this.searchContainer.querySelector(".search__loading");
11 |
12 | this.productsContainer = document.querySelector(".products");
13 | this.productsList =
14 | this.productsContainer.querySelector(".products__list");
15 | }
16 | }
17 |
18 | init() {
19 | if (!this.searchContainer) return;
20 | this.searchInput.addEventListener("input", (e) => this.checkInput(e));
21 | this.searchButton.addEventListener("click", (e) => this.search(e));
22 | this.checkInput();
23 | this.search();
24 | }
25 |
26 | checkInput() {
27 | this.searchButton.disabled = this.searchInput.value.length === 0;
28 | }
29 |
30 | async search(e) {
31 | if (e) e.preventDefault();
32 |
33 | this.loading.classList.add("is-loading");
34 | this.productsContainer.classList.remove("is-shown");
35 | this.searchResultCount.textContent = "";
36 |
37 | while (this.productsList.firstChild) {
38 | this.productsList.removeChild(this.productsList.lastChild);
39 | }
40 |
41 | const url = "../js/fake-products.json";
42 | try {
43 | const response = await fetch(url);
44 | if (!response.ok) {
45 | throw new Error(`Response status: ${response.status}`);
46 | }
47 |
48 | await setTimeout(async () => {
49 | const json = await response.json();
50 | this.processProducts(json);
51 | this.loading.classList.remove("is-loading");
52 | }, 1000);
53 | } catch (error) {
54 | console.error(error.message);
55 | this.loading.classList.remove("is-loading");
56 | }
57 | }
58 |
59 | processProducts(data) {
60 | const searchTerm = this.searchInput.value.toLowerCase();
61 | const filteredProducts = data.filter(
62 | (product) =>
63 | product.title.toLowerCase().includes(searchTerm) ||
64 | product.description.toLowerCase().includes(searchTerm)
65 | );
66 |
67 | this.searchResultCount.textContent = `${filteredProducts.length} products found`;
68 |
69 | if (filteredProducts.length > 0) {
70 | this.productsContainer.classList.add("is-shown");
71 | } else {
72 | this.productsContainer.classList.remove("is-shown");
73 | }
74 |
75 | filteredProducts.forEach((product) => {
76 | const productsItem = document.createElement("div");
77 | productsItem.classList.add("products__item");
78 | this.productsList.appendChild(productsItem);
79 |
80 | const productsItemImage = document.createElement("img");
81 | productsItemImage.classList.add("products__item-image");
82 | productsItemImage.src = product.img;
83 | productsItem.appendChild(productsItemImage);
84 |
85 | const productsItemTitle = document.createElement("h3");
86 | productsItemTitle.classList.add("products__item-title");
87 | productsItemTitle.textContent = product.title;
88 | productsItem.appendChild(productsItemTitle);
89 |
90 | const productsItemDescription = document.createElement("p");
91 | productsItemDescription.classList.add("products__item-description");
92 | productsItemDescription.textContent = product.description;
93 | productsItem.appendChild(productsItemDescription);
94 |
95 | const productsItemStars = document.createElement("p");
96 | productsItemStars.classList.add("products__item-stars");
97 | productsItemStars.textContent = "⭐".repeat(product.stars);
98 | productsItem.appendChild(productsItemStars);
99 |
100 | const productsItemPrice = document.createElement("p");
101 | productsItemPrice.classList.add("products__item-price");
102 | productsItemPrice.textContent = product.price;
103 | productsItem.appendChild(productsItemPrice);
104 | });
105 | }
106 | }
107 |
108 | // Expose an instance of the 'Shop' class
109 | export default new Shop();
110 |
--------------------------------------------------------------------------------
/js/fake-products.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "img": "https://placehold.co/600x400/0000FF/FFFFFF?text=Galactic+Telescope",
4 | "title": "Galactic Telescope",
5 | "description": "A high-powered telescope for stargazing and exploring deep space.",
6 | "stars": 5,
7 | "price": "£199.99"
8 | },
9 | {
10 | "img": "https://placehold.co/600x400/FF0000/FFFFFF?text=Martian+Rover+Toy",
11 | "title": "Martian Rover Toy",
12 | "description": "A detailed model of the latest Mars exploration rover.",
13 | "stars": 4,
14 | "price": "£29.99"
15 | },
16 | {
17 | "img": "https://placehold.co/600x400/00FF00/000000?text=Lunar+Globe",
18 | "title": "Lunar Globe",
19 | "description": "A glow-in-the-dark moon globe with detailed craters and landmarks.",
20 | "stars": 5,
21 | "price": "£14.99"
22 | },
23 | {
24 | "img": "https://placehold.co/600x400/FFFF00/000000?text=NASA+Backpack",
25 | "title": "NASA Backpack",
26 | "description": "A stylish and durable backpack with an official NASA logo.",
27 | "stars": 4,
28 | "price": "£34.99"
29 | },
30 | {
31 | "img": "https://placehold.co/600x400/000000/FFFFFF?text=Solar+System+Model",
32 | "title": "Solar System Model",
33 | "description": "An educational 3D model of our solar system with rotating planets.",
34 | "stars": 5,
35 | "price": "£24.99"
36 | },
37 | {
38 | "img": "https://placehold.co/600x400/800080/FFFFFF?text=Astronaut+Helmet",
39 | "title": "Astronaut Helmet",
40 | "description": "A replica astronaut helmet with working LED lights and a retractable visor.",
41 | "stars": 4,
42 | "price": "£49.99"
43 | },
44 | {
45 | "img": "https://placehold.co/600x400/FF4500/FFFFFF?text=Rocket+Lamp",
46 | "title": "Rocket Lamp",
47 | "description": "A decorative lamp in the shape of a launching rocket.",
48 | "stars": 4,
49 | "price": "£19.99"
50 | },
51 | {
52 | "img": "https://placehold.co/600x400/FFFFFF/0000FF?text=Black+Hole+Poster",
53 | "title": "Black Hole Poster",
54 | "description": "A stunning high-resolution print of a black hole.",
55 | "stars": 3,
56 | "price": "£9.99"
57 | },
58 | {
59 | "img": "https://placehold.co/600x400/00CED1/000000?text=Zero+Gravity+Pen",
60 | "title": "Zero Gravity Pen",
61 | "description": "A pen that writes in zero gravity, underwater, and upside down.",
62 | "stars": 5,
63 | "price": "£12.99"
64 | },
65 | {
66 | "img": "https://placehold.co/600x400/32CD32/FFFFFF?text=Moon+Base+LEGO+Set",
67 | "title": "Moon Base LEGO Set",
68 | "description": "A fun and detailed LEGO set for building your own moon base.",
69 | "stars": 5,
70 | "price": "£49.99"
71 | },
72 | {
73 | "img": "https://placehold.co/600x400/FFA500/000000?text=Comet+Puzzle",
74 | "title": "Comet Puzzle",
75 | "description": "A challenging 1000-piece puzzle of a stunning comet streaking across space.",
76 | "stars": 4,
77 | "price": "£15.99"
78 | },
79 | {
80 | "img": "https://placehold.co/600x400/00008B/FFFFFF?text=Saturn+Ring+Replica",
81 | "title": "Saturn Ring Replica",
82 | "description": "A scientifically accurate scale model of Saturn and its rings.",
83 | "stars": 4,
84 | "price": "£39.99"
85 | },
86 | {
87 | "img": "https://placehold.co/600x400/DA70D6/000000?text=Aurora+Borealis+Lamp",
88 | "title": "Aurora Borealis Lamp",
89 | "description": "A colour-changing lamp simulating the Northern Lights.",
90 | "stars": 5,
91 | "price": "£27.99"
92 | },
93 | {
94 | "img": "https://placehold.co/600x400/B22222/FFFFFF?text=Space+Trivia+Game",
95 | "title": "Space Trivia Game",
96 | "description": "A fun and educational game testing your knowledge of space.",
97 | "stars": 3,
98 | "price": "£18.99"
99 | },
100 | {
101 | "img": "https://placehold.co/600x400/2E8B57/FFFFFF?text=Galaxy+Projector",
102 | "title": "Galaxy Projector",
103 | "description": "A projector that fills your room with moving stars and nebulae.",
104 | "stars": 5,
105 | "price": "£44.99"
106 | },
107 | {
108 | "img": "https://placehold.co/600x400/8B0000/FFFFFF?text=ISS+Model+Kit",
109 | "title": "ISS Model Kit",
110 | "description": "A build-your-own model of the International Space Station.",
111 | "stars": 4,
112 | "price": "£59.99"
113 | }
114 | ]
115 |
--------------------------------------------------------------------------------
/js/ask.js:
--------------------------------------------------------------------------------
1 | class Ask {
2 | maxLength = 160;
3 |
4 | constructor() {
5 | this.askContainer = document.querySelector(".ask");
6 | if (this.askContainer) {
7 | this.askInput = this.askContainer.querySelector(".ask__input");
8 | this.exampleButton = this.askContainer.querySelector(
9 | ".ask__button-example"
10 | );
11 | this.askButton = this.askContainer.querySelector(".ask__button-ask");
12 | this.resetButton = this.askContainer.querySelector(".ask__button-reset");
13 | this.charCounter = this.askContainer.querySelector(".ask__char-count");
14 | this.loading = this.askContainer.querySelector(".ask__loading");
15 |
16 | this.resultsContainer = document.querySelector(".results");
17 | this.resultsList = this.resultsContainer.querySelector(".results__list");
18 | }
19 | }
20 |
21 | init() {
22 | if (!this.askContainer) return;
23 | this.askInput.addEventListener("input", (e) => this.checkInput(e));
24 | this.exampleButton.addEventListener("click", (e) => this.setExample(e));
25 | this.askButton.addEventListener("click", (e) => this.askClicked(e));
26 | this.resetButton.addEventListener("click", (e) => this.resetClicked(e));
27 | this.checkInput();
28 | }
29 |
30 | checkInput() {
31 | // check submission validity
32 | const charsRemaining = this.maxLength - this.askInput.value.length;
33 | if (charsRemaining < 0) {
34 | this.askButton.disabled = true;
35 | this.charCounter.classList.add("has-error");
36 | } else {
37 | this.askButton.disabled = false;
38 | this.charCounter.classList.remove("has-error");
39 | }
40 | this.charCounter.textContent = `${charsRemaining} characters remaining`;
41 |
42 | // check whether to display example button
43 | if (this.askInput.value.length === 0) {
44 | this.askButton.disabled = true;
45 | this.exampleButton.classList.remove("is-hidden");
46 | } else {
47 | this.exampleButton.classList.add("is-hidden");
48 | }
49 | }
50 |
51 | setExample(event) {
52 | event.preventDefault();
53 | console.log("setting example");
54 | this.askInput.value =
55 | "Tell me about some of the best things I could see with a telescope from Brighton (assuming it ever stops raining)";
56 | this.checkInput();
57 | }
58 |
59 | resetClicked(event) {
60 | event.preventDefault();
61 | this.askInput.value = "";
62 | this.checkInput();
63 | }
64 |
65 | async askClicked(event) {
66 | event.preventDefault();
67 | this.loading.classList.add("is-loading");
68 |
69 | const url = "../js/fake-results.json";
70 | try {
71 | const response = await fetch(url);
72 | if (!response.ok) {
73 | throw new Error(`Response status: ${response.status}`);
74 | }
75 |
76 | // fake a one second wait, use the two lines below for an instant response
77 | // const json = await response.json();
78 | // this.processResults(json);
79 |
80 | await setTimeout(async () => {
81 | const json = await response.json();
82 | this.processResults(json);
83 | this.loading.classList.remove("is-loading");
84 | }, 1000);
85 | } catch (error) {
86 | console.error(error.message);
87 | this.loading.classList.remove("is-loading");
88 | }
89 | }
90 |
91 | processResults(data) {
92 | if (data.length > 0) {
93 | this.resultsContainer.classList.add("is-shown");
94 | } else {
95 | this.resultsContainer.classList.remove("is-shown");
96 | }
97 |
98 | data.forEach((result) => {
99 | const resultsItem = document.createElement("div");
100 | resultsItem.classList.add("results__item");
101 | this.resultsList.appendChild(resultsItem);
102 |
103 | const resultsItemTitle = document.createElement("h3");
104 | resultsItemTitle.classList.add("results__item-title");
105 | resultsItemTitle.textContent = result.title;
106 | resultsItem.appendChild(resultsItemTitle);
107 |
108 | const resultsItemDescription = document.createElement("p");
109 | resultsItemDescription.classList.add("results__item-description");
110 | resultsItemDescription.textContent = result.description;
111 | resultsItem.appendChild(resultsItemDescription);
112 | });
113 | }
114 | }
115 |
116 | // Expose an instance of the 'Ask' class
117 | export default new Ask();
118 |
--------------------------------------------------------------------------------
15 | 
15 |