Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@AmmarTheDeveloper
AmmarTheDeveloper committed Aug 28, 2023
1 parent acd35b7 commit 40ef78b
Show file tree
Hide file tree
Showing 73 changed files with 3,500 additions and 0 deletions.
67 changes: 67 additions & 0 deletions html practice/According/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accordin</title>
<link rel="stylesheet" href="style.css">
<!-- font awesome cnd link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
</head>
<body>
<div class="container">
<div class="accordin">
<h1>What is accordin
<i class="fa-solid fa-plus icon"></i>
<!-- <i class="fa-solid fa-minus"></i> -->
</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex quae cupiditate facilis temporibus magni nihil odit voluptatem consequatur, consectetur asperiores!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi laborum voluptates eos magni quis cupiditate modi sequi temporibus minima neque.
</p>
</div>
<div class="accordin">
<h1>Why we have accordin
<i class="fa-solid fa-plus icon"></i>
<!-- <i class="fa-solid fa-minus"></i> -->
</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex quae cupiditate facilis temporibus magni nihil odit voluptatem consequatur, consectetur asperiores!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi laborum voluptates eos magni quis cupiditate modi sequi temporibus minima neque.
</p>
</div>
<div class="accordin">
<h1>Accordin full source code
<i class="fa-solid fa-plus icon"></i>
<!-- <i class="fa-solid fa-minus"></i> -->
</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex quae cupiditate facilis temporibus magni nihil odit voluptatem consequatur, consectetur asperiores!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi laborum voluptates eos magni quis cupiditate modi sequi temporibus minima neque.
</p>
</div>
<div class="accordin">
<h1>Accordin with html css & js
<i class="fa-solid fa-plus icon"></i>
<!-- <i class="fa-solid fa-minus"></i> -->
</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex quae cupiditate facilis temporibus magni nihil odit voluptatem consequatur, consectetur asperiores!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi laborum voluptates eos magni quis cupiditate modi sequi temporibus minima neque.
</p>
</div>
<div class="accordin">
<h1> Accordin created by ammar
<i class="fa-solid fa-plus icon"></i>
<!-- <i class="fa-solid fa-minus"></i> -->
</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex quae cupiditate facilis temporibus magni nihil odit voluptatem consequatur, consectetur asperiores!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi laborum voluptates eos magni quis cupiditate modi sequi temporibus minima neque.
</p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
22 changes: 22 additions & 0 deletions html practice/According/script.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
const icons = document.querySelectorAll('.icon');
const accordins = document.querySelectorAll('.accordin');
const headings = document.querySelectorAll('h1');
headings.forEach(heading =>{
heading.onclick = ()=>{
let accordin = heading.parentElement;
let icon = heading.children[0];
if(icon.classList.contains('fa-plus')){
icon.classList.replace('fa-plus','fa-minus');
accordins.forEach(accord=>{
if(accord.classList.contains('active')){
accord.classList.remove('active');
accord.querySelector('h1').children[0].classList.replace('fa-minus','fa-plus')
}
})
accordin.classList.add('active');
}else{
icon.classList.replace('fa-minus','fa-plus');
accordin.classList.remove('active');
}
}
})
64 changes: 64 additions & 0 deletions html practice/According/style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

*{
margin:0;
padding:0;
font-family:'Poppins' , sans-serif;
box-sizing: border-box;
}
body{
min-height:100vh;
display:flex;
justify-content:center;
align-items:center;
padding:30px 0;
}
.container{
width:95%;
height:auto;
box-shadow:0 4px 10px rgba(0,0,0,0.5);
border-radius:5px;
box-sizing:border-box;
padding:5px 10px;
}
.container .accordin{
background:rgb(216, 216, 253);
margin:10px 0;
box-sizing:border-box;
width:100%;
padding:10px;
overflow:hidden;
border-radius:5px;
}
.container .accordin h1{
font-size:16px;
font-weight:500;
width:100%;
box-sizing:border-box;
padding-right:20px;
position:relative;
cursor:pointer;
}
.container .accordin .icon{
position:absolute;
right:10px;
top:50%;
transform:translateY(-50%);
cursor:pointer;
color:rgb(145, 145, 252);
transition:all 0.3s ease;
}
.container .accordin .icon:hover{
color:rgb(255, 158, 177);
}
.container .accordin p{
max-height:0;
font-size:16px;
font-weight:400;
-webkit-transition:all 0.3s ease;
transition:all 0.3s ease-in-out;
overflow:hidden;
}
.container .accordin.active p{
max-height:1000px;
}
159 changes: 159 additions & 0 deletions html practice/Age calculator/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,159 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Age calculator</title>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
font-family: "Poppins", sans-serif;
}

