Skip to content

Commit

Permalink
Updated the whole homepage as per the demand
Browse files Browse the repository at this point in the history
  • Loading branch information
Abhay Keshari committed Mar 29, 2024
1 parent f62737b commit 9243af5
Show file tree
Hide file tree
Showing 3 changed files with 304 additions and 80 deletions.
19 changes: 7 additions & 12 deletions Unit Converter/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,10 @@
<a href="HTML/currency.html" class="link">Currency</a>
<a href="HTML/temperature.html" class="link">Temperature</a>
</div>
<span><i class="fa-solid fa-moon fa-2x"></i></span>
<span class="fontawesome">
<!-- <i class="fa-solid fa-moon fa-2x"></i> -->
<i class="fa-solid fa-bars fa-2x"></i>
</span>
</div>
<div class="main-content">
<div id="online">
Expand All @@ -32,15 +35,12 @@ <h1>Online conversion of physical units</h1>
<h2>Hi, What do you want to convert !</h2>
</div>

<div class="info">
<!-- <i class="fa-solid fa-3x fa-circle-chevron-left"></i> -->
<div class="container">
<div id="length" class="inside">
<div class="layer"></div>
<div class="converterInfo">
<h3><a href="HTML/length.html">Length Converter</a></h3>
<p>A length converter converts measurements from one unit of length to another. It allows you to easily convert measurements such as inches to centimeters, feet to meters, or miles to kilometers, among others. It simplifies calculations and helps in comparing measurements across different units.</p>
<!-- <button class="btn">Read more</button> -->
</div>
</div>

Expand All @@ -49,7 +49,6 @@ <h3><a href="HTML/length.html">Length Converter</a></h3>
<div class="converterInfo">
<h3><a href="HTML/weight.html">Weight Converter</a></h3>
<p>A weight converter is a tool used to convert measurements of weight or mass from one unit to another. It simplifies tasks such as converting kilograms to pounds, grams to ounces, or metric tons to short tons.</p>
<!-- <button class="btn">Read more</button> -->
</div>
</div>

Expand All @@ -58,7 +57,6 @@ <h3><a href="HTML/weight.html">Weight Converter</a></h3>
<div class="converterInfo">
<h3><a href="HTML/volume.html">Volume Converter</a></h3>
<p>A litre converter is a tool designed to convert volume measurements between litres and other units such as millilitres, cubic meters, and cubic centimeters. It simplifies tasks by allowing users to input a volume in litres and instantly obtain the equivalent measurement in their desired unit, or vice versa.</p>
<!-- <button class="btn">Read more</button> -->
</div>
</div>

Expand All @@ -68,7 +66,6 @@ <h3><a href="HTML/volume.html">Volume Converter</a></h3>
<h3><a href="HTML/currency.html">Currency Converter</a></h3>
<p>
A currency converter is a tool or application used to convert the value of one currency into another currency based on the current exchange rates. It allows users to quickly assess the equivalent value of a certain amount of money in different currencies.</p>
<!-- <button class="btn">Read more</button> -->
</div>
</div>

Expand All @@ -78,18 +75,16 @@ <h3><a href="HTML/currency.html">Currency Converter</a></h3>
<h3><a href="HTML/temperature.html">Temperature Converter</a></h3>
<p>
A temperature converter is a tool used to convert temperatures between different units of measurement, such as Celsius, Fahrenheit, and Kelvin. It allows users to easily convert temperatures from one scale to another, facilitating tasks like converting Celsius to Fahrenheit or vice versa.</p>
<!-- <button class="btn">Read more</button> -->
</div>
</div>
</div>
<!-- <i class="fa-solid fa-3x fa-circle-chevron-right"></i> -->
</div>

</div>

<div class="preFooter">
<p>OP Code</p>
<p>HTML</p>
<p id="javaScript">JavaScript</p>
<p>JavaScript</p>
<p>CSS</p>
</div>

Expand All @@ -100,7 +95,7 @@ <h1>Do so much more</h1>
</footer>

<script src="https://kit.fontawesome.com/df53f4a996.js" crossorigin="anonymous"></script>
<script src="script.js"></script>
<!-- <script src="script.js"></script> -->
</body>

</html>
79 changes: 75 additions & 4 deletions Unit Converter/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,13 @@

