From 55ed5cb21a09d6843bde5d377275961a6c7b96eb Mon Sep 17 00:00:00 2001
From: vaibhav singh <vaibhavpratapsingh22@gmail.com>
Date: Sun, 7 Aug 2022 14:20:42 +0530
Subject: [PATCH 1/2] Learning Js
Created a modal using JavaScript and the next push will be for guess the number game. So be ready for for learning JS.
---
C-08-javascript/modal/index.html | 32 ++++++++++++
C-08-javascript/modal/script.js | 22 +++++++++
C-08-javascript/modal/style.css | 85 ++++++++++++++++++++++++++++++++
3 files changed, 139 insertions(+)
create mode 100644 C-08-javascript/modal/index.html
create mode 100644 C-08-javascript/modal/script.js
create mode 100644 C-08-javascript/modal/style.css
diff --git a/C-08-javascript/modal/index.html b/C-08-javascript/modal/index.html
new file mode 100644
index 0000000..98b4979
--- /dev/null
+++ b/C-08-javascript/modal/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+ <link rel="stylesheet" href="style.css" />
+ <title>Modal window</title>
+ </head>
+ <body>
+ <button class="show-modal">Show modal 1</button>
+ <button class="show-modal">Show modal 2</button>
+ <button class="show-modal">Show modal 3</button>
+
+ <div class="modal hidden">
+ <button class="close-modal">×</button>
+ <h1>I'm a modal window 😍</h1>
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+ veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+ commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+ velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+ occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+ mollit anim id est laborum.
+ </p>
+ </div>
+ <div class="overlay hidden"></div>
+
+ <script src="script.js"></script>
+ </body>
+</html>
\ No newline at end of file
diff --git a/C-08-javascript/modal/script.js b/C-08-javascript/modal/script.js
new file mode 100644
index 0000000..6898b4c
--- /dev/null
+++ b/C-08-javascript/modal/script.js
@@ -0,0 +1,22 @@
+let display = document.querySelectorAll(".show-modal");
+let data= document.querySelector('.modal p');
+let modal = document.querySelector('.modal');
+let close = document.querySelector('.close-modal');
+let overlay = document.querySelector('.overlay');
+console.log(overlay);
+console.log(display);
+
+for (let i = 0; i < display.length; i++) {
+ display[i].addEventListener("click", function () {
+ console.log(modal.classList);
+ modal.classList.remove('hidden');
+ overlay.classList.remove('hidden');
+
+ });
+}
+
+console.log(close);
+close.addEventListener('click', function(){
+modal.classList.add('hidden');
+overlay.classList.add('hidden');
+});
diff --git a/C-08-javascript/modal/style.css b/C-08-javascript/modal/style.css
new file mode 100644
index 0000000..ca0b08d
--- /dev/null
+++ b/C-08-javascript/modal/style.css
@@ -0,0 +1,85 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: inherit;
+ }
+
+ html {
+ font-size: 62.5%;
+ box-sizing: border-box;
+ }
+
+ body {
+ font-family: sans-serif;
+ color: #333;
+ line-height: 1.5;
+ height: 100vh;
+ position: relative;
+ display: flex;
+ align-items: flex-start;
+ justify-content: center;
+ background: linear-gradient(to top left, #28b487, #7dd56f);
+ }
+
+ .show-modal {
+ font-size: 2rem;
+ font-weight: 600;
+ padding: 1.75rem 3.5rem;
+ margin: 5rem 2rem;
+ border: none;
+ background-color: #fff;
+ color: #444;
+ border-radius: 10rem;
+ cursor: pointer;
+ }
+
+ .close-modal {
+ position: absolute;
+ top: 1.2rem;
+ right: 2rem;
+ font-size: 5rem;
+ color: #333;
+ cursor: pointer;
+ border: none;
+ background: none;
+ }
+
+ h1 {
+ font-size: 2.5rem;
+ margin-bottom: 2rem;
+ }
+
+ p {
+ font-size: 1.8rem;
+ }
+
+ /* -------------------------- */
+ /* CLASSES TO MAKE MODAL WORK */
+ .hidden {
+ display: none;
+ }
+
+ .modal {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 70%;
+
+ background-color: white;
+ padding: 6rem;
+ border-radius: 5px;
+ box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.3);
+ z-index: 10;
+ }
+
+ .overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.6);
+ backdrop-filter: blur(3px);
+ z-index: 5;
+ }
\ No newline at end of file
From 104ed910d7616cb04bbbb8ad877cbdcdef18138d Mon Sep 17 00:00:00 2001
From: vaibhav singh <vaibhavpratapsingh22@gmail.com>
Date: Sun, 7 Aug 2022 19:15:51 +0530
Subject: [PATCH 2/2] Update script.js
---
C-08-javascript/modal/script.js | 12 ++++++++++++
1 file changed, 12 insertions(+)
diff --git a/C-08-javascript/modal/script.js b/C-08-javascript/modal/script.js
index 6898b4c..ecd5263 100644
--- a/C-08-javascript/modal/script.js
+++ b/C-08-javascript/modal/script.js
@@ -20,3 +20,15 @@ close.addEventListener('click', function(){
modal.classList.add('hidden');
overlay.classList.add('hidden');
});
+
+overlay.addEventListener('click',function(){
+ modal.classList.add('hidden');
+ overlay.classList.add('hidden');
+});
+
+document.addEventListener('keydown',function(pressed){
+
+ if(pressed.key=='Escape'){
+ modal.classList.add('hidden');
+ overlay.classList.add('hidden');}
+})
\ No newline at end of file