diff --git a/Dictonary-App/index.html b/Dictonary-App/index.html new file mode 100644 index 0000000..d977cc4 --- /dev/null +++ b/Dictonary-App/index.html @@ -0,0 +1,31 @@ + + + + + + + + + + Dictionary App + + +
+ +
+
+
+ + +
+
+
+ + + + \ No newline at end of file diff --git a/Dictonary-App/script.js b/Dictonary-App/script.js new file mode 100644 index 0000000..413a07a --- /dev/null +++ b/Dictonary-App/script.js @@ -0,0 +1,73 @@ +const form = document.querySelector('form'); +const resultDiv = document.querySelector('.result'); +// const sound = document.getElementById('sound'); + +form.addEventListener("submit", (e)=>{ + e.preventDefault(); + getWordInfo(form.elements[0].value); +}); + + +const getWordInfo = async (word)=>{ + try{ + resultDiv.style.display = "block"; + resultDiv.innerHTML = "Fetching Data..."; + const response = await fetch(`https://api.dictionaryapi.dev/api/v2/entries/en/${word}`); + const data = await response.json(); + console.log(data); + + let wordDefinition = data[0].meanings[0].definitions[0]; + let audioSrc = data[0].phonetics[0].audio; + + resultDiv.innerHTML =` +

Word:${data[0].word}

+ +

Phonetics:${data[0].phonetic} + +

+ +

${data[0].meanings[0].partOfSpeech}

+

Meaning:${wordDefinition.definition === undefined ? "Not Found": wordDefinition.definition}

+

Example:${wordDefinition.example === undefined ? "Not Found": wordDefinition.example}

+

Antonyms:

+ + + `; + + //Fethching Antonyms from API + if(wordDefinition.antonyms.length===0){ + resultDiv.innerHTML += `Not Found`; + } + else{ + for(let i =0; i${wordDefinition.antonyms[i]}`; + } + } + + //Fethching Synonyms from API + if(wordDefinition.synonyms.length===0){ + resultDiv.innerHTML += `

Synonyms:Not Found

`; + } + else{ + for(let i =0; iSynonyms:

`; + } + } + + //Adding Read More Button + resultDiv.innerHTML += `
Read More
`; + + } + + catch (error){ + resultDiv.innerHTML =`

Sorry, the word could not be Found

`; + } + + // function playSound() { + // // src = `https://api.dictionaryapi.dev/media/pronunciations/en/${word}`; + // sound.setAttribute = `${data[0].phonetics[0].audio}`; + // sound.play(); + // } +} + +{/* */} \ No newline at end of file diff --git a/Dictonary-App/style.css b/Dictonary-App/style.css new file mode 100644 index 0000000..b781f14 --- /dev/null +++ b/Dictonary-App/style.css @@ -0,0 +1,124 @@ +/* Declaring CSS Variables */ +:root{ + --primary-color: #008080; + --bcg-color: #f5f5f5; + --padding: 20px; + --border-radius: 5px; + --text-color: #fff; + +} + +/* Default Document Styling */ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family:Verdana, sans-serif; +} + +body{ + background-color: var(--bcg-color); + width: 100vw; +} + +header{ + background-color: var(--primary-color); + color: var(--text-color); + padding: var(--padding); + +} + +header h1{ + font-size: 36px; +} + +main{ + min-height: 78vh; + padding: var(--padding); + max-width: 800px; + margin:0 auto; +} + +main form{ + display: flex; + justify-content: center; +} +.result{ + display: none; +} +form input[type="text"], button[type="submit"], .result div a{ + border: none; + font-size: 16px; + font-weight:500; + border-radius: var(--border-radius); + /* padding: calc(var(--padding/2)); */ + padding: 10px; + +} + +form input[type="text"]{ + flex-grow: 1; +} + +form button[type="submit"]{ + background-color: var(--primary-color); + padding:(calc(var(--padding)/2)); + color: var(--text-color); + margin-left: 20px; + cursor: pointer; + flex-grow: 0.3; + +} + +footer{ + background-color: var(--primary-color); + color: var(--text-color); + padding:var(--padding) ; + font-size: 18px; + position: fixed; + width: 100%; + text-align: center; +} +.result{ + background-color: #fff; + padding: var(--padding); + border-radius: var(--border-radius); + margin-top: 20px; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); +} + +.result p{ + margin-top: 10px; +} + +.result p[class="partOfSpeech"]{ + font-style: italic; + color: #808080; + margin-top: 2px; +} + +.result li{ + padding: calc(var(--padding)/6); + margin-top: 20px; +} + +.result div{ + margin-top: 20px; +} + +.result div a{ + text-decoration: none; + color: var(--text-color); + background-color: var(--primary-color); +} + +/* Responsive Code */ +@media screen and (max-width:320px) { + main form{ + flex-direction: column; + } + form button[type="submit"]{ + margin-top: 10px; + margin-left: 0; + } +} \ No newline at end of file diff --git a/JavaScript-API-Projects/Currency-Convertor/index.html b/JavaScript-API-Projects/Currency-Convertor/index.html new file mode 100644 index 0000000..e18f19d --- /dev/null +++ b/JavaScript-API-Projects/Currency-Convertor/index.html @@ -0,0 +1,38 @@ + + + + + + + Currency converter + + +
+
+
+

Currency Converter

