html-css-js practice

andy-ife · Nov 5, 2024 · 74883e7 · 74883e7
1 parent a5f8cd0
commit 74883e7
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -1 +1,28 @@
-Andy's Portfolio Website
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>
+            A sexy html page
+        </title>
+        <link rel="stylesheet" href="style.css">
+    </head>
+
+    <body>
+        <h1 title="my world text" class="page_text">
+            Welcome to my world &dollar;
+        </h1>
+
+        <h2 class="page_text">
+            A world of wonder
+        </h2>
+
+        <h3 id="dynamic_text" class="page_text" title="Click me">
+            Where dreams become real
+        </h3>
+
+        <p class="page_text">
+            Lorem ipsum delerat sancti poltis 
+        </p>
+        <script src="script.js"></script>
+    </body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,18 @@
+const dynamicText = document.querySelector("#dynamic_text")
+var index = 0
+dynamicText.onclick = showNewText
+
+function showNewText(){
+    const texts = [
+        "Where dreams become real",
+        "Where horses fly",
+        "Where beggars ride",
+        "Where nothing is true",
+        "And everything is permitted",
+    ]
+
+    if(index >= texts.length -1) index = -1
+    dynamicText.innerText = texts[++index]
+
+    var myjson = "djfkd".json
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,18 @@
+body{
+    background-color:lightgrey
+}
+
+.page_text{
+    font-family:'Times New Roman', Times, serif;
+}
+
+#dynamic_text:hover{
+    color:darkmagenta;
+    cursor:crosshair;
+}
+
+#dynamic_text{
+    color:darkblue;
+    text-decoration: dotted underline;
+    font-style: italic;
+}