diff --git a/Web_Development/Javascript/7.The DOM/DOM - Examples/Example1 - Random BG color generator/README.md b/Web_Development/Javascript/7.The DOM/DOM - Examples/Example1 - Random BG color generator/README.md new file mode 100644 index 0000000000..1c6b110be3 --- /dev/null +++ b/Web_Development/Javascript/7.The DOM/DOM - Examples/Example1 - Random BG color generator/README.md @@ -0,0 +1,128 @@ +# Example 1 - Background color changer + +![Example 1](./example1.gif) + +HTML Code + +```html + + + + + + + + Example1 - Background color changer + + +
+
+

Background Color: RGB(255,255,255)

+
+ +
+
+

Made with ♥ by Aman Kumar for GWOC'21

+
+ + + +``` + +CSS Code + +```css +@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap'); + +.content{ + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + font-family: 'Quicksand', sans-serif; + margin: auto; + position: absolute; + top: 0; left: 0; bottom: 0; right: 0; + +} + +.box{ + background-color: white; + border: 2px solid black; + border-radius: 25px; + padding-left: 10px; + padding-right: 10px; + font-size: 30px; + font-weight: 600; +} + +.changebtn{ + margin-top: 10px; + padding-top: 10px; + padding-bottom: 10px; + padding-left: 20px; + padding-right: 20px; + background-color: white; + font-family: 'Quicksand', sans-serif; + font-size: 20px; + border-radius: 10px; +} + +.changebtn:hover{ + background-color: black; + color: white; +} + +/* footer */ + +.footer { + font-family: 'Quicksand', sans-serif; + position: fixed; + left: 0; + bottom: 0; + width: 100%; + background-color: rgba(255, 255, 255, 0.253); + color: black; + text-align: center; + } + +.heart{ + color: red; +} + +.github{ + text-decoration: none; +} + +.gwoc{ + color: tomato; +} +``` +Javascript Code + +```javascript + +const btn = document.getElementById('colorbtn'); +const color = document.querySelector('.color'); + +btn.addEventListener("click", ()=>{ + + const c1 = getRandom1(255); + const c2 = getRandom2(255); + const c3 = getRandom3(255); + document.body.style.backgroundColor = `rgba(${c1},${c2},${c3})`; + color.textContent = `RGB(${c1},${c2},${c3})`; + color.style.color=`rgba(${c1},${c2},${c3})`; +}); + +function getRandom1(max){ + return Math.floor(Math.random() * max); +} +function getRandom2(max){ + return Math.floor(Math.random() * max); +} +function getRandom3(max){ + return Math.floor(Math.random() * max); +} +``` diff --git a/Web_Development/Javascript/7.The DOM/DOM - Examples/Example1 - Random BG color generator/example1.gif b/Web_Development/Javascript/7.The DOM/DOM - Examples/Example1 - Random BG color generator/example1.gif new file mode 100644 index 0000000000..3a0f4f8306 Binary files /dev/null and b/Web_Development/Javascript/7.The DOM/DOM - Examples/Example1 - Random BG color generator/example1.gif differ diff --git a/Web_Development/Javascript/7.The DOM/DOM - Examples/Example2 - Counter/README.md b/Web_Development/Javascript/7.The DOM/DOM - Examples/Example2 - Counter/README.md new file mode 100644 index 0000000000..cff8e9f157 --- /dev/null +++ b/Web_Development/Javascript/7.The DOM/DOM - Examples/Example2 - Counter/README.md @@ -0,0 +1,162 @@ +# Example 2 - Counter + +![Example 2](./example2.gif) + +HTML Code + +```html + + + + + + + + Example2 - Counter + + +
+ +
+

Counter

+

0

+
+ + + +
+
+
+
+

Made with ♥ by Aman Kumar for GWOC'21