+
+ + +
+
→
+
+ + +
+
1 USD = 83 INR
+
+
+
+ + + + + + \ No newline at end of file diff --git a/JavaScript-API-Projects/Currency-Convertor/script.js b/JavaScript-API-Projects/Currency-Convertor/script.js new file mode 100644 index 0000000..a952c52 --- /dev/null +++ b/JavaScript-API-Projects/Currency-Convertor/script.js @@ -0,0 +1,72 @@ +const fromAmountElement = document.querySelector('.amount'); +const convertedAmountElement = document.querySelector('.convertedAmount'); +const fromCurrencyElement = document.querySelector('.fromCurrency'); +const toCurrencyElement = document.querySelector('.toCurrency'); +const resultElement = document.querySelector('.result'); +const converterContainer = document.querySelector('.converter-container'); + +// Array of Objects to populate the Select options +const countries = [ + { code: "USD", name: "United States Dollar" }, + { code: "AUD", name: "Australian Dollar" }, + { code: "BGN", name: "Bulgarian Lev" }, + { code: "BRL", name: "Brazilian Real" }, + { code: "CAD", name: "Canadian Dollar" }, + { code: "INR", name: "Indian Rupeess" }, + { code: "CNY", name: "Chinese Yuan" }, +]; + +// Showing Countries from the array in Select Tag +countries.forEach(country => { + const option1 = document.createElement('option'); + const option2 = document.createElement('option'); + + option1.value = option2.value = country.code; + option1.textContent = option2.textContent = `${country.code} (${country.name})`; + + fromCurrencyElement.appendChild(option1); + toCurrencyElement.appendChild(option2); + + //Setting Default Value in Select Option + fromCurrencyElement.value = "USD"; + toCurrencyElement.value = "INR"; + +}); + + +// Function to get Exchange Rates using an API with an Async function +const getExchangeRates = async () => { + const amount = parseFloat(fromAmountElement.value); + const fromCurrency = fromCurrencyElement.value; + const toCurrency = toCurrencyElement.value; + resultElement.textContent = "Fetching Exchange Rates..."; + + try { + // Fetch Data from API + const response = await fetch(`https://api.exchangerate-api.com/v4/latest/${fromCurrency}`); + const data = await response.json(); + const conversionRate = data.rates[toCurrency]; + const convertedAmount = (amount * conversionRate).toFixed(2); + convertedAmountElement.value = convertedAmount; + + if (isNaN(conversionRate)) { + resultElement.textContent = "Exchange Rates are not available for the selected country!!!"; + convertedAmountElement.textContent = ""; + } else { + convertedAmountElement.textContent = convertedAmount; + resultElement.textContent = `${amount} ${fromCurrency} = ${convertedAmount} ${toCurrency}`; + } + } catch (error) { + converterContainer.innerHTML = `

Error while Fetching Exchange Rates!!!

`; + } +}; + +// Add event listeners to trigger the exchange rate fetching +fromAmountElement.addEventListener('input', getExchangeRates); + +// Add event listeners to trigger the currency change by user +fromCurrencyElement.addEventListener('change', getExchangeRates); +toCurrencyElement.addEventListener('change', getExchangeRates); + +// Add event listeners on window load event +window.addEventListener('load', getExchangeRates); diff --git a/JavaScript-API-Projects/Currency-Convertor/style.css b/JavaScript-API-Projects/Currency-Convertor/style.css new file mode 100644 index 0000000..f749ce5 --- /dev/null +++ b/JavaScript-API-Projects/Currency-Convertor/style.css @@ -0,0 +1,86 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: Verdana, Geneva, Tahoma, sans-serif; +} + +body{ + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background: #1d4444; +} + +.converter-container{ + background: #fff; + border-radius: 8px; + box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5); + backdrop-filter: blur(8px); + padding: 24px 30px; + text-align: center; +} + +.converter-container h1{ + font-size: 28px; + text-decoration: underline; + color: #202124; + margin-bottom: 40px; +} + +.converter-container .input-container{ + border: 2px solid #bbbbbd; + border-radius: 4px; + margin-block: 20px; +} + +.converter-container .input-container:focus-within{ + border-color: #007bff; +} + +.converter-container .input-container input, +.converter-container .input-container select{ + width: 150px; + outline: none; + border: none; + font-size: 20px; + padding: 8px; + overflow: hidden; +} + +.converter-container .arrow{ + transform: rotate(90deg); + font-size: 60px; + font-weight: 700; +} + +.converter-container .result{ + font-weight: 700; + font-size: 20px; + margin-top: 20px; +} + +/* Responsive Code */ + +@media screen and (max-width:440px) { + .converter-container{ + width: 80%; + margin: 0 auto; + + } + .converter-container h1{ + font-size: 22px; + } + + .converter-container .input-container{ + border: none; + } + + .converter-container .input-container input, + .converter-container .input-container select{ + border: 1px solid #ccc; + margin-block: 4px; + width: 100%; + } +} \ No newline at end of file diff --git a/JavaScript-API-Projects/Dictonary-App/index.html b/JavaScript-API-Projects/Dictonary-App/index.html new file mode 100644 index 0000000..d977cc4 --- /dev/null +++ b/JavaScript-API-Projects/Dictonary-App/index.html @@ -0,0 +1,31 @@ + + + + + + + + + + Dictionary App + + +
+ +
+
+
+ + +
+
+
+
+

© Dictionary App - 2023-2024

+
+ + + \ No newline at end of file diff --git a/JavaScript-API-Projects/Dictonary-App/script.js b/JavaScript-API-Projects/Dictonary-App/script.js new file mode 100644 index 0000000..413a07a --- /dev/null +++ b/JavaScript-API-Projects/Dictonary-App/script.js @@ -0,0 +1,73 @@ +const form = document.querySelector('form'); +const resultDiv = document.querySelector('.result'); +// const sound = document.getElementById('sound'); + +form.addEventListener("submit", (e)=>{ + e.preventDefault(); + getWordInfo(form.elements[0].value); +}); + + +const getWordInfo = async (word)=>{ + try{ + resultDiv.style.display = "block"; + resultDiv.innerHTML = "Fetching Data..."; + const response = await fetch(`https://api.dictionaryapi.dev/api/v2/entries/en/${word}`); + const data = await response.json(); + console.log(data); + + let wordDefinition = data[0].meanings[0].definitions[0]; + let audioSrc = data[0].phonetics[0].audio; + + resultDiv.innerHTML =` +

