first commit

Assignment-08/assets/Data/data.json

@@ -0,0 +1,77 @@
+[
+ {
+ "avater": "assets/img/avater/avater-OscarWilde.jpg",
+ "quote": "Be yourself; everyone else is already taken.",
+ "author": "Oscar Wilde"
+ },
+ {
+ "avater": "assets/img/avater/avater-MarilynMonroe.jpg",
+ "quote": "Be yourself; everyone else is already taken.",
+ "author": "Marilyn Monroe"
+ },
+ {
+ "avater": "assets/img/avater/avater-AlbertEinstein.jpg",
+ "quote": "Two things are infinite: the universe and human stupidity; and I'm not sure about the universe.",
+ "author": "Albert Einstein"
+ },
+ {
+ "avater": "assets/img/avater/avater-FrankZappa.jpg",
+ "quote": "So many books, so little time.",
+ "author": "Frank Zappa"
+ },
+ {
+ "avater": "assets/img/avater/avater-MarcusTulliusCicero.jpg",
+ "quote": "A room without books is like a body without a soul.",
+ "author": "Marcus Tullius Cicero"
+ },
+ {
+ "avater": "assets/img/avater/avater-BernardM.Baruch.jpg",
+ "quote": "Be who you are and say what you feel, because those who mind don't matter, and those who matter don't mind.",
+ "author": "Bernard M.Baruch"
+ },
+ {
+ "avater": "assets/img/avater/avater-WilliamW.Purkey.jpg",
+ "quote": "You've gotta dance like there's nobody watching,Love like you'll never be hurt,Sing like there's nobody listening,And live like it's heaven on earth.",
+ "author": "William W.Purkey"
+ },
+ {
+ "avater": "assets/img/avater/avater-Dr.Seuss.jpg",
+ "quote": "You know you're in love when you can't fall asleep because reality is finally better than your dreams.",
+ "author": "Dr.Seuss"
+ },
+ {
+ "avater": "assets/img/avater/avater-MahatmaGandhi.jpg",
+ "quote": "Be the change that you wish to see in the world.",
+ "author": "Mahatma Gandhi"
+ },
+ {
+ "avater": "assets/img/avater/avater-RobertFrost.jpg",
+ "quote": "In three words I can sum up everything I've learned about life: it goes on.",
+ "author": "Robert Frost"
+ },
+ {
+ "avater": "assets/img/avater/avater-J.K.Rowling.jpg",
+ "quote": "If you want to know what a man's like, take a good look at how he treats his inferiors, not his equals.",
+ "author": "J.K.Rowling"
+ },
+ {
+ "avater": "assets/img/avater/avater-AlbertCamus.jpg",
+ "quote": "Don’t walk in front of me… I may not follow Don’t walk behind me… I may not lead Walk beside me… just be my friend.",
+ "author": "Albert Camus"
+ },
+ {
+ "avater": "assets/img/avater/avater-MarkTwain.jpg",
+ "quote": "If you tell the truth, you don't have to remember anything.",
+ "author": "Mark Twain"
+ },
+ {
+ "avater": "assets/img/avater/avater-MayaAngelou.jpg",
+ "quote": "I've learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel.",
+ "author": "Maya Angelou"
+ },
+ {
+ "avater": "assets/img/avater/avater-ElbertHubbard.jpg",
+ "quote": "A friend is someone who knows all about you and still loves you.",
+ "author": "Elbert Hubbard"
+ }
+]

Assignment-08/assets/css/style.css

@@ -0,0 +1,53 @@
+.bg-section {
+ position: relative;
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: cover;
+ background-image: linear-gradient(rgba(0, 0, 0, 90%), rgba(0, 0, 0, 95%)),
+ url("../img/bg.jpg");
+}
+
+.quote-avater {
+ width: 250px;
+ height: 250px;
+ border-radius: 0 20px 0 20px;
+ border: 1px solid #ddd;
+ object-fit: cover;
+ cursor: pointer;
+}
+.quote-content {
+ min-height: 90px;
+}
+
+@media screen and (max-width: 600px) {
+ .quote-content {
+ min-height: auto;
+ }
+}
+
+.swiper {
+ width: 100%;
+ height: 100%;
+}
+
+.swiper-slide {
+ text-align: center;
+ font-size: 18px;
+ background: #fff;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.swiper-slide img {
+ display: block;
+ width: 100%;
+ object-fit: cover;
+ width: 200px;
+ height: 250px;
+}
+
+.swiper {
+ margin-left: auto;
+ margin-right: auto;
+}

Assignment-08/assets/js/main.js

