sysy04
diff --git a/‎images/dog.png‎
225 KB b/‎images/dog.png‎
225 KB
diff --git a/‎images/dog2.png‎
202 KB b/‎images/dog2.png‎
202 KB
diff --git a/‎index.html‎
Lines changed: 27 additions & 0 deletions b/‎index.html‎
Lines changed: 27 additions & 0 deletions
diff --git a/‎scripts/main.js‎
Lines changed: 34 additions & 0 deletions b/‎scripts/main.js‎
Lines changed: 34 additions & 0 deletions
diff --git a/‎styles/style.css‎
Lines changed: 38 additions & 0 deletions b/‎styles/style.css‎
Lines changed: 38 additions & 0 deletions
@@ -0,0 +1,27 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="styles/style.css" rel="stylesheet" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>My test page</title>
+    <script async src="scripts/main.js"></script>
+  </head>
+  <body>
+    <h1>Kinds Of Dogs</h1>
+    <img src="images/dog.png" alt="dog image" />
+    <p>There are many different kinds of dogs.</p>
+    <ul>
+      <li>Beagle</li>
+      <li>Bulldog</li>
+      <li>Chihuahua</li>
+      <li>Dachshund</li>
+      <li>German Shepherd</li>
+    </ul>
+    <p>If you want to know more about kinds of dogs, visit this <a href="https://blog.naver.com/splk4567/221661873057">website</a>.</p>
+    <button>Change user</button>
+  </body>
+</html>
@@ -0,0 +1,34 @@
+const myImage = document.querySelector("img");
+
+myImage.addEventListener("click", () => {
+  const mySrc = myImage.getAttribute("src");
+  if (mySrc === "images/dog.png") {
+    myImage.setAttribute("src", "images/dog2.png");
+  } else {
+    myImage.setAttribute("src", "images/dog.png");
+  }
+});
+
+let myButton = document.querySelector("button");
+let myHeading = document.querySelector("h1");
+
+function setUserName() {
+  const myName = prompt("Please enter your name.");
+  if (!myName) {
+    setUserName();
+  } else {
+    localStorage.setItem("name", myName);
+    myHeading.textContent = `Kinds Of Dogs, ${myName}`;
+  }
+}
+
+if (!localStorage.getItem("name")) {
+  setUserName();
+} else {
+  const storedName = localStorage.getItem("name");
+  myHeading.textContent = `Kinds Of Dogs, ${storedName}`;
+}
+
+myButton.addEventListener("click", () => {
+  setUserName();
+});
@@ -0,0 +1,38 @@
+html {
+  /* px means "pixels". The base font size is now 10 pixels high */
+  font-size: 10px;
+  /* Replace PLACEHOLDER with the font-family property value you got from Google Fonts */
+  font-family: "Montserrat", sans-serif;
+  background-color: #eaeaea;
+}
+
+h1 {
+  font-size: 60px;
+  text-align: center;
+  margin: 0;
+  padding: 20px 0;
+  color: #eaeaea;
+  text-shadow: 3px 3px 1px black;
+}
+
+p,
+li {
+  font-size: 16px;
+  line-height: 2;
+  letter-spacing: 1px;
+}
+
+body {
+  width: 600px;
+  margin: 0 auto;
+  background-color: #ff9500;
+  padding: 0 20px 20px 20px;
+  border: 5px solid black;
+}
+
+img {
+  display: block;
+  margin: 0 auto;
+  max-width: 100%;
+}
+