Yoruba Learning App Admin Dashboard

Status

🚧 Yoruba Learning App 🚀 Under construction... 🚧

---

About   |   Features   |   Technologies   |   API Documentation   |   Requirements   |   Sections   |   License   |   Author

🎯 About

The Yoruba Learning App Dashboard is a central hub within the larger Yoruba Learning App, designed specifically for administrators and instructors. It provides an intuitive and efficient interface for managing user accounts, tracking learner progress, creating and organizing lessons and exercises, and accessing valuable analytics. The dashboard empowers administrators and instructors to effectively monitor and enhance the learning experience, enabling them to make data-driven decisions and ensure the successful implementation of the Yoruba Learning App's comprehensive language learning program.

✨ Features

✔️ Fetch API
✔️ REST API
✔️ SweetAlert;

🚀 Technologies

The following tools were used in this project:

• JavaScript
• SASS
• Fetch API
• SweetAlert
• Icons
• Font 1
• Font 2

✅ API Documentation

YA DOCUMENTATION

✅ Requirements

Before starting 🏁, you need to have Git and Node installed.

Knowledge of 🏁

• JS Functions
• Event Listeners
• Conditional Statements
• Event Handlers

✅ Sections

Sign Up Section

Below are the steps needed to actualize the JavaScript Code for the Sign Up section of this project.

• STEP 1 - Get the signup btn using getElementByID
• STEP 2 - Set the innerText of the button to "Sign Up"
• STEP 3 - Add a "click" eventListener to the button with a callback function that has event as itʻs parameter.
• STEP 4 - prevent the default behaviors of form buttons using .preventDefault() function.
• STEP 5 - Get the inputs using getElementByID and we actually want to get the actual value of all 4 inputs in the signup page, donʻt forget that.
• STEP 6 - At this point, set the innerText value of the signUpBtn to "Loading..."
• STEP 7 - Then add the class "pulse" to the signUpBtn using the classList method
• STEP 8 - Write an if statement that checks if the value of the 4 inputs are not empty strings using logical OR operator, e.g if(getName === "" || getEmail === "" ...)
• STEP 9 - In the if Statement block throw a sweetalert that tells the users "All fields are required"
• STEP 10 - Still in the if statement set the innerText of the signUpBtn to "sign up" and remove the "pulse" class from the button.
• STEP 11 - Write an else if that checks if the confirm password is equal to password, if it is NOT throw a sweetalert that says password does not match
• STEP 12 - Still in the else if set the innerText of the signUpBtn to "sign up" and remove the "pulse" class from the button.
• STEP 13 - Now when done with all the checks above, in the last else block create a variable called signUpData and assign a form data object instance to it e.g new FormData()
• STEP 14 - Now using the append() method, append the inputs to the signUpData e.g signUpData.append("name", getName);
• STEP 15 - Create an object with name signReq and add a property method with value "POST" and a property body with value signUpData
• STEP 16 - Now create a variable url and assign the Signup Api to it.
• STEP 17 - Now using the fetch API, do the following:
• STEP 17a - Add the url and signReq to the fetch()
• STEP 17b - The first .then() function should receive a response and should convert it to json() e.g (response) => response.json()
• STEP 17c - The second .then() should get the result and in there we should have an if Statement that checks if the result status is "success", if it is, throw a sweetalert that says "success" showing the result message, then set a timeout of 5000 seconds that sends the users to location.href="index.html" i.e to the login page, else if all this is falsey, throw a sweet alert that shows "Registration Unsuccessful!", after this set the innerText of the signUpBtn to "sign up" and remove the "pulse" class from the button.
• STEP 18 - get and send the error and itʻs message in the .catch() method e.g (error) => console.log("error", error)

Sign In Section

Below are the steps needed to actualize the JavaScript Code for the Sign In section of this project.

• STEP 1 - Get the signIn button by ID and assign it to a variable signIn in your signin.js file.
• STEP 2 - Change the initially empty text of the button to Sign In.
• STEP 3 - Add an event listener to the button with a click event and a function that has the event parameter passed into it.
• STEP 4 - Prevent the default behavior of buttons using the event parameter just passed.
• STEP 5 - Get the inputs and their values from your index.html or whatever you named your signin page.
• STEP 6 - Change the text of the signin button to Loading... and add the pulse class to the button.
• STEP 7 - Check if the email and password are not empty strings and throw appropriate sweet alert, also at this point change the signin button text back to Sign In and remove the pulse class from the button.
• STEP 8a - In the else block of the if Statement above do the following:
• 8b - Assign a new FormData() constructor to a variable called signInData
• 8c - Append the value of the email input and password input to the newly created constructor e.g signInData.append("email", email)
• 8d - Create a new request object and add properties method:"POST" and body:signInData
• 8e - Create a variable called URL and add the signin API endpoint to it, Sign In API Endpoint
• STEP 9 - Use the fetch API and pass in the 2 parameters needed namely URL and signReq
• STEP 10 - Get the response and call the json() method on it.
• STEP 11 - Get the result and create a function that console logs the result so you can know what is coming from the backend
• STEP 12 - Get the object coming from the backend and store it in your local storage using the setItem() method, it should take 2 parameters namely (1)"adminObj" and (2) JSON.stringify(result) in the second parameter weʻre coverting the object from the backend to json so we can store it in our local storage.
• STEP 13 - Get the stored "adminObj" from the local storage and assign it to a variable called getAdminObj
• STEP 14 - Remember that we converted the result to json in STEP 12 and named it "adminObj" in our localstorage?, now we have to convert it back to an object const adminObj = JSON.parse(getAdminObj)
• STEP 15 - Write a if block that checks if the adminObj hasOwnProperty of email if so, send the user to dashboard.html e.g if (adminObj.hasOwnProperty("email")) {location.href = "dashboard.html";}
• STEP 16 - Write a else statement that throws the appropriate warning Login Unsuccessful if the if Block above is falsey.
• STEP 17 - Change the text of the signin button to Sign In and remove the pulse class.
• STEP 18 - Finally, catch the error that might be anywhere in this promise statements e.g .catch((error) => console.log("Error", error));

📝 License

This project is under license from MIT. For more details, see the LICENSE file.

Made with ❤️ by Juadeb Gabriel

 

Back to top