From 85acdc0fad3521a2e936a44aaaf7e094bc3ae514 Mon Sep 17 00:00:00 2001 From: P-lavanya16 Date: Fri, 2 Aug 2024 16:16:58 +0530 Subject: [PATCH] Added levels --- Movie Finder/index.html | 28 ++- Movie Finder/scripts/script.js | 21 ++ Movie Finder/src/style.css | 295 +++++----------------------- ToDo JS Extension/index.html | 3 +- ToDo JS Extension/manifest.json | 41 ++-- ToDo JS Extension/scripts/script.js | 118 ++++++----- ToDo JS Extension/src/style.css | 56 +++--- 7 files changed, 199 insertions(+), 363 deletions(-) diff --git a/Movie Finder/index.html b/Movie Finder/index.html index 8cb310d4..29fa0206 100644 --- a/Movie Finder/index.html +++ b/Movie Finder/index.html @@ -8,35 +8,31 @@ - + - -
+
-
-
+
+

Search Movie:

- - -
-
+ +
-
-
-
-
+
+
+
+
- - + - \ No newline at end of file + diff --git a/Movie Finder/scripts/script.js b/Movie Finder/scripts/script.js index cc4a8263..20a6c5f5 100644 --- a/Movie Finder/scripts/script.js +++ b/Movie Finder/scripts/script.js @@ -86,6 +86,27 @@ function displayMovieDetails(details){ `; } +const themeToggle = document.getElementById('theme-toggle'); + +themeToggle.addEventListener('click', () => { + if (document.body.classList.contains('light-mode')) { + document.body.classList.remove('light-mode'); + document.body.classList.add('dark-mode'); + } else { + document.body.classList.remove('dark-mode'); + document.body.classList.add('light-mode'); + } +}); + +// You might want to initialize the theme based on user preference or default to dark mode +document.addEventListener('DOMContentLoaded', () => { + const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)").matches; + if (prefersDarkScheme) { + document.body.classList.add('dark-mode'); + } else { + document.body.classList.add('light-mode'); + } +}); window.addEventListener('click', (event) => { if(event.target.className != "form-control"){ diff --git a/Movie Finder/src/style.css b/Movie Finder/src/style.css index 47245412..fbe455ae 100644 --- a/Movie Finder/src/style.css +++ b/Movie Finder/src/style.css @@ -1,298 +1,103 @@ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'); -:root{ - --md-dark-color: #1d1d1d; +:root { + --dark-background: #1d1d1d; --dark-color: #171717; - --light-dark-color: #292929; - --yellow-color: #d4aa11; + --light-background: #f0f0f0; + --light-color: #000; + --highlight-color: #d4aa11; } -*{ - padding: 0; - margin: 0; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -body{ +body { font-family: 'Inter', sans-serif; + transition: background-color 0.3s, color 0.3s; } -::-webkit-scrollbar { - width: 15px; +body.light-mode { + background-color: var(--light-background); + color: var(--light-color); } -::-webkit-scrollbar-thumb { - background-color: #292929; - border-radius: 5px; +body.dark-mode { + background-color: var(--dark-background); + color: var(--dark-color); } -a{ - text-decoration: none; -} -img{ - width: 100%; - display: block; -} -.wrapper{ +.wrapper { min-height: 100vh; background-color: var(--dark-color); -} -.wrapper .container{ - max-width: 1200px; - margin: 0 auto; - padding: 0 1rem; + transition: background-color 0.3s; } -.search-container{ - background-color: var(--md-dark-color); +.search-container { + background-color: var(--dark-background); height: 180px; - display: -webkit-box; - display: -ms-flexbox; display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + align-items: center; + justify-content: center; } -.search-element{ - display: -webkit-box; - display: -ms-flexbox; +.search-element { display: flex; - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; + flex-direction: column; position: relative; } -.search-element h3{ - -ms-flex-item-align: center; - align-self: center; - margin-right: 1rem; - font-size: 2rem; - color: #fff; - font-weight: 500; - margin-bottom: 1.5rem; + +.search-element h3 { + color: var(--highlight-color); } -.search-element .form-control{ + +.search-element .form-control { padding: 1rem 2rem; font-size: 1.4rem; border: none; border-top-left-radius: 3px; border-bottom-left-radius: 3px; outline: none; - color: var(--light-dark-color); + color: var(--dark-color); width: 350px; } -.search-list{ + +.search-list { position: absolute; right: 0; top: 100%; max-height: 500px; - overflow-y: scroll; + overflow-y: auto; z-index: 10; } -.search-list .search-list-item{ - background-color: var(--light-dark-color); + +.search-list .search-list-item { + background-color: var(--dark-background); padding: 0.5rem; border-bottom: 1px solid var(--dark-color); width: calc(350px - 8px); - color: #fff; + color: var(--light-color); cursor: pointer; - -webkit-transition: background-color 200ms ease; - -o-transition: background-color 200ms ease; transition: background-color 200ms ease; } -.search-list .search-list-item:Hover{ - background-color: #1f1f1f; -} -.search-list-item{ - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} -.search-item-thumbnail img{ - width: 40px; - margin-right: 1rem; -} -.search-item-info h3{ - font-weight: 600; - font-size: 1rem; -} -.search-item-info p{ - font-size: 0.8rem; - margin-top: 0.5rem; - font-weight: 600; - opacity: 0.6; -} - -/* thumbnail */ -.search-list::-webkit-scrollbar{ - width: 8px; -} -.search-list::-webkit-scrollbar-track{ - -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); - box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); -} -.search-list::-webkit-scrollbar-thumb{ - background-color: var(--yellow-color); - outline: none; - border-radius: 10px; -} -/* js related class */ -.hide-search-list{ - display: none; +.search-list .search-list-item:hover { + background-color: var(--highlight-color); } -/* movie result */ -.result-container{ +.result-container { padding: 3rem 0; } -.movie-poster img{ - max-width: 300px; - margin: 0 auto; - border: 4px solid #fff; -} -.movie-info{ - text-align: center; - color: #fff; - padding-top: 3rem; -} -/* movie info stylings */ -.movie-title{ - font-size: 2rem; - color: var(--yellow-color); -} -.movie-misc-info{ - list-style-type: none; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - padding: 1rem; -} -.movie-info .year{ - font-weight: 500; -} -.movie-info .rated{ - background-color: var(--yellow-color); - padding: 0.4rem; - margin: 0 0.4rem; - border-radius: 3px; - font-weight: 600; -} -.movie-info .released{ - font-size: 0.9rem; - opacity: 0.9; -} -.movie-info .writer{ - padding: 0.5rem; - margin: 1rem 0; -} -.movie-info .genre{ - background-color: var(--light-dark-color); - display: inline-block; - padding: 0.5rem; - border-radius: 3px; -} -.movie-info .plot{ - max-width: 400px; - margin: 1rem auto; -} -.movie-info .language{ - color: var(--yellow-color); - font-style: italic; -} -.movie-info .awards{ - font-weight: 300; - font-size: 0.9rem; -} -.movie-info .awards i{ - color: var(--yellow-color); - margin: 1rem 0.7rem 0 0; +.result-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + gap: 1rem; } -@media(max-width: 450px){ - .logo p{ - font-size: 1.4rem; - } - .search-element .form-control{ - width: 90%; - margin: 0 auto; - padding: 0.5rem 1rem; - } - .search-element h3{ - font-size: 1.4rem; - } - .search-list{ - width: 90%; - right: 50%; - -webkit-transform: translateX(50%); - -ms-transform: translateX(50%); - transform: translateX(50%); - } - .search-list .search-list-item{ - width: 100%; - } - .movie-misc-info{ - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - } - .movie-misc-info li:nth-child(2){ - margin: 0.8rem 0; - } +#theme-toggle { + margin: 1rem; + padding: 0.5rem 1rem; + border: none; + background-color: var(--highlight-color); + color: var(--light-color); + cursor: pointer; + border-radius: 5px; + font-size: 1rem; } - -@media(min-width: 800px){ - .search-element{ - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; - } - .search-element h3{ - margin-bottom: 0; - } - .result-grid{ - display: grid; - grid-template-columns: repeat(2, 1fr); - } - .movie-info{ - text-align: left; - padding-top: 0; - } - .movie-info .movie-misc-info{ - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; - padding-left: 0; - } - .movie-info .plot{ - margin-left: 0; - } - .movie-info .writer{ - padding-left: 0; - margin-left: 0; - } -} \ No newline at end of file diff --git a/ToDo JS Extension/index.html b/ToDo JS Extension/index.html index 5501a15c..583fc36d 100644 --- a/ToDo JS Extension/index.html +++ b/ToDo JS Extension/index.html @@ -1,4 +1,3 @@ - @@ -15,6 +14,8 @@
+ +
    diff --git a/ToDo JS Extension/manifest.json b/ToDo JS Extension/manifest.json index 979a6bb8..1c650823 100644 --- a/ToDo JS Extension/manifest.json +++ b/ToDo JS Extension/manifest.json @@ -1,22 +1,21 @@ { - "manifest_version": 3, - "name": "ToDo Extension JS", - "version": "1.0", - "description": "Simple ToDo Extension is JS for managing day to day tasks...", - "permissions": [ - "storage" - ], - "action": { - "default_popup": "index.html" - }, - "icons": { - "128": "logo.png" - }, - "web_accessible_resources": [ - { - "resources": ["index.html"], - "matches": [""] - } - ] - } - + "manifest_version": 3, + "name": "ToDo Extension JS", + "version": "1.0", + "description": "Simple ToDo Extension is JS for managing day to day tasks...", + "permissions": [ + "storage" + ], + "action": { + "default_popup": "index.html" + }, + "icons": { + "128": "logo.png" + }, + "web_accessible_resources": [ + { + "resources": ["index.html"], + "matches": [""] + } + ] +} diff --git a/ToDo JS Extension/scripts/script.js b/ToDo JS Extension/scripts/script.js index 06522c38..fa521af4 100644 --- a/ToDo JS Extension/scripts/script.js +++ b/ToDo JS Extension/scripts/script.js @@ -1,81 +1,97 @@ -const inputBox = document.querySelector(".inputField input"); +const inputBox = document.querySelector(".inputField input[type='text']"); +const dateInput = document.querySelector(".inputField input[type='date']"); +const timeInput = document.querySelector(".inputField input[type='time']"); const addBtn = document.querySelector(".inputField button"); const todoList = document.querySelector(".todoList"); const deleteAllBtn = document.querySelector(".footer button"); - -inputBox.onkeyup = ()=>{ - let userEnteredValue = inputBox.value; //getting user entered value - if(userEnteredValue.trim() != 0){ //if the user value isn't only spaces - addBtn.classList.add("active"); //active the add button - }else{ - addBtn.classList.remove("active"); //unactive the add button +// Function to validate inputs and update button state +const validateInputs = () => { + let userEnteredValue = inputBox.value.trim(); + + if (userEnteredValue) { + addBtn.classList.add("active"); + addBtn.disabled = false; + } else { + addBtn.classList.remove("active"); + addBtn.disabled = true; } -} +}; -showTasks(); +// Event listeners for input changes +[inputBox, dateInput, timeInput].forEach(input => { + input.addEventListener("input", validateInputs); +}); -addBtn.onclick = ()=>{ //when user click on plus icon button - let userEnteredValue = inputBox.value; //getting input field value - let getLocalStorageData = localStorage.getItem("New Todo"); //getting localstorage - if(getLocalStorageData == null){ //if localstorage has no data - listArray = []; //create a blank array - }else{ - listArray = JSON.parse(getLocalStorageData); //transforming json string into a js object - } - listArray.push(userEnteredValue); //pushing or adding new value in array - localStorage.setItem("New Todo", JSON.stringify(listArray)); //transforming js object into a json string - showTasks(); //calling showTask function - addBtn.classList.remove("active"); //unactive the add button once the task added -} +showTasks(); // Call showTasks on page load + +addBtn.onclick = () => { // When user clicks on the plus icon button + let userEnteredValue = inputBox.value.trim(); + let dateEnteredValue = dateInput.value; + let timeEnteredValue = timeInput.value; -function showTasks(){ let getLocalStorageData = localStorage.getItem("New Todo"); - if(getLocalStorageData == null){ - listArray = []; - }else{ - listArray = JSON.parse(getLocalStorageData); - } + let listArray = getLocalStorageData ? JSON.parse(getLocalStorageData) : []; + + let taskObj = { + task: userEnteredValue, + date: dateEnteredValue || "No Date", // Default to "No Date" if not provided + time: timeEnteredValue || "No Time" // Default to "No Time" if not provided + }; + + listArray.push(taskObj); + localStorage.setItem("New Todo", JSON.stringify(listArray)); + showTasks(); + addBtn.classList.remove("active"); + addBtn.disabled = true; + inputBox.value = ""; + dateInput.value = ""; + timeInput.value = ""; +}; + +function showTasks() { + let getLocalStorageData = localStorage.getItem("New Todo"); + let listArray = getLocalStorageData ? JSON.parse(getLocalStorageData) : []; + const pendingTasksNumb = document.querySelector(".pendingTasks"); - pendingTasksNumb.textContent = listArray.length; //passing the array length in pendingtask - if(listArray.length > 0){ //if array length is greater than 0 - deleteAllBtn.classList.add("active"); //active the delete button - }else{ - deleteAllBtn.classList.remove("active"); //unactive the delete button + pendingTasksNumb.textContent = listArray.length; + + if (listArray.length > 0) { + deleteAllBtn.classList.add("active"); + deleteAllBtn.disabled = false; + } else { + deleteAllBtn.classList.remove("active"); + deleteAllBtn.disabled = true; } + let newLiTag = ""; listArray.forEach((element, index) => { - newLiTag += `
  • ${element}
    • `; + newLiTag += `
  • ${element.task} ${element.date} ${element.time}
    • `; }); - todoList.innerHTML = newLiTag; //adding new li tag inside ul tag - inputBox.value = ""; //once task added leave the input field blank + todoList.innerHTML = newLiTag; } -//event delegation + todoList.addEventListener("click", function(event) { if (event.target.classList.contains("delete-btn")) { let index = event.target.dataset.index; deleteTask(index); } }); -// delete task function -function deleteTask(index){ + +function deleteTask(index) { let getLocalStorageData = localStorage.getItem("New Todo"); - listArray = JSON.parse(getLocalStorageData); - listArray.splice(index, 1); //delete or remove the li + let listArray = JSON.parse(getLocalStorageData); + listArray.splice(index, 1); localStorage.setItem("New Todo", JSON.stringify(listArray)); - showTasks(); //call the showTasks function + showTasks(); } -// delete all tasks function -deleteAllBtn.onclick = ()=>{ - listArray = []; //empty the array - localStorage.setItem("New Todo", JSON.stringify(listArray)); //set the item in localstorage - showTasks(); //call the showTasks function +deleteAllBtn.onclick = () => { + localStorage.removeItem("New Todo"); + showTasks(); } const closeIcon = document.getElementById("closeIcon"); - -// Add click event listener to close the popup closeIcon.addEventListener("click", () => { - window.close(); // Close the popup + window.close(); }); diff --git a/ToDo JS Extension/src/style.css b/ToDo JS Extension/src/style.css index 042ec149..487df571 100644 --- a/ToDo JS Extension/src/style.css +++ b/ToDo JS Extension/src/style.css @@ -1,22 +1,21 @@ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap'); -*{ +* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } -::selection{ +::selection { color: #ffff; background: #1940a5; } -body{ +body { width: 337px; height: 100%; - /* overflow: hidden; */ padding: 8px; background-image: url(bg.jpg); } -.wrapper{ +.wrapper { background: #fff; max-width: 411px; width: 100%; @@ -25,19 +24,20 @@ body{ border-radius: 4px; box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.1); } -.wrapper header{ +.wrapper header { font-size: 30px; font-weight: 600; } -.wrapper .inputField{ +.wrapper .inputField { margin: 20px 0; width: 100%; display: flex; - height: 45px; + flex-direction: column; + gap: 10px; } -.inputField input{ - width: 85%; - height: 100%; +.inputField input { + width: 100%; + height: 45px; outline: none; border-radius: 3px; border: 1px solid #ccc; @@ -45,15 +45,15 @@ body{ padding-left: 15px; transition: all 0.3s ease; } -.inputField input:focus{ +.inputField input:focus { border-color: #1940a5; } -.inputField button{ - width: 50px; - height: 100%; +.inputField button { + width: 100%; + height: 45px; border: none; color: #fff; - margin-left: 5px; + margin-left: 0; font-size: 21px; outline: none; background: #1940a5; @@ -64,18 +64,18 @@ body{ transition: all 0.3s ease; } .inputField button:hover, -.footer button:hover{ +.footer button:hover { background: #1940a5; } -.inputField button.active{ +.inputField button.active { opacity: 1; pointer-events: auto; } -.wrapper .todoList{ +.wrapper .todoList { max-height: 250px; overflow-y: auto; } -.todoList li{ +.todoList li { position: relative; list-style: none; margin-bottom: 8px; @@ -86,7 +86,7 @@ body{ overflow: hidden; word-wrap: break-word; } -.todoList li .icon{ +.todoList li .icon { position: absolute; right: -45px; top: 50%; @@ -100,17 +100,17 @@ body{ cursor: pointer; transition: all 0.2s ease; } -.todoList li:hover .icon{ +.todoList li:hover .icon { right: 0px; } -.wrapper .footer{ +.wrapper .footer { display: flex; width: 100%; margin-top: 20px; align-items: center; justify-content: space-between; } -.footer button{ +.footer button { padding: 6px 10px; border-radius: 3px; border: none; @@ -126,7 +126,7 @@ body{ pointer-events: none; transition: all 0.3s ease; } -.footer button.active{ +.footer button.active { opacity: 1; pointer-events: auto; } @@ -137,12 +137,10 @@ body{ cursor: pointer; z-index: 9999; } - .close-icon i { font-size: 24px; color: #333; } -.close-icon i:hover{ - color: #e74c3c; +.close-icon i:hover { + color: #e74c3c; } -