diff --git a/1.html b/1.html index 17918d5..1383afe 100644 --- a/1.html +++ b/1.html @@ -3,122 +3,67 @@ - Card Gallery - + Document -
-
- Mountain -
-

Mountain

-

Lorem Ipsum is simply dummy text from the printing and typeseting industry

-
+
+
+ +
-
- Road -
-

Road

-

Lorem Ipsum is simply dummy text from the printing and typeseting industry

-
+
+ +
-
+
+ + +
+
+ + +
+ + + + +
+ + + - + \ No newline at end of file diff --git a/appointment.css b/appointment.css new file mode 100644 index 0000000..f426053 --- /dev/null +++ b/appointment.css @@ -0,0 +1,100 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} +body { + font-family: "Inter", Arial, Helvetica, sans-serif; + background-repeat: no-repeat; + background-size: cover; + background-position: center; + /* background: linear-gradient(rgba(250,250,250, 0.6), + rgba(250,250,250, 0.8)),url('https://images.rawpixel.com/image_800/cHJpdmF0ZS9sci9pbWFnZXMvd2Vic2l0ZS8yMDIzLTA4L3Jhd3BpeGVsX29mZmljZV8yNV9zaW1wbGVfM2RfaWxsdXN0cmF0aW9uX29mX2FfcmVjb3Zlcnlfcm9vbV93aV80ZjhkNDIwNC02N2I4LTQwMDQtYTBlNy05YjljMjIyMzE2ZGVfMS5qcGc.jpg'); */ +} +.formbold-mb-5 { + margin-bottom: 20px; +} +.formbold-pt-3 { + padding-top: 12px; +} +.formbold-main-wrapper { + display: flex; + align-items: center; + justify-content: center; + padding: 48px; +} + +.formbold-form-wrapper { + margin: 0 auto; + max-width: 550px; + width: 100%; + background: rgb(235, 185, 185); +} +.formbold-form-label { + display: block; + font-weight: 500; + font-size: 16px; + color: #07074d; + margin-bottom: 12px; +} +.formbold-form-label-2 { + font-weight: 600; + font-size: 20px; + margin-bottom: 20px; +} + +.formbold-form-input { + width: 100%; + padding: 12px 24px; + border-radius: 6px; + border: 1px solid #e0e0e0; + background: white; + font-weight: 500; + font-size: 16px; + color: #6b7280; + outline: none; + resize: none; +} +.formbold-form-input:focus { + border-color: #6a64f1; + box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.05); +} + +.formbold-btn { + text-align: center; + font-size: 16px; + border-radius: 6px; + padding: 14px 32px; + border: none; + font-weight: 600; + background-color: #6a64f1; + color: white; + width: 100%; + cursor: pointer; +} +.formbold-btn:hover { + box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.05); +} + +.formbold--mx-3 { + margin-left: -12px; + margin-right: -12px; +} +.formbold-px-3 { + padding-left: 12px; + padding-right: 12px; +} +.flex { + display: flex; +} +.flex-wrap { + flex-wrap: wrap; +} +.w-full { + width: 100%; +} +@media (min-width: 540px) { + .sm\:w-half { + width: 50%; + } +} \ No newline at end of file diff --git a/appointment.html b/appointment.html new file mode 100644 index 0000000..97b585f --- /dev/null +++ b/appointment.html @@ -0,0 +1,87 @@ + + + + + + + + Document + + + +
+ + +
+ +
+ + +
+
+ + +
+
+ + +
+
+
+
+ + +
+
+
+ +
+
+
+ + + + + + + + + + + \ No newline at end of file diff --git a/event-booking-app-with-javascript-and-firebase/README.md b/event-booking-app-with-javascript-and-firebase/README.md new file mode 100644 index 0000000..80e97b7 --- /dev/null +++ b/event-booking-app-with-javascript-and-firebase/README.md @@ -0,0 +1,4 @@ +# How to build an Event Booking App using HTML, CSS, JavaScript and Firebase? + +In this tutorial, we are going to build an Event Booking App with HTML, CSS, JavaScript, and Firebase. +Find the [full article](https://www.ibrahima-ndaw.com/blog/build-an-event-booking-app-with-javascript-and-firebase/) on my blog \ No newline at end of file diff --git a/event-booking-app-with-javascript-and-firebase/app.js b/event-booking-app-with-javascript-and-firebase/app.js new file mode 100644 index 0000000..4a2c9e0 --- /dev/null +++ b/event-booking-app-with-javascript-and-firebase/app.js @@ -0,0 +1,56 @@ +const eventsContainer = document.querySelector('.events-container') +const nav = document.querySelector('nav') +const welcomeEvent = document.querySelector('.welcome-event') +const form = document.querySelector('.form') + +const showEvents = (event, id) => { + const {name, attendee, status, description, booked} = event + + const eventStatus = status === 0 ? 'free': 'paid' + const output = ` +
+
+
+

${name}

+ ${attendee - booked} attendees +
+ + ${eventStatus} + +

${description}

+ +
+
+ ` + eventsContainer.innerHTML += output; +} + +const showLatestEvent = (latestEvent, id) => { + + const {name, attendee, status, description, booked} = latestEvent + // Get the first event + welcomeEvent.innerHTML = ` +

${name}

+

${description.length >= 100 ? `${description.substring(0, 100)}...` : description}

+
+ Attendees: ${attendee - booked} + Status: ${status === 0 ? 'free': 'paid'} +
+ + ` +} + +form.addEventListener('submit', e => { + e.preventDefault() + addNewEvent() +}) + +window.onscroll = () => { + if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { + nav.style.background = 'var(--tertiary-color)'; + nav.style.boxShadow = '0 10px 42px rgba(25,17,34,.1)'; + } else { + nav.style.background = 'none'; + nav.style.boxShadow = 'none'; + } +} \ No newline at end of file diff --git a/event-booking-app-with-javascript-and-firebase/db.js b/event-booking-app-with-javascript-and-firebase/db.js new file mode 100644 index 0000000..535071a --- /dev/null +++ b/event-booking-app-with-javascript-and-firebase/db.js @@ -0,0 +1,63 @@ +db.collection('events').onSnapshot(snapshot => { + // Handle the latest event + const newestEvent = snapshot.docChanges()[0].doc.data() + const id = snapshot.docChanges()[0].doc.id + showLatestEvent(newestEvent, id); + + // shift the latest event element + snapshot.docChanges().shift() + + snapshot.docChanges().forEach(event => { + showEvents(event.doc.data(), event.doc.id) + }); +}) + +const addNewEvent = () => { + const event = { + name: form.name.value, + attendee: form.attendee.value, + booked: 0, + description: form.description.value, + status: parseInt(form.status.value, 10) + } + db.collection('events').add(event) + .then(() => { + // Reset the form values + form.name.value = "", + form.attendee.value = "", + form.description.value = "", + form.status.value = "" + + alert('Your event has been successfully saved') + }) + .catch(err => console.log(err)) +} + +let bookedEvents = []; + +const bookEvent = (booked, id) => { + const getBookedEvents = localStorage.getItem('booked-events'); + + if (getBookedEvents) { + bookedEvents = JSON.parse(localStorage.getItem('booked-events')); + if(bookedEvents.includes(id)) { + alert('Seems like you have already booked this event') + } + else { + saveBooking(booked, id) + } + } + else { + saveBooking(booked, id) + } +}; + +const saveBooking = (booked, id) => { + bookedEvents.push(id); + localStorage.setItem('booked-events', JSON.stringify(bookedEvents)); + + const data = { booked: booked +1 } + db.collection('events').doc(id).update(data) + .then(() => alert('Event successfully booked')) + .catch(err => console.log(err)) +} \ No newline at end of file diff --git a/event-booking-app-with-javascript-and-firebase/index.html b/event-booking-app-with-javascript-and-firebase/index.html new file mode 100644 index 0000000..60bd597 --- /dev/null +++ b/event-booking-app-with-javascript-and-firebase/index.html @@ -0,0 +1,65 @@ + + + + + + + Event Booking + + +
+ +
+
+
+
+

Events

+
+
+
+

New Event

+
+ + + + + +
+
+
+ + + + + + + + + + + + \ No newline at end of file diff --git a/event-booking-app-with-javascript-and-firebase/style.css b/event-booking-app-with-javascript-and-firebase/style.css new file mode 100644 index 0000000..7f1c26c --- /dev/null +++ b/event-booking-app-with-javascript-and-firebase/style.css @@ -0,0 +1,205 @@ +@import url('https://fonts.googleapis.com/css?family=Nunito:400,700&display=swap'); + +*, +*::after, +*::before { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + --primary-color:#e74c3c; + --secondary-color:#222; + --tertiary-color:#333; + --light-color: #fff; + scroll-behavior: smooth; +} + +body { + background-color: #1f1f1f; + font-family: 'Nunito', sans-serif; + font-size: 1rem; + color: var(--light-color); + line-height: 1.6; +} + +main { + max-width: 750px; + margin: auto; + padding: 4rem 0; +} + +a { + text-decoration: none; + color: var(--light-color); +} + +nav { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0.5rem 2.5rem; + z-index: 100; + width: 100%; + transition: background 0.3s; + position: fixed; + top: 0; + left: 0; +} + +nav ul { + display: flex; + list-style: none; +} + +nav li:not(:last-child), .welcome-event div span { + margin-right: 1.5rem; +} + +header { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23202020' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23202020' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23212121' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23212121' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23222222' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23252525' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23292929' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%232c2c2c' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23303030' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23333333' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E"); + background-attachment: fixed; + background-size: cover; + height: 100vh; +} + +section { + padding: 3rem 0; +} + +.section-title { + text-transform: uppercase; + text-align: center; + color: var(--light-color); +} + +.section-title:after { + display: block; + content: ""; + width: 6rem; + height: 2px; + border-radius: 2px; + background: linear-gradient(to right, var(--primary-color), var(--secondary-color)); + margin: auto; + margin-bottom: 3rem; +} + +.welcome-event { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + height: 80vh; +} + +.welcome-event h1 { + font-size: 3rem; + font-weight: 700; + text-transform: uppercase; +} + +.welcome-event p { + width: 30%; + text-align: center; +} + +.btn { + width: 8rem; + padding: 0.4rem 1rem; + margin: 1rem 0; + border: none; + font-size: 1.1rem; + border-radius: 20px; + cursor: pointer; + text-decoration: none; + text-align: center; + transition: all .25s cubic-bezier(.4,0,.2,1) 0s; + outline: none; +} + +.btn-primary { + background: var(--primary-color); + color: var(--light-color); +} + +.btn-secondary { + background: var(--light-color); + color: var(--primary-color); + border: 1px solid var(--primary-color); +} + +.btn-tertiary { + background: #f0503e; + color: var(--light-color); +} + +.btn:hover { + transform: translateY(2px); +} + +.card { + min-height: 14rem; + background:var(--secondary-color); + display: flex; + margin-bottom: 2rem; + position: relative; + box-shadow: 0 10px 42px rgba(25,17,34,.1); + padding: 2rem; +} + +.card--details { + display: flex; + flex-direction: column; + justify-content: space-between; + width: 100%; +} + +.card--details div span, .welcome-event div span { + color: #c0a09d; +} +.card--details button { + margin-left: auto; +} + +.card--details-ribbon { + position: absolute; + top: 0; + left: 0; + width: 4rem; + padding: 0.1rem; + text-align: center; + text-transform: uppercase; +} + +.ribbon-free { + background:#029e02; +} + +.ribbon-paid { + background:#cb0000; +} + +.form { + margin: auto; + background: var(--secondary-color); + box-shadow: 0 10px 42px rgba(25,17,34,.1); + padding: 2rem 1rem; + text-align: center; +} + +input, textarea, select { + display: block; + margin: auto; + margin-bottom: 1rem; + width: 60%; + outline: none; + padding: 0.4rem; + border: 1px solid var(--secondary-color); +} + +input { + padding: 0.7rem; + border-radius: 10px; + border: 1px solid var(--secondary-color); +} \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..a99b3a1 --- /dev/null +++ b/script.js @@ -0,0 +1,12 @@ +function sendMail(){ + let params={ + name:document.getElementById("name").value, + phone:document.getElementById("phone").value, + email:document.getElementById("email").value, + date:document.getElementById("date").value, + time:document.getElementById("time").value, + } + + + emailjs.send("service_c4z771e","template_w2jm7lo",params).then(alert("Email Sent! Waiting For Confirmation")) +} \ No newline at end of file