Word:${data[0].word}

+ +

Phonetics:${data[0].phonetic} + +

+ +

${data[0].meanings[0].partOfSpeech}

+

Meaning:${wordDefinition.definition === undefined ? "Not Found": wordDefinition.definition}

+

Example:${wordDefinition.example === undefined ? "Not Found": wordDefinition.example}

+

Antonyms:

+ + + `; + + //Fethching Antonyms from API + if(wordDefinition.antonyms.length===0){ + resultDiv.innerHTML += `Not Found`; + } + else{ + for(let i =0; i${wordDefinition.antonyms[i]}`; + } + } + + //Fethching Synonyms from API + if(wordDefinition.synonyms.length===0){ + resultDiv.innerHTML += `

Synonyms:Not Found

`; + } + else{ + for(let i =0; iSynonyms:

    ${wordDefinition.synonyms[i]}
`; + } + } + + //Adding Read More Button + resultDiv.innerHTML += `
Read More
`; + + } + + catch (error){ + resultDiv.innerHTML =`

Sorry, the word could not be Found

`; + } + + // function playSound() { + // // src = `https://api.dictionaryapi.dev/media/pronunciations/en/${word}`; + // sound.setAttribute = `${data[0].phonetics[0].audio}`; + // sound.play(); + // } +} + +{/* */} \ No newline at end of file diff --git a/JavaScript-API-Projects/Dictonary-App/style.css b/JavaScript-API-Projects/Dictonary-App/style.css new file mode 100644 index 0000000..b781f14 --- /dev/null +++ b/JavaScript-API-Projects/Dictonary-App/style.css @@ -0,0 +1,124 @@ +/* Declaring CSS Variables */ +:root{ + --primary-color: #008080; + --bcg-color: #f5f5f5; + --padding: 20px; + --border-radius: 5px; + --text-color: #fff; + +} + +/* Default Document Styling */ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family:Verdana, sans-serif; +} + +body{ + background-color: var(--bcg-color); + width: 100vw; +} + +header{ + background-color: var(--primary-color); + color: var(--text-color); + padding: var(--padding); + +} + +header h1{ + font-size: 36px; +} + +main{ + min-height: 78vh; + padding: var(--padding); + max-width: 800px; + margin:0 auto; +} + +main form{ + display: flex; + justify-content: center; +} +.result{ + display: none; +} +form input[type="text"], button[type="submit"], .result div a{ + border: none; + font-size: 16px; + font-weight:500; + border-radius: var(--border-radius); + /* padding: calc(var(--padding/2)); */ + padding: 10px; + +} + +form input[type="text"]{ + flex-grow: 1; +} + +form button[type="submit"]{ + background-color: var(--primary-color); + padding:(calc(var(--padding)/2)); + color: var(--text-color); + margin-left: 20px; + cursor: pointer; + flex-grow: 0.3; + +} + +footer{ + background-color: var(--primary-color); + color: var(--text-color); + padding:var(--padding) ; + font-size: 18px; + position: fixed; + width: 100%; + text-align: center; +} +.result{ + background-color: #fff; + padding: var(--padding); + border-radius: var(--border-radius); + margin-top: 20px; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); +} + +.result p{ + margin-top: 10px; +} + +.result p[class="partOfSpeech"]{ + font-style: italic; + color: #808080; + margin-top: 2px; +} + +.result li{ + padding: calc(var(--padding)/6); + margin-top: 20px; +} + +.result div{ + margin-top: 20px; +} + +.result div a{ + text-decoration: none; + color: var(--text-color); + background-color: var(--primary-color); +} + +/* Responsive Code */ +@media screen and (max-width:320px) { + main form{ + flex-direction: column; + } + form button[type="submit"]{ + margin-top: 10px; + margin-left: 0; + } +} \ No newline at end of file diff --git a/JavaScript-API-Projects/Image-Search-App/index.html b/JavaScript-API-Projects/Image-Search-App/index.html new file mode 100644 index 0000000..0ffa14d --- /dev/null +++ b/JavaScript-API-Projects/Image-Search-App/index.html @@ -0,0 +1,32 @@ + + + + + + + + + Image Search App - JavaScripit API Project + + +
+

Image Search App

+
+
+ + search +
+
+
+
+
+
+

No Images to Show

+
+ +
+
+ + + \ No newline at end of file diff --git a/JavaScript-API-Projects/Image-Search-App/script.js b/JavaScript-API-Projects/Image-Search-App/script.js new file mode 100644 index 0000000..226a7df --- /dev/null +++ b/JavaScript-API-Projects/Image-Search-App/script.js @@ -0,0 +1,83 @@ +const accessKey = "ywy6rhvWIDmsqtl9h68Dlvi9z_lggl_ZageXZ5qHm9Y"; //ywy6rhvWIDmsqtl9h68Dlvi9z_lggl_ZageXZ5qHm9Y +const searchForm = document.querySelector("form"); +const searchInput = document.querySelector(".search-input"); +const imagesContainer = document.querySelector(".images-container"); +const loadMoreBtn = document.querySelector(".loadMoreBtn"); +let page = 1; + +//Function to fetch Images using Unsplash API +const fetchImages = async (query, pageNo) =>{ + try{ + if (pageNo===1) { + imagesContainer.innerHTML = ''; + } + + + const url = `https://api.unsplash.com/search/photos?query=${query}&per_page=28&page=${pageNo}&client_id=${accessKey}`; + + const response = await fetch(url); + const data = await response.json(); + + if(data.results.length > 0){ + data.results.forEach(photo =>{ + //Creating Image Div + const imageElement = document.createElement('div'); + imageElement.classList.add("imageDiv"); + imageElement.innerHTML = ``; + + //Creating Overlay Effect + const overlayElement = document.createElement('div'); + overlayElement.classList.add("overlay"); + + //Creating Overlay Text + const overlaytext = document.createElement('h3'); + overlaytext.innerText =`${photo.alt_description}`; + + //Adding elements + overlayElement.appendChild(overlaytext); + imageElement.appendChild(overlayElement); + imagesContainer.appendChild(imageElement); + + }); + + if(data.total_pages === pageNo){ + loadMoreBtn.style.display = "none"; + } + else{ + loadMoreBtn.style.display = "block"; + } + } + else{ + imagesContainer.innerHTML = `

