Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@NiponSaha
NiponSaha authored Aug 3, 2024
1 parent 41189d0 commit 9832517
Show file tree
Hide file tree
Showing 3 changed files with 292 additions and 0 deletions.
77 changes: 77 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Modal Window!!</title>
</head>
<body>
<header>
<h1>Hello world! 👋</h1>
<p class="header-txt">
please, click the following button and see the results!
</p>
</header>

<!-- Three buttons -->
<button class="html">HTML</button>
<button class="css">CSS</button>
<button class="js">JavaScript</button>

<!-- HTML Modal -->
<div class="html-modal hidden">
<button class="close-html-modal">&times;</button>
<h1>HTML! 🍤</h1>
<p>
<strong>HyperText Markup Language (HTML)</strong> is the standard markup
language for documents designed to be displayed in a web browser. It
defines the content and structure of web content. It is often assisted
by technologies such as
<strong> Cascading Style Sheets (CSS)</strong> and scripting languages
such as <strong>JavaScript</strong>. HTML describes the structure of a
web page semantically and originally included cues for its appearance.
</p>
</div>

<!-- CSS Modal -->
<div class="css-modal hidden">
<button class="close-css-modal">&times;</button>
<h1>CSS! 💄</h1>
<p>
<strong>Cascading Style Sheets (CSS)</strong> is a style sheet language
used for specifying the presentation and styling of a document written
in HTML. CSS is designed to enable the separation of content and
presentation, including layout, colors, and fonts. This separation
improves content accessibility, provides more flexibility and controls
in the specification of presentation. <br />The name
<strong>cascading</strong> comes from the specified priority scheme to
determine which declaration applies if more than one declaration of a
property match a particular element.
</p>
</div>

<!-- JavaScript Modal -->
<div class="js-modal hidden">
<button class="close-js-modal">&times;</button>
<h1>JavaScript! 🧠</h1>
<p>
JavaScript; abbreviated as <strong>JS</strong>, is a programming
language and core technology of the Web, alongside HTML and CSS. 99% of
websites use JavaScript on the client side for webpage behavior. Web
browsers have a dedicated JavaScript engine that executes the client
code.
<br />
JavaScript is a high-level, often just-in-time compiled language that
conforms to the ECMAScript standard. It has dynamic typing,
prototype-based object-orientation, and first-class functions. It has
<strong>Application Programming Interfaces (APIs)</strong> for working
with text, dates, regular expressions, standard data structures, and the
<strong>Document Object Model (DOM)</strong>.
</p>
</div>

<div class="overlay hidden"></div>
<script src="script.js"></script>
</body>
</html>
88 changes: 88 additions & 0 deletions script.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
'use strict';
// Modals --- HTML, CSS & JavaScript
const htmlModal = document.querySelector('.html-modal');
const cssModal = document.querySelector('.css-modal');
const jsModal = document.querySelector('.js-modal');

// Buttons --- HTML, CSS & JavaScript
const btnHtml = document.querySelector('.html');
const btnCss = document.querySelector('.css');
const btnJs = document.querySelector('.js');

// Close Buttons --- HTML, CSS & JavaScript
const btnCloseHtmlModal = document.querySelector('.close-html-modal');
const btnCloseCssModal = document.querySelector('.close-css-modal');
const btnCloseJsModal = document.querySelector('.close-js-modal');

const overlay = document.querySelector('.overlay');

/* ============== function for HTML =================== */
// Open the Modal
const openHtmlModal = function () {
htmlModal.classList.remove('hidden');
overlay.classList.remove('hidden');
};

// Click on button --- 'clickEvent'
btnHtml.addEventListener('click', openHtmlModal);

// Close the Modal
const closeHtmlModal = function () {
htmlModal.classList.add('hidden');
overlay.classList.add('hidden');
};

// Close 'Event function' when (x) button is clicked
btnCloseHtmlModal.addEventListener('click', closeHtmlModal);


/* ================= function for CSS =================== */
// Open the Modal
const openCssModal = function () {
cssModal.classList.remove('hidden');
overlay.classList.remove('hidden');
}

// Click on button --- 'clickEvent'
btnCss.addEventListener('click', openCssModal);

// Close the Modal
const closeCssModal = function () {
cssModal.classList.add('hidden');
overlay.classList.add('hidden');
};

// Close 'Event function' when (x) button is clicked
btnCloseCssModal.addEventListener('click', closeCssModal);

/* ================== function for JS ================== */
// Open the Modal
const openJsModal = function () {
jsModal.classList.remove('hidden');
overlay.classList.remove('hidden');
};

// Click on button --- 'clickEvent'
btnJs.addEventListener('click', openJsModal);

// Close the Modal
const closeJsModal = function () {
jsModal.classList.add('hidden');
overlay.classList.add('hidden');
};

// Close 'Event function' when (x) button is clicked
document.querySelector('.close-js-modal').addEventListener('click', closeJsModal);

// Close the Modal when 'Esc' key pressed from keyboard
document.addEventListener('keydown', function (e) {
if (e.key === 'Escape' && !htmlModal.classList.contains('hidden')) {
closeHtmlModal();
};
if (e.key === 'Escape' && !cssModal.classList.contains('hidden')) {
closeCssModal();
}
if (e.key === 'Escape' && !jsModal.classList.contains('hidden')) {
closeJsModal();
}
});
127 changes: 127 additions & 0 deletions style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,127 @@
* {
margin: 0;
padding: 0;
box-sizing: inherit;
}

html {
font-size: 62.5%;
box-sizing: border-box;
}

body {
position: relative;
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: #333;
line-height: 1.5;
height: 100vh;
display: flex;
align-items: flex-start;
justify-content: center;
background: linear-gradient(
45deg,
#f17c58,
#e94584,
#24aadb,
#27dbb1,
#ffdc18,
#ff3706
);
background-size: 600% 100%;
animation: gradient 16s linear infinite;
animation-direction: alternate;
}

@keyframes gradient {
0% {
background-position: 0%;
}
100% {
background-position: 100%;
}
}

header {
position: absolute;
display: inline-block;
margin-top: 5rem;
padding: 0.8rem 1.4rem 2rem;
border-radius: 5px;
font-size: 1rem;
font-weight: 700;
text-align: center;
color: #fff;
}

.header-txt:hover {
color: #000;
border-bottom: 2px solid #000;
cursor: pointer;
}

.html,
.css,
.js {
font-size: 2.2rem;
font-weight: 600;
margin: 20rem 1.5rem;
padding: 1.25rem 5rem;
color: #444;
background-color: #fff;
border: none;
border-radius: 2.5rem;
cursor: pointer;
}

.close-html-modal,
.close-css-modal,
.close-js-modal {
position: absolute;
top: 1.2rem;
right: 2rem;
font-size: 3.5rem;
color: #333;
background: none;
border: none;
cursor: pointer;
}

h1 {
font-size: 2.5rem;
margin-bottom: 2rem;
}

p {
font-size: 1.5rem;
}

/* Classes to make Modal work */
.hidden {
display: none;
}

.html-modal,
.css-modal,
.js-modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 6rem;
width: 70%;
background-color: #fff;
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;
}

0 comments on commit 9832517

Please sign in to comment.