added dates calculator functions, templates and styles #274

liaarbel · 2021-02-12T21:33:43Z

I created a form for two dates. One is for the first date we start from and the second is for the date we end with.
After clicking on the button "calculate" we get the difference in days between the two dates.
We don't have to enter data to the first date input, what will happen is that the first date will become the current date.

yammesicka

That's a great start :)

app/templates/home.html

yammesicka · 2021-02-14T08:08:12Z

app/templates/home.html

+                alert("Expected end date");
+                return;
+            }
+            var date1 = document.getElementById("startDate").value;


Use let/const

app/templates/home.html

yammesicka · 2021-02-14T08:08:59Z

app/templates/home.html

@@ -1,21 +1,56 @@
 {% extends "partials/index/index_base.html" %}

 {% block content %}
+<script>


Please put the JS in a different file

codecov-io · 2021-02-14T21:01:33Z

Codecov Report

Merging #274 (fd25932) into develop (b91708d) will decrease coverage by 0.04%.
The diff coverage is n/a.

@@             Coverage Diff             @@
##           develop     #274      +/-   ##
===========================================
- Coverage    95.15%   95.10%   -0.05%     
===========================================
  Files           76       76              
  Lines         3382     3352      -30     
===========================================
- Hits          3218     3188      -30     
  Misses         164      164

Impacted Files	Coverage Δ
app/routers/salary/config.py	`100.00% <0.00%> (ø)`

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update b91708d...fd25932. Read the comment docs.

…into Features/dates_calculator

app/templates/home.html

yammesicka · 2021-02-15T17:38:45Z

app/templates/home.html

+        <label for="endDate">End date:<em>&#x2a;</em></label>
+        <input id="endDate" name="date2" type="date">
+    </form>
+    <button type="button" onclick="hiddenDifference()">Calculate</button>


Please don't use onclick - Use addEventListener instead. (We don't want to mix the logic and the view)

yammesicka · 2021-02-15T17:39:16Z

app/static/js/dates_calculator.js

+    }
+    const diffTime = Math.abs(date2 - date1);
+    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+    document.getElementById("demo").innerHTML = "The difference: " + (diffDays) + " days";


Prefer innerText

yammesicka · 2021-02-15T17:39:30Z

app/static/js/dates_calculator.js

+        date1 = Date.now()
+    }
+    const diffTime = Math.abs(date2 - date1);
+    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));


Save as a constant with a proper name

yammesicka · 2021-02-15T17:40:29Z

app/templates/home.html

+        <input id="endDate" name="date2" type="date">
+    </form>
+    <button type="button" onclick="hiddenDifference()">Calculate</button>
+    <h3 id="demo"></h3>


What is the purpose of the h3? Should it be a title?

If not - prefer using p/span/div tags + CSS

yammesicka · 2021-02-16T02:49:11Z

app/templates/home.html

+<div class="container mt-4">
+</div>


What is the purpose of this div?

It doesn't exist in the new commit

I can't see it here. Is there a new PR or something?

Every time I pull from the develop this div exists

…EventListener

yammesicka · 2021-02-16T15:00:54Z

app/templates/calendar_monthly_view.html

@@ -5,6 +5,17 @@
      <div class="title">{{ day.display() }}</div>
      <div class="sec-title">Location 0<sup>o</sup>c 00:00</div>
    </div>
+    <div style="align: center">


Don't use inline styles, move them to CSS file

It is still here :)

app/templates/home.html

yammesicka · 2021-02-16T15:02:21Z

app/templates/home.html

+<div class="container mt-4">
+</div>


app/templates/partials/calendar/calendar_base.html

yammesicka · 2021-02-16T15:06:42Z

app/static/js/dates_calculator.js

+    }
+    const diffDates = Math.abs(date2 - date1);
+    const diffInDays = Math.ceil(diffDates / (1000 * 60 * 60 * 24));
+    document.getElementById("demo").innerText = "The difference: " + (diffInDays) + " days";


You can use JS `Template ${strings}` if you'd like to

I took this code and I really don't know or want to change something that work pretty code :(

No problem, but we did talk about taking code from others. Please include full credit in your code.