No Image Found

`; + if(loadMoreBtn.style.display === "block"){ + loadMoreBtn.style.display = "none"; + } + } + } + catch (error) { + imagesContainer.innerHTML = `

Failed to fetch images. Please try later.

`; + } +} + + + +//Adding Eventlistner to Search Form +searchForm.addEventListener("submit", (e)=>{ + e.preventDefault(); + const inputText = searchInput.value.trim(); + if(inputText!=""){ + page = 1; + fetchImages(inputText, page); + } + else{ + imagesContainer.innerHTML = `

Please enter a query to Search

`; + if(loadMoreBtn.style.display === "block"){ + loadMoreBtn.style.display = "none"; + } + } +}); + +//Adding Eventlistner to load more button to load more images +loadMoreBtn.addEventListener('click', () =>{ + fetchImages(searchInput.value.trim(), ++page); +}); \ No newline at end of file diff --git a/JavaScript-API-Projects/Image-Search-App/style.css b/JavaScript-API-Projects/Image-Search-App/style.css new file mode 100644 index 0000000..83e2304 --- /dev/null +++ b/JavaScript-API-Projects/Image-Search-App/style.css @@ -0,0 +1,120 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: Arial, Helvetica, sans-serif; +} + +body{ + width: 100%; + height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: 40px; +} + +header{ + width: 100%; + max-width: 800px; + text-align: center; +} + +header h1{ + color: #767676; +} + +header form .search-container{ + margin-top: 20px; + position: relative; +} + +header form .search-container input{ + width: 100%; + padding: 12px 24px; + font-style: 18px; + border-radius: 20px; + border:none; + background: #eee; +} + +header form .search-container .material-icons{ + position: absolute; + right: 10px; + bottom: 9px; + color: #777; +} + +.images-container{ + margin-block: 50px; + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + gap: 20px; +} + +.images-container img{ + width: 300px; + height: 280px; +} + +.images-container .imageDiv{ + position: relative; +} + +.imageDiv .overlay{ + position: absolute; + left: 0; + bottom: 0; + height: 0; + width: 100%; + background-color: rgba(0, 0, 0, 0.7); + transition: height 0.3s ease; + display: flex; + justify-content: center; + align-items: center; +} + +.imageDiv:hover .overlay{ + height: 100%; +} + +.imageDiv .overlay h3{ + color: #fff; + display: none; + font-size: 20px; + text-align: center; +} +.imageDiv:hover .overlay h3{ + display: block; +} + +/* Adding Style to Load more button */ +.loadMoreBtn{ + border:none; + background-color: #510175; + color: #ffffff; + font-size: 20px; + font-weight: 600; + cursor: pointer; + padding: 8px 12px; + border-radius: 4px; + display: none; +} + +main section{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin: 20px 0 50px 0; +} + +/* Responsive Code */ +@media screen and (max-width:920px){ + header{ + width: 80%; + } + +} \ No newline at end of file diff --git a/JavaScript-API-Projects/Movie-App/index.html b/JavaScript-API-Projects/Movie-App/index.html new file mode 100644 index 0000000..b1e18d9 --- /dev/null +++ b/JavaScript-API-Projects/Movie-App/index.html @@ -0,0 +1,41 @@ + + + + + + + Movie Guide App - Javascript API Project + + + + + + +
+
+
+

Search Movie Details Here

+ +
+
+
+ + +
+

© 2023-2024 Movie Guide App

+
+ + + \ No newline at end of file diff --git a/JavaScript-API-Projects/Movie-App/script.js b/JavaScript-API-Projects/Movie-App/script.js new file mode 100644 index 0000000..8924cb3 --- /dev/null +++ b/JavaScript-API-Projects/Movie-App/script.js @@ -0,0 +1,88 @@ +// API used:Search movie by name +//API Site URL:https://omdbapi.com/ + +// get the elements from index.html file into JS file. +const searchForm = document.querySelector("form"); +const movieContainer = document.querySelector(".movieContainer"); +const inputBox = document.querySelector(".inputBox"); + +//function to fetch movie details using omDb API +const getMovieInfo = async (movie) =>{ + try { + const myApiKey = "fa2ec7d2"; + const url = `http://www.omdbapi.com/?apikey=${myApiKey}&t=${movie}`; + + const response = await fetch(url); + const data = await response.json(); + + showMovieData(data); + } + catch (error) { + showErrorMessage("No Movie Found!!!"); + } +} + +//Function to show movie data on screen +const showMovieData = (data)=>{ + movieContainer.innerHTML = ""; + movieContainer.classList.remove("noBackground"); + //Example: Use of Array-Destructuring assignment to extract properties from data object + const { Title, imdbRating, Genre, Released, Runtime, Actors, Plot, Poster } = data; + + const movieElement = document.createElement("div"); + movieElement.classList.add("movie-info"); + movieElement.innerHTML = `

${Title}

+

Rating: ⭐${imdbRating}

`; + + + const movieGenreElement = document.createElement("div"); + movieGenreElement.classList.add("movieGenre"); + + Genre.split(",").forEach(element => { + const p = document.createElement("p"); + p.innerText = element; + movieGenreElement.appendChild(p); + }); + + movieElement.appendChild(movieGenreElement); + + movieElement.innerHTML += `

Release Date: ${Released}

+

Duration: ${Runtime}

+

Cast: ${Actors}

+

Plot: ${Plot}

