Simple Day Timer

Developer
Sicontis
Size
2,549 Kb
Views
78,936
  1. Simple Day Timer Previews
  2. Simple Day Timer HTML Codes
  3. Simple Day Timer CSS Codes
  4. Simple Day Timer JS Codes

How do I make an simple day timer?

What is a simple day timer? How do you make a simple day timer? This script and codes were developed by Sicontis on 12 July 2022, Tuesday.

Simple Day Timer Previews
IQ Test

Simple Day Timer - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple Day Timer</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html>
<head> <meta charset="UTF-8" /> <title>Vue JS Template</title>
</head>
<body> <div class="container" id="app"> <header> <h1>{{ title }}</h1> </header> <section> <div class="info"> <h3>Start date: <strong>{{ startDate }}</strong></h3> <h3>End date: <strong>{{ endDate }}</strong></h3> </div> <div class="clock"> <div class="box"> <h3>Number of days</h3> <h1>{{ days }}</h1> </div> <div class="box"> <h3>Days elapsed</h3> <h1>{{ elapsed }}</h1> </div> <div class="box"> <h3>Days remaining</h3> <h1>{{ remaining }}</h1> </div> </div> </section> </div>
</body>
</html> <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Simple Day Timer - Script Codes CSS Codes

body { font-family: Helvetica, Arial, sans-serif; display: flex; flex-direction: column; align-items: center; text-transform: uppercase; line-height: 2em; color: #383A3F;
}
header, section { margin: 30px 0;
}
h1 { font-size: 2em; color: #1F2124;
}
strong { color: #F6B352; font-weight: 600;
}
.container { width: 80%; padding: 50px;
}
.info { display: flex;
}
.info h3 { margin-right: 30px;
}
.clock { margin: 40px 0; display: flex;
}
.clock .box:last-child { border-right: 5px solid #1F2124;
}
.box { border: 5px solid #1F2124; border-right: none; padding: 20px; text-align: center;
}
.box h1 { color: #F68657;
}

Simple Day Timer - Script Codes JS Codes

new Vue({ // ELEMENT el: '#app', // DATA data: { title: 'Challenge Countdown Timer', days: 100, elapsed: '', remaining: '', startDate: '', endDate: '' }, // METHODS methods: { // Calculates difference between days daysBetween(start, end) { var oneDay = 1000 * 60 * 60 * 24; var startMS = start.getTime(); var endMS = end.getTime(); var differenceMS = Math.abs(startMS - endMS); return Math.round(differenceMS/oneDay); }, // Gets the dates needed to calculate whats placed in the output countdown() { var day = 1000 * 60 * 60 * 24; var numOfDays = 100; var dateStarted = new Date(2017, 0, 3); var todaysDate = new Date(); var daysElapsed = this.daysBetween(dateStarted, todaysDate); var daysLeft = numOfDays - daysElapsed; var dateEnds = daysLeft * day; var lastDate = Date.now() + dateEnds; var endDate = new Date(lastDate); var remainingDays = this.daysBetween(todaysDate, endDate); this.elapsed = daysElapsed; this.remaining = remainingDays; this.startDate = dateStarted.toDateString(); this.endDate = endDate.toDateString(); } }, created() { this.countdown(); }
});
Simple Day Timer - Script Codes
Simple Day Timer - Script Codes
Home Page Home
Developer Sicontis
Username Sicontis
Uploaded July 12, 2022
Rating 3
Size 2,549 Kb
Views 78,936
Do you need developer help for Simple Day Timer?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Sicontis (Sicontis) Script Codes
Name
Pomodoro Timer
Weight Converter
VueJS Logo SVG
Wikipedia Search
Striped Sliding Navigation
That Reddit Guy
Simple Calendar
Portfolio
A Pen by Sicontis
Simple Modal
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!