Skip to content

Commit

Permalink
Merge pull request #1 from mangal2003/mangal2003-patch-1
Browse files Browse the repository at this point in the history 
ADDED CALCULATOR FILES
  • Loading branch information
@mangal2003
mangal2003 authored Oct 2, 2023
2 parents 9b301d2 + aa1dffd commit 48ef115
Show file tree
Hide file tree
Showing 3 changed files with 188 additions and 148 deletions.
107 changes: 46 additions & 61 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,68 +1,53 @@
<!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>Sign Up Page</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">


<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<div class="container">

<form action="" class="form" id="form">
<div class="form-control">
<label>First Name</label>
<input type="text" id="username" placeholder="Enter First Name" autocomplete="off" required>
</div>

<div class="form-control">
<label>Last Name</label>
<input type="text" id="lastname" placeholder="Enter Last Name" autocomplete="off" required >

</div>

<div class="form-control">
<label>Email</label>
<input type="text" id="email" placeholder="[email protected]" autocomplete="off" required>

</div>

<div class="form-control">
<label>Password</label>
<input type="password" id="password" placeholder="Enter Your Password" autocomplete="off">
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error Message</small>
</div>

<div class="form-control">
<label>Confirm Password</label>
<input type="password" id="cpassword" placeholder="Confirm Password" autocomplete="off">
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error Message</small>
</div>

<button class="button signup__submit">
<span class="button__text">Sign Up</span>
</button><br>
<div class="social-media">
<a href=""><i class="fa-brands fa-square-instagram"></i></a>
<a href=""><i class="fa-brands fa-linkedin"></i></a>
<a href=""><i class="fa-brands fa-twitter"></i></a>

</div>
</form>
</div>


<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

<script src="script.js"></script>
<body data-theme="">
<div class="main">
<div class="calculator">
<div class="header">
<div class="switchBox">
<input type="checkbox" name="" id="switch" class="switch" value="switch">
<div class="box"></div>
</div>
</div>
<div class="input">
<input type="text" name="" id="display" disabled>
<input type="button" value="C" class="cancle_btn">
</div>
<div class="row">
<input type="button" value="7">
<input type="button" value="8">
<input type="button" value="9">
<input type="button" value="+">
</div>
<div class="row">
<input type="button" value="4">
<input type="button" value="5">
<input type="button" value="6">
<input type="button" value="-">
</div>
<div class="row">
<input type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<input type="button" value="*">
</div>
<div class="row">
<input style="border-radius: 0 0 0 10px;" type="button" value=".">
<input type="button" value="0">
<input type="button" value="=" style="background: #542e71;color:white;">
<input type="button" value="/" style="border-radius: 0 0 10px 0;">
</div>
</div>
</div>
<script src="script.js"></script>
</body>

</html>
36 changes: 36 additions & 0 deletions script.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
const switchbutton = document.getElementById("switch");
const display = document.getElementById("display");
const input = document.querySelectorAll("input");

let value = "";
switchbutton.addEventListener("click", () => {
if (switchbutton.checked == true) {
document.body.setAttribute("data-theme", "dark");
} else {
document.body.setAttribute("data-theme", "");
}
});

input.forEach((e) => {
e.addEventListener("click", (e) => {
if (e.target.value == "=") {
let newval = eval(value);
value = newval;
display.value = value;
} else if (e.target.value == "C") {
value = "";
display.value = value;
} else if (e.target.value == "switch") {
} else {
value += e.target.value;
display.value = value;
}

if (!e.target.classList.contains("switch")) {
e.target.classList.add("active");
setTimeout(() => {
e.target.classList.remove("active");
}, 400);
}
});
});
193 changes: 106 additions & 87 deletions style.css
View file
Original file line number Diff line number Diff line change
@@ -1,118 +1,137 @@
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Zen+Dots&display=swap");

*{
margin: 0;
padding: 0;
font-family: 'Nunito', sans-serif;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Zen Dots", cursive;
}

body{
background: rgba(182, 131, 84, 0.671);
display: flex;
align-items: center;
justify-content: center;
html {
--bg: #d1e8a8;
--sec_bg: #fff;
--color: #000;
--hover_color: #e7e7e7;
}

.container{
background-color: #fff;
border-radius: 10px;
padding: 3% auto;
margin-top: 30px;
width: 550px;
height: 600px;
body[data-theme="dark"] {
--bg: #0e0e0e;
--sec_bg: #222222;
--color: #fff;
--hover_color: #424242;
}


.form{
padding: 40px;
body {
background: var(--bg);
}

.form-control{
margin-bottom: 30px;
position: relative;
.main {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}

.form-control label{
display: inline-block;
margin-bottom: 5px;
.calculator {
width: 350px;
}

.form-control input{
width: 100%;
border: 2px solid #f0f0f0;
font-size: 14px;
border-radius: 5px;
padding: 5px;
display: block;
.header {
width: 100%;
height: 60px;
background: #1b1a17;
border-radius: 10px 10px 0 0;
display: flex;
align-items: center;
}

.switchBox {
margin-left: 20px;
width: 60px;
height: 25px;
background: #d8d8d8;
border-radius: 20px;
position: relative;
}

.switchBox input {
width: 100%;
height: 100%;
cursor: pointer;
position: absolute;
z-index: 10;
-webkit-appearance: none;
}

.form-control i {
position: absolute;
right: 12px;
top: 40px;
visibility: hidden;
.switchBox .box {
position: absolute;
top: 10%;
left: 4px;
width: 20px;
height: 80%;
background: #6d6d6d;
border-radius: 20px;
transition: all 0.4s;
}

.form-control.error small{
visibility: visible;
.switchBox input:checked ~ .box {
left: 60%;
background: #ff8303;
}

.form-control small{
color: #df3434;
position: absolute;
left: 0;
visibility: hidden;
.input {
width: 100%;
height: 60px;
background: #fff;
}

.form-control.success i.fa-check-circle{
color: #39df7e;
visibility: visible;
input {
cursor: pointer;
}

.form-control.error i.fa-exclamation-circle{
color: #df3434;
visibility: visible;
.input #display {
width: 74%;
height: 60px;
border: none;
outline: none;
font-size: 1.5rem;
padding-left: 10px;
}
.signup__submit {
background: #fff;
font-size: 14px;
margin-top: 20px;
padding: 16px 20px;
border-radius: 30px;
border: 1px solid #D4D3E8;
text-transform: uppercase;
font-weight: 700;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
color: chocolate;
cursor: pointer;
transition: .2s;

.cancle_btn {
width: 24%;
height: 60px;
border: none;
background: #ff8303;
font-size: 1.5rem;
color: white;
}
.signup__submit:hover{
background: rgb(81, 33, 100);
color: #fff;

.row {
width: 100%;
margin: 10px 0;
}
.social-media{
display: flex;
justify-content: center;
align-items: center;

.row input {
width: 23.6%;
height: 60px;
background: var(--sec_bg);
color: var(--color);
border: 1px solid rgba(0, 0, 0, 0.137);
font-size: 1.5rem;
}
a{
display: flex;
height: 20px;
width: 30px;
margin: 0 12px;
align-items: center;
justify-content: center;

.active {
animation: animation 0.4s;
}
a i{
font-size: 20px;
color: rgb(46, 5, 158);

@keyframes animation {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
background: var(--hover_color);
}
}
a:hover i{
color: black;
}

0 comments on commit 48ef115

Please sign in to comment.