Phase 1 Project-StudyDate
My project program (StudyDate) fulfills the MVP of the project in that there are 3 event listeners: a ‘click’, a ‘submit’, and a ‘DOMContentLoaded’.
- “document.addEventListener(‘DOMContentLoaded’, () => {
- getData();
- renderHome();
- homePageJump();
- anatPgJump();
- })”
- “function homePageJump(){
- homePg().addEventListener(‘click’, (e)=>{
- renderHome();
- })
- }”
- “function handleResponse(){
- let handler = document.getElementById(“submit”);
- handler.addEventListener(‘click’, (e) => {
- e.preventDefault();
- let retort = document.getElementById(‘response-bar’).value;
- chatBox(retort);
- chatCheck(retort);
- chatInputReset();
- chatQuestUpd();
- showScore();
- reinforce();
- })
- }”
The functions above were initially too unreliable, as I was going to require multiple results to elaborate from certain single events — for instance: ‘handleResponses()’ is one which is responsible for checking answers given, updating the question number, deciding if an answer is correct or incorrect then putting the updated score on the DOM, and resetting the input field in order to allow further responses to be accepted.
In order to resolve the bugs that presented themselves from this and other similar blocks with multiple return values expected, I decided to manage the different results with their own individual functions, thus the function itself calls other functions that actually complete the requested action(s). This required figuring out the simplest block to outline a single expected behavior, it’s timing of execution, and making the ‘handleResponses()’ the object of functions we see today. This resulted in much more manageable code during debug.
Get Kyrian Onwe’s stories in your inbox
Join Medium for free to get updates from this writer.
From this project I take away the vital importance of complex and recursive planning BEFORE ever starting to code. Without the algorithm I developed, this code may never have had the chance to make me as proud as it has.