yammesicka · 2021-02-16T15:13:07Z

app/static/js/dates_calculator.js

+        date1 = new Date(date1);
+    }
+    else {
+        date1 = Date.now()


yammesicka · 2021-02-16T15:13:55Z

app/static/js/dates_calculator.js

+        swal("Expected end date");
+        return;
+    }
+    let date1 = document.getElementById("startDate").value;


Prefer const

but date1 changing

yammesicka · 2021-02-16T15:14:33Z

app/static/js/dates_calculator.js

@@ -0,0 +1,21 @@
+window.onload = function () {


Prefer addEventListener on DOMContentLoaded to prevent the possibility of being overriden

I really don't understand how

yammesicka · 2021-02-17T05:25:53Z

app/static/js/dates_calculator.js

+    }
+    const diffDates = Math.abs(date2 - date1);
+    const diffInDays = Math.ceil(diffDates / (1000 * 60 * 60 * 24));
+    document.getElementById("demo").innerText = "The difference: " + (diffInDays) + " days";


No problem, but we did talk about taking code from others. Please include full credit in your code.

yammesicka · 2021-02-17T05:29:23Z

app/templates/calendar_monthly_view.html

@@ -5,6 +5,17 @@
      <div class="title">{{ day.display() }}</div>
      <div class="sec-title">Location 0<sup>o</sup>c 00:00</div>
    </div>
+    <div style="align: center">


It is still here :)

yammesicka · 2021-02-17T05:29:53Z

app/templates/home.html

+<div class="container mt-4">
+</div>


I can't see it here. Is there a new PR or something?

ivarshav · 2021-02-21T21:41:40Z

app/static/js/dates_calculator.js

+        date1 = Date.now();
+    }
+    const diffDates = Math.abs(date2 - date1);
+    const diffInDays = Math.ceil(diffDates / (1000 * 60 * 60 * 24));


maybe set the values to a const?

It is const

Sorry, I meant the numbers - 1000 * 60 * 60 * 24, extract it to another const.

Is that what matters? It's just a formula
Here you can see the logical in the calculation

yammesicka · 2021-02-23T11:48:32Z

app/static/js/dates_calculator.js

+window.addEventListener('DOMContentLoaded', (event) => {
+    document.getElementById("CalcBtn").addEventListener("click", hiddenDifference);
+});


added dates calculator functions, templates and styles

a8913aa

yammesicka requested changes Feb 14, 2021

View reviewed changes

moved to js file and changed alert style

1e5b909

Merge branch 'develop' of https://github.com/PythonFreeCourse/calendar …

1e48b35

…into Features/dates_calculator

yammesicka requested changes Feb 15, 2021

View reviewed changes

merged

8f8bfe5

yammesicka requested changes Feb 16, 2021

View reviewed changes

liaarbel added 2 commits February 16, 2021 14:10

changed location of function and changed from onclick function to add…

f2c51fa

…EventListener

merged

f843363

yammesicka requested changes Feb 16, 2021

View reviewed changes

liaarbel added 2 commits February 16, 2021 22:31

fixed little changes

0aaf84a

merged

15fb380

yammesicka requested changes Feb 17, 2021

View reviewed changes

ivarshav reviewed Feb 21, 2021

View reviewed changes

liaarbel added 3 commits February 23, 2021 08:40

merged

d084ca6

fixed changes

08b867c

changed window add listener

fd25932

yammesicka approved these changes Feb 23, 2021

View reviewed changes

yammesicka merged commit a8c33bc into PythonFreeCourse:develop Feb 23, 2021

added dates calculator functions, templates and styles #274

added dates calculator functions, templates and styles #274

Uh oh!

Conversation

liaarbel commented Feb 12, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

yammesicka left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

codecov-io commented Feb 14, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

yammesicka Feb 17, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

liaarbel commented Feb 12, 2021 •

edited

Loading

codecov-io commented Feb 14, 2021 •

edited

Loading

yammesicka Feb 17, 2021 •

edited

Loading

yammesicka Feb 17, 2021 •

edited

Loading

liaarbel Feb 23, 2021 •

edited

Loading