+
+ + + +``` +CSS Code + +```css +@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap'); + +.container{ + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + font-family: 'Quicksand', sans-serif; + margin: auto; + position: absolute; + top: 0; left: 0; bottom: 0; right: 0; + +} + +.box{ + background-color: white; + border-radius: 25px; + padding-left: 10px; + padding-right: 10px; + font-size: 30px; + font-weight: 600; +} + +.box h1{ + margin-bottom: 20px; +} + +.box p{ + font-size: 50px; + margin-top: 15px; + margin-bottom: 40px; +} + +.buttons button{ + background-color: white; + font-family: 'Quicksand', sans-serif; + padding-right: 20px; + padding-left: 20px; + padding-top: 10px; + padding-bottom: 10px; + font-size: 20px; + margin-right: 15px; + margin-left: 15px; + border-radius: 10px; +} + +#decrease{ + color: red; + border: 2px solid red; +} + +#decrease:hover{ + color:white; + background-color: red; +} + +#increase{ + color: green; + border: 2px solid green; +} + +#increase:hover{ + color: white; + background-color: green; +} + +#reset:hover{ + color: white; + background-color: black; +} + +/* footer */ + +.footer { + font-family: 'Quicksand', sans-serif; + position: fixed; + left: 0; + bottom: 0; + width: 100%; + background-color: rgba(255, 255, 255, 0.253); + color: black; + text-align: center; + } + +.heart{ + color: red; +} + +.github{ + text-decoration: none; +} + +.gwoc{ + color: tomato; +} +``` +Javascript Code + +```javascript +const count = document.getElementById('count'); +const decrease = document.getElementById('decrease'); +const reset = document.getElementById('reset'); +const increase = document.getElementById('increase'); +var c = 0; +decrease.addEventListener('click', ()=>{ + c--; + count.textContent = c; +}); + +increase.addEventListener('click', ()=>{ + c++; + count.textContent = c; +}); + +reset.addEventListener('click', ()=>{ + c=0; + count.textContent = c; +}); + +``` diff --git a/Web_Development/Javascript/7.The DOM/DOM - Examples/Example2 - Counter/example2.gif b/Web_Development/Javascript/7.The DOM/DOM - Examples/Example2 - Counter/example2.gif new file mode 100644 index 0000000000..c08cdf4fce Binary files /dev/null and b/Web_Development/Javascript/7.The DOM/DOM - Examples/Example2 - Counter/example2.gif differ diff --git a/Web_Development/Javascript/7.The DOM/DOM - Examples/Example3 - Tab switching/README.md b/Web_Development/Javascript/7.The DOM/DOM - Examples/Example3 - Tab switching/README.md new file mode 100644 index 0000000000..85ed8b999a --- /dev/null +++ b/Web_Development/Javascript/7.The DOM/DOM - Examples/Example3 - Tab switching/README.md @@ -0,0 +1,271 @@ +# Example 3 - Tab Switching + +![Example 3](./example3.gif) + +HTML Code + +```html + + + + + + + + Example3 - Tab Switching + + +
+

T-Shirts

+
+ + + +
+ + +
+
+
+ black1 +

Black Design T-shirt

+

₹399

+
+
+ black1 +

Grey Honeycomb T-shirt

+

₹499

+
+
+ black1 +

Mustard T-shirt

+

₹215

+
+
+ black1 +

Grey T-shirt

+

₹359

+
+
+
+
+ black1 +

Cool Blue T-shirt

+

₹550

+
+
+ black1 +

Fresh Cyan T-shirt

+

₹299

+
+
+ black1 +

Pure Black T-shirt

+

₹250

+
+
+ black1 +

Grey Design T-shirt

+

₹219

+
+
+
+
+
+
+ black1 +

Black Design T-shirt

+

₹399

+
+
+ black1 +

Pure Black T-shirt

+

₹250

+
+
+
+
+
+
+ black1 +

Grey Honeycomb T-shirt

+

₹499

+
+
+ black1 +

Grey T-shirt

+

₹359

+
+
+ black1 +

Grey Design T-shirt

+

₹219

+
+
+
+
+
+

Made with ♥ by Aman Kumar for GWOC'21

