diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..f1289cf --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5500 +} \ No newline at end of file diff --git a/Clock_XD/AM_svg.svg b/Clock_XD/AM_svg.svg new file mode 100644 index 0000000..6a2a699 --- /dev/null +++ b/Clock_XD/AM_svg.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Clock_XD/clock_logo.png b/Clock_XD/clock_logo.png new file mode 100644 index 0000000..be95c67 Binary files /dev/null and b/Clock_XD/clock_logo.png differ diff --git a/Clock_XD/goodnight_image.svg b/Clock_XD/goodnight_image.svg new file mode 100644 index 0000000..0c9d415 --- /dev/null +++ b/Clock_XD/goodnight_image.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Clock_XD/lunch_image.svg b/Clock_XD/lunch_image.svg new file mode 100644 index 0000000..114e737 --- /dev/null +++ b/Clock_XD/lunch_image.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Clock_XD/lunch_time.svg b/Clock_XD/lunch_time.svg new file mode 100644 index 0000000..03ecbc9 --- /dev/null +++ b/Clock_XD/lunch_time.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Clock_XD/nap_time.svg b/Clock_XD/nap_time.svg new file mode 100644 index 0000000..4f1f1c3 --- /dev/null +++ b/Clock_XD/nap_time.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Clock_XD/timeline.svg b/Clock_XD/timeline.svg new file mode 100644 index 0000000..5207a46 --- /dev/null +++ b/Clock_XD/timeline.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Clock_XD/wake_up.svg b/Clock_XD/wake_up.svg new file mode 100644 index 0000000..3708568 --- /dev/null +++ b/Clock_XD/wake_up.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Clock_XD/wakeup_image.svg b/Clock_XD/wakeup_image.svg new file mode 100644 index 0000000..2cd8131 --- /dev/null +++ b/Clock_XD/wakeup_image.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/clock.js b/clock.js new file mode 100644 index 0000000..bf08882 --- /dev/null +++ b/clock.js @@ -0,0 +1,80 @@ +function clock(){ // function for clock time!! +var hours = document.getElementById('hour'); +var mins = document.getElementById('min'); +var secs = document.getElementById('sec'); +var am =document.getElementById('ampm'); +var wish =document.getElementById('gdwish'); + +var time = new Date(); // getting Time + +var a =time.getHours()%12||12; +var b =time.getMinutes(); +var c =time.getSeconds(); +var d =time.getHours(); +if(a<10)a = "0"+a; +if(b<10)b = "0"+b; +if(c<10)c = "0"+c; +if (time.getHours()<12) { + am="AM"}else{am="PM" +} +if(d>5&&d<12){ + wish ="GOOD MORNING!!" +}else if(d>=12&&d<14){ + wish ="GOOD AFTERNOON!!" +}else if(d>=14&&d<20){ + wish="GOOD EVENING!!" +} +else if(d>=20&&d<23){ + wish ="GOOD NIGHT!!" +}else{wish="NIGHT OWL!!"} + hours.innerHTML=a; + mins.innerHTML=b; + secs.innerHTML=c; + ampm.innerHTML=am; + gdwish.innerHTML=wish; +}setInterval(clock,1000); + +//setting time dynamicaly +function makediv(){ + const newDiv = document.createElement("div"); + newDiv.setAttribute("id","dyna-blk"); + const sel1 =document.getElementById("wake"); + const val1 =sel1.options[sel1.selectedIndex].text; + //x.options[index].text//index=x.selectedIndex; + + const sel2 = document.getElementById("lunch"); + const val2=sel2.options[sel2.selectedIndex].text; + + const sel3 = document.getElementById("nap"); + const val3=sel3.options[sel3.selectedIndex].text; + newDiv.innerText="Set Wake-up Time: "+val1+"\n"+"Set Lunch Time: "+val2+"\n"+"Set Nap Time: "+val3; + + const existDiv = document.getElementById("left-kd"); + existDiv.appendChild(newDiv); + + //using jquery to disable the button + $(".left-tb3").attr("disabled", true); +} +//setwake up time;; to img and hiii + +function setTime(){ + var hour1 = new Date().getHours(); + var i = document.getElementById("wake").value; + if(i==hour1){ + document.getElementById("right-tb-img").style.backgroundImage="url(./CLock_XD/wakeup_image.svg)"; + document.getElementById("right-tb-text").innerHTML="WAKE-UP!!" + } + + var j = document.getElementById("lunch").value; + if(j==hour1){ + document.getElementById("right-tb-img").style.backgroundImage="url(./CLock_XD/lunch_image.svg)"; + document.getElementById("right-tb-text").innerHTML="LET'S HAVE SOME LUNCH !!" + } + + var k = document.getElementById("nap").value; + if(k==hour1){ + document.getElementById("right-tb-img").style.backgroundImage="url(./CLock_XD/goodnight_image.svg)"; + document.getElementById("right-tb-text").innerHTML="GOOD NIGHT !!" + } + makediv(); //function for calling dynamic div +} \ No newline at end of file diff --git a/index.css b/index.css new file mode 100644 index 0000000..83267b3 --- /dev/null +++ b/index.css @@ -0,0 +1,196 @@ +body{ +background: #3D087B; +font-family: 'Baumans', cursive; +} +.top{ + display: flex; + flex-direction: row; + height: 130px; + width: 100%; +} +.logo{ + margin: 59px 0px 0px 124px; +} +.time{ + color: #3D087B; + background: white; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + font-style: bold; + font-size: 20px; + height: 130px; + width: 540px; + margin: 42px 120px 0px 400px; + border-radius: 10px; + padding: 0px 0px 0px 20px; + display: flex; + flex-direction: row; + } + /* clock time display */ +.tim{ + padding-top: 20px; + font-size: 20px; + display: flex; + flex-direction: row; + justify-content: space-around; +} +.tim>div{ + height: 90px; + width: 82px; + background: #F6E2FF; + border-radius: 5px; + padding-left: 20px; +} +.tim span{ + margin-top: 20px; + padding: 5px; +} +#hour,#min,#sec{ + font-size: 45px; +} +#ampm{ + height: 50px; + width: 42px; + margin-left: 5px; + padding: 20px; + font-size: 40px; + font-weight: 200; + color: white; + background: url(./Clock_XD/AM_svg.svg); +} +.shade{ + position: absolute; + border-radius: 10px; +} +.sh1{ + top: 63px; + right: 170px; + height: 130px; + width: 420px; + z-index: -1; + background: #EDEDED; +} +.sh2{ + top: 75px; + right: 210px; + height: 130px; + width: 350px; + z-index: -2; + background: #996fa7; +} +.group{ + width: 100%; + display: flex; + flex-direction: row; + justify-content: space-evenly; +} +.left-tb{ + margin:25px 0px 0px 70px; + height: 400px; + width: 45%; + margin-top: 90px; + display: flex; + flex-direction: column; + justify-content: space-evenly; +} +.left-tb1{ + margin-top:80px; + padding: 20px 0px; + border-radius: 10px; + background:#FFFFFF; + height: 290px; + width: 95%; + display: flex; + flex-direction: row; + justify-content: space-around; +} +.left-tb-img{ + height: 90%; + width: 30px; + display: flex; + flex-direction: column; + justify-content: space-between; + color: #FFFFFF; + border-left: 2px solid #c2c2c2; + margin: 10px 0px 0px 20px; +} +.left-tb-img>img{ + height: 50px; + position: relative; + left: -17px; + background: #FFFFFF; +} +.left-tb-sel{ + display: flex; + flex-direction: column; + justify-content: space-between; + font-size: 20px; + font-family: manrope,sans-serif; + color: #3D087B; +} +.spacebar1{margin-right: 15px;} +.spacebar2{margin-right: 40px;} +.spacebar3{margin-right: 55px;} +.left-tb2{ + height: 80px; + width: 551px; + margin: 10px 0px; + border-radius: 5px; + color: #FFFFFF; + background: #6E54EC; + font-size: 27px; + padding: 20px 0px 20px 20px; +} +.left-tb3{ + height: 50px; + width: 300px; + text-align: center; + background-image: linear-gradient(to left,#6E54EC,#CB52F8,#FC5EFF,#F1A7C5); + border-radius: 5px; + border: transparent; + color: #FFFFFF; + font-size: 25px; + font-weight: 200; + font-family: 'Manrope', sans-serif; +} +.left-tb3:hover{ + background-image: linear-gradient(to right,#6E54EC,#CB52F8,#FC5EFF,#F1A7C5); +} +#right-tb{ + color: #8E53F0; + font-size: 2rem; + padding: 1rem; + background: white; + margin: 80px 40px 0px -80px; + height: 440px; + width: 457px; + border-radius: 10px; +} +#right-tb-img{ + height: 474px; + width: 536px; + position: absolute; + right: 120px; + top: 216px; + background-image: url(./Clock_XD/lunch_image.svg); + background-repeat: no-repeat; +} +select{ + background: #DDF5FF; + border-radius: 4px; + border: transparent; + width: 280px; + height: 25px; + padding: 0px 30px; +} + +#dyna-blk{ + width: 300px; + background: #CB52F8; + color: white; + font-size: 20px; + margin: 10px 0px 10px 0px; + padding: 10px 0px; + border-radius: 10px; + text-align: center; + +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..c4de512 --- /dev/null +++ b/index.html @@ -0,0 +1,131 @@ + + + + + + + + + + + + Clock_XD + + +
+
+
+ Time

  hours

:


  mins

:


  secs
 +
+
+
+ +
+
+
+
+ + + +
+
+

Set wake up time + +

+

Set lunch time + +

+

Set nap time + +

+
+
+
HELLO, WELCOME!!
+ +
+
+
let's have some lunch !!
+
+
+
+ + + \ No newline at end of file