From 04f494a00f51ebada2665a06e5effeb424a7fad9 Mon Sep 17 00:00:00 2001 From: Pureheart Moluno <39631660+pmoluno@users.noreply.github.com> Date: Sun, 12 Feb 2023 20:47:18 +0100 Subject: [PATCH 1/4] Calculator --- public/css/style.css | 78 ++++++++++++++++++++++++++-- public/js/script.js | 121 ++++++++++++++++++++++++++++++++++++++++++- views/home.ejs | 108 ++++++++++++++++++++++++++++++++++++-- 3 files changed, 300 insertions(+), 7 deletions(-) diff --git a/public/css/style.css b/public/css/style.css index d3dfa5a..20c7161 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -120,6 +120,29 @@ border-radius: 40px; margin-top: 33.93px; margin-bottom: 44.99px; } +.btn-style-3-update{ + font-family: 'Poppins', sans-serif; + font-style: normal; + font-weight: 600; + border: 0; + font-size: 15.6959px; + line-height: 38px; + color: #FFFFFF; + text-align: center; + padding-top: 11px !important; + padding-bottom: 11px !important; + padding-left: 18px !important; + padding-right: 18px !important; + /* background: rgba(233, 201, 42, 0.9); */ + background: linear-gradient(180deg, #b49f18f7 0%, #d4d40b 232.58%); + border-radius: 30px; +} +.btn-style-3-update:hover{ + color: #ffffff; +} +.nav-item{ + padding-top: 35.75px !important; +} .nav-link{ font-family: 'Poppins', sans-serif; font-style: normal; @@ -127,7 +150,16 @@ margin-bottom: 44.99px; font-size: 19.9792px; line-height: 30px; color: #FFFFFF; - padding-top: 35.75px; + padding-left: 50px; + padding-right: 50px; + border-radius: 30px; +} +.nav-link:hover{ + background-color: #E9C92A; + color: #000000; +} +a.nav-link:hover{ + color: #000000 !important; } .navbar-brand{ font-family: 'Inter', sans-serif; @@ -137,7 +169,6 @@ margin-bottom: 44.99px; line-height: 38px; color: #E9C92A !important; padding-top: 31.25px; - } .logo{ width: 80.27px; @@ -255,7 +286,7 @@ margin-bottom: 44.99px; #list-of-assets{ padding-top: 26.365px; padding-bottom: 26.365px; - background: linear-gradient(177deg, black, transparent); + background: linear-gradient(180deg, black, transparent); /* background: radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(255,75,24,0.62) 30%, rgba(255,65,23,1) 100%); */ } #list-of-assets p{ @@ -872,4 +903,45 @@ color: #0A142F; height: 200px; text-align: center; /* padding: 10px; */ +} + +/* CALCULATOR */ +#calculator { + padding-top: 26.365px; + padding-bottom: 26.365px; + background: linear-gradient(360deg, black, transparent); + /* background: radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(255,75,24,0.62) 30%, rgba(255,65,23,1) 100%); */ +} +#calculator h2 { + font-family: 'Poppins', sans-serif; + font-style: normal; + font-weight: 700; + font-size: 68.3241px; + line-height: 130%; + padding-top: 77.93px; +} +#calculator p { + font-family: 'Poppins', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 12.6959px; + padding: 0; + margin: 0; + color: #ffffff; + /* line-height: 30px; */ +} +.list-of-calculator-assets{ +background-color: #000000; +color: #ffffff; +margin-top: 30px; +margin-bottom: 30px; +padding-left: 15px; +padding-right: 15px; +padding-top: 20px; +padding-bottom: 20px; +border-radius: 9px; +} +.list-of-calculator-assets img{ + border-radius: 100%; + padding: 20px; } \ No newline at end of file diff --git a/public/js/script.js b/public/js/script.js index b50448e..7750a5d 100644 --- a/public/js/script.js +++ b/public/js/script.js @@ -297,4 +297,123 @@ window.onload = function () { sentinelDetails(); assetDetails(); }; - \ No newline at end of file + + +$('.owl-carousel').owlCarousel({ + loop:true, + margin:10, + nav:true, + responsive:{ + 0:{ + items:4 + }, + 600:{ + items:4 + }, + 1000:{ + items:5 + } + } +}) + + + + +const amountValue = document.querySelector(".amount"); +const durationValue = document.querySelector(".duration"); +const amount = document.querySelector(".amount-value"); +const duration = document.querySelector(".duration-value"); +const selectedCoin = document.querySelector(".selected-coin"); +const findora = document.querySelector(".findora"); +const persistence = document.querySelector(".persistence"); +const oasis = document.querySelector(".oasis"); +const harmony = document.querySelector(".harmony"); +const sentinel = document.querySelector(".sentinel"); +const assetmantle = document.querySelector(".asset-mantle"); +const velas = document.querySelector(".velas"); + +function amountvalue() { + let theValueAmount = amountValue.value; + let theValueDuration = durationValue.value; + + amount.innerHTML = theValueAmount; + duration.innerHTML = theValueDuration; +} + +function apyfindora(){ + console.log("clicked...."); + let findoraapy = document.querySelector("#findora-apy"); + let apyvalue = document.querySelector(".apy-value"); + selectedCoin.innerHTML = "FINDORA"; + apyvalue.innerHTML = findoraapy.innerHTML; + calculatereturns(); +} +function apypersistence(){ + console.log("clicked...."); + let persistenceapy = document.querySelector("#persistence-apy"); + let apyvalue = document.querySelector(".apy-value"); + selectedCoin.innerHTML = "PERSISTENCE"; + apyvalue.innerHTML = persistenceapy.innerHTML; + calculatereturns(); +} +function apyoasis(){ + console.log("clicked...."); + let oasisapy = document.querySelector("#oasis-apy"); + let apyvalue = document.querySelector(".apy-value"); + selectedCoin.innerHTML = "OASIS"; + apyvalue.innerHTML = oasisapy.innerHTML; + calculatereturns(); +} +function apyvelas(){ + console.log("clicked...."); + let velasapy = document.querySelector("#velas-apy"); + let apyvalue = document.querySelector(".apy-value"); + selectedCoin.innerHTML = "VELAS"; + apyvalue.innerHTML = velasapy.innerHTML; + calculatereturns(); +} +function apyharmony(){ + console.log("clicked...."); + let harmonyapy = document.querySelector("#harmony-apy"); + let apyvalue = document.querySelector(".apy-value"); + selectedCoin.innerHTML = "HARMONY"; + apyvalue.innerHTML = harmonyapy.innerHTML; + calculatereturns(); +} +function apysentinel(){ + console.log("clicked...."); + let sentinelapy = document.querySelector("#sentinel-apy"); + let apyvalue = document.querySelector(".apy-value"); + selectedCoin.innerHTML = "SENTINEL"; + apyvalue.innerHTML = sentinelapy.innerHTML; + calculatereturns(); +} +function apyasset(){ + console.log("clicked...."); + let assetapy = document.querySelector("#asset-apy"); + let apyvalue = document.querySelector(".apy-value"); + selectedCoin.innerHTML = "ASSET MANTLE"; + apyvalue.innerHTML = assetapy.innerHTML; + calculatereturns(); +} + +amountValue.addEventListener('input', amountvalue); +durationValue.addEventListener('input', amountvalue); +amountValue.addEventListener('input', calculatereturns); +durationValue.addEventListener('input', calculatereturns); + + +function calculatereturns(){ + let duration = document.querySelector(".duration-value"); + let mainduration = (Number(duration.innerHTML) / 12); + let mainamount = document.querySelector(".amount-value"); + let amount = mainamount.innerHTML; + let theamount =Number(amount); + let mainapyvalue = document.querySelector(".apy-value"); + let apyvalue = mainapyvalue.innerHTML; + let newapyvalue = Number(apyvalue)/100; + let returnValue = Number(amount)*(1 + (newapyvalue/12))**(12 * mainduration); + let thereturn = document.querySelector(".return-value"); + thereturn.innerHTML = Math.round(returnValue) + +} \ No newline at end of file diff --git a/views/home.ejs b/views/home.ejs index 9a43016..dd94f1c 100644 --- a/views/home.ejs +++ b/views/home.ejs @@ -43,7 +43,7 @@ Contact
  • - + STAKE NOW
    • @@ -99,7 +99,7 @@
    -
    +
    @@ -265,6 +265,69 @@
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +

    FINDORA

    +
    +
    +
    $ 5000
    +
    +
    +
    +
    6 mth(s)
    +
    + +
    +
    +

    Apy: 20.04%

    Returns: $5522

    +
    +
    + +
    + +
    +
    +
    +
    +

    Calculate your profit

    +

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa dolorem dolores + quo a obcaecati praesentium tempora omnis, quaerat nobis ab maiores, + earum nihil magnam consequuntur minima ducimus! Atque, excepturi impedit!

    +
    +
    +
    +
    +

    Security

    @@ -715,4 +778,43 @@ Overall, staking can be a way to maximize your crypto investments by earning add

    - \ No newline at end of file + + + + + + + + From 22613f62d2e0f92e416326e8f328ecadeb77fdbe Mon Sep 17 00:00:00 2001 From: Pureheart Moluno <39631660+pmoluno@users.noreply.github.com> Date: Sun, 12 Feb 2023 20:51:01 +0100 Subject: [PATCH 2/4] calc --- views/home.ejs | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/views/home.ejs b/views/home.ejs index dd94f1c..3d2bad6 100644 --- a/views/home.ejs +++ b/views/home.ejs @@ -99,7 +99,7 @@
    -
    +
    @@ -780,11 +780,6 @@ Overall, staking can be a way to maximize your crypto investments by earning add
    - - -