+
+ + + +``` +CSS Code + +```css +@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap'); + +.content{ + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + font-family: 'Quicksand', sans-serif; + top: 0; left: 0; bottom: 0; right: 0; + +} + +.buttons{ + background-color: white; + border-radius: 25px; + padding-left: 10px; + padding-right: 10px; + font-size: 30px; + font-weight: 600; +} + +.buttons button{ + background-color: white; + padding-left: 20px; + padding-right: 20px; + padding-top: 5px; + padding-bottom: 5px; + margin-right: 10px; + margin-left: 10px; + border: 1px solid black; + border-radius: 10px; +} + +.cards{ + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 50%; + /* border: 1px solid black; */ + margin-top: 15px; +} + +.row{ + display: flex; + flex-direction: row; +} + +.card{ + width: 250px; + border: 1px solid rgba(128, 128, 128, 0.486); + border-radius: 15px; + margin-top: 5px; + margin-bottom: 5px; + margin-right: 10px; + margin-left: 10px; +} + +.card img{ + margin-top: 10px; + margin-bottom: 5px; +} + +.name{ + font-size: 18px; +} + +#all{ + color: white; + background-color: black; +} + +#blackcontent{ + display: none; +} +#greycontent{ + display: none; +} + +/* footer */ + +.footer { + font-family: 'Quicksand', sans-serif; + position: relative; + left: 0; + bottom: 0; + width: 100%; + background-color: rgba(255, 255, 255, 0.253); + color: black; + text-align: center; + } + +.heart{ + color: red; +} + +.github{ + text-decoration: none; +} + +.gwoc{ + color: tomato; +} +``` +Javascript Code + +```javascript +const all = document.getElementById('all'); +const black = document.getElementById('black'); +const grey = document.getElementById('grey'); +const allcontent = document.getElementById('allcontent'); +const blackcontent = document.getElementById('blackcontent'); +const greycontent = document.getElementById('greycontent'); + +black.addEventListener('click', ()=>{ + allcontent.style.display='none'; + blackcontent.style.display='flex'; + greycontent.style.display='none'; + + black.style.color='white'; + black.style.backgroundColor='black'; + all.style.color='black'; + all.style.backgroundColor='white'; + grey.style.color='black'; + grey.style.backgroundColor='white'; +}); + +all.addEventListener('click', ()=>{ + allcontent.style.display='flex'; + blackcontent.style.display='none'; + greycontent.style.display='none'; + + black.style.color='black'; + black.style.backgroundColor='white'; + all.style.color='white'; + all.style.backgroundColor='black'; + grey.style.color='black'; + grey.style.backgroundColor='white'; +}); + +grey.addEventListener('click', ()=>{ + allcontent.style.display='none'; + blackcontent.style.display='none'; + greycontent.style.display='flex'; + + black.style.color='black'; + black.style.backgroundColor='white'; + all.style.color='black'; + all.style.backgroundColor='white'; + grey.style.color='white'; + grey.style.backgroundColor='black'; +}); + +``` \ No newline at end of file diff --git a/Web_Development/Javascript/7.The DOM/DOM - Examples/Example3 - Tab switching/example3.gif b/Web_Development/Javascript/7.The DOM/DOM - Examples/Example3 - Tab switching/example3.gif new file mode 100644 index 0000000000..8f64baf00b Binary files /dev/null and b/Web_Development/Javascript/7.The DOM/DOM - Examples/Example3 - Tab switching/example3.gif differ diff --git a/Web_Development/Javascript/7.The DOM/DOM - Examples/Example3 - Tab switching/media/amazon1.webp b/Web_Development/Javascript/7.The DOM/DOM - Examples/Example3 - Tab switching/media/amazon1.webp new file mode 100644 index 0000000000..855e78f70f Binary files /dev/null and b/Web_Development/Javascript/7.The DOM/DOM - Examples/Example3 - Tab switching/media/amazon1.webp differ diff --git a/Web_Development/Javascript/7.The DOM/DOM - Examples/Example3 - Tab switching/media/amazon2.webp b/Web_Development/Javascript/7.The DOM/DOM - Examples/Example3 - Tab switching/media/amazon2.webp new file mode 100644 index 0000000000..782c8bb8e2 Binary files /dev/null and b/Web_Development/Javascript/7.The DOM/DOM - Examples/Example3 - Tab switching/media/amazon2.webp differ diff --git a/Web_Development/Javascript/7.The DOM/DOM - Examples/Example3 - Tab switching/media/amazon3.webp b/Web_Development/Javascript/7.The DOM/DOM - Examples/Example3 - Tab switching/media/amazon3.webp new file mode 100644 index 0000000000..45a65e7f8d Binary files /dev/null and b/Web_Development/Javascript/7.The DOM/DOM - Examples/Example3 - Tab switching/media/amazon3.webp differ diff --git a/Web_Development/Javascript/7.The DOM/DOM - Examples/Example3 - Tab switching/media/grey-t1.webp b/Web_Development/Javascript/7.The DOM/DOM - Examples/Example3 - Tab switching/media/grey-t1.webp new file mode 100644 index 0000000000..dbbd895ad2 Binary files /dev/null and b/Web_Development/Javascript/7.The DOM/DOM - Examples/Example3 - Tab switching/media/grey-t1.webp differ diff --git a/Web_Development/Javascript/7.The DOM/DOM - Examples/Example3 - Tab switching/media/grey-t2.webp b/Web_Development/Javascript/7.The DOM/DOM - Examples/Example3 - Tab switching/media/grey-t2.webp new file mode 100644 index 0000000000..850b3ea28d Binary files /dev/null and b/Web_Development/Javascript/7.The DOM/DOM - Examples/Example3 - Tab switching/media/grey-t2.webp differ diff --git a/Web_Development/Javascript/7.The DOM/DOM - Examples/Example3 - Tab switching/media/t1.jpg b/Web_Development/Javascript/7.The DOM/DOM - Examples/Example3 - Tab switching/media/t1.jpg new file mode 100644 index 0000000000..8d05e73d0d Binary files /dev/null and b/Web_Development/Javascript/7.The DOM/DOM - Examples/Example3 - Tab switching/media/t1.jpg differ diff --git a/Web_Development/Javascript/7.The DOM/DOM - Examples/Example3 - Tab switching/media/t2.jpg b/Web_Development/Javascript/7.The DOM/DOM - Examples/Example3 - Tab switching/media/t2.jpg new file mode 100644 index 0000000000..ab0452878d Binary files /dev/null and b/Web_Development/Javascript/7.The DOM/DOM - Examples/Example3 - Tab switching/media/t2.jpg differ diff --git a/Web_Development/Javascript/7.The DOM/DOM - Examples/Example3 - Tab switching/media/t3.jpg b/Web_Development/Javascript/7.The DOM/DOM - Examples/Example3 - Tab switching/media/t3.jpg new file mode 100644 index 0000000000..fbaf649e84 Binary files /dev/null and b/Web_Development/Javascript/7.The DOM/DOM - Examples/Example3 - Tab switching/media/t3.jpg differ diff --git a/Web_Development/Javascript/7.The DOM/DOM - Examples/Example4 - Modal/README.md b/Web_Development/Javascript/7.The DOM/DOM - Examples/Example4 - Modal/README.md new file mode 100644 index 0000000000..6cac9ea477 --- /dev/null +++ b/Web_Development/Javascript/7.The DOM/DOM - Examples/Example4 - Modal/README.md @@ -0,0 +1,143 @@ +# Example 4 - Modal + +![Example 4](./example4.gif) + +HTML Code + +```html + + + + + + + + Example4 - Modal + + +
+ +
+ +
+

