Snippets / javascript
Get Client Public IP Adress
javascriptJavaScript-based tool to easily retrieve and display the client's public IP address in real-time.
const getip = async ()=>{
try{
const response = await fetch('https://www.cloudflare.com/cdn-cgi/trace')
const data = await response.text()
const ipMatched = data.match(/[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}/)
if(ipMatched){
console.log(ipMatched[0]);
}
}catch(err){
console.log('err ip');
}
}
getip()Sep 17, 2024
Show code
Calulator Using Js
javascriptInteractive calculator built with HTML, CSS, and JavaScript, providing basic arithmetic functions with a clean, user-friendly interface.
script.js
let result = ""
const btns = document.querySelectorAll(".c-btn")
const backSpace = document.getElementById("oneclear")
const calDisplay = document.querySelector("input")
calDisplay.disabled = true
const toast = (message) => {
Toastify({
text: message,
duration: 1500,
gravity: "bottom",
position: "center"
}).showToast();
}
backSpace.addEventListener("click", () => {
if (result == "") {
toast("Nothing to delete. Press AC")
} else {
deleteone = calDisplay.value.toString().slice(0, -1)
result = deleteone
calDisplay.value = result
}
})
btns.forEach((btn) => {
btn.addEventListener("click", (e) => {
if (e.target.innerHTML == "=") {
result = eval(result)
calDisplay.value = result
result = ""
}
else if (e.target.innerHTML == "AC") {
result = ""
calDisplay.value = result
toast("All cleared")
}
else {
result = result + e.target.innerHTML
calDisplay.value = result
}
})
})
index.html
<!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">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
<title>Calculator</title>
</head>
<body>
<main>
<section class="cal-sec">
<div class="cal-con">
<div class="cal-box">
<div class="cal-left-side">
<h1>Calculator</h1>
<div class="cal-display">
<input class="display" type="text" placeholder="0">
</div>
</div>
<div class="cal-right-side">
<ul>
<li class="c-btn" id="ac">AC</li>
<li id="oneclear">
<lord-icon src="https://cdn.lordicon.com/zxvuvcnc.json" trigger="hover"
colors="primary:#ffffff" target="#oneclear">
</lord-icon>
</li>
<li class="c-btn" id="modulus">%</li>
<li class="c-btn arthm" id="division">/</li>
</ul>
<ul>
<li class="c-btn">7</li>
<li class="c-btn">8</li>
<li class="c-btn">9</li>
<li class="c-btn arthm">*</li>
</ul>
<ul>
<li class="c-btn">4</li>
<li class="c-btn">5</li>
<li class="c-btn">6</li>
<li class="c-btn arthm">-</li>
</ul>
<ul>
<li class="c-btn">1</li>
<li class="c-btn">2</li>
<li class="c-btn">3</li>
<li class="c-btn arthm">+</li>
</ul>
<ul>
<li class="c-btn" id="zero">0</li>
<li class="c-btn">.</li>
<li class="c-btn enter">=</li>
</ul>
</div>
</div>
</div>
</section>
</main>
<script src="script.js"></script>
<script src="https://cdn.lordicon.com/lordicon.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
</body>
</html>
style.css
@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;
list-style-type: none;
font-family: "Poppins", sans-serif;
}
body {
background-color: rgb(8, 8, 8);
}
.cal-box {
width: fit-content;
height: 355px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 20px;
overflow: hidden;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0px 10px 18px black;
transition: .8s;
}
.cal-display {
width: 350px;
display: flex;
justify-content: center;
align-items: center;
background-color: #202020;
}
h1 {
margin-top: 40px;
position: absolute;
top: -30px;
left: 20px;
color: white;
font-size: 20px;
font-weight: 600;
}
.cal-display input {
max-width: 270px;
height: 355px;
box-sizing: border-box;
outline: none;
border: none;
text-align: end;
background-color: transparent;
font-size: 38px;
color: white;
user-select: none;
}
.cal-right-side {
width: 285px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
gap: 10px;
background-color: #0e0e0e;
box-shadow: -5px 0px 10px #0000005c;
}
.cal-right-side ul {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}
.cal-right-side ul li {
border: 1px solid #0000008e;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
font-weight: 600;
font-size: 20px;
border-radius: 50%;
background-color: #ffffff0c;
color: white;
box-shadow: inset 0px 0px 10px #000000d9;
cursor: pointer;
user-select: none;
}
.cal-right-side ul li:active {
box-shadow: inset 0px 0px 25px #000000;
}
#zero {
width: 110px;
border-radius: 50px;
background-color: #0077ff;
}
#ac {
background-color: #ffffff2e !important;
}
.arthm {
background-color: #ff7700 !important;
box-shadow: inset 0px 0px 10px #ff1100ec !important;
}
.arthm:active {
outline: 2px solid white;
}
.enter {
background-color: #ffffff2e !important;
}
@media screen and (max-width: 670px) {
.cal-box {
flex-direction: column;
width: fit-content;
height: 554px;
}
.cal-right-side {
width: 100%;
}
.cal-display input {
max-width: 270px;
height: 228px;
}
}Sep 17, 2024
Show code