Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Issue #8 Resolved (Loader added to all webpages) #20

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Issue #8 Resolved (Loader added to all webpages) #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 21 additions & 2 deletions BMI Calculator/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
crossorigin="anonymous"
/>
<title>BMI Calculator</title>
<style>
@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");

Expand Down Expand Up @@ -90,10 +91,21 @@
text-align: center;
box-shadow: inset 28px 28px 74px #d6d6d6, inset -28px -28px 74px #ffffff;
}
.preloader {
width: 100%;
height: 100vh;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
position: fixed;
z-index: 100;
}
</style>
<title>BMI Calculator</title>
</head>
<body>
<body onload="loadFunc()">
<div class="preloader"><img src="../giphy.gif" alt="" /></div>

<div class="container">
<h2>BMI Calculator</h2>
<form class="form">
Expand Down Expand Up @@ -152,6 +164,13 @@ <h2>BMI Calculator</h2>
}
}
});

var preloader = document.querySelector(".preloader");
function loadFunc() {
setTimeout(function () {
preloader.style.display = "none";
}, 1650);
}
</script>
</body>
</html>
20 changes: 19 additions & 1 deletion HEX code color generator/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,21 @@
box-shadow: 0px 20px 30px rgba(75, 75, 75, 0.2);
border-radius: 15px;
}
.preloader {
width: 100%;
height: 100vh;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
position: fixed;
z-index: 100;
}
</style>
</head>
<body>
<body onload="loadFunc()">
<div class="preloader"><img src="../giphy.gif" alt="" /></div>

<div id="container">
<input
type="text"
Expand All @@ -61,6 +73,12 @@
clr.addEventListener("input", function () {
document.getElementById("container").style.background = clr.value;
});
var preloader = document.querySelector(".preloader");
function loadFunc() {
setTimeout(function () {
preloader.style.display = "none";
}, 1650);
}
</script>
</body>
</html>
17 changes: 16 additions & 1 deletion alarm clock/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,24 @@
/>

<title>Alarm Clock</title>

<style>
.preloader {
width: 100%;
height: 100vh;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
position: fixed;
z-index: 100;
}
</style>
</head>

<body onload="clock(); setInterval('clock()', 1000);">
<body onload="clock(); setInterval('clock()', 1000); loadFunc();">
<div class="preloader"><img src="../giphy.gif" alt="" /></div>

<div
class="alert alert-success alert-dismissible fade"
role="alert"
Expand Down
12 changes: 12 additions & 0 deletions alarm clock/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,3 +107,15 @@ const btn = document.getElementById('btn').addEventListener('click', (e) => {
second.value = '';
});

////////////////////////////////////////////////////////////////////////////////////////

//PRELOADER

var preloader = document.querySelector(".preloader");
function loadFunc() {
setTimeout(function () {
preloader.style.display = "none";
}, 1650);
}

////////////////////////////////////////////////////////////////////////////////////////
34 changes: 25 additions & 9 deletions calculator/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,13 @@
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<title>Calculator</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
crossorigin="anonymous"
/>
<!-- for styling -->
<style>
body {
Expand Down Expand Up @@ -47,18 +54,21 @@
border-radius: 5px;
border: 2px solid black;
}
.preloader {
width: 100%;
height: 100vh;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
position: fixed;
z-index: 100;
}
</style>
<title>Calculator</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
crossorigin="anonymous"
/>
</head>
<!-- create table -->
<body onload="loadFunc()">
<div class="preloader"><img src="../giphy.gif" alt="" /></div>

<body>
<div class="container">
<h2 class="text-center display-4 my-4"><b>Calculator</b></h2>
<table id="calcu">
Expand Down Expand Up @@ -260,6 +270,12 @@ <h2 class="text-center display-4 my-4"><b>Calculator</b></h2>
function clr() {
document.getElementById("result").value = "";
}
var preloader = document.querySelector(".preloader");
function loadFunc() {
setTimeout(function () {
preloader.style.display = "none";
}, 1650);
}
</script>
</body>
</html>
Binary file added giphy.gif
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
24 changes: 23 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,22 @@
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi"
crossorigin="anonymous"
/>
<style>
.preloader {
width: 100%;
height: 100vh;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
position: fixed;
z-index: 100;
}
</style>
</head>
<body>
<body onload="loadFunc()">
<div class="preloader"><img src="giphy.gif" alt="" /></div>

<h1 class="text-center my-4">Hacktober Fest 2022</h1>
<section class="container d-flex justify-content-center">
<table class="table table-responsive">
Expand Down Expand Up @@ -51,5 +65,13 @@ <h1 class="text-center my-4">Hacktober Fest 2022</h1>
integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
crossorigin="anonymous"
></script>
<script>
var preloader = document.querySelector(".preloader");
function loadFunc() {
setTimeout(function () {
preloader.style.display = "none";
}, 1650);
}
</script>
</body>
</html>