14-cl-web-mobapp input field updated

irfanpa005 · Sep 16, 2023 · b9e3ba2 · b9e3ba2
1 parent 5c93636
commit b9e3ba2
Show file tree

Hide file tree

Showing 5 changed files with 155 additions and 1 deletion.
diff --git a/14-cl-web-mobapp/index.html b/14-cl-web-mobapp/index.html
@@ -15,7 +15,7 @@
     <body>
         <div class="container">
             <img src="assets/cat.png">
-            <input type="text" id="input-field" placeholder="Bread">
+            <input type="text" id="input-field" placeholder="Bread" required>
             <button id="add-button">Add to cart</button>
             <ul id="shopping-list">
             </ul>

diff --git a/project3/images/irfan.jpg b/project3/images/irfan.jpg
diff --git a/project3/index.html b/project3/index.html
@@ -0,0 +1,44 @@
+<html>
+    <head><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
+        <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=Happy+Monkey&display=swap" rel="stylesheet">
+        <link rel="stylesheet" href="styles.css">
+        <script src="index.js"></script>
+    </head>
+    <body>
+        <div class="main container">
+            <div>
+                <img src="images/irfan.jpg">
+            </div>
+            <div>
+                <h2 class="bg1">Ahammed Irfan Ali</h3>
+                <h3 class="bg2">College      : Mes College of Engineering, Kutippuram</h3>
+            </div>
+            <div class="details">
+                <div class="detail-col bg1 elem1">
+                    <h3>Projects</h3>
+                    <ul>
+                        <li>Image compression using matlab</li>
+                        <li>TODO project</li>
+                    </ul>
+                </div>
+                <div class="detail-col bg2 elem2">
+                    <h3>Hobbies</h3>
+                    <ul>
+                        <li>Watching videos</li>
+                        <li>Playing Games</li>
+                    </ul>
+                </div>
+                <div class="detail-col bg1 elem3">
+                    <h3>Achievement</h3>
+                    <ul>
+                        <li>cs50's Certificate on Introduction to Python</li>
+                    </ul>
+                </div>
+            </div>
+
+        </div>
+
+    </body>
+</html>
diff --git a/project3/index.js b/project3/index.js
@@ -0,0 +1,31 @@
+// const avatarElement = document.getElementById("avatar");
+// const usernameElement = document.getElementById("username");
+// const repoListElement = document.getElementById("repo-list");
+
+// const username = "vishakh-abhayan"; // Replace with your GitHub username
+
+
+// fetch(`https://api.github.com/users/irfanpa005/repos`)
+//   .then((response) => response.json())
+//   .then((data) => {
+//     data.forEach((repo) => {
+//       const repoCard = document.createElement("div");
+//       repoCard.classList.add("repo-card");
+//       repoCard.innerHTML = `
+//                 <h3>${repo.name}</h3>
+//                 <p>${repo.description}</p>
+//                 <p>Stars: ${repo.stargazers_count}</p>
+//                 <a href="${repo.html_url}" target="_blank">View on GitHub</a>
+//             `;
+//       repoListElement.appendChild(repoCard);
+//     });
+//   });
+
+fetch(`https://api.github.com/users/irfanpa005/repos`)
+.then(response => response.json())
+.then(data =>{
+    console.log(data)
+    data.forEach(repo => {
+        console.log(repo.html_url)
+    })
+});
diff --git a/project3/styles.css b/project3/styles.css
@@ -0,0 +1,79 @@
+.bg1{
+    background-color: rgb(200, 200, 114);
+    color: #09335b;
+}
+
+.bg2{
+    background-color: rgb(23, 91, 3);
+    color: #ffffff;
+}
+
+body {
+    text-align: center;
+    background: linear-gradient(#09335b, #a33d66);
+    color: #ffffff;
+    width: 100%;
+}
+
+.main{
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    margin: 20px 0px;
+    width: 100%;
+}
+
+.head{
+    width: 100%;
+    text-align: start;
+    background-color: aqua
+}
+
+.main >h3 {
+    white-space: nowrap;
+    padding: 8px;
+}
+
+img{
+    width: 150px;
+    border-radius: 100%;
+}
+
+.details{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    padding: 0;
+    margin: 0;
+    flex-wrap: wrap;
+}
+
+.detail-col{
+    flex: 1;
+    font-size: 20px;
+    white-space: nowrap;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 150px;
+}
+
+ul{
+    margin: 0;
+    padding: 0;
+}
+
+@media all and (max-width: 1130px){
+    .elem3{
+        flex: 1 1 100%;
+    }
+}
+
+@media all and (max-width: 600px){
+    .elem1,elem2,elem3{
+        flex: 1 1 100%;
+    }
+}