body {
height: 100vh;
width: 100%;
background: #00d999;
display: flex;
justify-content: center;
align-items: center;
}

.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 40px;
width: 500px;
}

.input-container {
background: black;
width: 100%;
height: 70px;
box-sizing: border-box;
padding: 10px 10px 15px 10px;
box-shadow: 0 0 15px 3px rgba(0, 0, 0, 0.5);
display: flex;
justify-content: space-between;
align-items: center;
}

.input-container .input {
height: 100%;
width: 150px;
border-radius: 5px;
padding-inline: 30px;
font-size: 15px;
font-weight: 600;
margin-right: 50px;
}

.input-container .btn {
height: 100%;
width: 100px;
border-radius: 5px;
background: white;
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: background 0.3s ease;
}

.input-container .btn:hover {
background: #f2f2f2;
}

.output-container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-top: 50px;
flex-wrap: wrap;
row-gap: 20px;
}

.output-container .box {
margin-inline: 20px;
background: black;
color: grey;
width: 40px;
padding: 10px 20px;
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.5);
border-radius: 5px;
text-align: center;
}

.output-container .text {
font-weight: 500;
font-size: 15px;
}

span {
font-weight: 600;
font-size: 18px;
color: white;
}

@media screen and (max-width:500px) {
.container {
width: 98%;
box-sizing: border-box;
padding: 40px 20px;
}
}

@media screen and (max-width:450px) {
.input-container {
flex-direction: column;
justify-content: center;
height: fit-content;
row-gap: 10px;
}

.input-container .input {
width: 100%;
box-sizing: border-box;
margin: 0;
height: 40px;
}

.input-container .btn {
height: 40px;
width: 150px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="input-container">
<input type="date" class="input">
<button class="btn" type="button">Calculate</button>
</div>
<div class="output-container">
<div class="year-container box">
<span class="year">-</span>
<p class="text">Year</p>
</div>
<div class="month-container box">
<span class="month">-</span>
<p class="text">month</p>
</div>
<div class="day-container box">
<span class="day">-</span>
<p class="text">Day</p>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
64 changes: 64 additions & 0 deletions html practice/Age calculator/script.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
const calculate = document.querySelector('.btn');
const month = [01 , 02 , 03 , 04 , 05 , 06 , 07 , 08 , 09 , 10 , 11 ,12];
const monthDay = [31 , 28 , 31 , 30 , 31 , 30 , 31 ,31 , 30 , 31 , 30 , 31];
calculate.onclick = () => {
let today = new Date(),
tYear = today.getFullYear(),
tMonth = today.getMonth() + 1,
tDate = today.getDate();
const input = new Date(document.querySelector('.input').value);
let birthYear = input.getFullYear(),
birthMonth = input.getMonth() + 1,
birthDate = input.getDate();
// for leap year
if(birthYear % 4 == 0){
monthDay[1] = 29;
}else {
monthDay[1] = 28;
}
// if date is not valid then we say you not born yet
if (input == "Invalid Date") {
tYear = "Not";
tMonth = "born";
tDate = "yet";
return insertValues(tYear, tMonth, tDate);
}
// if user input greater then todays date then we say you not born yet
if (birthYear > tYear || (tYear == birthYear && birthMonth > tMonth) || (tYear == birthYear && tMonth == birthMonth && birthDate > tDate)) {
tYear = "Not";
tMonth = "born";
tDate = "yet";
return insertValues(tYear, tMonth, tDate);
} else if (tYear == birthYear && tMonth == birthMonth && tDate == birthDate) { //if user is born today
return window.location.assign('https://youtu.be/nl62hhiBMOM');
}
//actual calculation starts
if (tYear > birthYear) {
tYear = tYear - birthYear;
}
if (tMonth > birthMonth) {
tMonth = tMonth - birthMonth;
} else if (tMonth < birthMonth) {
tYear = tYear - 1;
}
if (tDate > birthDate) {
tDate = tDate - birthDate;
} else if (birthDate > tDate) {
tMonth = tMonth - 1;
tempDate = monthDay[tMonth - 1] - birthDate;
tDate = tempDate + today.getDate();
}else if(birthDate == tDate){
tMonth = tMonth - 1;
tDate = today.getDate();
}
insertValues(tYear, tMonth, tDate);
}
//inserting values in html
function insertValues(year, month, date) {
let Youtput = document.querySelector('span.year'),
Moutput = document.querySelector('span.month'),
Doutput = document.querySelector('span.day');
Youtput.innerHTML = year;
Moutput.innerHTML = month;
Doutput.innerHTML = date;
}
Loading

0 comments on commit 40ef78b

Please sign in to comment.