Skip to content

Commit 60faef0

Browse files
JunaidHassan19JunaidHassan19
committed
Build a Mobile App
1 parent e5cf0fb commit 60faef0

File tree

11 files changed

+121
-0
lines changed

11 files changed

+121
-0
lines changed

‎07 Build a Mobile App/android-chrome-192x192.png

7.98 KB
Loading

‎07 Build a Mobile App/android-chrome-512x512.png

36.3 KB
Loading

‎07 Build a Mobile App/apple-touch-icon.png

7.01 KB
Loading

‎07 Build a Mobile App/favicon-16x16.png

350 Bytes
Loading

‎07 Build a Mobile App/favicon-32x32.png

754 Bytes
Loading

‎07 Build a Mobile App/favicon.ico

15 KB
Binary file not shown.

‎07 Build a Mobile App/icon.png

2.78 KB
Loading

‎07 Build a Mobile App/index.css

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
body {
2+
margin: 0 auto;
3+
padding: 10px;
4+
font-family: Arial, Helvetica, sans-serif;
5+
max-width: 302px;
6+
}
7+
8+
label {
9+
color: #5f9341;
10+
font-weight: 900;
11+
}
12+
13+
input {
14+
width: 100%;
15+
padding: 10px;
16+
box-sizing: border-box;
17+
border: 1px solid #5f9341;
18+
margin-bottom: 4px;
19+
}
20+
21+
button {
22+
background: #5f9341;
23+
color: white;
24+
padding: 10px 20px;
25+
border: 1px solid #5f9341;
26+
font-weight: bold;
27+
}
28+
29+
#delete-btn {
30+
background: white;
31+
color: #5f9341;
32+
}
33+
34+
ul {
35+
margin-top: 20px;
36+
list-style: none;
37+
padding-left: 0;
38+
}
39+
40+
li {
41+
margin-top: 5px;
42+
}
43+
44+
a {
45+
color: #5f9341;
46+
}
47+
48+

‎07 Build a Mobile App/index.html

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<html>
2+
<head>
3+
<title>Leads Tracker</title>
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
6+
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
7+
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
8+
<link rel="manifest" href="/site.webmanifest">
9+
<link rel="stylesheet" href="index.css">
10+
</head>
11+
<body>
12+
<label>Enter URL:</label>
13+
<input type="text" id="input-el" placeholder="https://scrimba.com">
14+
<button id="input-btn">SAVE INPUT</button>
15+
<button id="delete-btn">DELETE ALL</button>
16+
<ul id="ul-el">
17+
</ul>
18+
<script type="module" src="index.js"></script>
19+
</body>
20+
</html>

‎07 Build a Mobile App/index.js

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.8.1/firebase-app.js"
2+
import { getDatabase,
3+
ref,
4+
push,
5+
onValue,
6+
remove } from "https://www.gstatic.com/firebasejs/10.8.1/firebase-database.js"
7+
8+
const firebaseConfig = {
9+
databaseURL: process.env.DATABASE_URL
10+
}
11+
12+
const app = initializeApp(firebaseConfig)
13+
const database = getDatabase(app)
14+
const referenceInDB = ref(database, "leads")
15+
16+
const inputEl = document.getElementById("input-el")
17+
const inputBtn = document.getElementById("input-btn")
18+
const ulEl = document.getElementById("ul-el")
19+
const deleteBtn = document.getElementById("delete-btn")
20+
21+
function render(leads) {
22+
let listItems = ""
23+
for (let i = 0; i < leads.length; i++) {
24+
listItems += `
25+
<li>
26+
<a target='_blank' href='${leads[i]}'>
27+
${leads[i]}
28+
</a>
29+
</li>
30+
`
31+
}
32+
ulEl.innerHTML = listItems
33+
}
34+
35+
onValue(referenceInDB, function(snapshot) {
36+
const snapshotDoesExist = snapshot.exists()
37+
if (snapshotDoesExist) {
38+
const snapshotValues = snapshot.val()
39+
const leads = Object.values(snapshotValues)
40+
render(leads)
41+
}
42+
})
43+
44+
deleteBtn.addEventListener("dblclick", function() {
45+
remove(referenceInDB)
46+
ulEl.innerHTML = ""
47+
})
48+
49+
inputBtn.addEventListener("click", function() {
50+
push(referenceInDB, inputEl.value)
51+
inputEl.value = ""
52+
})

0 commit comments

Comments
 (0)