Skip to content

BerlinClock & Langton's Ant #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

BerlinClock & Langton's Ant #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
857c7e3
BLehner Katas Commit
Mar 1, 2023
41ba4a8
BLehner Katas Commit
Mar 1, 2023
0abbb66
Merge branch 'main' of https://github.com/blehner78/CodingDojo into main
Mar 1, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions katas/BerlinClock/solutions/blehner78/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
# Berlin Clock draft
One try of solving the Berlin Clock with some HTML/CSS/Javascript. I have
decided to keep it as simple as possible by getting the current time
through the window object.

## Dependencies
jquery

## Demo
index.html

## Features
Hide the info box by uncommenting the display: none line within the
css/styles.css file

## Author
Bernhard Lehner
152 changes: 152 additions & 0 deletions katas/BerlinClock/solutions/blehner78/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,152 @@
/**
* Styles for the Berlin Clock
**/

body {
font-family: Arial, sans-serif;
}
h1 {
font-size: 40px;
font-weight: bold;
margin: 0;
padding: 20px 0 12px 0;
color: #333;
}
p {
margin: 0;
padding: 0;
color: #333;
}

.content {
display:flex;
vertical-align: middle;
height: 100%;
}

/**
* CLOCK
**/
.clock {
width: 320px;
height: auto;
margin: auto;
position: relative;
background: #ffffff;
}
.seconds_row {
display: block;
width: 80px;
height: 80px;
background-color: #fff;
margin: auto;
border-radius: 50%;
border: 16px solid #ddd;
margin-bottom: 12px;
}
#second {
position: relative;
width: 80px;
height: 80px;
background-color: yellow;
border-radius: 50%;
}
.five_hours_row, .one_hour_row, .five_minutes_row, .one_minute_row {
display: block;
position: relative;
width: 100%;
min-height: 60px;
border-radius: 12px;
padding: 18px 0px 6px 6px;
background-color: #ddd;
margin-bottom: 12px;
overflow: hidden;
text-align: center;
}
.col {
display: inline-block;
background-color: #fff;
margin-right: 6px;
width: 20%;
height: 48px;
border-radius: 6px;
}
.col11 {
display: inline-block;
background-color: #fff;
margin-right: 6px;
width: 5%;
height: 48px;
border-radius: 6px;
}
.hb4 {
display: block;
width: auto;
height: 48px;
background-color: red;
border-radius: 6px;
}
.mb4 {
display: block;
width: auto;
height: 48px;
background-color: yellow;
border-radius: 6px;
}
.mb11 {
display: block;
width: auto;
height: 48px;
background-color: yellow;
border-radius: 6px;
}
.mb11.red {
background-color: red;
}



/**
* INFOBLOCK
* Add display none to the class infoblock to hide it
**/

.infoblock {
width: 280px;
margin:auto;
position: absolute;
background-color: #efefef;
right:20px;
bottom:20px;
border-radius: 12px;
overflow: hidden;
color: #888;
/*display:none;*/
}
#row0 {
position: relative;
padding: 6px 12px 8px;
background-color: #ddd;
}
#row1 {
position: relative;
padding: 6px 12px 8px;
}
#row2 {
position: relative;
padding: 6px 12px 8px;
background-color: #ddd;
}
#row3 {
position: relative;
padding: 6px 12px 8px;
}
#row4 {
position: relative;
padding: 6px 12px 8px;
background-color: #ddd;
}
#row5 {
position: relative;
padding: 6px 12px 8px;
}
67 changes: 67 additions & 0 deletions katas/BerlinClock/solutions/blehner78/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Berlin Clock</title>
<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/style.css" />
<script src="js/clock.js" type="text/javascript"></script>
</head>

<body>
<div class="content">
<div class="clock">
<div class="seconds_row">
<div id="second"></div>
</div>
<div class="five_hours_row">
<span class="col"><div id="hour05" class="hb4"></div></span>
<span class="col"><div id="hour10" class="hb4"></div></span>
<span class="col"><div id="hour15" class="hb4"></div></span>
<span class="col"><div id="hour20" class="hb4"></div></span>
</div>
<div class="one_hour_row">
<span class="col"><div id="hour01" class="hb4"></div></span>
<span class="col"><div id="hour02" class="hb4"></div></span>
<span class="col"><div id="hour03" class="hb4"></div></span>
<span class="col"><div id="hour04" class="hb4"></div></span>
</div>
<div class="five_minutes_row">
<span class="col11"><div id="minute05" class="mb11"></div></span>
<span class="col11"><div id="minute10" class="mb11"></div></span>
<span class="col11"><div id="minute15" class="mb11 red"></div></span>
<span class="col11"><div id="minute20" class="mb11"></div></span>
<span class="col11"><div id="minute25" class="mb11"></div></span>
<span class="col11"><div id="minute30" class="mb11 red"></div></span>
<span class="col11"><div id="minute35" class="mb11"></div></span>
<span class="col11"><div id="minute40" class="mb11"></div></span>
<span class="col11"><div id="minute45" class="mb11 red"></div></span>
<span class="col11"><div id="minute50" class="mb11"></div></span>
<span class="col11"><div id="minute55" class="mb11"></div></span>
</div>
<div class="one_minute_row">
<span class="col"><div id="minute01" class="mb4"></div></span>
<span class="col"><div id="minute02" class="mb4"></div></span>
<span class="col"><div id="minute03" class="mb4"></div></span>
<span class="col"><div id="minute04" class="mb4"></div></span>
</div>
</div>

