JavaScript Tutorial 12 Doomsday Algorithm

Posted by Derek Banas on Jul 12, 2019 in Web Design | 0 comments

In this part I continue my JavaScript Tutorial and cover the Doomsday Algorithm. I’ll make a JavaScript app that can find the weekday for and date in history and display the steps.

John Conway discovered the Doomsday Rule. He realized that certain dates in every year all share the same week day. If you can then calculate what each years Doomsday is you can then easily find any weekday for any date. All the code follows below.

This video is sponsored by an awesome site that makes free educational tutorials like I do Education Ecosystem provides tutorials on Artificial Intelligence, Cybersecurity, Game Development, Data Science, Crytocurrencies and more. Each tutorial series provides all the project files available for free download. Check them out for more great tutorials.

Would you like to promote your website / product in the descriptions for my videos? Donate $1 on Patreon and you will be featured in my video descriptions for as long as you are a Patreon.

All the Code from this Video

findday.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Find Day of Week with a Date</title>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script  src="findday.js"></script>
    <link rel="stylesheet" href="findday.css">
</head>

<body>
    <div class="container">
        <!-- Container used to unify styling -->
        <div class="jumbotron">
            <!-- Center my title -->
            <h1 class="text-center">Enter Date to Get Day</h1><br>
            <!-- Style and place form elements in a row -->
            <form class="form-inline">
                <!-- Set height as 100% -->
                <div class="container h-100">
                <!-- Place elements in a row justified to the center -->
                <div class="row justify-content-center h-100">
                    <!-- Prepend Month to the label -->
                    <div class="input-group p-2">
                        <div class="input-group-prepend">
                            <label class="input-group-text">Month</label>
                        </div>
                        <!-- Create a Select element and style it with 
                        form-control -->
                        <select class="form-control form-control-lg" id="month">
                            
                        </select>
                    </div>
                    <div class="input-group p-2">
                        <div class="input-group-prepend">
                            <label class="input-group-text">Day</label>
                        </div>
                        <select class="form-control form-control-lg" id="day">
                            
                        </select>
                    </div>
                    <div class="input-group p-2">
                        <div class="input-group-prepend">
                            <label class="input-group-text">Year</label>
                        </div>
                        <select class="form-control form-control-lg" id="year">
                            
                        </select>
                    </div>
                    <button type="button" class="btn btn-primary" id="calcbut">Calculate</button>
                </div>
            </div>
            </form>
            <div class="form-group">
            <h3>Results</h3>
            <textarea class="form-control" id="results" rows="11"></textarea>
            </div>
        </div>
    </div>
</body>
</html>

findday.css

html {
    font-size: 1em;
} 
body{
    background-color:rgb(37, 35, 124);
}
.jumbotron{
    background-color:rgb(37, 35, 124);
    color:white;
}






















findday.js

// Call SetupFunc when the page loads
document.addEventListener('DOMContentLoaded', SetupFunc);
let monthArr = ['January', 'February', 'March','April', 'May', 'June', 'July','August', 'September', 'October','November', 'December'];
let dayArr = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

// The Doomsday dates for each month
let doomsdayArrayLeapYear = [4,1,7,4,2,6,4,1,5,3,7,5];
let doomsdayArrayNotLeapYear = [3,7,7,4,2,6,4,1,5,3,7,5];
let monthSelect;
let daySelect;
let yearSelect;
let calcBut;
let resultsBox;

function SetupFunc(){
    monthSelect = document.getElementById("month");
    daySelect = document.getElementById("day");
    yearSelect = document.getElementById("year");
    calcBut = document.getElementById("calcbut");
    resultsBox = document.getElementById("results");
    var thisYear = (new Date()).getFullYear();

    for (var i = 0; i <= 11; i++) {
        let option = document.createElement("option");
        option.appendChild(document.createTextNode(monthArr[i]));
        monthSelect.appendChild(option);
    }
    for (var j = 1; j <= 31; j++) {
        let option = document.createElement("option");
        option.appendChild(document.createTextNode(j));
        daySelect.appendChild(option);
    }
    for (var k = thisYear; k >= 1900; k--) {
        let option = document.createElement("option");
        option.appendChild(document.createTextNode(k));
        yearSelect.appendChild(option);
    }
    calcBut.addEventListener("click", GetResults);
}