Made with ♥ by Aman Kumar for GWOC'21

+
+ + + +``` + +CSS Code + +```css +@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap'); + +.button{ + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + position: absolute; + top: 0; bottom: 0;right: 0;left: 0; +} + +.button button{ + padding-right: 15px; + padding-left: 15px; + padding-top: 10px; + padding-bottom: 10px; + font-size: 20px; + background-color: white; + color: black; + border: 2px solid black; + border-radius: 10px; + font-family: 'Quicksand', sans-serif; +} + +.button button:hover{ + color: white; + background-color: black; +} + +/* modal */ +.modal{ + display: none; + flex-direction: column; + align-items: center; + justify-content: center; + margin: auto; + position: absolute; + top: 0;bottom: 0;right: 0;left: 0; + border: 2px solid black; + border-radius: 10px; + width: 500px; + height: 50%; + font-family: 'Quicksand', sans-serif; +} + +.close{ + font-family: 'Quicksand', sans-serif; + padding-right: 15px; + padding-left: 15px; + padding-top: 5px; + padding-bottom: 5px; + font-size: 15px; + background-color: white; + color: red; + border: 2px solid red; + border-radius: 10px; + +} + +.close:hover{ + background-color: red; + color: white; +} + +/* footer */ + +.footer { + font-family: 'Quicksand', sans-serif; + position: fixed; + left: 0; + bottom: 0; + width: 100%; + background-color: rgba(255, 255, 255, 0.253); + color: black; + text-align: center; + } + +.heart{ + color: red; +} + +.github{ + text-decoration: none; +} + +.gwoc{ + color: tomato; +} +``` + +Javascript Code + +```javascript +const modalbtn = document.getElementById('modalbtn'); +const closebtn = document.getElementById('closebtn'); +const modal = document.getElementById('modal'); +const button = document.getElementById('button'); + +modalbtn.addEventListener('click', ()=>{ + modal.style.display='flex'; + button.style.display='none'; +}); + +closebtn.addEventListener('click', ()=>{ + modal.style.display='none'; + button.style.display='flex'; +}); +``` \ No newline at end of file diff --git a/Web_Development/Javascript/7.The DOM/DOM - Examples/Example4 - Modal/example4.gif b/Web_Development/Javascript/7.The DOM/DOM - Examples/Example4 - Modal/example4.gif new file mode 100644 index 0000000000..2f0c2b529f Binary files /dev/null and b/Web_Development/Javascript/7.The DOM/DOM - Examples/Example4 - Modal/example4.gif differ diff --git a/Web_Development/Javascript/7.The DOM/DOM - Examples/Example5 - Sort/README.md b/Web_Development/Javascript/7.The DOM/DOM - Examples/Example5 - Sort/README.md new file mode 100644 index 0000000000..27834cc26b --- /dev/null +++ b/Web_Development/Javascript/7.The DOM/DOM - Examples/Example5 - Sort/README.md @@ -0,0 +1,158 @@ +# Example5 - Sort Courses + +![Example 5](./sort.gif) + +HTML Code + +```html + + + + + + Example5 - Sort Courses + + + + +
+

