Skip to content

Commit fb761eb

Browse files
SS7CodeSS7Code
authored
Add files via upload
0 parents  commit fb761eb

5 files changed

Lines changed: 102 additions & 0 deletions

File tree

‎images/chrome.png‎

24.2 KB
Loading

‎images/mozilla.png‎

286 KB
Loading

‎index.html‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!--My first tutorial-->
2+
<!doctype html>
3+
<html lang="en-US">
4+
<head>
5+
<meta charset="utf-8" />
6+
<meta name="viewport" content="width=device-width" />
7+
<title>My test page</title>
8+
<link href="styles/style.css" rel="stylesheet" />
9+
<link rel="preconnect" href="https://fonts.googleapis.com">
10+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11+
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
12+
<script async src="scripts/main.js"></script>
13+
</head>
14+
<body>
15+
<h1> Chrome is also cool ! </h1>
16+
<img src="images/chrome.png" alt="My test image" >
17+
<p>At Chrome, we're a global community of</p>
18+
19+
<ul>
20+
<li>technologists</li>
21+
<li>thinkers</li>
22+
<li>builders</li>
23+
</ul>
24+
25+
<p> Google chrome is similar to Mozilla in the following ways </p>
26+
<ol>
27+
<li> It is faster </li>
28+
<li> It is safer </li>
29+
</ol>
30+
<p>But, People have long been using chrome just because they are used to it and do not value their privacy. But slowly people are realising that big companies like Google sell their data and make profits. <a href="https://www.shutterstock.com/image-vector/laughing-tears-face-emoji-3d-style-2465644073">Ha Ha Ha…</a> </p>
31+
<button>Change user</button>
32+
</body>
33+
</html>

‎scripts/main.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
const myImage = document.querySelector("img");
2+
3+
myImage.addEventListener("click", () => {
4+
const mySrc = myImage.getAttribute("src");
5+
if (mySrc === "images/chrome.png") {
6+
myImage.setAttribute("src", "images/mozilla.png");
7+
} else {
8+
myImage.setAttribute("src", "images/chrome.png");
9+
}
10+
});
11+
let myButton = document.querySelector("button");
12+
let myHeading = document.querySelector("h1");
13+
14+
function setUserName() {
15+
const myName = prompt("Please enter your name.");
16+
if (!myName) {
17+
setUserName()
18+
}
19+
else {
20+
localStorage.setItem("name", myName);
21+
myHeading.textContent = `Chrome is cool, ${myName}`;
22+
}
23+
}
24+
if (!localStorage.getItem("name")) {
25+
setUserName();
26+
} else {
27+
const storedName = localStorage.getItem("name");
28+
myHeading.textContent = `Chrome is cool, ${storedName}`;
29+
}
30+
myButton.addEventListener("click", () => {
31+
setUserName();
32+
});

‎styles/style.css‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
html {
2+
/* px means "pixels". The base font size is now 10 pixels high */
3+
font-size: 10px;
4+
/* Replace PLACEHOLDER with the font-family property value you got from Google Fonts */
5+
font-family: "Roboto", sans-serif;
6+
background-color: #00539f;
7+
}
8+
h1{
9+
font-size: 60px;
10+
text-align: center;
11+
margin: 0;
12+
padding: 20px 0;
13+
color: #00539f;
14+
text-shadow: 3px 3px 1px black;
15+
16+
}
17+
18+
p,
19+
li{
20+
font-size: 16px;
21+
line-height: 2;
22+
letter-spacing: 1px;
23+
24+
}
25+
body {
26+
width: 600px;
27+
margin: 0 auto;
28+
background-color: #ff9500;
29+
padding: 0 20px 30px 20px;
30+
border: 5px solid black;
31+
}
32+
33+
img {
34+
display: block;
35+
margin: 0 auto;
36+
max-width: 100%;
37+
}

0 commit comments

Comments
 (0)