function GetResults(){
    let resultStr = "1. Divide the last 2 digits of year by 12 : ";

    // Get last 2 digits of the year
    let year2Digits = yearSelect.value.toString().substr(-2);

    // Year selected divided by 12
    let calc1 = Math.floor(year2Digits/12);
    resultStr = resultStr + year2Digits + " / 12 = " + calc1 + "\n";
    resultStr = resultStr + "2. Get the difference between the years last 2 digits and the previous result * 12 : ";

    // Subtract previous calculation * 12 from the year selected
    let calc2 = year2Digits - (calc1 * 12);
    resultStr = resultStr + " " + year2Digits + " - (" + calc1 + " * 12) = " + calc2 + "\n";

    // Divide previous calculation by 4
    let calc3 = Math.floor(calc2 / 4);

    resultStr = resultStr + "3. Divide previous result by 4 : " + calc2 + " / 4 = " + calc3 + "\n";

    // Get 1st digit of the year if it is 1 the anchor day is 
    // Wednesday (3) and if 2 the anchor day is Tuesday (2)
    let firstDigitYear = String(yearSelect.value).toString().charAt(0);
    let anchorNum = (firstDigitYear == 1) ? 3 : 2;
    let calc4 = calc1 + calc2 + calc3 + anchorNum;

    resultStr = resultStr + "4. Add all results plus the anchor day value : " + calc1 + " + " + calc2 + " + " + calc3 + " + " + anchorNum + " = " + calc4 + "\n";

    // Take modulus of 7 from previous result to get a value between
    // 0 and 6 representing the days of a week (The Doomsday)
    let calc5 = calc4 % 7;

    resultStr = resultStr + "5. Take the modulus of 7 from the previous result to get Doomsday : " + calc4 + " % 7 = " + calc5 + " (" + dayArr[calc5] + ")" + "\n"; 

    // Check if it is a leap year
    // Leap years are divisible by 4 unless it is divisible by
    // 100 and not divisible by 400
    let year = yearSelect.value;
    let leapYear = (year % 4 == 0) ? true : false;
    if((year % 100 == 0) && (year % 400 != 0)) leapYear = false;
    resultStr = resultStr + "6. Is it a leap year? " + leapYear.toString() + "\n";

    // Find the day by adding or subtracting the Doomsday
    // calc5 is the index for the Doomsday in dayArr
    // Get the month index
    let day = daySelect.value;
    let monthSelected = monthSelect.value.toString();
    let monthIndex = monthArr.indexOf(monthSelected);
    let dayIndex;
    let doomsdayDay;

    resultStr = resultStr + "7. Add or Subtract previous result from the Doomsday number to find this dates day : " + calc5;

    // If it is a leap year I need to use the different set
    // of Doomsday dates
    if(leapYear){
        // Get the Doomsday day which changes every month
        doomsdayDay = doomsdayArrayLeapYear[monthIndex];
    } else {
        doomsdayDay = doomsdayArrayNotLeapYear[monthIndex];
    }

    // Example Jan 1, 2001
    // Day (1) Doomsday Day (3) calc5 : Day Code (3/Wed)
    // dayIndex = calc5 - (3 - 1) = 1 / Monday
    if(day < doomsdayDay){
        dayIndex = calc5 - (doomsdayDay - day);
        resultStr = resultStr + " - (" + doomsdayDay + " - " + day + ")";
    } else if(day > doomsdayDay){

        // Example Jan 4, 2001
        // Day (4) Doomsday Day (3) calc5 : Day Code (3/Wed)
        // dayIndex = calc5 + (4 - 3) = 4 / Thursday
        dayIndex = calc5 + (day - doomsdayDay);

        // If dayIndex is greater than 7 convert its date to
        // the 0 through 7 format used by the dayArr
        if(dayIndex >= 7){
            dayIndex = dayIndex % 7;
            resultStr = resultStr + " + (" + day + " - " + doomsdayDay + ") % 7";
        } else {
            resultStr = resultStr + " + (" + day + " - " + doomsdayDay + ")";
        }
    } else {
        dayIndex = calc5;
    }

    // If negative number flip to the end of the week and count down from there
    if(dayIndex < 0) dayIndex = 7 + dayIndex;
    
    resultStr = resultStr + " = " + dayIndex + "\n";
    resultStr = resultStr + monthSelected + " " + day + " " + year + " was a " + dayArr[dayIndex];
    resultsBox.innerHTML = resultStr;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

findday.html

<!doctype html>

<head>

</head>

<body>

<h1 class="text-center">Enter Date to Get Day</h1><br>

<label class="input-group-text">Month</label>

</div>

<!-- Create a Select element and style it with

form-control -->

</select>

</div>

</div>

</select>

</div>

</div>

</select>

</div>

<button type="button" class="btn btn-primary" id="calcbut">Calculate</button>

</div>

</form>

<h3>Results</h3>

</div>

</body>

</html>

findday.css

html {

font-size: 1em;

}

body{

background-color:rgb(37, 35, 124);

}

.jumbotron{

background-color:rgb(37, 35, 124);

color:white;

}

findday.js

// Call SetupFunc when the page loads

document.addEventListener('DOMContentLoaded', SetupFunc);

let monthArr = ['January', 'February', 'March','April', 'May', 'June', 'July','August', 'September', 'October','November', 'December'];

let dayArr = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

// The Doomsday dates for each month

let doomsdayArrayLeapYear = [4,1,7,4,2,6,4,1,5,3,7,5];

let doomsdayArrayNotLeapYear = [3,7,7,4,2,6,4,1,5,3,7,5];

let monthSelect;

let daySelect;

let yearSelect;

let calcBut;

let resultsBox;

function SetupFunc(){

monthSelect = document.getElementById("month");

daySelect = document.getElementById("day");

yearSelect = document.getElementById("year");

calcBut = document.getElementById("calcbut");

resultsBox = document.getElementById("results");

var thisYear = (new Date()).getFullYear();

for (var i = 0; i <= 11; i++) {

let option = document.createElement("option");

option.appendChild(document.createTextNode(monthArr[i]));

monthSelect.appendChild(option);

}

for (var j = 1; j <= 31; j++) {

let option = document.createElement("option");

option.appendChild(document.createTextNode(j));

daySelect.appendChild(option);

}

for (var k = thisYear; k >= 1900; k--) {

let option = document.createElement("option");

option.appendChild(document.createTextNode(k));

yearSelect.appendChild(option);

}

calcBut.addEventListener("click", GetResults);

}

function GetResults(){

let resultStr = "1. Divide the last 2 digits of year by 12 : ";

// Get last 2 digits of the year

let year2Digits = yearSelect.value.toString().substr(-2);

// Year selected divided by 12

let calc1 = Math.floor(year2Digits/12);

resultStr = resultStr + year2Digits + " / 12 = " + calc1 + "\n";

resultStr = resultStr + "2. Get the difference between the years last 2 digits and the previous result * 12 : ";

// Subtract previous calculation * 12 from the year selected

let calc2 = year2Digits - (calc1 * 12);

resultStr = resultStr + " " + year2Digits + " - (" + calc1 + " * 12) = " + calc2 + "\n";

// Divide previous calculation by 4

let calc3 = Math.floor(calc2 / 4);

resultStr = resultStr + "3. Divide previous result by 4 : " + calc2 + " / 4 = " + calc3 + "\n";

// Get 1st digit of the year if it is 1 the anchor day is

// Wednesday (3) and if 2 the anchor day is Tuesday (2)

let firstDigitYear = String(yearSelect.value).toString().charAt(0);

let anchorNum = (firstDigitYear == 1) ? 3 : 2;

let calc4 = calc1 + calc2 + calc3 + anchorNum;

resultStr = resultStr + "4. Add all results plus the anchor day value : " + calc1 + " + " + calc2 + " + " + calc3 + " + " + anchorNum + " = " + calc4 + "\n";

// Take modulus of 7 from previous result to get a value between

// 0 and 6 representing the days of a week (The Doomsday)

let calc5 = calc4 % 7;

resultStr = resultStr + "5. Take the modulus of 7 from the previous result to get Doomsday : " + calc4 + " % 7 = " + calc5 + " (" + dayArr[calc5] + ")" + "\n";

// Check if it is a leap year

// Leap years are divisible by 4 unless it is divisible by

// 100 and not divisible by 400

let year = yearSelect.value;

let leapYear = (year % 4 == 0) ? true : false;

if((year % 100 == 0) && (year % 400 != 0)) leapYear = false;

resultStr = resultStr + "6. Is it a leap year? " + leapYear.toString() + "\n";

// Find the day by adding or subtracting the Doomsday

// calc5 is the index for the Doomsday in dayArr

// Get the month index

let day = daySelect.value;

let monthSelected = monthSelect.value.toString();

let monthIndex = monthArr.indexOf(monthSelected);

let dayIndex;

let doomsdayDay;

resultStr = resultStr + "7. Add or Subtract previous result from the Doomsday number to find this dates day : " + calc5;

// If it is a leap year I need to use the different set

// of Doomsday dates

if(leapYear){

// Get the Doomsday day which changes every month

doomsdayDay = doomsdayArrayLeapYear[monthIndex];

} else {

doomsdayDay = doomsdayArrayNotLeapYear[monthIndex];

}

// Example Jan 1, 2001

// Day (1) Doomsday Day (3) calc5 : Day Code (3/Wed)

// dayIndex = calc5 - (3 - 1) = 1 / Monday

if(day < doomsdayDay){

dayIndex = calc5 - (doomsdayDay - day);

resultStr = resultStr + " - (" + doomsdayDay + " - " + day + ")";

} else if(day > doomsdayDay){

// Example Jan 4, 2001

// Day (4) Doomsday Day (3) calc5 : Day Code (3/Wed)

// dayIndex = calc5 + (4 - 3) = 4 / Thursday

dayIndex = calc5 + (day - doomsdayDay);

// If dayIndex is greater than 7 convert its date to

// the 0 through 7 format used by the dayArr

if(dayIndex >= 7){

dayIndex = dayIndex % 7;

resultStr = resultStr + " + (" + day + " - " + doomsdayDay + ") % 7";

} else {

resultStr = resultStr + " + (" + day + " - " + doomsdayDay + ")";

}

} else {

dayIndex = calc5;

}

// If negative number flip to the end of the week and count down from there

if(dayIndex < 0) dayIndex = 7 + dayIndex;

resultStr = resultStr + " = " + dayIndex + "\n";

resultStr = resultStr + monthSelected + " " + day + " " + year + " was a " + dayArr[dayIndex];

resultsBox.innerHTML = resultStr;

}

	Facebook
	YouTube
	Twitter
	LinkedIn

JavaScript Tutorial 12 Doomsday Algorithm

Leave a Reply Cancel reply