Sort Courses

+ +
+ + +
+
+
+

Made with ♥ by Aman Kumar for GWOC'21

+
+ + + +``` +CSS Code + +```css +@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap'); + +body { + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + +} + +.container{ + display: flex; + flex-direction: column; + font-family: 'Quicksand', sans-serif; + background-color: rgba(128, 128, 128, 0.219); + border: 1px solid grey; +} + +.buttons{ + display: flex; + flex-direction: row; + width: 50%; + margin: auto; + align-items: center; + justify-content: center; + font-family: 'Quicksand', sans-serif; +} + +/* footer */ +.footer { + font-family: 'Quicksand', sans-serif; + position: fixed; + left: 0; + bottom: 0; + width: 100%; + background-color: rgba(255, 255, 255, 0.253); + color: black; + text-align: center; +} + +.heart{ + color: red; +} + +.github{ + text-decoration: none; +} + +.gwoc{ + color: tomato; +} +``` +Javascript Code + +```javascript +const courses = [ + { + name: "Complete ReactJS course", + price: "2.0", + color: "#00d2f754" + }, + { + name: "Complete AngularJS course", + price: "2.8", + color: "#d6002eb6" + }, + { + name: "Complete NodeJS course", + price: "2.5", + color: "#74ac64" + }, + { + name: "Complete MERN course", + price: "5.0", + color: "rgba(255, 140, 0, 0.664)" + } +]; + +const hlbutton = document.querySelector(".sort-high-low-btn"); +const lhbutton = document.querySelector(".sort-low-high-btn"); + +function generateLIST(){ + const ul = document.querySelector(".list-group") + ul.innerHTML = ""; + courses.forEach( course => { + const li = document.createElement("li"); + li.classList.add("list-group-item"); + li.style.backgroundColor= course.color; + + const name = document.createTextNode(course.name); + li.appendChild(name); + + const span = document.createElement("span"); + span.classList.add("float-right"); + + const price = document.createTextNode("$" + course.price); + span.appendChild(price); + li.appendChild(span); + + ul.appendChild(li); + } ); +} + +window.addEventListener("load", generateLIST); + +lhbutton.addEventListener("click", ()=>{ + courses.sort( (a,b)=> a.price - b.price ); + generateLIST(); +}); + +hlbutton.addEventListener("click", ()=>{ + courses.sort( (a,b)=> b.price - a.price ); + generateLIST(); +}); +``` \ No newline at end of file diff --git a/Web_Development/Javascript/7.The DOM/DOM - Examples/Example5 - Sort/sort.gif b/Web_Development/Javascript/7.The DOM/DOM - Examples/Example5 - Sort/sort.gif new file mode 100644 index 0000000000..a0fd08c219 Binary files /dev/null and b/Web_Development/Javascript/7.The DOM/DOM - Examples/Example5 - Sort/sort.gif differ diff --git a/Web_Development/Javascript/7.The DOM/DOM - Examples/README.md b/Web_Development/Javascript/7.The DOM/DOM - Examples/README.md new file mode 100644 index 0000000000..d6ff7d54fa --- /dev/null +++ b/Web_Development/Javascript/7.The DOM/DOM - Examples/README.md @@ -0,0 +1,10 @@ +# The DOM Javascript Examples + +## 1. Background Color Changer +## 2. Counter +## 3. Tab Switching +## 4. Modal +## 5. Sort courses + + +