loseit.com-clone/birthday.html at main · Gunjan1116/loseit.com-clone · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!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>Birthday</title>
    <style>
         #navbar>img:hover{
            background-color: lightsalmon;
            cursor: pointer;
        }
         h3{
            color: #183962;
            font-size: 30px;
        }
        /* birthday page mid section */
        #mid-input{
            box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
            margin: 0px 400px;
            text-align: center;
            padding: 20px;
            background-color: gainsboro;
            border-radius: 10px;
        }
        #continue{
            margin-top: 20px;
            border: 0px solid white;
            background-color: darkorange;
            padding: 10px 65px;
            border-radius: 10px;
            color: white;
            font-size: 30px;
        }
        #continue:hover{
            background-color: lightsalmon;
            cursor: pointer;
        }
        #mid-input>div>input{
            padding: 10px 150px;
            font-size: 20px;
            color: gray;
        }
        #mid-input>div>input:hover{
            border: 2px solid darkorange;
        }
         /* footer part css */
         #footer-para{
        text-align: center;
        background-color: #183962;
        padding: 20px 0px;
        margin-top: 30px;
       }
       #footer-para p{
        color: white;
       }
    </style>
</head>
<body>
    <div id="navbar">
        <img width="15%" src="./Get Fit.jpg">
    </div>
    <div id="mid-input">
            <h3>When's your birthday?</h3>
            <div><input id="date" type="date"></div>
            <div><button id="continue">Continue</button></div>
            <p>To create your personalized weight loss plan, Get Fit! uses BMR<br/>
             (Basal Metabolic Rate) to calculate your calorie budget, which<br/>
             requires weight, height, biological gender and age as inputs.</p>
    </div>
    <div id="footer-para">
        <p>Copyright 2008-2022 FitNow, Inc, All Rights Reserved<br/>
            Privacy | Terms of Service<br/>
            Do Not Sell My Personal Information</p>
        <p>Get Fit! is among the federally registered trademarks of FitNow, Inc., and may not be
            used by third parties without explicit permission.</p>
    </div>
</body>
</html>
<script>
    let obj=JSON.parse(localStorage.getItem("details"));
    document.querySelector("#continue").addEventListener("click",birthday);
    function birthday(){
            let birthday=document.querySelector("#date").value;
            console.log(birthday);
            if(birthday==""){
                alert("Please enter your bithday");
                return;
            }
            // convert user input value into date object
            let birthDate = new Date(birthday);
            console.log(birthDate);
            // get difference from current date;
            let difference=Date.now() - birthDate.getTime();
            console.log(difference)
            let  ageDate = new Date(difference);
	        let calculatedAge=   Math.abs(ageDate.getUTCFullYear() - 1970);
            console.log(calculatedAge);
            if(calculatedAge<18){
                alert("You must be at least 18 years old to use Get Fit!")
            }else{
                obj.birthday=birthday;
                obj.age=calculatedAge;
                localStorage.setItem("details",JSON.stringify(obj));
                window.location.href="plane.html";
            }
    }
   console.log(Date.now())
   document.querySelector("#navbar").addEventListener("click",function(){
        window.location.href="index.html"
    });
</script>