diff --git a/Index.html b/Index.html new file mode 100644 index 0000000..3feb122 --- /dev/null +++ b/Index.html @@ -0,0 +1,24 @@ + + + + Day of Birth Calculator + + + +
+

Check Your Day Of Birth

+ +
+ + +
+ +
+ +
+ +
+
+ |*____________Coded by Mxhr_____________*| + + \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..585ba68 --- /dev/null +++ b/README.md @@ -0,0 +1 @@ +Day Of Birth diff --git a/myscript.js b/myscript.js new file mode 100644 index 0000000..4d5f401 --- /dev/null +++ b/myscript.js @@ -0,0 +1,27 @@ +var userMonth = document.getElementById("user-month"); +var userDay = document.getElementById("user-day"); +var userYear = document.getElementById("user-year"); +var submitButton = document.getElementById("submit-date"); + +submitButton.addEventListener("click", function(evt) { + var message = document.getElementById('message'); + var parsedMonth = (parseInt(userMonth.value)-1); + var parsedDay = parseInt(userDay.value); + var parsedYear = parseInt(userYear.value); + + var months = ["January","February","March","April","May","June","July","August","September","October","November","December"]; + var weekday = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]; + var dateIs = new Date(parsedYear, parsedMonth, parsedDay); + var weekdayIs = weekday[dateIs.getDay()]; + var monthIs = months[parsedMonth]; + + if (weekdayIs === undefined || monthIs === undefined) { + message.innerText= ""; + setTimeout(function() { + message.innerText="Please enter a valid date!";}, 500) + } + else{ + message.innerText = weekdayIs +" , "+ monthIs + " " + parsedDay + " , " +parsedYear; + } + +}) \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..3266b73 --- /dev/null +++ b/style.css @@ -0,0 +1,99 @@ +body{ + margin-left: 95px; + margin-top: 145px; +} + +h1{ + font-size: 45px; + font-weight: 800; + background: green; + color: #fff; + margin-bottom: 3px; + width: 505px; + padding: 7px; + border-radius: 10px; +} + +.calculator{ + margin-top: 30px; +} + +input{ + width: 250px; + margin: 2px 0px; + font-size: 20px; + text-align: center; +} +#user-month{ + width: 195px; + height: 45px; + text-align: center; +} +#user-day{ + width: 195px; + height: 45px; + text-align: center; +} +#user-year{ + width: 195px; + height: 45px; + text-align: center; +} + +#submit-date{ + width: 605px; + height: 55px; + margin-top: 30px; + padding: 10px; + border: none; + border-radius: 2px; + font-size: 18px; + background: #27ACD9; + font-weight: 500; + color: #fff; + +} + +#message{ + margin: 20px 0px; + font-size: 50px; + font-weight: 800; +} + +#submit-date:hover{ + background: purple; +} + +#spacer{ + padding-top: 30px; +} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +