-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathD6.html
139 lines (125 loc) · 6.35 KB
/
D6.html
1
2
3
4
5
6
7
8
9
10
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<html>
<!-- <p>
You have been assigned to the creation of a Smartphone Shop Website. The
homepage you're about to write is just a showcase of the products of the
shop with some extra information. No shopping cart / checkout features are
required.
</p> -->
<!-- <p>Complete exercises from 1 to 6 with plain HTML.</p> -->
<!-- <p>EX1.: Add H1 title with the name of the shop</p> -->
<!-- <p>EX2.: Add a TABLE with the top 5 products of the shop</p> -->
<!-- <p>EX3.: Each product should have one image, title, description and price</p> -->
<!-- <p>EX4.: Add the links to Amazon products for each item in the table</p> -->
<!-- <p>EX5.: Add a footer with the address and the name of the shop</p> -->
<!-- <p>EX6.: Add a message board where the user can type a message in it</p> -->
<!-- <p>EXTRA (use JS here)</p> -->
<!-- <p>EX7.: Write a function to change the H1 text</p>
<p>EX8.: Write a function to change the page background color</p>
<p>EX9.: Write a function to change the footer address with a fake one</p>
<p>EX10.: Write a function to add a CSS class to every Amazon link</p>
<p>
EX11: Write a function to toggle a CSS class for all the images in the
table; that class should set the visibility of the image
</p>
<p>
EX12: Write a function to color the price of every product in a different
one every time
</p> -->
<head>
<style>
img {
height: 150px;
}
td {
border: 2px solid black;
border-radius: 3px;
}
table {
margin: 30px;
}
label {
margin: 30px 10px;
}
table p {
text-align: center;
}
</style>
</head>
<body>
<main>
<h1>Smartphone Shop</h1>
<table>
<tr>
<th>Model</th>
<th>Description</th>
<th>Price</th>
</tr>
<tr>
<td><a href="https://www.amazon.co.uk/Nokia-Plus-TA-1103-Octa-core-UNLOCKED/dp/B07FZTXGLN" target="_blank"><img src="https://images.ctfassets.net/wcfotm6rrl7u/66ip7d0mMoO626OkusK6wK/b1e4c2eaa2c6b1b6634511fc904bb3a7/nokia_6_Plus-front_back-White.png?fm=jpg&fl=progressive&bg=rgb:FFFFFF&q=80" alt="Nokia phone image"></a></td>
<td><p>The Nokia 6.1 Plus smartphone comes equipped with a 5.8-inch FHD+ display having a resolution of 2280x1080 pixels. The phone with an immersive 19:9 aspect ratio is said to bring one closer to the action.</p></td>
<td><p>£109.00</p></td>
</tr>
<tr>
<<td><a href="https://www.amazon.co.uk/Samsung-SIM-Free-Smartphone-Midnight-Renewed-Black/dp/B06ZY5RJVB/ref=sr_1_1?dchild=1&keywords=samsung+s8&qid=1612791295&s=electronics&sr=1-1" target="_blank"><img src="https://fdn2.gsmarena.com/vv/pics/samsung/samsung-galaxy-s8-.jpg" alt="Samsung phone image"></a></td>
<td><p>Galaxy S8 and S8+ changed the design of Galaxy phones with the introduction of the Infinity Display. Explore more about these revolutionary phones.</p></td>
<td><p>£150.00</p></td>
</tr>
<tr>
<td><a href="https://www.amazon.co.uk/Apple-iPhone-64GB-Space-Renewed-Grey/dp/B0797QCXTJ/ref=sr_1_4?dchild=1&keywords=iphone+x&qid=1612791412&s=electronics&sr=1-4" target="_blank"><img src="https://fdn2.gsmarena.com/vv/pics/apple/apple-iphone-x-new-1.jpg" alt="Samsung phone image"></a></td>
<td><p>Compare our best iPhone X pay monthly mobile phone contract deals or on pay as you go & order today! Order by midnight for free next working day delivery.</p></td>
<td><p>£289.00</p></td>
</tr>
<tr>
<td><a href="https://www.amazon.co.uk/LG-Illusion-unlocked-without-Branding/dp/B08JZL2K13/ref=sr_1_3?crid=WNUH9PTEGWCE&dchild=1&keywords=lg+wing&qid=1612791437&s=electronics&sprefix=lg+wing%2Celectronics%2C180&sr=1-3" target="_blank"><img src="https://fdn2.gsmarena.com/vv/pics/lg/lg-wing-0.jpg" alt="LG phone image"></a></td>
<td><p>The Wing is nothing short of bold, fresh, and experimental in nature. It's the very definition of trying new things and going beyond absolute practicality. The concept of the Wing feels exciting and stimulating to bitter reviewers like ourselves who are used to seeing one and the same phone form factor over and over again.</p></td>
<td><p>£669.00</p></td>
</tr>
<tr>
<td><a href="https://www.amazon.co.uk/Motorola-zero-notch-display-Qualcomm-Snapdragon/dp/B0846HDY37/ref=sr_1_2?crid=5Z1MFUEODS26&dchild=1&keywords=moto+g8&qid=1612822779&s=electronics&sprefix=moto%2Celectronics%2C176&sr=1-2" target="_blank"><img src="https://fdn2.gsmarena.com/vv/pics/motorola/motorola-moto-g8-1.jpg" alt="Motorola phone image"></a></td>
<td><p>Motorola Moto G8 (6,4" HD+ zero-notch display, Qualcomm Snapdragon SD665, 16MP main camera, 2MP macro camera, 4000 mAH battery, Dual SIM, 4/64GB, Android 10, Neon Blue, Neue Blue, a_NA</p></td>
<td><p>£139.00</p></td>
</tr>
</table>
<div>
<h3>For comments and suggestions</h3>
<form>
<label>Your name:</label><input type="text"><br><br>
<label>Email:</label><input type="email"><br><br>
<label>Message:</label><textarea rows="5" cols="100"> We will greatly appreciate your feedback!</textarea><br><br>
<input type="submit" value="Submit">
</form>
</div>
</main>
<footer class="bg-blue-100 h-56 flex justify-between px-5">
<p>My house, London, United Kingdom</p>
<p>Smartphone Shop © 2021</p>
</footer>
<script>
function callH1() {
const h1Heading = document.getElementsByTagName("h1");
// console.log(h1Heading);
h1Heading[0].style.color = "blue";
return `Title changed colour`
}
function backgroundColor() {
const bodyColor = document.getElementsByTagName(`body`);
bodyColor[0].style.backgroundColor = `beige`;
}
function fakeAddress() {
const x = document.querySelector(`footer p`);
x.innerText = `This is my fake address`;
}
function cssClassToAnchors() {
const classToAnchors = document.getElementsByTagName(`a`);
for (i = 0; i < classToAnchors.length; i++) {
classToAnchors[i].classList.add(`amazonLink`);
}
console.log(classToAnchors)
}
function toggleCssClass() {
const myElement = document.querySelectorAll(`img`)
myElement.classList.add(`photo`)
}
</script>
</body>
</html>