@@ -0,0 +1,92 @@
+// *================= HTML Elemments =================
+const quoteBtn = document.getElementById('quote_btn');
+const qutePara = document.getElementById('quote');
+const quteAuthor = document.getElementById('author');
+const quteAvater = document.getElementById('avater');
+const quoteSection = document.getElementById('quoteSection');
+const swiperWrapper = document.getElementById('swiperWrapper');
+
+// *================= JS Varibles =================
+let baseUrl = 'assets/Data/data.json';
+let quotesList, currentQute;
+let swiper = new Swiper(".mySwiper", {
+ // slidesPerView: 1,
+ // spaceBetween: 30,
+ // centeredSlides: true,
+ rewind: true,
+ pagination: {
+ el: ".swiper-pagination",
+ type: "fraction",
+ },
+ navigation: {
+ nextEl: ".swiper-button-next",
+ prevEl: ".swiper-button-prev",
+ },
+});
+
+// *================= Helpers =================
+// ?================= Generate Random Num Qute =================
+const generateRandomNum = (length) => {
+ return Math.trunc(Math.random() * length);
+};
+// ?================= Request GET Qutes =================
+const fetchData = async (url) => {
+ try {
+ const response = await fetch(url);
+ if (!response.ok) {
+ throw new Error('Network response was not ok.');
+ }
+ const data = await response.json();
+ return data;
+ } catch (err) {
+ console.log('Error fetching the JSON file:', err);
+ }
+}
+
+// *================= JS Functions =================
+// ?================= Main Function Update Quote content =================
+function updateQuote(Quotes) {
+ let randomNum = generateRandomNum(Quotes.length);
+ let quoteObj = Quotes[randomNum];
+
+ if (quoteObj.quote !== currentQute) {
+ qutePara.textContent = `"${quoteObj.quote}"`;
+ quteAuthor.textContent = `-- ${quoteObj.author}`;
+ quteAvater.setAttribute('src', quoteObj.avater);
+ quoteSection.style.backgroundImage = `linear-gradient(rgba(0, 0, 0, 90%), rgba(0, 0, 0, 95%)),url(${quoteObj.avater})`;
+ currentQute = quoteObj.quote;
+ } else {
+ updateQuote(Quotes);
+ }
+}
+
+// ?================= Handle Slider In Modal =================
+function handleSlider(quotes, slider) {
+ quotes.forEach(item => {
+ slider.innerHTML += `<div class="swiper-slide">
+ <div
+ class="inner d-flex flex-column justify-content-around align-items-center py-4 px-2">
+ <figure class="mb-0">
+ <img id="avater" class="shadow" src="${item.avater}" alt="${item.author} personal image">
+ </figure>
+ <div class="text-center mt-3 quote-content ">
+ <p id="quote" class="quote-text mb-0 fs-5 fw-semibold text-dark ">"${item.quote}"</p>
+ <p id="author" class="quote-author mb-0 fst-italic text-warning ">${item.author}</p>
+ </div>
+ </div>
+ </div> `;
+ });
+}
+
+// *================= Events =================
+window.addEventListener('load', async () => {
+ quotesList = await fetchData(baseUrl);
+ handleSlider(quotesList, swiperWrapper);
+})
+
+quoteBtn.addEventListener('click', () => {
+ updateQuote(quotesList);
+});
+
+
+

Assignment-08/index.html

@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <!-- *============================= Meta ============================= -->
+ <meta name="description" content="Assiment-8 JS">
+ <meta name="keywords" content="JS,JSON,Bootstrap 5,Assiment-8">
+ <meta name="author" content="Hassan Essam">
+ <!-- *============================= CSS FILES ============================= -->
+ <!-- Bootstrap Css -->
+ <link rel="stylesheet" href="./assets/css/bootstrap.min.css">
+ <!-- Link Swiper's CSS -->
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
+ <!-- Main style Css -->
+ <link rel="stylesheet" href="./assets/css/style.css">
+
+ <title>Assignment-08 JS</title>
+</head>
+
+<body>
+ <main>
+ <section id="quoteSection" class="min-vh-100 bg-section">
+ <div class="container py-4">
+ <h1 class="text-center display-3 text-light ">Quote of the Day</h1>
+ <p class="text-center text-primary fw-lighter display-6 ">Press the button below to recieve a random
+ quote!</p>
+ <article class="row justify-content-center align-items-center mt-2">
+ <div class="col col-lg-10 col-xl-8">
+ <button id="quote_btn" class="btn btn-outline-primary d-block mx-auto my-3 text-uppercase">new
+ quote</button>
+ <div
+ class="inner d-flex flex-column justify-content-around align-items-center py-4 px-2 mb-3 rounded">
+ <figure class="mb-0">
+ <img id="avater" class="quote-avater" src="assets/img/avater-default.png"
+ alt="author avater personal image" data-bs-toggle="modal"
+ data-bs-target="#quoteModal">
+ </figure>
+ <div class=" text-center mt-3 quote-content ">
+ <p id="quote" class="quote-text mb-0 fs-5 fw-semibold text-light ">Lorem ipsum dolor
+ sit amet.</p>
+ <p id="author" class="quote-author mb-0 fst-italic text-warning ">Lorem, ipsum.</p>
+ </div>
+ </div>
+ </div>
+ </article>
+ <!-- Modal -->
+ <div class="modal fade " id="quoteModal" tabindex="-1" aria-labelledby="exampleModalLabel"
+ aria-hidden="true">
+ <div class="modal-dialog">
+ <div class="modal-content">
+ <div class="modal-header">
+ <button type="button" class="btn-close" data-bs-dismiss="modal"
+ aria-label="Close"></button>
+ </div>
+ <div class="modal-body">
+ <!-- Swiper -->
+ <div class="swiper mySwiper">
+ <div id="swiperWrapper" class="swiper-wrapper">
+ <!-- <div class="swiper-slide">Slide 1</div> -->
+ </div>
+ <div class="swiper-button-next"></div>
+ <div class="swiper-button-prev"></div>
+ <div class="swiper-pagination"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </section>
+ </main>
+ <!-- *============================= JS FILES ============================= -->
+ <!-- BootStrap JS -->
+ <script src="./assets/js/bootstrap.bundle.min.js"></script>
+ <!-- Swiper JS -->
+ <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
+ <!-- Main JS -->
+ <script src="assets/js/main.js"></script>
+</body>
+
+</html>