Skip to content

Commit

Permalink
Merge pull request #5 from yqni13/development
Browse files Browse the repository at this point in the history
Development_v1.2.1
  • Loading branch information
yqni13 authored Jun 12, 2024
2 parents 5bb32b5 + 1c0c029 commit 2e69cfc
Show file tree
Hide file tree
Showing 20 changed files with 915 additions and 80 deletions.
28 changes: 23 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
# yqni13 WEB_clock
$\texttt{\color{teal}{v1.0.0}}$
$\texttt{\color{teal}{v1.2.1}}$

## Screenshot clock
<div align="center">
<img alt="picture unable to display" src="assets/img/screenshot.png">
<img alt="picture unable to display" src="assets/img/screenshot_clock.png">
<img alt="picture unable to display" src="assets/img/screenshot_settings.png">
</div>

### Technology
Expand All @@ -19,19 +20,36 @@ $\texttt{\color{teal}{v1.0.0}}$

<br>

## Features

<dl>
<dd>:page_facing_up: Single Page Application</dd>
<dd>:1234: Components as Javascript ES6 modules</dd>
<dd>:wrench: Live changing settings via local storage</dd>
<dd>:new_moon_with_face:/:sun_with_face: Dark/Light mode</dd>
<dd>:art: Customizable design</dd>
</dl>

<br>

## Updates

### $\textsf{last\ update\ 1.0.0\ >>\ {\color{pink}1.2.1}}$

- $\textsf{\color{orange}Change:}$ Settings with live change added. This includes themes (background, text color, ...), border color of digital clock version and different date format.
- $\textsf{\color{orange}Change:}$ Responsive navbar added.
- $\textsf{\color{red}Bugfix:}$ Sunday is displayed correctly in date output. [Before: Only 'undefined' as result shown sundays.]

<br>

### Aimed objectives for next $\textsf{\color{green}minor}$ update:
<dl>
<dd>- enable option to change color theme of clock</dd>
<dd>- enable option to change color background theme</dd>
<dd>- option to select ger/eng</dd>
<dd>- option to select different date formats</dd>
<dd>- option to select different time formats</dd>
</dl>

<br>

### Aimed objectives for next $\textsf{\color{cyan}major}$ update:
<dl>
<dd>- different clock designs to select from</dd>
Expand Down
File renamed without changes.
File renamed without changes.
Binary file added assets/img/not_available.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed assets/img/screenshot.png
Binary file not shown.
Binary file added assets/img/screenshot_clock.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/img/screenshot_settings.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 8 additions & 0 deletions docs/update_protocol.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,3 +4,11 @@

<br>

### 2024/6/12 - $\textsf{update\ 1.1.1\ >>\ {\color{pink}1.2.1}}$

- $\textsf{\color{orange}Change:}$ Settings with live change added. This includes themes (background, text color, ...), border color of digital clock version and different date format.

### 2024/6/9 - $\textsf{update\ 1.0.0\ >>\ {\color{pink}1.1.1}}$

- $\textsf{\color{orange}Change:}$ Responsive navbar added.
- $\textsf{\color{red}Bugfix:}$ Sunday is displayed correctly in date output. [Before: Only 'undefined' as result shown sundays.]
108 changes: 93 additions & 15 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,29 +3,107 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/icon type" href="assets/img/favicon/favicon_clock.ico" />

<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inconsolata&display=swap">

<link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" type="image/icon type" href="assets/favicon/favicon_clock.ico" />
<title>CLOCK</title>
</head>
<body>
<div class="container">
<div id="clock_time">
<span id="hour">00</span>
<span class="blink-colon">:</span>
<span id="minute">00</span>
<span class="blink-colon">:</span>
<span id="second">00</span>