`; + + //Creating a Div for Movie Poster + const moviePosterElement = document.createElement("div"); + moviePosterElement.classList.add("movie-poster"); + moviePosterElement.innerHTML = ``; + + + + movieContainer.appendChild(moviePosterElement); + movieContainer.appendChild(movieElement); +} +//Function to Display error message +const showErrorMessage = (message) =>{ + movieContainer.innerHTML = `

${message}

`; + movieContainer.classList.add("noBackground"); +} + +//Function to handle Form Submision +const handleFormSubmission = (e) =>{ + e.preventDefault(); + const movieName = inputBox.value.trim(); + if (movieName!=""){ + showErrorMessage("Fetching Movie Information..."); + getMovieInfo(movieName); + } + else{ + showErrorMessage("Enter a movie Name to get movie information"); + //movieContainer.classList.add("noBackground"); + } +} + + +//Add eventListner to Search form +searchForm.addEventListener("submit", handleFormSubmission); + + diff --git a/JavaScript-API-Projects/Movie-App/style.css b/JavaScript-API-Projects/Movie-App/style.css new file mode 100644 index 0000000..b93b3d5 --- /dev/null +++ b/JavaScript-API-Projects/Movie-App/style.css @@ -0,0 +1,159 @@ +@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); + +*{ + margin:0; + padding: 0; + box-sizing: border-box; + font-family: 'Roboto', sans-serif; +} + +body{ + background-color: #f8f8f8; + +} +/* Navbar styling */ +nav{ + background: #232f3e; + color: #fff; +} +.navbar{ + display: flex; + justify-content: space-between; + align-items: center; + max-width: 1200px; + margin: 0 auto; + padding: 18px; +} + +.searchContainer input, button{ + padding: 5px 10px; + border: none; + font-size: 16px; +} + +.searchContainer input{ + border-radius: 3px 0 0 3px; +} +.searchContainer button{ + border-radius: 0 3px 3px 0; + background-color: #f5c518; + cursor: pointer; + transition: all 0.2s; +} + +.searchContainer button:hover{ + background-color: #ffdd45; +} + +/* Main Movie Section Styling */ + +main{ + max-width: 1400px; + margin: 0 auto; + margin-block:40px ; +} +main section{ + display: flex; + justify-content: center; + align-items: center; + min-height: 72vh; +} + +.movieContainer{ + display: flex; + justify-content: center; + background: #fff; + box-shadow: 0 0 10px #ccc; + width: 80%; + border-radius: 5px; +} +.movieContainer.noBackground{ + background: none; + box-shadow: none; + align-items: center; +} + +.movie-poster img{ + height: 450px; + margin-right: 30px; + border-radius: 5px 0 0 5px; +} + +.movie-info{ + padding-inline:15px; +} +.movie-info h2{ + text-align: center; + font-size: 32px; + margin:20px 0 12px 0; +} + +.movie-info h2+p{ + text-align: center; +} + +.movie-info .movieGenre{ + display: flex; + justify-content: center; + margin-block: 5px; + overflow-x: auto; +} + +.movie-info .movieGenre p{ + background: #232f3e; + color: #fff; + padding: 5px 14px; + margin-inline: 5px; + border: 2px solid #000; + border-radius: 6px; + font-weight: 700; +} +.movie-info p{ + font-size: 18px; + margin-block: 16px; + line-height: 24px; +} + +/* Footer Styling */ + +footer{ + text-align: center; + background: #232f3e; + color: #fff; + padding-block: 20px; + margin-top: 40px; + font-size: 20px; +} + + + + + +/* Responsive Code */ +@media screen and (max-width:950px) { + .movieContainer{ + flex-direction: column; + } + .movie-poster img{ + width: 100%; + height:fit-content; + margin-right: 0; + } + + .movie-info{ + padding-inline: 30px; + } + +} + +@media screen and (max-width:630px){ + .navbar{ + flex-direction: column; + justify-content: center; + align-items: center; + } + .searchContainer{ + margin-top: 12px; + } + +} \ No newline at end of file diff --git a/JavaScript-API-Projects/Recipe-WebApp/index.html b/JavaScript-API-Projects/Recipe-WebApp/index.html new file mode 100644 index 0000000..319d955 --- /dev/null +++ b/JavaScript-API-Projects/Recipe-WebApp/index.html @@ -0,0 +1,39 @@ + + + + + + + + + + Recipe App + + +
+ +
+
+
+
+

Search Your Favourite Recipes

+
+
+ +
+
+
+
+ + + + + \ No newline at end of file diff --git a/JavaScript-API-Projects/Recipe-WebApp/script.js b/JavaScript-API-Projects/Recipe-WebApp/script.js new file mode 100644 index 0000000..624f9bd --- /dev/null +++ b/JavaScript-API-Projects/Recipe-WebApp/script.js @@ -0,0 +1,109 @@ +// API used:Search meal by name +//API Site URL:https://themealdb.com/api.php + +// get the elements from index.html file into JS file. +const searchBox = document.querySelector(".searchBox"); +const searchBtn = document.querySelector(".searchBtn"); +const recipeContainer = document.querySelector(".recipe-container"); +const recipeDetailsContent = document.querySelector(".recipe-details-content"); +const recipeCloseBtn = document.querySelector(".recipe-closeBtn"); + + + +//function to get recipie from API +const fetchRecipies = async (query) =>{ + recipeContainer.innerHTML = "

Fetching Recipies...

"; + try { + + + const data = await fetch(`https://www.themealdb.com/api/json/v1/1/search.php?s=${query}`); + const response = await data.json(); + + recipeContainer.innerHTML = ""; + response.meals.forEach(meal => { + const recipeDiv = document.createElement("div"); + recipeDiv.classList.add("recipe"); + recipeDiv.innerHTML = ` + +

${meal.strMeal}

+

${meal.strArea} Dish

+

Belongs to ${meal.strCategory} Category

