diff --git a/1.Change Background Color Project/index.css b/1.Change Background Color Project/index.css new file mode 100644 index 00000000..6ff9ccee --- /dev/null +++ b/1.Change Background Color Project/index.css @@ -0,0 +1,11 @@ +.container { + display: flex; + margin: auto; + max-width: 30%; + margin-top: 10%; + flex-direction: column; +} + +h2 { + margin: auto; +} \ No newline at end of file diff --git a/1.Change Background Color Project/index.html b/1.Change Background Color Project/index.html new file mode 100644 index 00000000..8cc9a8da --- /dev/null +++ b/1.Change Background Color Project/index.html @@ -0,0 +1,28 @@ + + + + + + + + + + + + JavaScript Background color changes + + + + + +
+ + + +
+ + + + + + \ No newline at end of file diff --git a/1.Change Background Color Project/index.js b/1.Change Background Color Project/index.js new file mode 100644 index 00000000..656bb5c4 --- /dev/null +++ b/1.Change Background Color Project/index.js @@ -0,0 +1,15 @@ +let arr = [ + 'black', 'orange', 'green', 'red', 'blue' +]; +let button = document.querySelector("button"); +let body = document.getElementById("body"); + +let a = 0; +button.addEventListener("click", changeBackground); + +function changeBackground() { + const indexs = parseInt(Math.random() * arr.length) + let texts = arr[indexs]; + body.style.background = texts; + button.innerHTML = texts; +} \ No newline at end of file diff --git a/10. ToDOList/index.css b/10. ToDOList/index.css new file mode 100644 index 00000000..83184481 --- /dev/null +++ b/10. ToDOList/index.css @@ -0,0 +1,66 @@ +body { + background-color: #000f42; +} + +hr { + margin: 1rem 0; + color: inherit; + background-color: turquoise; + border: 0; + opacity: .25; +} + +.card { + background-color: transparent; +} + +.form-control { + background: transparent; +} + +.btn { + background: transparent; + border: 3px solid #0d6efd; +} + +.container { + max-width: 44%; +} + +.notescontainer { + max-width: 90%; + margin: auto; +} + +.notecard { + margin: 5vh; +} + +.row { + display: flex; + margin: auto; + justify-content: center; +} + +h1 { + margin: auto; + display: flex; + align-items: center; + justify-content: center; + margin-top: 8vh; + margin-bottom: 8vh; + color: white; +} + +.card-title { + margin-bottom: .5rem; + color: aliceblue; +} + +p { + color: aliceblue; +} + +.navbar { + background-color: #000f42; +} \ No newline at end of file diff --git a/10. ToDOList/index.html b/10. ToDOList/index.html new file mode 100644 index 00000000..8907f51c --- /dev/null +++ b/10. ToDOList/index.html @@ -0,0 +1,63 @@ + + + + + + + + + + + + To_Do_List! + + + + +
+

Welcome To ToDo List

+
+ +
+
Add A Note
+ +
+ + +
+ +
+
+
+
+
+

Your Notes

+
+
+
+
+ + + + + + \ No newline at end of file diff --git a/10. ToDOList/index.js b/10. ToDOList/index.js new file mode 100644 index 00000000..c8689ebe --- /dev/null +++ b/10. ToDOList/index.js @@ -0,0 +1,80 @@ + showNotes(); + + + let addBtn = document.getElementById("addBtn"); + var JSON; + addBtn.addEventListener("click", function(e) { + let addText = document.getElementById("addText"); + let notes = localStorage.getItem("notes"); + if (notes == null) { + notesObj = []; + } else { + notesObj = JSON.parse(notes); + } + notesObj.push(addText.value); + + localStorage.setItem("notes", JSON.stringify(notesObj)); + addText.value = ""; + + showNotes(); + }) + + showNotes(); + + function showNotes() { + let notes = localStorage.getItem("notes"); + if (notes == null) { + notesObj = []; + } else { + notesObj = JSON.parse(notes); + } + + let html = ""; + notesObj.forEach(function(element, index) { + html += `
+
+

${element}

+ + +
+
`; + + }); + let notesElm = document.getElementById('notes'); + if (notesObj.length != 0) { + notesElm.innerHTML = html; + } else { + notesElm.innerHTML = `Nothing is here Please add notes`; + } + + + } + + function deleteNotes(index) { + let notes = localStorage.getItem("notes"); + if (notes == null) { + notesObj = []; + } else { + notesObj = JSON.parse(notes); + } + notesObj.splice(index, 1); + localStorage.setItem("notes", JSON.stringify(notesObj)); + + + showNotes() + } + + + let search = document.getElementById("searchTxt"); + search.addEventListener("input", function() { + let inputVal = search.value.toLowerCase(); + let noteCard = document.getElementsByClassName("notecard"); + Array.from(noteCard).forEach(function(element) { + let cardText = element.getElementsByTagName("p")[0].innerText; + if (cardText.includes(inputVal)) { + element.style.display = "block"; + } else { + element.style.display = "none"; + } + }) + }) \ No newline at end of file diff --git a/2. Modal Project/img/back.jpg b/2. Modal Project/img/back.jpg new file mode 100644 index 00000000..47709fef Binary files /dev/null and b/2. Modal Project/img/back.jpg differ diff --git a/2. Modal Project/img/modal.png b/2. Modal Project/img/modal.png new file mode 100644 index 00000000..3742872c Binary files /dev/null and b/2. Modal Project/img/modal.png differ diff --git a/2. Modal Project/index.css b/2. Modal Project/index.css new file mode 100644 index 00000000..e1dbaeab --- /dev/null +++ b/2. Modal Project/index.css @@ -0,0 +1,42 @@ +body { + background-image: url(./img/back.jpg); + background-size: cover; + background-repeat: no-repeat; +} + +.butt { + margin: auto; + justify-content: center; + display: flex; + margin-top: 21%; +} + +.Modal { + display: flex; + flex-direction: column; + margin: auto; + justify-content: center; + max-width: 30%; + margin-top: -12%; + background-image: url(./img/modal.png); + display: none; +} + +.content { + display: flex; + margin: auto; + justify-content: center; + padding: 11vh; + color: antiquewhite; +} + +.content h2 { + font-weight: 700; + color: black; +} + +.Modal button { + max-width: 8%; + margin-left: 92%; + border-radius: 11px; +} \ No newline at end of file diff --git a/2. Modal Project/index.html b/2. Modal Project/index.html new file mode 100644 index 00000000..9cd1ace5 --- /dev/null +++ b/2. Modal Project/index.html @@ -0,0 +1,36 @@ + + + + + + + + + + Hello, world! + + + + +
+ + + +
+ + + + + + + \ No newline at end of file diff --git a/2. Modal Project/index.js b/2. Modal Project/index.js new file mode 100644 index 00000000..19e84920 --- /dev/null +++ b/2. Modal Project/index.js @@ -0,0 +1,12 @@ + let Btn = document.getElementById("open"); + let mBtn = document.getElementById("Modal"); + let closeBtn = document.getElementById("xbtn"); + closeBtn.addEventListener("click", function(e) { + mBtn.style.display = "none"; + Btn.style.display = "block"; + + }) + Btn.addEventListener("click", function(e) { + mBtn.style.display = "block"; + Btn.style.display = "none"; + }) \ No newline at end of file diff --git a/3.Counter Project/index.css b/3.Counter Project/index.css new file mode 100644 index 00000000..217d351f --- /dev/null +++ b/3.Counter Project/index.css @@ -0,0 +1,19 @@ +.container { + display: flex; + flex-direction: column; + margin: auto; + justify-content: center; + align-items: center; + margin-top: 12%; + background: black; + max-width: 25%; + padding: 54px; + border-radius: 18px; + box-sizing: border-box; + box-shadow: 12px 12px 1px -7px darkgrey; + color: whitesmoke; +} + +button { + margin: 20px; +} \ No newline at end of file diff --git a/3.Counter Project/index.html b/3.Counter Project/index.html new file mode 100644 index 00000000..a9b9d033 --- /dev/null +++ b/3.Counter Project/index.html @@ -0,0 +1,28 @@ + + + + + + + + + + + + Counter Project! + + + + +
+

Counter +

+

+ + +
+ + + + + \ No newline at end of file diff --git a/3.Counter Project/index.js b/3.Counter Project/index.js new file mode 100644 index 00000000..75e54b29 --- /dev/null +++ b/3.Counter Project/index.js @@ -0,0 +1,17 @@ + let low = document.getElementById("button-l"); + let add = document.getElementById("button-2"); + let num = document.getElementById("number"); + let val = num.innerText; + console.log(val); + low.addEventListener("click", function(e) { + val = val - 1; + + num.innerText = val; + + }); + add.addEventListener("click", function(e) { + val = val + 1; + + num.innerText = val; + + }); \ No newline at end of file diff --git a/4. Filter Project/Jquery/img/b1.jpg b/4. Filter Project/Jquery/img/b1.jpg new file mode 100644 index 00000000..9bbce226 Binary files /dev/null and b/4. Filter Project/Jquery/img/b1.jpg differ diff --git a/4. Filter Project/Jquery/img/b2.jpg b/4. Filter Project/Jquery/img/b2.jpg new file mode 100644 index 00000000..a1f6bacd Binary files /dev/null and b/4. Filter Project/Jquery/img/b2.jpg differ diff --git a/4. Filter Project/Jquery/img/b3.jpg b/4. Filter Project/Jquery/img/b3.jpg new file mode 100644 index 00000000..fbe2607e Binary files /dev/null and b/4. Filter Project/Jquery/img/b3.jpg differ diff --git a/4. Filter Project/Jquery/img/l1.jpg b/4. Filter Project/Jquery/img/l1.jpg new file mode 100644 index 00000000..202ffc4b Binary files /dev/null and b/4. Filter Project/Jquery/img/l1.jpg differ diff --git a/4. Filter Project/Jquery/img/l2.jpg b/4. Filter Project/Jquery/img/l2.jpg new file mode 100644 index 00000000..b7b9a245 Binary files /dev/null and b/4. Filter Project/Jquery/img/l2.jpg differ diff --git a/4. Filter Project/Jquery/img/l3.jpg b/4. Filter Project/Jquery/img/l3.jpg new file mode 100644 index 00000000..17e6b81b Binary files /dev/null and b/4. Filter Project/Jquery/img/l3.jpg differ diff --git a/4. Filter Project/Jquery/img/w1.jpg b/4. Filter Project/Jquery/img/w1.jpg new file mode 100644 index 00000000..6f281619 Binary files /dev/null and b/4. Filter Project/Jquery/img/w1.jpg differ diff --git a/4. Filter Project/Jquery/img/w2.jpg b/4. Filter Project/Jquery/img/w2.jpg new file mode 100644 index 00000000..102edf7f Binary files /dev/null and b/4. Filter Project/Jquery/img/w2.jpg differ diff --git a/4. Filter Project/Jquery/img/w3.jpg b/4. Filter Project/Jquery/img/w3.jpg new file mode 100644 index 00000000..6d78c319 Binary files /dev/null and b/4. Filter Project/Jquery/img/w3.jpg differ diff --git a/4. Filter Project/Jquery/index.html b/4. Filter Project/Jquery/index.html new file mode 100644 index 00000000..6472335e --- /dev/null +++ b/4. Filter Project/Jquery/index.html @@ -0,0 +1,146 @@ + + + + + + + + + + + + Filters! + + + + + +
+ + + + +
+ +
+
+
+ ... + +
+
+ ... +
+
+ ... +
+
+ ... +
+
+ ... +
+
+ ... +
+ +
+ ... +
+ +
+ ... +
+ +
+ ... +
+
+
+ + + + + + + + \ No newline at end of file diff --git a/4. Filter Project/img/Funky Cool Video Intro Template (1).mp4 b/4. Filter Project/img/Funky Cool Video Intro Template (1).mp4 new file mode 100644 index 00000000..1dc903f0 Binary files /dev/null and b/4. Filter Project/img/Funky Cool Video Intro Template (1).mp4 differ diff --git a/4. Filter Project/img/Funky Cool Video Intro Template (10).mp4 b/4. Filter Project/img/Funky Cool Video Intro Template (10).mp4 new file mode 100644 index 00000000..9e5ab71d Binary files /dev/null and b/4. Filter Project/img/Funky Cool Video Intro Template (10).mp4 differ diff --git a/4. Filter Project/img/Funky Cool Video Intro Template (11).mp4 b/4. Filter Project/img/Funky Cool Video Intro Template (11).mp4 new file mode 100644 index 00000000..11741ca3 Binary files /dev/null and b/4. Filter Project/img/Funky Cool Video Intro Template (11).mp4 differ diff --git a/4. Filter Project/img/Funky Cool Video Intro Template (12).mp4 b/4. Filter Project/img/Funky Cool Video Intro Template (12).mp4 new file mode 100644 index 00000000..417f075e Binary files /dev/null and b/4. Filter Project/img/Funky Cool Video Intro Template (12).mp4 differ diff --git a/4. Filter Project/img/Funky Cool Video Intro Template (13).mp4 b/4. Filter Project/img/Funky Cool Video Intro Template (13).mp4 new file mode 100644 index 00000000..dc854195 Binary files /dev/null and b/4. Filter Project/img/Funky Cool Video Intro Template (13).mp4 differ diff --git a/4. Filter Project/img/Funky Cool Video Intro Template (2).mp4 b/4. Filter Project/img/Funky Cool Video Intro Template (2).mp4 new file mode 100644 index 00000000..fc23b7a8 Binary files /dev/null and b/4. Filter Project/img/Funky Cool Video Intro Template (2).mp4 differ diff --git a/4. Filter Project/img/Funky Cool Video Intro Template (3).mp4 b/4. Filter Project/img/Funky Cool Video Intro Template (3).mp4 new file mode 100644 index 00000000..6de88b0d Binary files /dev/null and b/4. Filter Project/img/Funky Cool Video Intro Template (3).mp4 differ diff --git a/4. Filter Project/img/Funky Cool Video Intro Template (4).mp4 b/4. Filter Project/img/Funky Cool Video Intro Template (4).mp4 new file mode 100644 index 00000000..2aa34603 Binary files /dev/null and b/4. Filter Project/img/Funky Cool Video Intro Template (4).mp4 differ diff --git a/4. Filter Project/img/Funky Cool Video Intro Template (4).mp4.crdownload b/4. Filter Project/img/Funky Cool Video Intro Template (4).mp4.crdownload new file mode 100644 index 00000000..7848ac1e Binary files /dev/null and b/4. Filter Project/img/Funky Cool Video Intro Template (4).mp4.crdownload differ diff --git a/4. Filter Project/img/Funky Cool Video Intro Template (5).mp4 b/4. Filter Project/img/Funky Cool Video Intro Template (5).mp4 new file mode 100644 index 00000000..e6023789 Binary files /dev/null and b/4. Filter Project/img/Funky Cool Video Intro Template (5).mp4 differ diff --git a/4. Filter Project/img/Funky Cool Video Intro Template (6).mp4 b/4. Filter Project/img/Funky Cool Video Intro Template (6).mp4 new file mode 100644 index 00000000..e101c4ff Binary files /dev/null and b/4. Filter Project/img/Funky Cool Video Intro Template (6).mp4 differ diff --git a/4. Filter Project/img/Funky Cool Video Intro Template (7).mp4 b/4. Filter Project/img/Funky Cool Video Intro Template (7).mp4 new file mode 100644 index 00000000..a06f3651 Binary files /dev/null and b/4. Filter Project/img/Funky Cool Video Intro Template (7).mp4 differ diff --git a/4. Filter Project/img/Funky Cool Video Intro Template (8).mp4 b/4. Filter Project/img/Funky Cool Video Intro Template (8).mp4 new file mode 100644 index 00000000..cfe55fcd Binary files /dev/null and b/4. Filter Project/img/Funky Cool Video Intro Template (8).mp4 differ diff --git a/4. Filter Project/img/Funky Cool Video Intro Template (9).mp4 b/4. Filter Project/img/Funky Cool Video Intro Template (9).mp4 new file mode 100644 index 00000000..552e6378 Binary files /dev/null and b/4. Filter Project/img/Funky Cool Video Intro Template (9).mp4 differ diff --git a/4. Filter Project/img/Funky Cool Video Intro Template.mp4 b/4. Filter Project/img/Funky Cool Video Intro Template.mp4 new file mode 100644 index 00000000..41fcdc66 Binary files /dev/null and b/4. Filter Project/img/Funky Cool Video Intro Template.mp4 differ diff --git a/4. Filter Project/img/color.mp4 b/4. Filter Project/img/color.mp4 new file mode 100644 index 00000000..991c9783 Binary files /dev/null and b/4. Filter Project/img/color.mp4 differ diff --git a/4. Filter Project/img/counter.mp4 b/4. Filter Project/img/counter.mp4 new file mode 100644 index 00000000..44fefac1 Binary files /dev/null and b/4. Filter Project/img/counter.mp4 differ diff --git a/4. Filter Project/img/filter.mp4 b/4. Filter Project/img/filter.mp4 new file mode 100644 index 00000000..3f8ffe76 Binary files /dev/null and b/4. Filter Project/img/filter.mp4 differ diff --git a/4. Filter Project/img/some js.mp4 b/4. Filter Project/img/some js.mp4 new file mode 100644 index 00000000..8dff45f7 Binary files /dev/null and b/4. Filter Project/img/some js.mp4 differ diff --git a/4. Filter Project/img/thank.mp4 b/4. Filter Project/img/thank.mp4 new file mode 100644 index 00000000..ab0dcb9c Binary files /dev/null and b/4. Filter Project/img/thank.mp4 differ diff --git a/4. Filter Project/withjavascript/img/b1.jpg b/4. Filter Project/withjavascript/img/b1.jpg new file mode 100644 index 00000000..9bbce226 Binary files /dev/null and b/4. Filter Project/withjavascript/img/b1.jpg differ diff --git a/4. Filter Project/withjavascript/img/b2.jpg b/4. Filter Project/withjavascript/img/b2.jpg new file mode 100644 index 00000000..a1f6bacd Binary files /dev/null and b/4. Filter Project/withjavascript/img/b2.jpg differ diff --git a/4. Filter Project/withjavascript/img/b3.jpg b/4. Filter Project/withjavascript/img/b3.jpg new file mode 100644 index 00000000..fbe2607e Binary files /dev/null and b/4. Filter Project/withjavascript/img/b3.jpg differ diff --git a/4. Filter Project/withjavascript/img/l1.jpg b/4. Filter Project/withjavascript/img/l1.jpg new file mode 100644 index 00000000..202ffc4b Binary files /dev/null and b/4. Filter Project/withjavascript/img/l1.jpg differ diff --git a/4. Filter Project/withjavascript/img/l2.jpg b/4. Filter Project/withjavascript/img/l2.jpg new file mode 100644 index 00000000..b7b9a245 Binary files /dev/null and b/4. Filter Project/withjavascript/img/l2.jpg differ diff --git a/4. Filter Project/withjavascript/img/l3.jpg b/4. Filter Project/withjavascript/img/l3.jpg new file mode 100644 index 00000000..17e6b81b Binary files /dev/null and b/4. Filter Project/withjavascript/img/l3.jpg differ diff --git a/4. Filter Project/withjavascript/img/w1.jpg b/4. Filter Project/withjavascript/img/w1.jpg new file mode 100644 index 00000000..6f281619 Binary files /dev/null and b/4. Filter Project/withjavascript/img/w1.jpg differ diff --git a/4. Filter Project/withjavascript/img/w2.jpg b/4. Filter Project/withjavascript/img/w2.jpg new file mode 100644 index 00000000..102edf7f Binary files /dev/null and b/4. Filter Project/withjavascript/img/w2.jpg differ diff --git a/4. Filter Project/withjavascript/img/w3.jpg b/4. Filter Project/withjavascript/img/w3.jpg new file mode 100644 index 00000000..6d78c319 Binary files /dev/null and b/4. Filter Project/withjavascript/img/w3.jpg differ diff --git a/4. Filter Project/withjavascript/index.css b/4. Filter Project/withjavascript/index.css new file mode 100644 index 00000000..8d3d191d --- /dev/null +++ b/4. Filter Project/withjavascript/index.css @@ -0,0 +1,76 @@ +.btn { + border: 2px solid; + background: azure; + border-radius: 11px; + margin: 56px; + font-weight: 800; +} + +.container { + display: flex; + margin: auto; + justify-content: center; + align-items: center; +} + +.card img { + border: 2px solid; + border-radius: 25px; + padding: 1px; + background: burlywood; + border-top-right-radius: 14px; + border-top-left-radius: 14px; + max-width: 134%; + display: flex; + position: relative; + flex-wrap: wrap; +} + +.filterDiv { + border: none; + flex-wrap: wrap; + display: flex; + justify-content: center; + align-items: center; + max-width: 20%; + display: none; + margin: 58px; +} + +.card-group { + display: flex; + flex-wrap: wrap; + max-width: 90%; + margin: auto; + padding: 36px; +} + +.filterDiv-con { + display: flex; + margin: auto; + justify-content: center; + align-items: center; + flex-wrap: wrap; +} + +.input-group { + position: relative; + display: flex; + flex-wrap: wrap; + align-items: stretch; + width: 66%; + margin: auto; +} + +body { + background-color: #000f42; +} + +.show { + display: block; +} + +.btn.active { + background-color: #666; + color: white; +} \ No newline at end of file diff --git a/4. Filter Project/withjavascript/index.js b/4. Filter Project/withjavascript/index.js new file mode 100644 index 00000000..a49f85c4 --- /dev/null +++ b/4. Filter Project/withjavascript/index.js @@ -0,0 +1,45 @@ +filterSelection("all") + +function filterSelection(c) { + var x, i; + x = document.getElementsByClassName("filterDiv"); + if (c == "all") c = ""; + for (i = 0; i < x.length; i++) { + w3RemoveClass(x[i], "show"); + if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show"); + } +} + +function w3AddClass(element, name) { + var i, arr1, arr2; + arr1 = element.className.split(" "); + arr2 = name.split(" "); + for (i = 0; i < arr2.length; i++) { + if (arr1.indexOf(arr2[i]) == -1) { + element.className += " " + arr2[i]; + } + } +} + +function w3RemoveClass(element, name) { + var i, arr1, arr2; + arr1 = element.className.split(" "); + arr2 = name.split(" "); + for (i = 0; i < arr2.length; i++) { + while (arr1.indexOf(arr2[i]) > -1) { + arr1.splice(arr1.indexOf(arr2[i]), 1); + } + } + element.className = arr1.join(" "); +} + +// Add active class to the current button (highlight it) +var btnContainer = document.getElementById("container"); +var btns = btnContainer.getElementsByClassName("btn"); +for (var i = 0; i < btns.length; i++) { + btns[i].addEventListener("click", function() { + var current = document.getElementsByClassName("active"); + current[0].className = current[0].className.replace(" active", ""); + this.className += " active"; + }); +} \ No newline at end of file diff --git a/4. Filter Project/withjavascript/index1.html b/4. Filter Project/withjavascript/index1.html new file mode 100644 index 00000000..9b23a463 --- /dev/null +++ b/4. Filter Project/withjavascript/index1.html @@ -0,0 +1,69 @@ + + + + + + + + + + + + Filters! + + + + + +
+ + + + +
+ +
+
+
+ ... + +
+
+ ... +
+
+ ... +
+
+ ... +
+
+ ... +
+
+ ... +
+ +
+ ... +
+ +
+ ... +
+ +
+ ... +
+
+
+ + + + + + + \ No newline at end of file diff --git a/5. Testimonials Project/img/1.jpg b/5. Testimonials Project/img/1.jpg new file mode 100644 index 00000000..91f12464 Binary files /dev/null and b/5. Testimonials Project/img/1.jpg differ diff --git a/5. Testimonials Project/img/2.jpg b/5. Testimonials Project/img/2.jpg new file mode 100644 index 00000000..a5717678 Binary files /dev/null and b/5. Testimonials Project/img/2.jpg differ diff --git a/5. Testimonials Project/img/3.jpg b/5. Testimonials Project/img/3.jpg new file mode 100644 index 00000000..f1048449 Binary files /dev/null and b/5. Testimonials Project/img/3.jpg differ diff --git a/5. Testimonials Project/img/4.jpg b/5. Testimonials Project/img/4.jpg new file mode 100644 index 00000000..5a60fa12 Binary files /dev/null and b/5. Testimonials Project/img/4.jpg differ diff --git a/5. Testimonials Project/img/back.jpg b/5. Testimonials Project/img/back.jpg new file mode 100644 index 00000000..9abee73d Binary files /dev/null and b/5. Testimonials Project/img/back.jpg differ diff --git a/5. Testimonials Project/index.css b/5. Testimonials Project/index.css new file mode 100644 index 00000000..b0963d5e --- /dev/null +++ b/5. Testimonials Project/index.css @@ -0,0 +1,67 @@ +body { + background-image: url(./img/back.jpg); +} + +.container { + max-width: 50%; + background: black; + padding: 56px; + margin-top: 8%; +} + +img { + max-width: 124px; + border-radius: 62px; + height: 109px; + margin: auto; + justify-content: center; + align-items: center; + display: flex; + user-select: none; +} + +h2 { + color: antiquewhite; + margin: auto; + display: flex; + align-items: center; + justify-content: center; + user-select: none; +} + +h4 { + user-select: none; + color: antiquewhite; + margin: auto; + display: flex; + margin-top: 12px; + margin-bottom: 12px; + align-items: center; + justify-content: center; +} + +.slides { + margin-top: 47px; +} + +p { + color: aquamarine; + font-weight: 700; + user-select: none; +} + +svg { + width: 84px; + height: 39px; + position: absolute; + margin: 170px -58px; + color: floralwhite; +} + +.second { + width: 84px; + height: 39px; + position: absolute; + margin: -204px 41%; + color: floralwhite; +} \ No newline at end of file diff --git a/5. Testimonials Project/index.html b/5. Testimonials Project/index.html new file mode 100644 index 00000000..8d7bb283 --- /dev/null +++ b/5. Testimonials Project/index.html @@ -0,0 +1,50 @@ + + + + + + + + + + + + Hello, world! + + + + + +
+ + + +
+

Client

+

Testimonials

+
+ +
+
+ +
+
+

nishu

+
+
+ +

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quo placeat officia repudiandae aliquid reiciendis facilis sint, earum tempore! Laboriosam sequi voluptates modi nihil rerum aut molestiae ex quae odio.

+
+ +
+ + + + +
+ + + + + + \ No newline at end of file diff --git a/5. Testimonials Project/index.js b/5. Testimonials Project/index.js new file mode 100644 index 00000000..a3ea6060 --- /dev/null +++ b/5. Testimonials Project/index.js @@ -0,0 +1,65 @@ +const reviews = [{ + id: 1, + name: "Nishu", + img: "./img/1.jpg", + text: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quo placeat officia repudiandae aliquid reiciendis facilis sint, earum tempore! Laboriosam sequi voluptates modi nihil rerum aut molestiae ex quae odio", + }, + { + id: 2, + name: "Pawan", + img: "./img/3.jpg", + text: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quo placeat officia repudiandae aliquid reiciendis facilis sint, earum tempore! Laboriosam sequi voluptates modi nihil rerum aut molestiae ex quae odio", + }, + { + id: 3, + name: "Bro", + img: "./img/4.jpg", + text: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quo placeat officia repudiandae aliquid reiciendis facilis sint, earum tempore! Laboriosam sequi voluptates modi nihil rerum aut molestiae ex quae odio", + }, + { + id: 4, + name: "Jyoti", + img: "./img/2.jpg", + text: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quo placeat officia repudiandae aliquid reiciendis facilis sint, earum tempore! Laboriosam sequi voluptates modi nihil rerum aut molestiae ex quae odio ", + }, +]; +let nameSeen = document.querySelector("h4"); +let para = document.querySelector("p"); +let prev = document.getElementById("prev"); +let img = document.querySelector("img") + +let next = document.getElementById("next"); +window.addEventListener("DOMContentLoaded", function() { + const item = reviews[currentItem]; + + nameSeen.textContent = item.name; + para.textContent = item.text; + img.src = item.img; + +}); + + + +let currentItem = 0; + +function showPerson(person) { + const item = reviews[person]; + img.src = item.img; + nameSeen.textContent = item.name; + para.textContent = item.text; + +} +next.addEventListener("click", function() { + currentItem++; + if (currentItem > reviews.length - 1) { + currentItem = 0; + } + showPerson(currentItem); +}); +prev.addEventListener("click", function() { + currentItem--; + if (currentItem < 0) { + currentItem = reviews.length - 1; + } + showPerson(currentItem); +}); \ No newline at end of file diff --git a/6. Number Gussing game/index.css b/6. Number Gussing game/index.css new file mode 100644 index 00000000..a2362edf --- /dev/null +++ b/6. Number Gussing game/index.css @@ -0,0 +1,105 @@ +.container { + display: flex; + flex-direction: column; + margin: auto; + max-width: 34%; + margin-top: 10%; + border: 2px solid; + padding: 48px; + border-radius: 19px; +} + +.content { + display: flex; + flex-direction: column; + margin: auto; +} + +.content div { + margin: auto; + margin-top: 13px; +} + +.btn-primary { + color: #fff; + background-color: green; + border-color: #0d6efd; + border-radius: 17px; +} + +.input { + border-radius: 11px; + padding: 7px; +} + +.message { + margin-bottom: -29px; + margin-top: 1px; + margin-left: auto; + margin-right: auto; + color: aqua; +} + +h5 { + color: aqua; +} + +#menChoice { + display: none; +} + +#boatGuess { + display: none; +} + +#al-message strong { + display: flex; + margin: auto; + justify-content: center; + font-weight: 900; + color: teal; +} + +.heading h2 { + display: flex; + margin: auto; + justify-content: center; + font-weight: 700; + color: aquamarine; + margin-bottom: 21px; +} + +p { + display: flex; + justify-content: center; + font-weight: 700; + color: red; +} + +body { + background-color: #000f; +} + +@media only screen and (max-width:900px) { + .container { + max-width: 47%; + } +} + +@media only screen and (max-width: 700px) { + .container { + max-width: 65%; + } +} + +@media only screen and (max-width: 500px) { + .container { + max-width: 81%; + } +} + +@media only screen and (max-width: 380px) { + .container { + max-width: 96%; + } +} \ No newline at end of file diff --git a/6. Number Gussing game/index.html b/6. Number Gussing game/index.html new file mode 100644 index 00000000..cd341103 --- /dev/null +++ b/6. Number Gussing game/index.html @@ -0,0 +1,41 @@ + + + + + + + + + + + + Hello, world! + + + +
+
+

Play With Boat

+

Select Any number from 1-5

+
+
+
+
+
+
+
+ +
+
+
+
+
+
+ +
+
+ + + + + \ No newline at end of file diff --git a/6. Number Gussing game/index.js b/6. Number Gussing game/index.js new file mode 100644 index 00000000..323e52a8 --- /dev/null +++ b/6. Number Gussing game/index.js @@ -0,0 +1,34 @@ +let boat = Math.floor(Math.random() * 5); +let input = document.getElementById("input"); +let submitGuess = document.getElementById("submit-guess"); +let menChoice = document.getElementById("menChoice"); + + +let boatGuess = document.getElementById("boatGuess"); +let AlertDiv = document.getElementById("aleartdiv"); +submitGuess.addEventListener("click", function() { + + + boatGuess.style.display = "block"; + menChoice.style.display = "block"; + menChoice.innerHTML = "You Choses = " + input.value; + boatGuess.innerHTML = "Boat Choose = " + boat; + console.log(boat); + + if (boat == input.value) { + + AlertDiv.innerHTML = ` `; + } else { + + AlertDiv.innerHTML = ` `; + } + boat = Math.floor(Math.random() * 5) + + +}) \ No newline at end of file diff --git a/7. Rock paper scissor/Red Book Playful Pop of Color Education Logo (2).png b/7. Rock paper scissor/Red Book Playful Pop of Color Education Logo (2).png new file mode 100644 index 00000000..62a5fd3c Binary files /dev/null and b/7. Rock paper scissor/Red Book Playful Pop of Color Education Logo (2).png differ diff --git a/7. Rock paper scissor/Red Book Playful Pop of Color Education Logo (3).png b/7. Rock paper scissor/Red Book Playful Pop of Color Education Logo (3).png new file mode 100644 index 00000000..2754cddd Binary files /dev/null and b/7. Rock paper scissor/Red Book Playful Pop of Color Education Logo (3).png differ diff --git a/7. Rock paper scissor/index.css b/7. Rock paper scissor/index.css new file mode 100644 index 00000000..f224532e --- /dev/null +++ b/7. Rock paper scissor/index.css @@ -0,0 +1,21 @@ +.flex-box-container-2 img { + border: 1px solid green; + width: 30%; + margin: 10px; + box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.7); +} + +.flex-box-rps img:hover { + box-shadow: 0px 10px 50px rgba(37, 58, 223, 1) +} + +.container-3 { + border: 1px solid black; + max-width: 80%; + margin: auto; + justify-content: center; + align-items: center; + margin: 0 auto; + text-align: center; + margin-top: 10%; +} \ No newline at end of file diff --git a/7. Rock paper scissor/index.html b/7. Rock paper scissor/index.html new file mode 100644 index 00000000..ef21f9ec --- /dev/null +++ b/7. Rock paper scissor/index.html @@ -0,0 +1,30 @@ + + + + + + + + + + JS games + + + +
+

Challenge 3 : Rock, Paper , Scissors +

+
+
+ + + + +
+
+ + + + + + \ No newline at end of file diff --git a/7. Rock paper scissor/index.js b/7. Rock paper scissor/index.js new file mode 100644 index 00000000..b29b1a61 --- /dev/null +++ b/7. Rock paper scissor/index.js @@ -0,0 +1,81 @@ +// rock paper scissors +function rpsGame(yourChoice) { + console.log(yourChoice); + var humanChoice, botChoice; + humanChoice = yourChoice.id; + + + botChoice = numberToChoice(randToRpsInt()); + console.log('computerChoice', botChoice); + + + + result = decideWinner(humanChoice, botChoice); + console.log(result); + + message = finalMessage(result); + console.log(message); + rpsFrontEnd(yourChoice.id, botChoice, message); + +} + +function randToRpsInt() { + return Math.floor(Math.random() * 3); +} + +function numberToChoice(number) { + return ['rock', 'paper', 'scissors'][number]; +} + + +function decideWinner(yourChoice, computerChoice) { + var rpsDatabase = { + 'rock': { 'scissors': 1, 'rock': 0.5, 'paper': 0 }, + 'paper': { 'rock': 1, 'paper': 0.5, 'scissors': 0 }, + 'scissors': { 'paper': 1, 'scissors': 0.5, 'rock': 0 } + }; + + var yourScore = rpsDatabase[yourChoice][computerChoice]; + var computerScore = rpsDatabase[computerChoice][yourChoice]; + + return [yourScore, computerScore]; +} + +function finalMessage([yourScore, computerScore]) { + if (yourScore === 0) { + return { 'message': 'You lost !!', 'color': 'red' }; + + } else if (yourScore === 0.5) { + return { 'message': 'This is tied !!', 'color': 'yellow' }; + + } else { + return { 'message': "You won !!", 'color': 'green' }; + } +} + + + +function rpsFrontEnd(humanImageChoice, botImageChoice, finalMessage) { + + var imageDatabase = { + 'rock': document.getElementById('rock').src, + 'paper': document.getElementById('paper').src, + 'scissors': document.getElementById('scissors').src + } + + document.getElementById('rock').remove(); + document.getElementById('paper').remove(); + document.getElementById('scissors').remove(); + var humanDiv = document.createElement('div'); + var botDiv = document.createElement('div'); + var messageDiv = document.createElement('div'); + + humanDiv.innerHTML = ""; + + botDiv.innerHTML = ""; + document.getElementById('flex-box-rps-div').appendChild(humanDiv); + messageDiv.innerHTML = "

" + finalMessage['message'] + "

"; + document.getElementById('flex-box-rps-div').appendChild(messageDiv); + document.getElementById('flex-box-rps-div').appendChild(botDiv); + +} \ No newline at end of file diff --git a/7. Rock paper scissor/rock.png b/7. Rock paper scissor/rock.png new file mode 100644 index 00000000..74241ea7 Binary files /dev/null and b/7. Rock paper scissor/rock.png differ diff --git a/8. Tip Calculator/index.css b/8. Tip Calculator/index.css new file mode 100644 index 00000000..c91f895d --- /dev/null +++ b/8. Tip Calculator/index.css @@ -0,0 +1,62 @@ +.continer { + display: flex; + flex-direction: column; + margin: auto; + max-width: 31%; + justify-content: center; + margin-top: 12vh; + background: black; + padding: 11vh; + color: aquamarine; + border-radius: 21px; +} + +body { + background-color: tomato; +} + +h2, +h4 { + display: flex; + margin: auto; + margin-bottom: 22px; + font-weight: 900; + color: crimson; +} + +#tip, +#amount, +#each { + display: none; +} + +.result { + display: flex; + flex-direction: column; + margin: auto; +} + +@media only screen and (max-width:1150px) { + .confiner { + max-width: 51%; + } +} + +@media only screen and (max-width: 794px) { + .continer { + max-width: 66%; + } +} + +@media only screen and (max-width: 610px) { + .continer { + max-width: 81%; + } +} + +@media only screen and (max-width: 500px) { + .continer { + max-width: 95%; + padding: 6vh; + } +} \ No newline at end of file diff --git a/8. Tip Calculator/index.html b/8. Tip Calculator/index.html new file mode 100644 index 00000000..f1331e34 --- /dev/null +++ b/8. Tip Calculator/index.html @@ -0,0 +1,50 @@ + + + + + + + + + + Tip Calculator! + + + + +
+

Tip Calculator

+
+ + + +
+
+ + +
+ +
+ + +
+ + +
+

+

+

+
+
+ + + + + + + \ No newline at end of file diff --git a/8. Tip Calculator/index.js b/8. Tip Calculator/index.js new file mode 100644 index 00000000..47c5f8a3 --- /dev/null +++ b/8. Tip Calculator/index.js @@ -0,0 +1,30 @@ +window.onload = () => { + document.getElementById("calc").onclick = calculate; +} + +function calculate() { + let amount = document.getElementById("number").value; + let person = document.getElementById("person").value; + let tip = document.querySelector("#Select").value; + + if (amount == '') { + alert("Please enter the valid values"); + return; + } + if (person == '1') { + document.getElementById("each").style.display = "none"; + } else { + document.getElementById("each").style.display = "block"; + + } + let totalTip = parseFloat(amount) * parseFloat(tip) / 100; + let totalBill = parseFloat(totalTip) + parseFloat(amount); + let eachBill = totalBill / parseFloat(person); + + document.getElementById("amount").style.display = "block"; + document.getElementById("amount").innerHTML = " Total bill = $" + totalBill; + document.getElementById("tip").style.display = "block"; + document.getElementById("tip").innerHTML = " Tip for bill = $" + totalTip; + + document.getElementById("each").innerHTML = " Each will pay = $" + eachBill; +} \ No newline at end of file diff --git a/9. Calculator b/9. Calculator new file mode 160000 index 00000000..472a3d7f --- /dev/null +++ b/9. Calculator @@ -0,0 +1 @@ +Subproject commit 472a3d7f472c4bf06faf9789eb9f55826c9a0cc2 diff --git a/Alram Clock/Charas Ganja Mereko Pyara__Set Addicted (320 kbps).mp3 b/Alram Clock/Charas Ganja Mereko Pyara__Set Addicted (320 kbps).mp3 new file mode 100644 index 00000000..9c40d34f Binary files /dev/null and b/Alram Clock/Charas Ganja Mereko Pyara__Set Addicted (320 kbps).mp3 differ diff --git a/Alram Clock/index.css b/Alram Clock/index.css new file mode 100644 index 00000000..8396fe06 --- /dev/null +++ b/Alram Clock/index.css @@ -0,0 +1,48 @@ +canvas { + display: flex; + margin: auto; + justify-content: center; + align-items: center; + margin-top: 5%; +} + +body { + background-color: #000f42; +} + +h1 { + font-weight: bold; + color: cadetblue; + font-size: -webkit-xxx-large; +} + +.container { + display: flex; + margin: auto; + align-items: center; + justify-content: center; + flex-direction: column; + color: aqua; +} + +input { + max-width: 100%; + background: transparent; + border: 2px solid whitesmoke; + border-radius: 2px; + padding: 9px; + color: antiquewhite; + font-weight: 600; + border-radius: 12px; + margin: 12px 0px; +} + +button { + margin: auto; + justify-content: center; + display: flex; + padding: 6px; + border-radius: 11px; + background: cornsilk; + font-weight: 800; +} \ No newline at end of file diff --git a/Alram Clock/index.html b/Alram Clock/index.html new file mode 100644 index 00000000..05c6bf64 --- /dev/null +++ b/Alram Clock/index.html @@ -0,0 +1,28 @@ + + + + + + + + + Document + + + +
+

Set Alarm

+
+
+
+ +
+
+ + + + + + + + \ No newline at end of file diff --git a/Alram Clock/index.js b/Alram Clock/index.js new file mode 100644 index 00000000..161a8a6e --- /dev/null +++ b/Alram Clock/index.js @@ -0,0 +1,120 @@ +var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +var radius = canvas.height / 2; +ctx.translate(radius, radius); +radius = radius * 0.90 +setInterval(drawClock, 1000); + +function drawClock() { + drawFace(ctx, radius); + drawNumbers(ctx, radius); + drawTime(ctx, radius); +} + +function drawFace(ctx, radius) { + var grad; + ctx.beginPath(); + ctx.arc(0, 0, radius, 0, 2 * Math.PI); + ctx.fillStyle = 'white'; + ctx.fill(); + grad = ctx.createRadialGradient(0, 0, radius * 0.95, 0, 0, radius * 1.05); + grad.addColorStop(0, '#333'); + grad.addColorStop(0.5, 'white'); + grad.addColorStop(1, '#333'); + ctx.strokeStyle = grad; + ctx.lineWidth = radius * 0.1; + ctx.stroke(); + ctx.beginPath(); + ctx.arc(0, 0, radius * 0.1, 0, 2 * Math.PI); + ctx.fillStyle = '#333'; + ctx.fill(); +} + +function drawNumbers(ctx, radius) { + var ang; + var num; + ctx.font = radius * 0.15 + "px arial"; + ctx.textBaseline = "middle"; + ctx.textAlign = "center"; + for (num = 1; num < 13; num++) { + ang = num * Math.PI / 6; + ctx.rotate(ang); + ctx.translate(0, -radius * 0.85); + ctx.rotate(-ang); + ctx.fillText(num.toString(), 0, 0); + ctx.rotate(ang); + ctx.translate(0, radius * 0.85); + ctx.rotate(-ang); + } +} + +function drawTime(ctx, radius) { + var now = new Date(); + var hour = now.getHours(); + var minute = now.getMinutes(); + var second = now.getSeconds(); + //hour + hour = hour % 12; + hour = (hour * Math.PI / 6) + + (minute * Math.PI / (6 * 60)) + + (second * Math.PI / (360 * 60)); + drawHand(ctx, hour, radius * 0.5, radius * 0.07); + //minute + minute = (minute * Math.PI / 30) + (second * Math.PI / (30 * 60)); + drawHand(ctx, minute, radius * 0.8, radius * 0.07); + // second + second = (second * Math.PI / 30); + drawHand(ctx, second, radius * 0.9, radius * 0.02); +} + +function drawHand(ctx, pos, length, width) { + ctx.beginPath(); + ctx.lineWidth = width; + ctx.lineCap = "round"; + ctx.moveTo(0, 0); + ctx.rotate(pos); + ctx.lineTo(0, -length); + ctx.stroke(); + ctx.rotate(-pos); +} + +var now = new Date(); +var hour = now.getHours(); +var minute = now.getMinutes(); +var second = now.getSeconds(); + + +const h = document.getElementById("h"); +const m = document.getElementById("m"); +const submit = document.getElementById("submit"); +submit.addEventListener("click", setAlarm); + +var audio = new Audio('./Charas Ganja Mereko Pyara__Set Addicted (320 kbps).mp3'); + +function ringBell() { + audio.play(); +}; + +function setAlarm(e) { + e.preventDefault(); + let AlarmHour = h.value - hour; + let AlarmMinute = m.value - minute; + + + let setHour = AlarmHour * 3600000; + let setMinute = AlarmMinute * 60000; + let setInt = setHour + setMinute; + let secondInt = second * 1000 + let finalSet = setInt - secondInt; + var current = new Date(); + console.log(AlarmHour); + console.log(current.toLocaleTimeString()); + + if (finalSet >= 0) { + setTimeout(() => { + console.log("Ringing now") + ringBell(); + }, finalSet); + } + +} \ No newline at end of file diff --git a/CvSceaner/index.html b/CvSceaner/index.html new file mode 100644 index 00000000..7808f715 --- /dev/null +++ b/CvSceaner/index.html @@ -0,0 +1,127 @@ + + + + + + + + + + + + Hello, world! + + + + +
+
+
+

+ Browser through Cv profiles +

+
+
+ +
+
+
+ +
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/FormValidation/index.html b/FormValidation/index.html new file mode 100644 index 00000000..b7ccd164 --- /dev/null +++ b/FormValidation/index.html @@ -0,0 +1,180 @@ + + + + + + + + + + + + Welcome to Dragon travels + + + + + +
+

Dragon Travel desk

+
+
+ + + + Your username must be 2-10 characters long and should not start with a number + +
+ +
+ + + + Your email must be a valid email + +
+
+ + +
+
+ + +
+
+ + + + Your phone number must be 10 digit long + +
+
+ + +
+ +
+ +
+ + + + + + + + + + \ No newline at end of file diff --git a/Monkey PRojject/index.html b/Monkey PRojject/index.html new file mode 100644 index 00000000..8741b894 --- /dev/null +++ b/Monkey PRojject/index.html @@ -0,0 +1,53 @@ + + + + + + + + + Document + + + +
+

🐵

+

🙊

+
+ + + + + \ No newline at end of file diff --git a/file b/file new file mode 100644 index 00000000..e69de29b