<nav class="nav-bar">
<ul>
<li class="enabled-item">
<a href=""><i class="icon-GitHub"></i>yqni13 WEB_clock</a>
</li>
<li class="enabled-item" id="nav-item-clock"> <!-- TODO: onclick="two functions?"-->
<a href="#"><i class="icon-Clock"></i>Clock</a>
</li>
<li class="disabled-item" id="nav-item-worldclock">
<a href="#" onmouseover="lockedTextOver(this)" onmouseout="lockedTextOut(this)">
<i class="icon-WorldClock" onmouseover="lockedImgOver(this)"
onmouseout="lockedImgOut(this, 'icon-WorldClock')"></i>
World Clock
</a>
</li>
<li class="disabled-item" id="nav-item-timer">
<a href="#" onmouseover="lockedTextOver(this)" onmouseout="lockedTextOut(this)">
<i class="icon-Timer" onmouseover="lockedImgOver(this)"
onmouseout="lockedImgOut(this, 'icon-Timer')"></i>
Timer
</a>
</li>
<li class="disabled-item" id="nav-item-specialtimer2">
<a href="#" onmouseover="lockedTextOver(this)" onmouseout="lockedTextOut(this)">
<i class="icon-SpecialTimer2" onmouseover="lockedImgOver(this)"
onmouseout="lockedImgOut(this, 'icon-SpecialTimer2')"></i>
Timer (Pomodoro)
</a>
</li>
<li class="disabled-item" id="nav-item-specialtimer1">
<a href="#" onmouseover="lockedTextOver(this)" onmouseout="lockedTextOut(this)">
<i class="icon-SpecialTimer1" onmouseover="lockedImgOver(this)"
onmouseout="lockedImgOut(this, 'icon-SpecialTimer1')"></i>
Timer (60-60-30)
</a>
</li>
<li class="enabled-item" id="nav-item-settings" onclick="navSettings()">
<a href="#">
<i class="icon-Settings"></i>
Settings
</a>
</li>
</ul>
</nav>

<div class="container" id="wrapper">
<!-- dynamic build for different designs -->
</div>

<div class="container" id="wrapper-settings">
<div class="settings-preview" id="settings-preview-wrapper">
<div id="settings-preview-img"></div>
</div>
<div id="clock_date">
<!-- placeholder date -->
<p id="clock_date_p">0</p>
<div class="settings-content">
<div class="setting-options" id="theme-option">
<label for="themes">select appearance: </label>
<select name="themes" id="themes">
<option value="darkmode">Dark Mode</option>
<option value="lightmode">Light Mode</option>
</select>
</div>
<div class="setting-options" id="date-format-option">
<label for="dateformat">select date format: </label>
<select name="dateformat" id="dateformat">
<option value="format1">mm/dd/yyyy</option>
<option value="format2">dd.mm.yyyy</option>
<option value="format3">yyyy-mm-dd</option>
<option value="format4">dd-mm-yyyy</option>
</select>
</div>
<div class="setting-options" id="clock-design-option">
<label for="clockdesign">select clock design: </label>
<select name="clockdesign" id="clockdesign">
<option value="design1">Digital #1</option>
<option value="design2">Analog #1</option>
<option value="design3">Digital #2</option>
<option value="design4">Analog #2</option>
</select>
</div>
<div class="setting-options" id="clock-design-option">
<label for="clockcolor">select clock color: </label>
<input type="color" class="small-selectors" id="colorpicker">
</div>
<div class="setting-options" id="clock-design-option">
<label for="clockpreview">set preview off/on: </label>
<label class="custom-switch">
<input type="checkbox" class="small-selectors" id="clockpreview">
<span class="custom-slider round"></span>
</label>
</div>
</div>

</div>
<script src="main.js"></script>

<script src="main.js" type="module" defer></script>
</body>
</html>
58 changes: 58 additions & 0 deletions js/clock-module.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@


export function buildClockPage(design) {
switch(design) {
case 'design1':
buildDigitalClock(design);
break;
case 'design2':
buildAnalogClock(design);
break;
case 'design3':
buildDigitalClock(design);
break;
case 'design4':
buildAnalogClock(design);
break;
default:
buildDigitalClock('design1');
}
}



function buildDigitalClock(design) {
const container = document.getElementById('wrapper');
container.style.display = 'flex';

// create
var clockWrapper = document.createElement('div');
var clockTime = document.createElement('div');
var clockDate = document.createElement('div');
var hours = document.createElement('span');
var minutes = document.createElement('span');
var seconds = document.createElement('span');
var blink = document.createElement('span');
var dateContent = document.createElement('p');

// assign
clockWrapper.className = `wrapper_clock_${design}`;
clockTime.id = `clock_time_${design}`;
hours.id = `hour_${design}`;
hours.innerHTML = '00';
minutes.id = `minute_${design}`;
minutes.innerHTML = '00';
seconds.id = `second_${design}`;
seconds.innerHTML = '00';
blink.className = 'blink-colon';
blink.innerHTML = ':';
clockDate.id = `clock_date_${design}`;
dateContent.id = `clock_date_p_${design}`;
dateContent.innerHTML = '0';

// assemble
clockDate.append(dateContent);
clockTime.append(hours, blink, minutes, blink.cloneNode(1), seconds);
clockWrapper.append(clockTime, clockDate);
container.append(clockWrapper);
}
Loading

0 comments on commit 2e69cfc

Please sign in to comment.