From a5e05820f95bc11006295bc4bf7da0038dd6c2ba Mon Sep 17 00:00:00 2001 From: Vinay Kumar Srivastava Date: Thu, 10 Dec 2020 21:22:48 +0530 Subject: [PATCH 1/4] Added Settings panel Currently,with Settings Panel, we can change the time format and username. --- index.html | 54 ++++++++++++++------ src/clock.js | 35 ++++++++++++- stylesheets/index.css | 113 ++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 185 insertions(+), 17 deletions(-) diff --git a/index.html b/index.html index f72cb44..bc493f7 100644 --- a/index.html +++ b/index.html @@ -8,26 +8,48 @@ New Tab -
+
+
-

-
- + + diff --git a/src/font_list.js b/src/font_list.js new file mode 100644 index 0000000..b584ee7 --- /dev/null +++ b/src/font_list.js @@ -0,0 +1,40 @@ +var values = []; + +fetch('./fonts/font_list.json') + .then(res => res.json()) + .then((out) => { + for(i=0;i<1023;i++) + { + values.push(out.items[i].family); + } + }) + .catch(err => { throw err }); + +var select = document.getElementById('fonts'); + +document.getElementById('fonts').onclick = function() { + + for (const val of values) { + var option = document.createElement("option"); + option.value = val; + option.text = val.charAt(0).toUpperCase() + val.slice(1); + select.appendChild(option); + } + + if(select.selectedIndex != 0) + var fontFamily = select.options[select.selectedIndex].value; + + document.querySelector('#quote').style.font = fontFamily; + + var link = document.createElement('link'); + link.rel = 'preconnect'; + link.href = 'https://fonts.gstatic.com'; + document.head.appendChild(link); + + var familylink = document.createElement('link'); + familylink.rel = 'stylesheet'; + familylink.href = "https://fonts.googleapis.com/css2?family="+fontFamily+"&display=swap"; + document.head.appendChild(familylink); + + document.getElementsByTagName('h1')[0].style.fontFamily = fontFamily; +} \ No newline at end of file From a2937d04a21032a4f78780dc7835fdfe087533ce Mon Sep 17 00:00:00 2001 From: Vinay Kumar Srivastava Date: Sat, 12 Dec 2020 10:38:53 +0530 Subject: [PATCH 3/4] Made Font list fully functional Currently, all the 4 features of Settings panel are working. However, there is some glitch with its appearance. --- index.html | 7 ++++++- src/bg-color.js | 4 ++++ src/clock.js | 6 ++++-- src/font_list.js | 2 +- src/index.js | 5 ++++- stylesheets/index.css | 25 ++++++++++++++++++------- 6 files changed, 37 insertions(+), 12 deletions(-) create mode 100644 src/bg-color.js diff --git a/index.html b/index.html index dbb862f..6249fe3 100644 --- a/index.html +++ b/index.html @@ -13,7 +13,11 @@
  • Settings
    • Change Username
    • -
    • Background Color
    • +
    • Background Color +
        +
      • +
      +
    • - +
    @@ -59,10 +59,11 @@

  • + - + diff --git a/src/bg-color.js b/src/bg-color.js index d523cf7..5fade31 100644 --- a/src/bg-color.js +++ b/src/bg-color.js @@ -1,4 +1,5 @@ function color_change(){ let bgcolor = document.getElementById('favcolor').value; document.getElementsByTagName('body')[0].style.backgroundColor = bgcolor; + return bgcolor; } \ No newline at end of file diff --git a/src/clock.js b/src/clock.js index 8807d18..3ed5a98 100644 --- a/src/clock.js +++ b/src/clock.js @@ -88,16 +88,18 @@ function clock() { } var format = document.getElementById('third-level-menu'); - format.addEventListener('change', time_format, false); + format.addEventListener('change', timeChange, false); + +function timeChange(){ + num = format.options[format.selectedIndex].value; + setCookie("time",num,365); +} function time_format(){ var today = new Date(); var hours = today.getHours(); - - if(format.selectedIndex == 0) - num=12; - else {num = format.options[format.selectedIndex].value;} - + + num = getCookie("time"); if(num==24) { var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds(); diff --git a/src/cookies.js b/src/cookies.js new file mode 100644 index 0000000..7a455dd --- /dev/null +++ b/src/cookies.js @@ -0,0 +1,38 @@ +function setCookie(cname,cvalue,exdays) { + var d = new Date(); + d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000)); + var expires = "expires="+d.toUTCString(); + + document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/"; + } + + function getCookie(cname) { + var name = cname+"="; + var ca = document.cookie.split(';'); + + for(i=0;i { throw err }); var select = document.getElementById('fonts'); - -select.onclick = function() { + +function updateFont(){ for (const val of values) { var option = document.createElement("option"); option.value = val; option.text = val.charAt(0).toUpperCase() + val.slice(1); - select.appendChild(option); + if(select.childElementCount < 1024) + select.appendChild(option); } - if(select.selectedIndex != 0) - var fontFamily = select.options[select.selectedIndex].value; - - document.querySelector('#quote').style.font = fontFamily; + fontFamily = select.options[select.selectedIndex].value; + fontlink(fontFamily); +} +function fontlink(fontFamily){ var link = document.createElement('link'); link.rel = 'preconnect'; link.href = 'https://fonts.gstatic.com'; @@ -37,4 +38,7 @@ select.onclick = function() { document.head.appendChild(familylink); document.getElementsByTagName('h1')[0].style.fontFamily = fontFamily; -} \ No newline at end of file + setCookie("font",fontFamily,365); +} + +select.addEventListener('click',updateFont,false); \ No newline at end of file diff --git a/src/greet.js b/src/greet.js index a5006ec..fc7f177 100644 --- a/src/greet.js +++ b/src/greet.js @@ -11,7 +11,7 @@ function greet() { if (document.cookie.length == 0) { window.open("user.html", "_parent", "", ""); } else { - const name = document.cookie.split("=")[1]; + var name = getCookie("username"); const myDate = new Date(); const hrs = myDate.getHours(); let message; diff --git a/src/index.js b/src/index.js index bf60241..496985b 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,8 @@ window.onload = greet(); +getCookie("color"); +getCookie("font"); clock(); document.getElementById('favcolor').oninput = function(){ - color_change(); + setCookie("color",color_change(),365); + getCookie("color"); } \ No newline at end of file diff --git a/src/user.js b/src/user.js new file mode 100644 index 0000000..3bf3f56 --- /dev/null +++ b/src/user.js @@ -0,0 +1,3 @@ +getCookie("color"); +getCookie("font"); +getCookie("color"); diff --git a/stylesheets/index.css b/stylesheets/index.css index c7b4599..d3271ef 100644 --- a/stylesheets/index.css +++ b/stylesheets/index.css @@ -127,7 +127,7 @@ font-size:16px; position: absolute; top: 30px; left: 0; - width: 220px; + width: 280px; list-style: none; padding: 0; margin: 10px 0px; @@ -150,7 +150,7 @@ font-size:16px; } .bgcolor, #third-level-menu{ - width: 220px; + width: 280px; height: 40px; font-size: large; border: 0px; @@ -160,7 +160,7 @@ font-size:16px; top: 0; right: -150px; list-style: none; - padding: 0.45rem 2.7rem; + padding: 0.45rem 4.4rem; margin: 0; cursor: pointer; } diff --git a/user.html b/user.html index 6d6f574..6e90d11 100644 --- a/user.html +++ b/user.html @@ -9,11 +9,15 @@ -

    What's your name?

    +

    What's your name?


    + + + +