+ + + ` + const button = document.createElement("button"); + button.textContent = "View Recipe"; + recipeDiv.appendChild(button); + + // Adding EventListner to recipeButton + button.addEventListener('click', ()=>{ + openRecipePopUp(meal); + + }); + + recipeContainer.appendChild(recipeDiv); + + + + }); + } + catch (error) { + recipeContainer.innerHTML = "

Error in Fetching Recipies...

"; + + + } + +} + +// Function to fetch Ingredients and details +const fetchIngredients = (meal) =>{ + let ingredientsList = ""; + for(let i = 1; i<=20;i++){ + const ingredient = meal[`strIngredient${i}`]; + if(ingredient){ + const measure = meal[`strMeasure${i}`]; + ingredientsList +=`
  • ${measure} ${ingredient}
    • ` + } + else{ + break; + } + } + return ingredientsList; +} + +// Function to open recipe popup +const openRecipePopUp = (meal) =>{ + recipeDetailsContent.innerHTML = ` +

    ${meal.strMeal}

    +

    Ingredients:

    +
      ${fetchIngredients(meal)}
    +
    +

    Instructions:

    +

    ${meal.strInstructions}

    +
    + + + ` + recipeDetailsContent.parentElement.style.display = "block"; +} + +// Function to CLOSE recipe popup +recipeCloseBtn.addEventListener("click", ()=>{ + recipeDetailsContent.parentElement.style.display = "none"; + +}); + +// Add eventlistner on searchBtn +searchBtn.addEventListener('click', (e)=>{ + e.preventDefault(); + const searchInput = searchBox.value.trim(); + if(!searchInput){ + recipeContainer.innerHTML =`

    Type the name of the meal in the Search Box

    `; + return; + } + fetchRecipies(searchInput); + + + //console.log("Button claimed"); +}); + diff --git a/JavaScript-API-Projects/Recipe-WebApp/style.css b/JavaScript-API-Projects/Recipe-WebApp/style.css new file mode 100644 index 0000000..e853db3 --- /dev/null +++ b/JavaScript-API-Projects/Recipe-WebApp/style.css @@ -0,0 +1,215 @@ +*{ + margin:0; + padding: 0; + box-sizing: border-box; + font-family: Verdana, Geneva, Tahoma, sans-serif; +} + +body{ + background-color: #2b1d0f; + color: #fff; +} + +header nav{ + background-color: #212121; + padding: 20px; + display: flex; + justify-content: space-between; + align-items: center; + z-index: 1; +} + +header nav h1{ + font-size: 26px; + font-weight: 700; + letter-spacing: 1px; + text-transform: uppercase; +} + +header nav form{ + display: flex; + justify-content: center; +} + +form input[type="text"]{ + flex-grow: 1; + margin-right: 10px; +} + +form input[type="text"], + button[type="submit"]{ + bottom: none; + font-size: 18px; + padding: 10px; + border-radius: 8px; +} + +form button[type="submit"]{ + background-color: #f44336; + color: #fff; + cursor: pointer; +} +form button[type="submit"]:hover, .recipe button:hover, .recipe-closeBtn:hover{ + background-color: #ff5c5c; +} + +/* Main Section CSS */ +.recipe-container{ + text-align: center; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + grid-gap: 40px; + width: 80%; + margin: 10px auto; + padding: 20px; + place-items: center; + +} + +/* Recipe deatails */ +.recipe-details{ + display: none; + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%,-50%); + -webkit-transform: translate(-50%,-50%); + background-color: #694c2f; + border-radius: 12px; + width: 40%; + height: 60%; + font-size: 20px; + transition: all 0.5 ease-in-out; + overflow-y: scroll; +} + +.recipe-details-content{ + padding: 30px; +} + +.recipeName{ + text-transform: uppercase; + text-align: center; + text-decoration: underline; + +} + +.recipeName, .ingredientList, .recipeInstructions{ + margin-bottom: 20px; +} + +.ingredientList li{ + margin-top: 10px; + margin-left: 20px; + +} + +.recipeInstructions p{ + line-height: 30px; + white-space: pre-line; +} + +.recipe-closeBtn{ + bottom: none; + font-size: 18px; + padding: 8px; + border-radius: 8px; + background-color: #f44336; + color: #fff; + position: absolute; + top: 20px; + right: 20px; + width: 30px; + height: 30px; + display: flex; + justify-content: center; + align-items: center; + +} + +/* adding ScrollBar to recipe details popup */ +.recipe-details::-webkit-scrollbar{ + width: 10px; +} + +.recipe-details::-webkit-scrollbar-thumb{ + background: #8f8f8f; + border-radius: 16px; + --webkit-border-radius:16px; +} + +/* adding ScrollBar to recipe details popup */ +body::-webkit-scrollbar{ + width: 16px; +} + +body::-webkit-scrollbar-thumb{ + background: #8f8f8f; + +} + +.body::-webkit-scrollbar-track{ + background: #fcfcfc; +} + + + +.recipe{ + background-color: #fff; + display: flex; + flex-direction:column; + color: #000; + border-radius: 6px; + box-shadow: 0 5px 10px rgba(78, 73, 73, 0.1); + cursor: pointer; + max-width: 350px; + transition: transform 0.3s ease-in-out; +} + +.recipe:hover{ + transform: scale(1.02); +} + +.recipe img{ + height: 300px; +} + +.recipe h3{ + font-size: 24px; + margin: block 5px; +} + +.recipe p{ + font-size: 20px; + color: #4a4a4a; + margin: 5px 0; +} + +.recipe span{ + font-weight:600; +} + +.recipe button{ + font-size: 20px; + font-weight: 600; + padding: 10px; + border-radius: 5px; + border: none; + cursor: pointer; + margin: 18px auto; + background-color:#f44336 ; + color: #fff; +} + + +/* Responsive Code */ +@media screen and (max-width:600) { + header nav{ + flex-direction: column; + } + header nav form{ + width: 80%; + margin-top: 20px; + } + +} \ No newline at end of file diff --git a/Weather App/assets/404.png b/JavaScript-API-Projects/Weather-App/assets/404.png similarity index 100% rename from Weather App/assets/404.png rename to JavaScript-API-Projects/Weather-App/assets/404.png diff --git a/Weather App/assets/clear.png b/JavaScript-API-Projects/Weather-App/assets/clear.png similarity index 100% rename from Weather App/assets/clear.png rename to JavaScript-API-Projects/Weather-App/assets/clear.png diff --git a/Weather App/assets/cloud.png b/JavaScript-API-Projects/Weather-App/assets/cloud.png similarity index 100% rename from Weather App/assets/cloud.png rename to JavaScript-API-Projects/Weather-App/assets/cloud.png diff --git a/Weather App/assets/mist.png b/JavaScript-API-Projects/Weather-App/assets/mist.png similarity index 100% rename from Weather App/assets/mist.png rename to JavaScript-API-Projects/Weather-App/assets/mist.png diff --git a/Weather App/assets/rain.png b/JavaScript-API-Projects/Weather-App/assets/rain.png similarity index 100% rename from Weather App/assets/rain.png rename to JavaScript-API-Projects/Weather-App/assets/rain.png diff --git a/Weather App/assets/snow.png b/JavaScript-API-Projects/Weather-App/assets/snow.png similarity index 100% rename from Weather App/assets/snow.png rename to JavaScript-API-Projects/Weather-App/assets/snow.png diff --git a/Weather App/index.html b/JavaScript-API-Projects/Weather-App/index.html similarity index 97% rename from Weather App/index.html rename to JavaScript-API-Projects/Weather-App/index.html index f034a01..ab4ab72 100644 --- a/Weather App/index.html +++ b/JavaScript-API-Projects/Weather-App/index.html @@ -1,57 +1,57 @@ - - - - - - - Weather App With JavaScript - - - -
    -
    -
    - - - -
    -
    - -
    -

    Sorry, Location not found!!!

    - 404 Error -
    - -
    - Weather Image - -
    -

    0 °C

    -

    light rain

    -
    - -
    -
    - -
    - 45% -

    Humidity

    -
    -
    - -
    - -
    - 12Km/H -

    Wind Speed

    -
    -
    -
    -
    -
    - - - - - + + + + + + + Weather App With JavaScript + + + +
    +
    +
    + + + +
    +
    + +
    +

    Sorry, Location not found!!!

    + 404 Error +
    + +
    + Weather Image + +
    +

    0 °C

    +

    light rain

    +
    + +
    +
    + +
    + 45% +

    Humidity

    +
    +
    + +
    + +
    + 12Km/H +

    Wind Speed

    +
    +
    +
    +
    +
    + + + + + \ No newline at end of file diff --git a/Weather App/script.js b/JavaScript-API-Projects/Weather-App/script.js similarity index 92% rename from Weather App/script.js rename to JavaScript-API-Projects/Weather-App/script.js index 40057e2..9fc546f 100644 --- a/Weather App/script.js +++ b/JavaScript-API-Projects/Weather-App/script.js @@ -1,63 +1,63 @@ -const inputBox = document.querySelector('.input-box'); -const searchBtn = document.getElementById('searchBtn'); -const weather_img = document.querySelector('.weather-img'); -const temperature = document.querySelector('.temperature'); -const description = document.querySelector('.description'); -const humidity = document.getElementById('humidity'); -const wind_speed = document.getElementById('wind-speed'); - -const location_not_found = document.querySelector('.location-not-found'); - -const weather_body = document.querySelector('.weather-body'); - - -async function checkWeather(city){ - const api_key = "4cd0eee81294c867b4bc4cfc64e998c5"; - const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${api_key}`; - - const weather_data = await fetch(`${url}`).then(response => response.json()); - - - if(weather_data.cod === `404`){ - location_not_found.style.display = "flex"; - weather_body.style.display = "none"; - console.log("error"); - return; - } - - console.log("run"); - location_not_found.style.display = "none"; - weather_body.style.display = "flex"; - temperature.innerHTML = `${Math.round(weather_data.main.temp - 273.15)}°C`; - description.innerHTML = `${weather_data.weather[0].description}`; - - humidity.innerHTML = `${weather_data.main.humidity}%`; - wind_speed.innerHTML = `${weather_data.wind.speed}Km/H`; - - - switch(weather_data.weather[0].main){ - case 'Clouds': - weather_img.src = "/assets/cloud.png"; - break; - case 'Clear': - weather_img.src = "/assets/clear.png"; - break; - case 'Rain': - weather_img.src = "/assets/rain.png"; - break; - case 'Mist': - weather_img.src = "/assets/mist.png"; - break; - case 'Snow': - weather_img.src = "/assets/snow.png"; - break; - - } - - console.log(weather_data); -} - - -searchBtn.addEventListener('click', ()=>{ - checkWeather(inputBox.value); +const inputBox = document.querySelector('.input-box'); +const searchBtn = document.getElementById('searchBtn'); +const weather_img = document.querySelector('.weather-img'); +const temperature = document.querySelector('.temperature'); +const description = document.querySelector('.description'); +const humidity = document.getElementById('humidity'); +const wind_speed = document.getElementById('wind-speed'); + +const location_not_found = document.querySelector('.location-not-found'); + +const weather_body = document.querySelector('.weather-body'); + + +async function checkWeather(city){ + const api_key = "901fa3d5a9088d878a794b9cd5532e5f"; //"4cd0eee81294c867b4bc4cfc64e998c5"; //901fa3d5a9088d878a794b9cd5532e5f + const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${api_key}`; + + const weather_data = await fetch(`${url}`).then(response => response.json()); + + + if(weather_data.cod === `404`){ + location_not_found.style.display = "flex"; + weather_body.style.display = "none"; + console.log("error"); + return; + } + + console.log("run"); + location_not_found.style.display = "none"; + weather_body.style.display = "flex"; + temperature.innerHTML = `${Math.round(weather_data.main.temp - 273.15)}°C`; + description.innerHTML = `${weather_data.weather[0].description}`; + + humidity.innerHTML = `${weather_data.main.humidity}%`; + wind_speed.innerHTML = `${weather_data.wind.speed}Km/H`; + + + switch(weather_data.weather[0].main){ + case 'Clouds': + weather_img.src = "/assets/cloud.png"; + break; + case 'Clear': + weather_img.src = "/assets/clear.png"; + break; + case 'Rain': + weather_img.src = "/assets/rain.png"; + break; + case 'Mist': + weather_img.src = "/assets/mist.png"; + break; + case 'Snow': + weather_img.src = "/assets/snow.png"; + break; + + } + + console.log(weather_data); +} + + +searchBtn.addEventListener('click', ()=>{ + checkWeather(inputBox.value); }); \ No newline at end of file diff --git a/Weather App/style.css b/JavaScript-API-Projects/Weather-App/style.css similarity index 94% rename from Weather App/style.css rename to JavaScript-API-Projects/Weather-App/style.css index d8ce52f..6249d7d 100644 --- a/Weather App/style.css +++ b/JavaScript-API-Projects/Weather-App/style.css @@ -1,145 +1,145 @@ -*{ - margin: 0; - padding: 0; - box-sizing: border-box; - border: none; - outline: none; - font-family: sans-serif; -} - -body{ - min-height: 100vh; - display: flex; - justify-content: center; - align-items: center; - background-color: #000; -} - -.container{ - width: 400px; - height: min-content; - background-color: #fff; - border-radius: 12px; - padding: 28px; -} - -.search-box{ - width: 100%; - height: min-content; - display: flex; - justify-content: space-between; - align-items: center; -} - -.search-box input{ - width: 84%; - font-size: 20px; - text-transform: capitalize; - color: #000; - background-color: #e6f5fb; - padding: 12px 16px; - border-radius: 14px; -} - -.search-box input::placeholder{ - color: #000; -} - -.search-box button{ - width: 46px; - height: 46px; - background-color: #e6f5fb; - border-radius: 50%; - cursor: pointer; - font-size: 20px; -} - -.search-box button:hover{ - color: #fff; - background-color: #ababab; -} - -.weather-body{ - justify-content: center; - align-items: center; - flex-direction: column; - margin-block: 20px; - display: none; -} -.weather-body img{ - width: 60%; -} - -.weather-box{ - margin-block: 20px; - text-align: center; -} - -.weather-box .temperature{ - font-size: 40px; - font-weight: 800; - position: relative; -} - -.weather-box .temperature sup{ - font-size: 20px; - position: absolute; - font-weight: 600; -} - -.weather-box .description{ - font-size: 20px; - font-weight: 700; - text-transform: capitalize; -} - -.weather-details{ - width: 100%; - display: flex; - justify-content: space-between; - margin-top: 30px; -} - -.humidity, .wind{ - display: flex; - align-items: center; -} - -.humidity{ - margin-left: 20px; -} - -.wind{ - margin-right: 20px; -} - -.weather-details i{ - font-size: 36px; -} - -.weather-details .text{ - margin-left: 10px; - font-size: 16px; -} - -.text span{ - font-size: 20px; - font-weight: 700; -} - -.location-not-found{ - margin-top: 20px; - display: none; - align-items: center; - justify-content: center; - flex-direction: column; -} - -.location-not-found h1{ - font-size: 20px; - color: #6b6b6b; - margin-block-end: 15px; -} -.location-not-found img{ - width: 80%; +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + border: none; + outline: none; + font-family: sans-serif; +} + +body{ + min-height: 100vh; + display: flex; + justify-content: center; + align-items: center; + background-color: #000; +} + +.container{ + width: 400px; + height: min-content; + background-color: #fff; + border-radius: 12px; + padding: 28px; +} + +.search-box{ + width: 100%; + height: min-content; + display: flex; + justify-content: space-between; + align-items: center; +} + +.search-box input{ + width: 84%; + font-size: 20px; + text-transform: capitalize; + color: #000; + background-color: #e6f5fb; + padding: 12px 16px; + border-radius: 14px; +} + +.search-box input::placeholder{ + color: #000; +} + +.search-box button{ + width: 46px; + height: 46px; + background-color: #e6f5fb; + border-radius: 50%; + cursor: pointer; + font-size: 20px; +} + +.search-box button:hover{ + color: #fff; + background-color: #ababab; +} + +.weather-body{ + justify-content: center; + align-items: center; + flex-direction: column; + margin-block: 20px; + display: none; +} +.weather-body img{ + width: 60%; +} + +.weather-box{ + margin-block: 20px; + text-align: center; +} + +.weather-box .temperature{ + font-size: 40px; + font-weight: 800; + position: relative; +} + +.weather-box .temperature sup{ + font-size: 20px; + position: absolute; + font-weight: 600; +} + +.weather-box .description{ + font-size: 20px; + font-weight: 700; + text-transform: capitalize; +} + +.weather-details{ + width: 100%; + display: flex; + justify-content: space-between; + margin-top: 30px; +} + +.humidity, .wind{ + display: flex; + align-items: center; +} + +.humidity{ + margin-left: 20px; +} + +.wind{ + margin-right: 20px; +} + +.weather-details i{ + font-size: 36px; +} + +.weather-details .text{ + margin-left: 10px; + font-size: 16px; +} + +.text span{ + font-size: 20px; + font-weight: 700; +} + +.location-not-found{ + margin-top: 20px; + display: none; + align-items: center; + justify-content: center; + flex-direction: column; +} + +.location-not-found h1{ + font-size: 20px; + color: #6b6b6b; + margin-block-end: 15px; +} +.location-not-found img{ + width: 80%; } \ No newline at end of file