new file add

hajaratali123 · Oct 15, 2023 · f47a7d2 · f47a7d2
1 parent 854862a
commit f47a7d2
Show file tree

Hide file tree

Showing 3 changed files with 241 additions and 0 deletions.
diff --git a/app.js b/app.js
@@ -0,0 +1,29 @@
+let url2 = "https://dog.ceo/api/breeds/image/random";
+
+
+let btn = document.querySelector("#get_cat");
+btn.addEventListener("click", async() => {
+    for (let i = 0; i < 10; i++) {
+        let link = await getimage();
+        show_image(link);
+        console.log(link);
+    }
+});
+
+function show_image(link) {
+    setTimeout(() => {
+        let list = document.querySelector("#list");
+        let img = document.createElement("img");
+        img.setAttribute("src", link);
+        list.appendChild(img);
+    }, 2000);
+}
+async function getimage() {
+    try {
+        let res = await axios.get(url2);
+        // console.log(res.data.message);
+        return res.data.message;
+    } catch (err) {
+        console.log("err", err);
+    }
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dog Fancy Event</title>
+    <link rel="stylesheet" href="style.css">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="bootstrap-stylesheet">
+</head>
+
+<body>
+    <header>
+        <h1>Dog Fancy Event</h1>
+        <p>The Fanciest dog Event.</p>
+    </header>
+    <br>
+    <nav id="topnav">
+        <ul>
+            <li>
+                <a href="#">Home</a>
+            </li>
+            <li>
+                <a href="#">About</a>
+            </li>
+            <li>
+                <a href="#">Locations</a>
+            </li>
+            <li>
+                <a href="#">RSVP</a>
+            </li>
+        </ul>
+    </nav>
+
+    <div id="content">
+        <h1>Dog Fancy Event 2023</h1>
+        <button type="button" class="btn btn-outline-success" id="get_cat">click to get image</button>
+
+        <p id="event">The 115th annual Cat Fancy Event is being held in New York City on December 21st. This is the fanciest dogent of the year, starring over 300 different dogs. This event was made to show America how great cats really are. There will be treats at
+            the walk in, and for the dog owners there will be a buffet in the lounge. We thank you for coming to our event site, and hope to see you on December 21st. Thank you.</p>
+        <br>
+        <ul id="list">
+
+        </ul>
+
+
+        <p id="info ">These dogs will be the showrunners this year. George has a long history in dogevents, and is looking forward to this year's dogFancy Event. Sam is a world-class runner, and will be showing his new techniques. Doug likes to lay around, and will
+            practice his abilities. Sally was invited because her mom made a fit about not coming.</p>
+
+    </div>
+    <br>
+
+    <footer>
+        <nav class="footernev">
+
+            <ul>
+                <li><a href="# ">Home</a></li>
+                <li><a href="# ">About</a></li>
+                <li><a href="# ">Locations</a></li>
+                <li><a href="# ">RSVP</a></li>
+            </ul>
+        </nav>
+        <p>&copy;-copyright 2023</p>
+    </footer>
+
+    <script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js "></script>
+
+    <script src="app.js "></script>
+</body>
+
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,139 @@
+img {
+    width: 320px;
+    height: 240px;
+    margin: 5px;
+    border: 2px solid pink;
+    box-shadow: 5px 5px 5px black;
+    padding-bottom: 5px;
+}
+
+header {
+    font-family: 'Dancing script', cursive;
+    text-align: center;
+    border: 3px solid #2E2E2E;
+    padding: 5px;
+    margin: 0px auto;
+    width: 400px;
+    box-shadow: 0px 0px 15px #434f5b;
+}
+
+header h1 {
+    color: #212a3f;
+    font-size: 45px;
+}
+
+header p {
+    color: #434f5b;
+}
+
+#topnav {
+    font-family: 'Dancing script', cursive;
+    background-color: #434f5b;
+    font-size: 30px;
+    text-transform: lowercase;
+    width: 415x;
+    margin: 0 auto;
+}
+
+#topnav ul {
+    padding: 20px 15px;
+    margin: 0px;
+    text-align: center;
+}
+
+#topnav ul li {
+    list-style-type: none;
+    display: inline;
+}
+
+#topnav ul li a {
+    color: #f2f2f2;
+    text-decoration: none;
+    margin: 0px 5px;
+    padding: 5px;
+}
+
+#topnav ul li a:hover {
+    border-bottom: 3px solid#f2f2f2;
+    transition: 50ms liner 0s;
+    -moz-transition: 50ms linear 0s;
+    -webkit-transition: 50ms linear 0s;
+}
+
+body {
+    background-color: #f2f2f2;
+}
+
+#content {
+    font-family: 'lora', serif;
+}
+
+#content h1,
+h2,
+h3,
+h4,
+h4,
+h6 {
+    color: #222a3f;
+    text-align: center;
+    font-family: 'Dancing script', cursive;
+}
+
+#content p {
+    color: #2e2e2e;
+    text-align: center;
+    width: 415px;
+    margin: 0px auto;
+}
+
+
+/* #content img {
+    display: block;
+    margin-left: auto;
+    margin-right: 0px auto;
+} */
+
+#content ul {
+    text-align: center;
+    margin: 0px;
+    padding: 0px;
+}
+
+.footernev {
+    padding-top: 5px;
+    padding-left: 0px;
+    float: left;
+}
+
+.footernev ul {
+    margin: 0px;
+    padding: 0px;
+}
+
+.footernev ul li {
+    list-style-type: none;
+    display: inline;
+}
+
+.footernav ul li a:link,
+.footernav ul li a:visited {
+    color: #212A3F;
+    text-decoration: none;
+    text-transform: lowercase;
+    font-family: 'Dancing Script', cursive;
+}
+
+.footernav ul li a:hover {
+    color: #8F8F8F;
+}
+
+#get_cat {
+    font-family: 'Dancing script', cursive;
+    background-color: #434f5b;
+    font-size: 30px;
+    text-transform: lowercase;
+    width: 100%;
+    margin: 0 auto;
+    border-radius: 30px;
+    align-items: end;
+}