let unit = document.querySelector(".unit");
let links = document.getElementsByClassName("link");
let hamLinks = document.getElementsByClassName("hamlink");
let moon = document.querySelector(".fa-moon");
let navBar = document.querySelector(".navbar");
let footer = document.querySelector("footer");
let mainContent = document.querySelector(".main-content");
let bars = document.querySelector(".fa-bars");
let hamBurger = document.getElementById("hamburger");
console.log(links[0]);

function hoverInWhiteMode() {
Expand All @@ -13,12 +17,14 @@ function hoverInWhiteMode() {
for (let i = 1; i < links.length; i++) {
links[i].addEventListener("mouseenter", (e) => {
links[0].style.backgroundColor = "#E5DBCC";
links[0].style.color = "black";
e.target.style.backgroundColor = "gray";
});

links[i].addEventListener("mouseleave", (e) => {
links[0].style.backgroundColor = "gray";
e.target.style.backgroundColor = "#E5DBCC";
e.target.style.color = "black";
});
}
}
Expand Down Expand Up @@ -46,6 +52,7 @@ function hoverInDarkMode() {
hoverInWhiteMode();

let click = 1;

moon.addEventListener("click", (e) => {
console.log("Abhay");

Expand All @@ -55,21 +62,85 @@ moon.addEventListener("click", (e) => {
unit.style.color = "#ffffff";
for (let i = 0; i < links.length; i++) {
links[i].style.color = "#ffffff";
links[i].style.backgroundColor = "black";
}
hoverInDarkMode();
mainContent.style.backgroundColor = "#798d7a";
moon.style.color = "#ffffff";
bars.style.color = "#ffffff";
footer.style.color = "#ffffff";
footer.style.backgroundColor = "black";
} else {
click = 1;
navBar.style.backgroundColor = "#E5DBCC";
unit.style.color = "black";
hoverInWhiteMode();
for (let i = 0; i < links.length; i++) {
links[i].style.backgroundColor = "#E5DBCC";
links[i].style.color = "black";
}
hoverInWhiteMode();
navBar.style.backgroundColor = "#E5DBCC";
unit.style.color = "black";
moon.style.color = "black";
bars.style.color = "black";
mainContent.style.backgroundColor = "#867285";
footer.style.color = "gray";
footer.style.backgroundColor = "#ffffff";
click = 1;
}
});

bars.addEventListener("click", (e) => {
// console.log("Abhay");
if (click === 1) {
bars.classList.remove("fa-bars");
bars.classList.add("fa-xmark");
bars.classList.add("fa-2.5x");
bars.style.marginRight = "10px";
// hamBurger.style.display = "block"
hamBurger.style.height = "50vh";
for(let i = 0; i < hamLinks.length; i++)
{
hamLinks[i].style.display = "block";
hamLinks[i].style.height = "50vh";
hamLinks[i].style.transition = "height 10s ease-in-out";
hamLinks[i].style.display = "flex";
hamLinks[i].style.justifyContent = "center";
hamLinks[i].style.alignItems = "center";
hamLinks[i].style.color = "black";
hamLinks[i].style.textDecoration = "none";
hamLinks[i].style.fontWeight = "500";
}

hamLinks[0].style.opacity = "1";
hamLinks[0].style.transition = "opacity 0.08333s easeInOut";

hamLinks[1].style.opacity = "1";
hamLinks[1].style.transition = "opacity 0.16666s easeInOut";

hamLinks[2].style.opacity = "1";
hamLinks[2].style.transition = "opacity 0.25s easeInOut";

hamLinks[3].style.opacity = "1";
hamLinks[3].style.transition = "opacity 0.33333s easeInOut";

hamLinks[4].style.opacity = "1";
hamLinks[4].style.transition = "opacity 0.41666s easeInOut";

hamLinks[5].style.opacity = "1";
hamLinks[5].style.transition = "opacity 0.5s easeInOut";
click = 0;
} else {
bars.classList.remove("fa-xmark");
bars.classList.add("fa-bars");
bars.style.zIndex = 10;
hamBurger.style.height = 0;
for(let i = 0; i < hamLinks.length; i++)
{
hamLinks[i].style.display = "none";
hamLinks[i].style.height = "0vh";
hamLinks[i].style.transition = "height 0.5s easeInOut";
}

hamLinks[0].style.opacity = "0";
hamLinks[0].style.transition = "opacity 0.08333s easeInOut";
click = 1;
}
});
Loading

0 comments on commit 9243af5

Please sign in to comment.