From 702296c8a11f14c98163d9c6252f5e63ba34ea3a Mon Sep 17 00:00:00 2001 From: fratquintero Date: Thu, 21 Nov 2024 12:00:17 -0500 Subject: [PATCH 1/2] Main --- README.md | 6 ++++- index.html | 28 +++++++++++++++++++++++ script.js | 14 ++++++++++++ style.css | 67 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 114 insertions(+), 1 deletion(-) create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css diff --git a/README.md b/README.md index 01a9656..68e12b9 100644 --- a/README.md +++ b/README.md @@ -1 +1,5 @@ -This repository is empty. Any task executed on it should be considered a new capability and needs to be created. +Sleep time calculator +Code in html/javascript the UI for the following problem. +I used to sleep 8 hours but because I have a new baby, +I only sleep 5 hours. How many less time am I going to sleep: per week (hours), per month(days), per year (in days). +Make it so the variables x = hours of sleep before newborn and y= hours of sleep after them can be changed by the user. Make it so the user can iterate the problem \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..2bbfa1f --- /dev/null +++ b/index.html @@ -0,0 +1,28 @@ + + + + + + Sleep Time Calculator + + + +

Sleep Time Calculator

+
+ + +
+ + +
+ +
+
+

Results

+

+

+

+
+ + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..738e5a7 --- /dev/null +++ b/script.js @@ -0,0 +1,14 @@ +document.getElementById('sleepForm').addEventListener('submit', function(event) { + event.preventDefault(); + + const x = parseFloat(document.getElementById('hoursBefore').value); + const y = parseFloat(document.getElementById('hoursAfter').value); + + const weeklyDifference = (x - y) * 7; + const monthlyDifference = (x - y) * 30 / 24; + const yearlyDifference = (x - y) * 365 / 24; + + document.getElementById('weeklyResult').textContent = `You will sleep ${weeklyDifference} hours less per week.`; + document.getElementById('monthlyResult').textContent = `You will sleep ${monthlyDifference.toFixed(2)} days less per month.`; + document.getElementById('yearlyResult').textContent = `You will sleep ${yearlyDifference.toFixed(2)} days less per year.`; +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..1e30cf3 --- /dev/null +++ b/style.css @@ -0,0 +1,67 @@ +body { + font-family: Arial, sans-serif; + margin: 20px; + padding: 0; + background-color: #f4f4f4; +} + +h1 { + text-align: center; + color: #333; +} + +form { + max-width: 400px; + margin: 0 auto; + padding: 20px; + background-color: #fff; + border-radius: 5px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} + +label { + display: block; + margin-bottom: 10px; + color: #555; +} + +input[type="number"] { + width: 100%; + padding: 10px; + margin-bottom: 20px; + border: 1px solid #ccc; + border-radius: 5px; +} + +button { + width: 100%; + padding: 10px; + background-color: #007bff; + color: #fff; + border: none; + border-radius: 5px; + cursor: pointer; +} + +button:hover { + background-color: #0056b3; +} + +#results { + max-width: 400px; + margin: 20px auto; + padding: 20px; + background-color: #fff; + border-radius: 5px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} + +#results h2 { + text-align: center; + color: #333; +} + +#results p { + margin: 10px 0; + color: #555; +} From c5ecbdfb3910266930e465e52b7dc22522cb06aa Mon Sep 17 00:00:00 2001 From: fratquintero Date: Fri, 29 Nov 2024 11:42:39 -0500 Subject: [PATCH 2/2] tictactoe html added --- tictactoe.html | 264 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 264 insertions(+) create mode 100644 tictactoe.html diff --git a/tictactoe.html b/tictactoe.html new file mode 100644 index 0000000..bd4b630 --- /dev/null +++ b/tictactoe.html @@ -0,0 +1,264 @@ + + + + + + + Tic Tac Toe + + + + +
+
+
+
+
+
+
+
+
+
+
+
+ +
+ Games Played: 0
+ Human Wins: 0
+ Computer Wins: 0
+ Draws: 0 +
+ + + + + \ No newline at end of file