<!-- If you want to hide the infoblock change the css to display: none -->
<div class="infoblock">
<div id="row5" style="text-align: center;"></div>
<div id="row0"></div>
<div id="row1"></div>
<div id="row2"></div>
<div id="row3"></div>
<div id="row4"></div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script type="text/javascript">
$(document).ready(function () {
drawClock();
});
</script>
<!-- / SCRIPTS -->
</body>
</html>
68 changes: 68 additions & 0 deletions katas/BerlinClock/solutions/blehner78/js/clock.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
// format time
function formatHour(hour) {
return hour + ' hour' + ((hour != 1) ? 's' : '');
}

function formatMinute(minute) {
return minute + ' minute' + ((minute != 1) ? 's' : '');
}

// draw clock
function drawClock() {
window.setInterval(function () {
// time instance
var time = new Date();
// variables
var seconds = time.getSeconds();
var minutes = time.getMinutes();
var hours = time.getHours();
// current time
var currentTime = hours + ':' + ((minutes < 10) ? '0' : '') + minutes;
$('#currentTime').html(currentTime);

//transform lights
setLight('second', seconds % 2);
setLight('hour05', hours >= 5);
setLight('hour10', hours >= 10);
setLight('hour15', hours >= 15);
setLight('hour20', hours >= 20);
setLight('hour01', (hours % 5) >= 1);
setLight('hour02', (hours % 5) >= 2);
setLight('hour03', (hours % 5) >= 3);
setLight('hour04', (hours % 5) >= 4);
setLight('minute05', minutes >= 5);
setLight('minute10', minutes >= 10);
setLight('minute15', minutes >= 15);
setLight('minute20', minutes >= 20);
setLight('minute25', minutes >= 25);
setLight('minute30', minutes >= 30);
setLight('minute35', minutes >= 35);
setLight('minute40', minutes >= 40);
setLight('minute45', minutes >= 45);
setLight('minute50', minutes >= 50);
setLight('minute55', minutes >= 55);
setLight('minute01', (minutes % 5) >= 1);
setLight('minute02', (minutes % 5) >= 2);
setLight('minute03', (minutes % 5) >= 3);
setLight('minute04', (minutes % 5) >= 4);

// info rows
$('#row0').html('1st row::: ' + seconds +' seconds')
$('#row1').html('2nd row::: 5 hours &times; ' + Math.floor(hours / 5)
+ ' = ' + formatHour(5 * Math.floor(hours / 5)));
$('#row2').html('3rd row::: ' + formatHour(hours % 5));
$('#row3').html('4th row::: ' + ' 5 minutes &times; ' + Math.floor(minutes / 5)
+ ' = ' + formatMinute(5 * Math.floor(minutes / 5)));
$('#row4').html('5th row::: ' + formatMinute(minutes % 5));
$('#row5').html('<h1>' + currentTime + '</h1><p>CURRENT TIME</p>');
}, 100);
}

// set light
function setLight(id, visible) {
if (visible) {
$('#' + id).show();
} else {
$('#' + id).hide();
}
}
11 changes: 11 additions & 0 deletions katas/LangtonAnt/solutions/blehner78/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
# Langton Ant draft
One try of solving the Langton Ant with PHP

## Dependencies
PHP

## Demo
index.php

## Author
Bernhard Lehner
72 changes: 72 additions & 0 deletions katas/LangtonAnt/solutions/blehner78/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
/**
* Styles for the Langtons Ant
**/

body {
font-family: Arial, sans-serif;
}
h1 {
font-size: 40px;
font-weight: bold;
margin: 0;
padding: 20px 0 12px 0;
color: #333;
}
p {
margin: 0;
padding: 0;
color: #333;
}

.content {
display:flex;
vertical-align: middle;
height: 100%;
}
.langtonsant {
width: 400px;
height: 400px;
margin: auto;
position: relative;
background: #ffffff;
border: 12px solid #dedede;
}
.langtonsant img {
width: 100%;
height: 100%;
}

/**
* INFOBLOCK
* Add display none to the class infoblock to hide it
**/

.infoblock {
width: 280px;
margin:auto;
position: absolute;
background-color: #efefef;
right:20px;
bottom:20px;
border-radius: 12px;
overflow: hidden;
color: #888;
padding:20px;
/*display:none;*/
}
.infoblock p {
padding: 6px 12px 8px;
}



.antCanvas {
position: relative;
display: block;
margin: auto;
border: 12px solid #dedede;
}
.pixel {
position: absolute;
display: inline-block;
}
Loading